// home.jsx — three Home variations

// ── Hero V0 — Signature (default, magazine cover feel) ─────
function HeroSignature() {
  const [idx, setIdx] = React.useState(0);
  const [phase, setPhase] = React.useState('in');

  React.useEffect(() => {
    const t = setInterval(() => {
      setPhase('out');
      setTimeout(() => {
        setIdx(i => (i + 1) % MANIFESTOS.length);
        setPhase('in');
      }, 440);
    }, 5800);
    return () => clearInterval(t);
  }, []);
  const m = MANIFESTOS[idx];

  return (
    <section className="hero-sig">
      <div className="hero-sig-text">
        <div className="hero-sig-corner">
          <span>Adriana Schneider</span>
          <span>·</span>
          <span>Rio · São Paulo · Lisboa · 2026 →</span>
        </div>
        <div className="hero-sig-greeting">Oi, eu sou a Adriana.</div>
        <h1>
          <span className={'roll ' + (phase === 'out' ? 'out' : '')}>
            {m.plain}<em>{m.em}</em>{m.plain2 || ''}{m.em2 && <em>{m.em2}</em>}
          </span>
        </h1>
        <div className="hero-sig-letter">
          Há vinte e cinco anos faço uma pergunta para empresas e para pessoas:{' '}
          <em>em que tipo de mundo você está trabalhando para viver?</em>
          {' '}Falo nos palcos sobre isso. Fundei a Humanāre para construir isso com empresas.
          Escrevi um livro para que a conversa não termine quando as luzes se apagam.
        </div>
        <div className="hero-sig-actions">
          <a href="#" data-magnetic="0.3" className="btn primary">Convidar para palestra <span className="arrow">→</span></a>
          <a href="#" className="btn ghost">Conhecer a Humanāre ↓</a>
        </div>
      </div>

      <div className="hero-sig-photo-wrap">
        <div className="hero-sig-photo-arch">
          <div className="hero-sig-circle" />
          <div className="hero-sig-photo" data-parallax="0.08" style={{ backgroundImage: `url(${PHOTOS.hero})` }}>
            <div className="hero-sig-bio">
              Carioca, mulher 50+, mãe de quatro filhos
              e apaixonada por <em>pessoas</em> e suas histórias.
            </div>
          </div>
        </div>
        <div className="hero-sig-ticker">
          <span>Fundadora &amp; CEO Humanāre</span>
          <span>Curadora Rio Innovation Week</span>
          <span>Top 5 CBTD · 5× e-Learning Brasil</span>
          <span>Embaixadora Capitalismo Consciente</span>
        </div>
      </div>

    </section>
  );
}

// ── Hero V1 — Split editorial ───────────────────────────────
function HeroSplit() {
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setIdx(i => (i + 1) % MANIFESTOS.length), 5500);
    return () => clearInterval(t);
  }, []);
  const m = MANIFESTOS[idx];

  return (
    <section className="hero">
      <div className="container">
        <div className="hero-split">
          <div className="hero-content">
            <div className="hero-eyebrow eyebrow">Adriana Schneider · Fundadora Humanāre</div>
            <h1 className="hero-title">
              <span className="rotate-line" style={{ display: 'block' }}>
                <span key={idx} className="manifesto-roll">
                  {m.plain}<em>{m.em}</em>{m.plain2 || ''}{m.em2 && <em>{m.em2}</em>}
                </span>
              </span>
            </h1>
            <p className="hero-sub">
              Palestrante, consultora e curadora. Há mais de 20 anos trabalhando
              cultura, liderança e o que de fato move organizações: as pessoas.
            </p>
            <div className="hero-actions">
              <a href="#" className="btn primary">Convidar para palestra <span className="arrow">→</span></a>
              <a href="#" className="btn ghost">Conhecer Adriana</a>
            </div>
          </div>
          <div className="hero-image">
            <div className="photo" style={{ backgroundImage: `url(${PHOTOS.hero})` }} />
            <div className="badge">Disponível para 2026</div>
          </div>
        </div>
      </div>
      <div className="hero-meta">
        <span>Rio de Janeiro · Brasil</span>
        <span className="yr">vinte e seis</span>
      </div>
    </section>
  );
}

