// Isac Lacerda — Sections 1-7
// Hero · Manifesto · Method · Career · Consulting · Lulu · Mentorship

/* ─── 01 · HERO EDITORIAL ──────────────────────────────── */
function Hero({ t, onConsulta }) {
  return (
    <section className="is-hero" data-screen-label="01 Hero" id="top">
      <Aurora />
      <div className="is-wrap" style={{ width: "100%" }}>
        <div className="grid">
          {/* LEFT — text */}
          <div>
            <BlurReveal delay={0}>
              <div className="is-mono" style={{ marginBottom: 28 }}>
                — {t.hero.tag}
              </div>
            </BlurReveal>

            <BlurReveal delay={140}>
              <h1 className="is-display h-display-1 txt-balance" style={{ margin: "0 0 36px" }}>
                {t.hero.h1a}
                <br />
                <em>{t.hero.h1b}</em>
              </h1>
            </BlurReveal>

            <BlurReveal delay={300}>
              <p className="is-body-lg txt-pretty" style={{ maxWidth: "44ch", margin: "0 0 44px" }}>
                {t.hero.sub}
              </p>
            </BlurReveal>

            <BlurReveal delay={440}>
              <div style={{ display: "flex", gap: 14, flexWrap: "wrap", marginBottom: 56 }}>
                <button className="is-btn is-btn-fill" onClick={onConsulta}>
                  {t.hero.ctaPrimary} <span className="arrow">→</span>
                </button>
                <a href="#lulu" className="is-btn is-btn-outline">
                  {t.hero.ctaSecondary}
                </a>
              </div>
            </BlurReveal>

            <BlurReveal delay={620}>
              <div className="is-mono is-mono-sm txt-pretty" style={{ maxWidth: "60ch", lineHeight: 2.2 }}>
                {t.hero.proof}
              </div>
            </BlurReveal>
          </div>

          {/* RIGHT — large editorial portrait */}
          <CurtainReveal delay={250}>
            <div style={{ position: "relative" }}>
              <PaperFrame label="ISAC · 01" ratio="3/4" tone="bronze" caption={t.hero.photoLabel} src="assets/hero.webp" alt="Isac Lacerda · backstage editorial" />
              {/* signature mark */}
              <div style={{ position: "absolute", left: -10, top: -22, fontFamily: "Fraunces, serif", fontStyle: "italic", fontSize: "5rem", color: "var(--is-accent)", lineHeight: 1, opacity: .96, fontVariationSettings: "'opsz' 144, 'SOFT' 100, 'WONK' 1" }}>
                I.
              </div>
              {/* file number */}
              <div className="is-mono is-mono-sm" style={{ position: "absolute", right: -2, bottom: -28 }}>
                FILE Nº 001 — EDITORIAL 2026
              </div>
            </div>
          </CurtainReveal>
        </div>
      </div>
    </section>
  );
}

/* ─── TICKER STRIP ─────────────────────────────────────── */
function TickerStrip({ t }) {
  return <FashionTicker items={t.ticker} />;
}

