{t.contact.eyebrow}

{t.contact.head}

{t.contact.labels.name} * {errors.name && {errors.name}}

{t.contact.labels.email} * {errors.email && {errors.email}}

{t.contact.labels.company}

{t.contact.labels.phone}

{t.contact.labels.message} *

{errors.message && <span className="text-xs text-destructive">{errors.message}</span>}
              </div>

{status.kind === "ok" ? (
                <div className="flex items-center gap-3 p-4 rounded-xl text-sm font-medium" style={{ background: "hsl(142 71% 45% / 0.1)", color: "hsl(142 71% 35%)" }}>
                  <CheckCircleIcon size={18} /> {status.msg}
                </div>
              ) : (
                <>
                  <button type="submit" className="w-full bg-primary text-primary-foreground py-4 rounded-full font-semibold flex items-center justify-center gap-2 hover:opacity-90 transition-opacity">
                    {t.contact.send} <SendIcon size={16} />
                  </button>
                  {status.msg && (
                    <p className={`text-xs text-center ${status.kind === "err" ? "text-destructive" : "text-muted-foreground"}`}>{status.msg}</p>
                  )}
                </>
              )}
            </form>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Footer ────────────────────────────────────────────────────────────────────
function Footer({ t, onStart }) {
  return (
    <footer>
      <div className="py-24 md:py-32 text-center">
        <div className="max-w-3xl mx-auto px-5 md:px-8 reveal">
          <h2 className="font-serif text-3xl md:text-5xl font-bold text-foreground mb-8 leading-tight">{t.closer.head}</h2>
          <button onClick={onStart}
            className="inline-flex items-center gap-3 bg-primary text-primary-foreground px-10 py-5 rounded-full text-base font-semibold shadow-lg hover:opacity-90 hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200">
            {t.closer.cta} <span>→</span>
          </button>
        </div>
      </div>

<div className="border-t border-border/60 py-6">
        <div className="max-w-6xl mx-auto px-5 md:px-8 flex items-center justify-between gap-4 flex-wrap">
          <a href="#top" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: "smooth" }); }}
            className="flex items-center gap-2 font-serif text-base font-bold text-foreground">
            <span className="w-6 h-6 rounded-md bg-white border border-border shadow-sm overflow-hidden flex items-center justify-center">
              <img src="assets/doorly-mark.png" className="w-full h-full object-contain p-0.5" alt="Doorly" />
            </span>
            doorly<span style={{ color: "hsl(var(--secondary))" }}>.</span>
          </a>
          <p className="text-sm text-muted-foreground">{t.footer}</p>
        </div>
      </div>
    </footer>
  );
}

// ── App ───────────────────────────────────────────────────────────────────────
function App() {
  const [lang, setLang] = React.useState("EN");
  const [dark, setDark] = React.useState(false);
  const t = COPY[lang] || COPY.EN;

React.useEffect(() => {
    document.documentElement.classList.toggle("dark", dark);
  }, [dark]);

React.useEffect(() => {
    document.documentElement.lang = lang === "ES" ? "es" : "en";
    document.title = lang === "ES"
      ? "Doorly — Reuniones B2B Cualificadas en EE. UU. y Europa"
      : "Doorly — Qualified B2B Meetings in US & Europe";
    const desc = document.querySelector('meta[name="description"]');
    if (desc) desc.content = lang === "ES"
      ? "Doorly concerta reuniones B2B cualificadas entre empresas de EE. UU. y Europa. Gestionamos investigación, contacto y agenda — tú solo te presentas."
      : "Doorly books qualified B2B meetings between companies in the US and Europe. We handle research, outreach and scheduling — you just show up.";
  }, [lang]);

useReveal([lang, dark]);

const onStart = React.useCallback(() => scrollToId("contact"), []);

return (
    <div className="min-h-screen bg-background text-foreground font-sans antialiased">
      <Nav lang={lang} setLang={setLang} onStart={onStart} t={t} dark={dark} setDark={setDark} />
      <Hero t={t} onStart={onStart} />
      <HowItWorks t={t} />
      <Founder t={t} />
      <Pricing t={t} onStart={onStart} />
      <Guarantee t={t} />
      <Contact t={t} />
      <Footer t={t} onStart={onStart} />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

{t.hero.head}

{t.how.head}

{step.title}

{t.founder.head}

{t.pricing.head}

{t.guarantee.head}

{t.contact.head}