// ── Hero V2 — Full bleed manifesto ──────────────────────────
function HeroManifesto() {
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setIdx(i => (i + 1) % MANIFESTOS.length), 5500);
    return () => clearInterval(t);
  }, []);
  const m = MANIFESTOS[idx];

  return (
    <section className="hero-manifesto">
      <div className="hero-manifesto-bg" style={{ backgroundImage: `url(${PHOTOS.manifestoBg})` }} />
      <div className="hero-manifesto-content">
        <div className="eyebrow">Adriana Schneider · Humanāre</div>
        <h1>
          <span key={idx} className="manifesto-roll" style={{ display: 'block' }}>
            {m.plain}<em>{m.em}</em>{m.plain2 || ''}{m.em2 && <em>{m.em2}</em>}
          </span>
        </h1>
        <p>
          Palestras, mentorias e curadorias sobre liderança consciente, cultura
          organizacional e o futuro humano do trabalho.
        </p>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center' }}>
          <a href="#" className="btn lime">Convidar para palestra <span className="arrow">→</span></a>
          <a href="#" className="btn ghost" style={{ borderColor: 'var(--bg)', color: 'var(--bg)' }}>Assistir TEDx</a>
        </div>
      </div>
      <div style={{
        position: 'absolute', bottom: 28, left: 0, right: 0, zIndex: 3,
        display: 'flex', justifyContent: 'center', gap: 10,
      }}>
        {MANIFESTOS.map((_, i) => (
          <button key={i} onClick={() => setIdx(i)} style={{
            width: i === idx ? 28 : 8, height: 2,
            background: i === idx ? 'var(--terracotta-soft)' : 'rgba(255,255,255,0.4)',
            border: 'none', transition: 'all .35s var(--ease)',
          }} />
        ))}
      </div>
    </section>
  );
}

// ── Hero V3 — Asymmetric bold ───────────────────────────────
function HeroAsym() {
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setIdx(i => (i + 1) % MANIFESTOS.length), 5500);
    return () => clearInterval(t);
  }, []);

  // for V3 we hardcode the famous "se não nós, quem? se não agora, quando?"
  // as the marquee-ish baseline and rotate the lead paragraph

  const leads = [
    'Não estou aqui para te dar passo a passo. Estou aqui pra te lembrar que o passo é seu, e o tempo é agora.',
    'Falo sobre liderança que se atreve. Cultura que se importa. E a urgência radical de construir o agora.',
    'Há vinte anos eu ouço a mesma pergunta: "como começar?" A resposta segue a mesma: comece.',
  ];

  return (
    <section className="hero-asym">
      <div className="container">
        <div className="hero-asym-grid">
          <div className="eye eyebrow">Adriana Schneider · Humanāre · 2026 →</div>
          <div className="number">N° 001 / Manifesto</div>
          <h1>
            <span className="line1">Se não</span>
            <span className="line2">nós,</span>
            <span className="line3">quem?</span>
          </h1>
          <div className="lead">
            <p key={idx} className="manifesto-roll">
              {leads[idx]}
            </p>
            <a href="#" className="btn primary">Trabalhar comigo <span className="arrow">→</span></a>
          </div>
          <div className="photo-block" style={{ backgroundImage: `url(${PHOTOS.hero})` }} />
        </div>
      </div>
      {/* sliding caption strip at the bottom */}
      <div style={{
        marginTop: 60, padding: '14px 0',
        borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)',
        display: 'flex', justifyContent: 'space-between',
        fontFamily: 'var(--font-mono)', fontSize: '0.65rem', letterSpacing: '0.2em',
        textTransform: 'uppercase', color: 'var(--ink-mute)',
        padding: '14px var(--gutter)',
      }}>
        <span>↗ Palestrante & Curadora</span>
        <span>20+ anos · 200+ palcos</span>
        <span>Rio · Brasil</span>
        <span>Disponível para 2026</span>
      </div>
    </section>
  );
}