/* ─── 02 · MANIFESTO ───────────────────────────────────── */
function Manifesto({ t }) {
  return (
    <section className="is-section" data-screen-label="02 Manifesto" id="manifesto">
      <div className="is-wrap">
        <EditorialDivider num={t.manifesto.num} label={t.manifesto.label} />

        <div className="grid-1-2" style={{ alignItems: "start" }}>
          <div>
            <BlurReveal delay={0}>
              <div className="is-mono" style={{ color: "var(--is-accent)", marginBottom: 32 }}>
                — {t.manifesto.label}
              </div>
            </BlurReveal>

            <CurtainReveal delay={120}>
              <PaperFrame label="ISAC · STUDY 011" ratio="3/4" tone="warm" caption="Análise · Orlando, FL" src="assets/manifesto.webp" alt="Isac em estúdio, escrevendo análise visagística sobre prancheta" />
            </CurtainReveal>
          </div>

          <div>
            <BlurReveal delay={100}>
              <ItalicSplit a={t.manifesto.h1a} b={t.manifesto.h1b} className="h-display-2" />
            </BlurReveal>

            <BlurReveal delay={300}>
              <p className="is-body-lg is-dropcap txt-pretty" style={{ marginTop: 56, color: "var(--is-text)" }}>
                {t.manifesto.body}
              </p>
            </BlurReveal>

            <BlurReveal delay={500}>
              <div style={{ marginTop: 48 }}>
                <PullQuote cite={t.manifesto.cite}>{t.manifesto.quote}</PullQuote>
              </div>
            </BlurReveal>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── 03 · METHOD ──────────────────────────────────────── */
function Method({ t }) {
  return (
    <section className="is-section" data-screen-label="03 Method" id="method" style={{ background: "var(--is-bg-2)" }}>
      <div className="is-wrap">
        <EditorialDivider num={t.method.num} label={t.method.label} />

        <BlurReveal>
          <ItalicSplit a={t.method.h1a} b={t.method.h1b} className="h-display-2" />
        </BlurReveal>

        <div className="grid-2" style={{ marginTop: 80, alignItems: "start" }}>
          {/* LEFT — Prose */}
          <div>
            <BlurReveal delay={120}>
              <p className="is-body-lg txt-pretty" style={{ marginBottom: "1.6rem" }}>
                {t.method.p1}
              </p>
            </BlurReveal>
            <BlurReveal delay={240}>
              <p className="is-body-lg txt-pretty">
                {t.method.p2}
              </p>
            </BlurReveal>

            <BlurReveal delay={400}>
              <div style={{ marginTop: 48 }}>
                <PullQuote cite={t.method.cite}>{t.method.quote}</PullQuote>
              </div>
            </BlurReveal>
          </div>

          {/* RIGHT — Pillars + photo */}
          <div>
            <CurtainReveal delay={150}>
              <PaperFrame label="BACKSTAGE · 02" ratio="4/5" tone="cool" caption={t.method.photoLabel} src="assets/method-backstage.webp" alt="Isac no backstage, dirigindo o cabelo de modelo masculino diante do espelho" />
            </CurtainReveal>

            <div className="io-stagger" style={{ marginTop: 36, display: "grid", gap: 0 }} ref={el => {
              if (!el) return;
              const io = new IntersectionObserver(([e]) => e.isIntersecting && el.classList.add("is-in"), { threshold: 0.3 });
              io.observe(el);
            }}>
              {t.method.pillars.map((p, i) => (
                <div key={i} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 22, padding: "22px 0", borderTop: i === 0 ? "1px solid var(--is-hairline)" : 0, borderBottom: "1px solid var(--is-hairline)" }}>
                  <div className="is-mono is-mono-sm" style={{ color: "var(--is-accent)", paddingTop: 4, minWidth: 28 }}>
                    {String(i + 1).padStart(2, "0")}
                  </div>
                  <div>
                    <div className="is-serif" style={{ fontSize: "1.35rem", marginBottom: 6, color: "var(--is-text)" }}>{p.k}</div>
                    <div className="is-body" style={{ fontSize: ".95rem", margin: 0 }}>{p.v}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── 04 · CAREER & METRICS ────────────────────────────── */
function Career({ t }) {
  return (
    <section className="is-section" data-screen-label="04 Career" id="career">
      <div className="is-wrap">
        <EditorialDivider num={t.carreira.num} label={t.carreira.label} />

        <div className="grid-2-1" style={{ alignItems: "end", marginBottom: 70 }}>
          <BlurReveal>
            <ItalicSplit a={t.carreira.h1a} b={t.carreira.h1b} className="h-display-2" />
          </BlurReveal>
          <BlurReveal delay={150}>
            <p className="is-body-lg txt-pretty" style={{ margin: 0 }}>{t.carreira.lede}</p>
          </BlurReveal>
        </div>

        <CurtainReveal delay={100}>
          <div className="is-metrics">
            {t.carreira.metrics.map((m, i) => (
              <div className="is-metric" key={i}>
                <div>
                  <CountUp to={m.n} sup={m.sup} />
                </div>
                <div className="lbl">{m.l}</div>
              </div>
            ))}
          </div>
        </CurtainReveal>

        {/* Three editorial frames */}
        <div className="grid-2" style={{ gridTemplateColumns: "1fr 1fr 1fr", marginTop: 80, gap: 24 }}>
          <CurtainReveal delay={0}>
            <PaperFrame label="PARIS FW · SS25" ratio="3/4" tone="deep" caption="Direção de cabelo · Backstage" src="assets/career-direction.webp" alt="Isac dirigindo backstage com prancheta" />
          </CurtainReveal>
          <CurtainReveal delay={120}>
            <PaperFrame label="MILAN FW · AW24" ratio="3/4" tone="warm" caption="Direção de equipe" src="assets/career-team.webp" alt="Isac coordenando equipe nos camarins" />
          </CurtainReveal>
          <CurtainReveal delay={240}>
            <PaperFrame label="NY FW · SS24" ratio="3/4" tone="bronze" caption="Casting visual" src="assets/career-casting.webp" alt="Isac em wall de casting, marcando rostos selecionados" />
          </CurtainReveal>
        </div>
      </div>
    </section>
  );
}

/* ─── 05 · CONSULTORIA ─────────────────────────────────── */
function Consultoria({ t, onConsulta }) {
  return (
    <section className="is-section" data-screen-label="05 Consulting" id="consultoria" style={{ background: "var(--is-bg-2)" }}>
      <div className="is-wrap">
        <EditorialDivider num={t.consultoria.num} label={t.consultoria.label} />

        <BlurReveal>
          <ItalicSplit a={t.consultoria.h1a} b={t.consultoria.h1b} className="h-display-2" />
        </BlurReveal>

        <div className="grid-2" style={{ marginTop: 70, alignItems: "start" }}>
          <div>
            <BlurReveal delay={100}>
              <p className="is-body-lg txt-pretty" style={{ marginBottom: "1.4rem" }}>{t.consultoria.p1}</p>
            </BlurReveal>
            <BlurReveal delay={200}>
              <p className="is-body-lg txt-pretty" style={{ marginBottom: "1.4rem", fontStyle: "italic", color: "var(--is-text)", fontFamily: "Cormorant Garamond, serif", fontSize: "1.4rem", lineHeight: 1.45 }}>
                {t.consultoria.p2}
              </p>
            </BlurReveal>
            <BlurReveal delay={300}>
              <p className="is-body-lg txt-pretty">{t.consultoria.p3}</p>
            </BlurReveal>

            <BlurReveal delay={500}>
              <div style={{ marginTop: 44, display: "flex", gap: 14, flexWrap: "wrap", alignItems: "center" }}>
                <button className="is-btn is-btn-fill" onClick={onConsulta}>
                  {t.consultoria.cta} <span className="arrow">→</span>
                </button>
                <a className="is-btn is-btn-ghost" href="https://wa.me/14070000000" target="_blank" rel="noopener">
                  {t.consultoria.ctaWa} →
                </a>
              </div>
              <div className="is-mono is-mono-sm" style={{ marginTop: 22, color: "var(--is-text-3)" }}>
                {t.consultoria.micro}
              </div>
            </BlurReveal>
          </div>

          {/* Process side */}
          <div>
            <CurtainReveal delay={150}>
              <div className="is-card-frame" style={{ background: "var(--is-card)" }}>
                <div className="is-mono" style={{ marginBottom: 28, color: "var(--is-accent)" }}>
                  — Processo
                </div>
                {t.consultoria.formula.map((s, i) => (
                  <div key={i} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 24, padding: "20px 0", borderTop: i === 0 ? 0 : "1px solid var(--is-hairline)" }}>
                    <div style={{ fontFamily: "Fraunces, serif", fontStyle: "italic", fontSize: "2.4rem", lineHeight: 1, color: "var(--is-accent)" }}>
                      {String(i + 1).padStart(2, "0")}
                    </div>
                    <div>
                      <div className="is-serif" style={{ fontSize: "1.3rem", marginBottom: 4 }}>{s.k}</div>
                      <div className="is-body" style={{ margin: 0, fontSize: ".95rem" }}>{s.v}</div>
                    </div>
                  </div>
                ))}
                {/* Discrete pricing note */}
                <div className="is-mono is-mono-sm" style={{ marginTop: 28, paddingTop: 18, borderTop: "1px solid var(--is-hairline)", color: "var(--is-text-3)", lineHeight: 1.8 }}>
                  Pricing personalizado por contexto. Sem catálogo. Sem listagem pública.
                </div>
              </div>
            </CurtainReveal>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── 06 · CLUB DA LULU ────────────────────────────────── */
function Lulu({ t }) {
  return (
    <section className="is-section" data-screen-label="06 Club da Lulu" id="lulu">
      <div className="is-wrap">
        <EditorialDivider num={t.lulu.num} label={t.lulu.label} />

        <div className="grid-2-1" style={{ alignItems: "end", marginBottom: 64 }}>
          <BlurReveal>
            <ItalicSplit a={t.lulu.h1a} b={t.lulu.h1b} className="h-display-2" />
          </BlurReveal>
          <BlurReveal delay={150}>
            <p className="is-body-lg txt-pretty" style={{ margin: 0 }}>{t.lulu.lede}</p>
          </BlurReveal>
        </div>

        <CurtainReveal delay={100}>
          <div className="is-pricing">
            {t.lulu.tiers.map((tier, i) => (
              <div key={i} className={"tier" + (tier.featured ? " featured" : "")}>
                {tier.pill && <div className="pill">{tier.pill}</div>}
                <div className="name">{tier.name}</div>
                <div className="price-row">
                  {tier.price}<sub>{tier.per}</sub>
                </div>
                <div className="price-cur">{tier.curr}</div>
                <ul>
                  {tier.features.map((f, j) => <li key={j}>{f}</li>)}
                </ul>
                <div className="btn-wrap">
                  <button className={"is-btn " + (tier.featured ? "is-btn-fill" : "is-btn-outline")} style={{ width: "100%", justifyContent: "center" }}>
                    {tier.cta} <span className="arrow">→</span>
                  </button>
                  {tier.micro && (
                    <div className="is-mono is-mono-sm" style={{ marginTop: 14, color: "var(--is-text-3)", textAlign: "center" }}>
                      {tier.micro}
                    </div>
                  )}
                </div>
              </div>
            ))}
          </div>
        </CurtainReveal>

        <BlurReveal delay={300}>
          <div className="is-mono is-mono-sm" style={{ marginTop: 32, maxWidth: 920, lineHeight: 2, color: "var(--is-text-3)" }}>
            {t.lulu.legal}
          </div>
        </BlurReveal>
      </div>
    </section>
  );
}

/* ─── 07 · MENTORIA DE MODELOS ─────────────────────────── */
function Mentoria({ t, onMentoria }) {
  return (
    <section className="is-section" data-screen-label="07 Mentorship" id="mentoria" style={{ background: "var(--is-text)", color: "var(--is-bg)" }}>
      <div className="is-wrap">
        {/* dark divider override */}
        <div className="is-divider" style={{ color: "var(--is-bg)" }}>
          <span className="num" style={{ color: "var(--is-accent-warm)" }}>{t.mentoria.num}</span>
          <span className="lbl" style={{ color: "rgba(244,239,230,.55)" }}>/ {t.mentoria.label}</span>
          <span className="line" style={{ background: "rgba(244,239,230,.18)" }} />
        </div>

        <div className="grid-2" style={{ alignItems: "start", marginTop: 40 }}>
          <div>
            <BlurReveal>
              <h2 className="is-display h-display-2 txt-balance" style={{ margin: 0, color: "var(--is-bg)" }}>
                {t.mentoria.h1a}
                <br />
                <em style={{ color: "var(--is-accent-warm)" }}>{t.mentoria.h1b}</em>
              </h2>
            </BlurReveal>

            <BlurReveal delay={150}>
              <p style={{ marginTop: 40, fontSize: "1.125rem", lineHeight: 1.7, color: "rgba(244,239,230,.78)", maxWidth: "52ch" }}>
                {t.mentoria.p1}
              </p>
            </BlurReveal>
            <BlurReveal delay={250}>
              <p style={{ marginTop: 18, fontSize: "1.125rem", lineHeight: 1.7, color: "rgba(244,239,230,.78)", maxWidth: "52ch" }}>
                {t.mentoria.p2}
              </p>
            </BlurReveal>

            <BlurReveal delay={450}>
              <div style={{ marginTop: 48, display: "flex", gap: 14, flexWrap: "wrap" }}>
                <button className="is-btn is-btn-fill" onClick={onMentoria} style={{ background: "var(--is-accent-warm)", color: "var(--is-text)" }}>
                  {t.mentoria.cta} <span className="arrow">→</span>
                </button>
              </div>
              <div className="is-mono is-mono-sm" style={{ marginTop: 22, color: "rgba(244,239,230,.55)", lineHeight: 1.8 }}>
                {t.mentoria.micro}
              </div>
            </BlurReveal>
          </div>

          {/* Criteria card */}
          <div>
            <CurtainReveal delay={200}>
              <div style={{ border: "1px solid rgba(244,239,230,.18)", padding: "clamp(28px,3vw,42px)" }}>
                <div className="is-mono is-mono-sm" style={{ color: "var(--is-accent-warm)", marginBottom: 22 }}>
                  — {t.mentoria.criteriaTitle}
                </div>
                <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
                  {t.mentoria.criteria.map((c, i) => (
                    <li key={i} style={{ display: "grid", gridTemplateColumns: "32px 1fr", gap: 14, padding: "14px 0", borderTop: i === 0 ? 0 : "1px solid rgba(244,239,230,.1)", fontSize: ".98rem", color: "rgba(244,239,230,.86)" }}>
                      <span style={{ fontFamily: "JetBrains Mono, monospace", fontSize: ".7rem", letterSpacing: ".2em", color: "var(--is-accent-warm)", paddingTop: 4 }}>
                        {String(i + 1).padStart(2, "0")}
                      </span>
                      <span>{c}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </CurtainReveal>

            <CurtainReveal delay={350}>
              <div style={{ marginTop: 24 }}>
                <PaperFrame label="MENTEE · PARIS FW SS25" ratio="3/4" tone="deep" caption="Estreia internacional 2025" src="assets/mentee.webp" alt="Isac em sessão de mentoria com modelo, mostrando referências visuais" />
              </div>
            </CurtainReveal>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  Hero, TickerStrip, Manifesto, Method, Career, Consultoria, Lulu, Mentoria,
});