// Isac Lacerda — Main App shell
// Navbar · Language toggle · Consent · WhatsApp · Form modal · Tweaks

const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

/* ─── Navbar ───────────────────────────────────────────── */
function Navbar({ t, lang, setLang, onConsulta }) {
  const [scrolled, setScrolled] = useStateA(false);
  const [open, setOpen] = useStateA(false);
  useEffectA(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const navLinks = [
    { id: "method", label: t.nav.method },
    { id: "consultoria", label: t.nav.consulta },
    { id: "lulu", label: t.nav.lulu },
    { id: "mentoria", label: t.nav.mentoria },
    { id: "gallery", label: t.nav.gallery },
    { id: "about", label: t.nav.about },
  ];

  return (
    <header className={"is-nav" + (scrolled ? " scrolled" : "")}>
      <div className="is-nav-row">
        <a href="#top" className="is-nav-logo">
          Isac <em>Lacerda</em>
        </a>
        <nav className="is-nav-links nav-desktop">
          {navLinks.map(l => (
            <a key={l.id} href={`#${l.id}`}>{l.label}</a>
          ))}
          <div className="is-lang" role="group" aria-label="Language">
            <button className={lang === "pt" ? "on" : ""} onClick={() => setLang("pt")}>PT</button>
            <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
          </div>
          <a href="#" onClick={(e) => { e.preventDefault(); onConsulta(); }} className="cta">{t.nav.cta}</a>
        </nav>

        {/* Mobile burger */}
        <button className="nav-burger" onClick={() => setOpen(v => !v)} aria-label="Menu">
          <span /><span /><span />
        </button>
      </div>

      {open && (
        <div className="nav-mobile">
          {navLinks.map(l => (
            <a key={l.id} href={`#${l.id}`} onClick={() => setOpen(false)}>{l.label}</a>
          ))}
          <div style={{ display: "flex", gap: 14, alignItems: "center", justifyContent: "space-between", marginTop: 14 }}>
            <div className="is-lang">
              <button className={lang === "pt" ? "on" : ""} onClick={() => setLang("pt")}>PT</button>
              <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
            </div>
            <a href="#" onClick={(e) => { e.preventDefault(); setOpen(false); onConsulta(); }} className="cta">{t.nav.cta}</a>
          </div>
        </div>
      )}

      <style>{`
        .nav-burger { display: none; width: 36px; height: 36px; flex-direction: column; gap: 5px; align-items: center; justify-content: center; }
        .nav-burger span { width: 22px; height: 1px; background: var(--is-text); display: block; }
        .nav-mobile { display: flex; flex-direction: column; gap: 14px; padding: 18px 28px 28px; border-top: 1px solid var(--is-hairline);
          font-family: 'JetBrains Mono', monospace; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; }
        .nav-mobile a { color: var(--is-text-2); }
        .nav-mobile a.cta { background: var(--is-accent); color: var(--is-bg); padding: .85em 1.4em; border-radius: 999px; }
        @media (max-width: 1020px) {
          .nav-desktop { display: none; }
          .nav-burger { display: flex; }
        }
      `}</style>
    </header>
  );
}

/* ─── Consent banner ───────────────────────────────────── */
function Consent({ t }) {
  const [show, setShow] = useStateA(false);
  useEffectA(() => {
    const done = localStorage.getItem("isac-consent");
    if (!done) setTimeout(() => setShow(true), 1800);
  }, []);
  const close = (val) => {
    localStorage.setItem("isac-consent", val);
    setShow(false);
  };
  if (!show) return null;
  return (
    <div className="is-consent" role="dialog" aria-live="polite">
      <strong>{t.consent.title}</strong>
      <p style={{ margin: "8px 0 0" }}>{t.consent.body}</p>
      <div className="row">
        <button className="accept" onClick={() => close("all")}>{t.consent.accept}</button>
        <button className="reject" onClick={() => close("essential")}>{t.consent.reject}</button>
      </div>
    </div>
  );
}

/* ─── Floating WhatsApp ────────────────────────────────── */
function FloatingWA({ t }) {
  return (
    <a className="is-wa" href="https://wa.me/14070000000" target="_blank" rel="noopener">
      <span className="dot" />
      {t.wa}
    </a>
  );
}

/* ─── Form Modal (Consultoria / Mentoria) ──────────────── */
function FormModal({ t, kind, onClose }) {
  const [step, setStep] = useStateA(0);
  const [data, setData] = useStateA({ moment: "", sector: "", goal: "", when: "" });
  const [sent, setSent] = useStateA(false);

  useEffectA(() => {
    const onKey = (e) => e.key === "Escape" && onClose();
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [onClose]);

  const title = kind === "mentoria" ? t.mentoria.cta : t.form.title;
  const sub = kind === "mentoria" ? t.mentoria.micro : t.form.sub;

  return (
    <div style={{ position: "fixed", inset: 0, zIndex: 60, background: "rgba(31,26,23,.6)", backdropFilter: "blur(12px)", display: "flex", alignItems: "center", justifyContent: "center", padding: 20, animation: "is-fade .35s ease-out both" }} onClick={onClose}>
      <div onClick={e => e.stopPropagation()} style={{ background: "var(--is-bg)", maxWidth: 720, width: "100%", maxHeight: "92vh", overflowY: "auto", border: "1px solid var(--is-border)", padding: "clamp(28px, 4vw, 56px)", position: "relative" }}>
        {/* close */}
        <button onClick={onClose} style={{ position: "absolute", top: 18, right: 22, fontFamily: "JetBrains Mono, monospace", fontSize: ".68rem", letterSpacing: ".22em", textTransform: "uppercase", color: "var(--is-text-2)" }}>
          ✕ ESC
        </button>

        <div className="is-mono is-mono-sm" style={{ color: "var(--is-accent)", marginBottom: 14 }}>
          — {kind === "mentoria" ? "06 / " + t.mentoria.label : "04 / " + t.consultoria.label}
        </div>
        <h3 className="is-serif" style={{ fontSize: "clamp(1.8rem, 3vw, 2.6rem)", margin: "0 0 8px", letterSpacing: "-.02em" }}>
          {title}
        </h3>
        <p className="is-body" style={{ margin: "0 0 36px", fontSize: ".96rem" }}>{sub}</p>

        {!sent ? (
          <>
            {/* Stepper */}
            <div className="is-form-steps">
              {t.form.steps.map((s, i) => (
                <div key={i} className={"step" + (i <= step ? " on" : "")}>
                  <span className="lbl">{String(i + 1).padStart(2, "0")} {s}</span>
                </div>
              ))}
            </div>

            <div style={{ marginTop: 56 }}>
              {step === 0 && (
                <div>
                  <div className="is-input-grp">
                    <label className="is-input-lbl">{t.form.fields.name}</label>
                    <input className="is-input" placeholder="ex: Marina Silva" />
                  </div>
                  <div className="is-input-grp">
                    <label className="is-input-lbl">{t.form.fields.email}</label>
                    <input className="is-input" type="email" placeholder="marina@studio.com" />
                  </div>
                  <div className="grid-2">
                    <div className="is-input-grp">
                      <label className="is-input-lbl">{t.form.fields.phone}</label>
                      <input className="is-input" placeholder="+55 11 9 0000-0000" />
                    </div>
                    <div className="is-input-grp">
                      <label className="is-input-lbl">{t.form.fields.country}</label>
                      <input className="is-input" placeholder="São Paulo, BR" />
                    </div>
                  </div>
                </div>
              )}

              {step === 1 && (
                <div>
                  <div className="is-input-grp">
                    <label className="is-input-lbl">{t.form.fields.prof}</label>
                    <input className="is-input" placeholder="atriz, executiva, modelo, diretor..." />
                  </div>
                  <div className="is-input-grp">
                    <label className="is-input-lbl">{t.form.fields.moment}</label>
                    <div className="is-chips">
                      {t.form.moments.map(m => (
                        <button key={m} className={"chip" + (data.moment === m ? " on" : "")} onClick={() => setData(d => ({ ...d, moment: m }))}>
                          {m}
                        </button>
                      ))}
                    </div>
                  </div>
                  <div className="is-input-grp">
                    <label className="is-input-lbl">{t.form.fields.sector}</label>
                    <div className="is-chips">
                      {t.form.sectors.map(m => (
                        <button key={m} className={"chip" + (data.sector === m ? " on" : "")} onClick={() => setData(d => ({ ...d, sector: m }))}>
                          {m}
                        </button>
                      ))}
                    </div>
                  </div>
                </div>
              )}

              {step === 2 && (
                <div>
                  <div className="is-input-grp">
                    <label className="is-input-lbl">{t.form.fields.goal}</label>
                    <textarea className="is-textarea" rows={4} placeholder="Conte em poucas linhas o que sua carreira está pedindo neste momento..." />
                  </div>
                  <div className="is-input-grp">
                    <label className="is-input-lbl">{t.form.fields.when}</label>
                    <input className="is-input" placeholder="ex: nos próximos 30-60 dias" />
                  </div>
                </div>
              )}

              {step === 3 && (
                <div>
                  <p className="is-italic" style={{ fontSize: "1.4rem", color: "var(--is-text)", lineHeight: 1.4 }}>
                    Tudo certo. Antes de enviar, confirma que você revisou os dados e concorda com a Política de Privacidade <em>(LGPD + CCPA)</em>.
                  </p>
                  <label style={{ display: "flex", gap: 12, alignItems: "flex-start", marginTop: 24, fontSize: ".95rem", color: "var(--is-text-2)", lineHeight: 1.5 }}>
                    <input type="checkbox" defaultChecked style={{ marginTop: 4 }} />
                    <span>Concordo com o tratamento dos meus dados pessoais para fins de proposta de consultoria. Posso solicitar exclusão a qualquer momento.</span>
                  </label>
                </div>
              )}
            </div>

            <div style={{ display: "flex", justifyContent: "space-between", marginTop: 56, paddingTop: 28, borderTop: "1px solid var(--is-hairline)" }}>
              {step > 0 ? (
                <button className="is-btn is-btn-outline" onClick={() => setStep(s => s - 1)}>
                  ← {t.form.back}
                </button>
              ) : <span />}

              {step < 3 ? (
                <button className="is-btn is-btn-fill" onClick={() => setStep(s => s + 1)}>
                  {t.form.next} →
                </button>
              ) : (
                <button className="is-btn is-btn-fill" onClick={() => setSent(true)}>
                  {t.form.submit} →
                </button>
              )}
            </div>
          </>
        ) : (
          <div style={{ padding: "40px 0" }}>
            <div className="is-mono is-mono-sm" style={{ color: "var(--is-accent)", marginBottom: 14 }}>— Recebido</div>
            <h4 className="is-serif" style={{ fontSize: "2rem", margin: "0 0 12px", letterSpacing: "-.02em" }}>
              {t.form.done}
            </h4>
            <p className="is-body" style={{ marginBottom: 28 }}>
              Você vai receber um email de confirmação em alguns minutos. Verifique também sua caixa de spam.
            </p>
            <button className="is-btn is-btn-outline" onClick={onClose}>
              {lang => "Voltar ao site"}
              Voltar ao site →
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

/* ─── Tweaks panel ─────────────────────────────────────── */
function IsacTweaks({ t, setTweak }) {
  return (
    <TweaksPanel title="Isac · Tweaks">
      <TweakSection label="Direção visual" />
      <TweakRadio
        label="Paleta"
        value={t.palette}
        options={["vogue", "brutal", "brasil"]}
        onChange={v => setTweak("palette", v)}
      />
      <TweakSection label="Idioma" />
      <TweakRadio
        label="Language"
        value={t.lang}
        options={["pt", "en"]}
        onChange={v => setTweak("lang", v)}
      />
      <TweakSection label="Atmosphere" />
      <TweakToggle label="Aurora bordeaux" value={t.aurora} onChange={v => setTweak("aurora", v)} />
      <TweakToggle label="Grão de papel" value={t.grain} onChange={v => setTweak("grain", v)} />
      <TweakSlider label="Densidade vertical" value={t.density} min={70} max={130} step={5} unit="%" onChange={v => setTweak("density", v)} />
    </TweaksPanel>
  );
}

/* ─── App ──────────────────────────────────────────────── */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "vogue",
  "lang": "pt",
  "aurora": true,
  "grain": true,
  "density": 100
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = useStateA(t.lang || "pt");
  const [modal, setModal] = useStateA(null); // null | 'consulta' | 'mentoria'

  // sync lang from tweaks
  useEffectA(() => {
    if (t.lang && t.lang !== lang) setLang(t.lang);
  }, [t.lang]);

  // when toggle in nav changes, persist via tweak
  const handleLangChange = (v) => {
    setLang(v);
    setTweak("lang", v);
  };

  // apply palette to <html>
  useEffectA(() => {
    document.documentElement.setAttribute("data-palette", t.palette || "vogue");
  }, [t.palette]);

  // grain + aurora + density
  useEffectA(() => {
    document.documentElement.style.setProperty("--is-noise-opacity", t.grain ? ".035" : "0");
  }, [t.grain]);

  useEffectA(() => {
    const r = document.documentElement;
    const d = (t.density || 100) / 100;
    r.style.setProperty("--is-section-scale", String(d));
  }, [t.density]);

  // copy
  const copy = window.ISAC_COPY[lang];

  // smooth scroll for in-page anchors
  useEffectA(() => {
    const handler = (e) => {
      const a = e.target.closest('a[href^="#"]');
      if (!a) return;
      const id = a.getAttribute("href").slice(1);
      if (!id) return;
      const el = document.getElementById(id);
      if (el) {
        e.preventDefault();
        const y = el.getBoundingClientRect().top + window.scrollY - 70;
        window.scrollTo({ top: y, behavior: "smooth" });
      }
    };
    document.addEventListener("click", handler);
    return () => document.removeEventListener("click", handler);
  }, []);

  return (
    <>
      <Navbar t={copy} lang={lang} setLang={handleLangChange} onConsulta={() => setModal("consulta")} />

      <main>
        <Hero t={copy} onConsulta={() => setModal("consulta")} />
        <TickerStrip t={copy} />
        <Manifesto t={copy} />
        <Method t={copy} />
        <Career t={copy} />
        <Consultoria t={copy} onConsulta={() => setModal("consulta")} />
        <Lulu t={copy} />
        <Mentoria t={copy} onMentoria={() => setModal("mentoria")} />
        <Gallery t={copy} />
        <Testimonials t={copy} />
        <About t={copy} />
        <FAQ t={copy} />
        <FinalCta t={copy}
          onConsulta={() => setModal("consulta")}
          onMentoria={() => setModal("mentoria")} />
      </main>

      <Footer t={copy} />

      <FloatingWA t={copy} />
      <Consent t={copy} />

      {modal && <FormModal t={copy} kind={modal} onClose={() => setModal(null)} />}

      <IsacTweaks t={t} setTweak={setTweak} />

      {/* apply density */}
      <style>{`
        .is-section { padding-block: calc(clamp(80px, 10vw, 160px) * var(--is-section-scale, 1)); }
        .is-section-tight { padding-block: calc(clamp(56px, 7vw, 110px) * var(--is-section-scale, 1)); }
      `}</style>
    </>
  );
}

window.App = App;