// ── About slice (used in home) ──────────────────────────────
function AboutSlice() {
  return (
    <section className="section">
      <div className="container">
        <div className="about-slice">
          <div className="visual placeholder-photo" style={{
            backgroundImage: `url(${PHOTOS.about})`,
            backgroundSize: 'cover', backgroundPosition: 'center',
          }} />
          <div>
            <div className="eyebrow">Quem fala com você</div>
            <h2>
              Há mais de <em>vinte anos</em> trabalhando o que de fato move uma organização: <em>as pessoas</em>.
            </h2>
            <p>
              Adriana Schneider é fundadora e CEO da Humanāre, curadora do Rio
              Innovation Week e uma das vozes brasileiras mais escutadas sobre
              liderança consciente, cultura organizacional e desenvolvimento
              humano. Tem voz firme, escuta atenta e a coragem rara de dizer
              o óbvio.
            </p>
            <p>
              Já levou seu trabalho a mais de 200 palcos e dezenas de empresas
              em três continentes. Mantém uma newsletter semanal com +28 mil
              inscritos e prefere a conversa direta ao discurso decorado.
            </p>
            <div className="stats">
              <div className="stat"><div className="num">20+</div><div className="lbl">anos atuando</div></div>
              <div className="stat"><div className="num">200+</div><div className="lbl">palestras</div></div>
              <div className="stat"><div className="num">24k</div><div className="lbl">seguidores</div></div>
            </div>
            <a href="#" className="link-arrow">Conhecer trajetória completa →</a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Conheça Adriana — intimate slice (replaces flat AboutSlice on home) ─
function ConhecaAdriana({ setRoute }) {
  return (
    <section className="section">
      <div className="container">
        <div className="conheca">
          <div className="conheca-visual">
            <div className="conheca-photo-frame">
              <div className="conheca-photo" style={{ backgroundImage: `url(${PHOTOS.about})` }} />
            </div>
            <div className="conheca-stamp">
              <div className="conheca-stamp-head">
                <strong>25 anos</strong>
                <span>fazendo a pergunta certa</span>
              </div>
              <div className="conheca-stamp-claim">
                Se não nós, <em>quem?</em><br/>
                Se não agora, <em>quando?</em>
              </div>
              <p>
                Com uma trajetória sólida em <em>Liderança</em>, <em>Educação Corporativa</em> e <em>Desenvolvimento Humano</em>,
                fui reconhecida cinco vezes pelo Prêmio e-Learning Brasil e sou Palestrante Top 5 do CBTD
                (Congresso Brasileiro de Treinamento e Desenvolvimento).
              </p>
              <p>
                A Humanāre, consultoria que fundei e lidero como CEO, foi a única a ser premiada como
                <em> Destaque em Gestão de Pessoas</em> pela ABTD, reconhecendo o modelo de
                cultura regenerativa.
              </p>
            </div>
          </div>
          <div className="conheca-letter">
            <div className="eyebrow" style={{ marginBottom: 32 }}>Uma carta · Conheça Adriana</div>
            {CARTA.map((line, i) =>
              typeof line === 'string'
                ? <p key={i}>{line}</p>
                : <p key={i} className="pergunta" data-reveal="words">{line.italic}</p>
            )}
            <div className="sig">
              Com afeto, <em>Adriana</em>
            </div>
            <div style={{ marginTop: 36, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a href="#" onClick={(e) => { e.preventDefault(); setRoute('sobre'); window.scrollTo({top:0,behavior:'instant'}); }} className="btn primary">
                Conhecer trajetória <span className="arrow">→</span>
              </a>
              <a href="#" className="btn ghost">Baixar currículo (PDF) ↓</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Cinco coisas — listicle ────────────────────────────────
function CincoCoisas() {
  return (
    <section className="section" style={{ paddingTop: 0 }}>
      <SecHead
        eyebrow="Cinco coisas"
        titleA="Antes de te ouvir falar, "
        titleEm="cinco coisas"
        titleB=" sobre mim."
        sub="Coisas pequenas que talvez expliquem por que o trabalho sai como sai. Não tem ranking. Tem ordem cronológica do meu dia."
      />
      <div className="cinco">
        {CINCO_COISAS.map((c) => (
          <article key={c.n} className="cinco-item">
            <div className="n">{c.n}</div>
            <h4>{c.titulo}</h4>
            <p>{c.desc}</p>
          </article>
        ))}
      </div>
    </section>
  );
}

// ── Hoje — "now" widget ────────────────────────────────────
function HojeWidget() {
  return (
    <section className="section" style={{ padding: 0 }}>
      <div className="container">
        <div className="hoje">
          <div className="hoje-head">
            <small>Tempo presente · maio · 2026</small>
            <span>Hoje a <em>Adriana</em> está</span>
          </div>
          <div className="hoje-list">
            <div className="hoje-row">
              <small>Lendo</small>
              <span className="v">{HOJE.lendo}</span>
            </div>
            <div className="hoje-row">
              <small>Escutando</small>
              <span className="v">{HOJE.escutando}</span>
            </div>
            <div className="hoje-row">
              <small>Trabalhando</small>
              <span className="v">{HOJE.trabalhando}</span>
            </div>
            <div className="hoje-row">
              <small>Escrevendo</small>
              <span className="v">{HOJE.escrevendo}</span>
            </div>
            <div className="hoje-row">
              <small>Próxima fala</small>
              <span className="v">{HOJE.proxima}</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Hero V4 — Cover Story (editorial magazine cover) ───────
function HeroCover() {
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setIdx(i => (i + 1) % MANIFESTOS.length), 5500);
    return () => clearInterval(t);
  }, []);
  const m = MANIFESTOS[idx];
  const barcodeBars = [3, 1, 2, 1, 4, 1, 2, 3, 1, 2, 1, 4, 1, 3, 2, 1, 3, 2, 1, 1];

  return (
    <section className="hero-cover">
      <div className="hero-cover-mast">
        Humanāre°
      </div>
      <div className="hero-cover-stage">
        <div className="hero-cover-topbar">
          <span>Edição <strong>Nº 26</strong> · Rio de Janeiro</span>
          <span>Capa: <strong>Adriana Schneider</strong></span>
          <span>Volume <strong>I</strong> · Sob convite</span>
        </div>
        <div className="hero-cover-photo" style={{ backgroundImage: `url(${PHOTOS.hero})` }}>
          <div className="hero-cover-inside">
            <div className="label">Nesta edição</div>
            <div className="hero-cover-badge">200+ palcos · 20 anos</div>
            <div className="hero-cover-badge">Curadora · RIO INNOVATION WEEK</div>
            <div className="hero-cover-badge">+28 mil · Newsletter semanal</div>
            <div className="hero-cover-badge">Livro · "Se Não Nós, Quem?"</div>
          </div>
          <div className="hero-cover-droplet">"</div>
          <h1 className="hero-cover-title">
            {m.plain}<em>{m.em}</em>{m.plain2 || ''}{m.em2 && <em>{m.em2}</em>}
          </h1>
          <div className="hero-cover-barcode">
            {barcodeBars.map((w, i) => (
              <span key={i} style={{ width: w, height: 18 + (i % 4) * 3 }} />
            ))}
            <small>HMR · 2026</small>
          </div>
          <div className="hero-cover-actions">
            <a href="#" data-magnetic="0.3" className="btn lime">Convidar para palestra <span className="arrow">→</span></a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Hero V5 — Stage Spotlight (cinematic dark) ─────────────
function HeroStage() {
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setIdx(i => (i + 1) % MANIFESTOS.length), 5800);
    return () => clearInterval(t);
  }, []);
  const m = MANIFESTOS[idx];

  return (
    <section className="hero-stage">
      <div className="hero-stage-wire left">PROGRAM · Adriana Schneider · 2026</div>
      <div className="hero-stage-wire right">Humanāre · Rio · Brasil</div>
      <div className="hero-stage-overhead">
        <span className="hero-stage-live">Em cartaz · 2026</span>
        <span>Stage 26 / Rio · BR</span>
      </div>
      <div className="hero-stage-photo" style={{ backgroundImage: `url(${PHOTOS.hero})` }} />
      <h1>
        {m.plain}<em>{m.em}</em>{m.plain2 || ''}{m.em2 && <em>{m.em2}</em>}
      </h1>
      <div className="hero-stage-actions">
        <a href="#" data-magnetic="0.3" className="btn lime">Convidar para palestra <span className="arrow">→</span></a>
        <a href="#" className="btn ghost" style={{ borderColor: 'var(--bg)', color: 'var(--bg)' }}>Assistir TEDx</a>
      </div>
      <div className="hero-stage-credits">
        <span>Fundadora &amp; CEO Humanāre</span>
        <span>Curadora Rio Innovation Week</span>
        <span>TEDx · 200+ palcos</span>
        <span>+28k inscritos</span>
      </div>
    </section>
  );
}

// ── Hero V6 — Triptych (3-panel editorial) ─────────────────
function HeroTriptych() {
  return (
    <section className="hero-tri">
      <div className="hero-tri-panel cream">
        <span className="panel-num">I</span>
        <div className="nh">Painel I · Quem é ela</div>
        <h2>A mulher que <em>fica</em>.</h2>
        <div className="photo" style={{ backgroundImage: `url(${PHOTOS.hero})` }} />
        <div className="photo-cap">
          <strong>Adriana Schneider</strong>
          Rio · 1978 ao presente
        </div>
      </div>
      <div className="hero-tri-panel clay">
        <span className="panel-num">II</span>
        <div className="nh">Painel II · O manifesto</div>
        <div className="massive-q">"Se não nós,</div>
        <div className="secondline">quem? Se não agora,<br/>quando?"</div>
        <a href="#" data-magnetic="0.3" className="btn lime panel-cta">Convidar Adriana <span className="arrow">→</span></a>
      </div>
      <div className="hero-tri-panel dark">
        <span className="panel-num">III</span>
        <div className="nh">Painel III · O trabalho</div>
        <h2>Vinte e cinco anos a serviço das <em>pessoas</em>.</h2>
        <div className="nums">
          <div className="num"><span className="v">200+</span><small>organizações</small></div>
          <div className="num"><span className="v">35k</span><small>vidas</small></div>
          <div className="num"><span className="v">50</span><small>projetos/ano</small></div>
          <div className="num"><span className="v">3</span><small>cidades</small></div>
        </div>
        <a href="#" className="btn ghost panel-cta" style={{ borderColor: 'var(--bg)', color: 'var(--bg)' }}>Conhecer trajetória →</a>
      </div>
    </section>
  );
}

// ── Home composer ───────────────────────────────────────────
function Home({ heroVariant, setRoute }) {
  useReveal();
  const Hero =
    heroVariant === 'manifesto'  ? HeroManifesto :
    heroVariant === 'asymmetric' ? HeroAsym :
    heroVariant === 'split'      ? HeroSplit :
    heroVariant === 'cover'      ? HeroCover :
    heroVariant === 'stage'      ? HeroStage :
    heroVariant === 'triptych'   ? HeroTriptych :
    HeroSignature;

  return (
    <main className="page-view">
      <Hero />
      <EmpresasMarquee />
      <ConhecaAdriana setRoute={setRoute} />

      {/* Territórios de Fala — 3 lectures (real themes) */}
      <section className="section" style={{ background: 'var(--paper)' }}>
        <SecHead
          eyebrow="Territórios de Fala"
          titleA="Três conversas que "
          titleEm="tiram a sala"
          titleB=" da inércia."
          sub="Palestras, painéis e mentorias construídas em 25 anos de prática. Adaptáveis ao seu contexto, nunca enlatadas."
          action={<a href="#" onClick={(e) => { e.preventDefault(); setRoute('palestras'); window.scrollTo({top:0,behavior:'instant'});}} className="link-arrow">Ver todos os formatos →</a>}
        />
        <PalestrasGrid list={PALESTRAS} columns={3} />
      </section>

      {/* O Caminho do Protagonista — book + 3 pillars (signature) */}
      <CaminhoSlice />

      <Intermission text="Se não nós, quem?   ·   Se não agora, quando?" />

      {/* Humanāre · soluções para empresas */}
      <HumanareSolucoes setRoute={setRoute} />

      {/* Impacto · números reais */}
      <ImpactoStrip />

      {/* Curadorias */}
      <CuradoriasGrid />

      <ManifestoStrip />

      <Depoimentos />

      <HojeWidget />

      <CincoCoisas />

      <Eventos limit={4} />

      <Intermission text="Inspirando pessoas e empresas boas   ·   Para o mundo, desde 2016" variant="light" />
      <Newsletter />
    </main>
  );
}

Object.assign(window, { Home, HeroSignature, HeroSplit, HeroManifesto, HeroAsym, HeroCover, HeroStage, HeroTriptych, AboutSlice, ConhecaAdriana, CincoCoisas, HojeWidget });