/* lp/sections.jsx — todas as seções da landing */

/* ============= TOPBAR ============= */
const Topbar = () => (
  <nav className="topbar" style={{
    position: 'absolute', top: 0, left: 0, right: 0, zIndex: 10,
    padding: '24px 56px', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    borderBottom: '0.5px solid var(--line)'
  }}>
    <a href="#" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <Seal fill="currentColor" />
      <span style={{ fontFamily: 'var(--serif)', fontWeight: 500, fontSize: 22, letterSpacing: '-0.02em' }}>Legado</span>
    </a>
    <div style={{ display: 'flex', gap: 36, fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '1.7px', textTransform: 'uppercase' }}>
      <a href="#movimentos" className="nav-link" style={{ color: 'var(--mute)' }}>Movimentos</a>
      <a href="#processo" className="nav-link" style={{ color: 'var(--mute)' }}>Processo</a>
      <a href="#joao" className="nav-link" style={{ color: 'var(--mute)' }}>O autor</a>
      <a href="#diagnostico" className="nav-link" style={{ color: 'var(--bone)' }}>Diagnóstico ↗</a>
    </div>
  </nav>
);

/* ============= HERO ============= */
const Hero = () => (
  <header className="hero" style={{
    position: 'relative', minHeight: '100vh', display: 'flex',
    paddingTop: 120, paddingBottom: 96, alignItems: 'center'
  }}>
    <Topbar />
    <div className="wrap" style={{ width: '100%' }}>
      <div style={{
        display: 'grid', gridTemplateColumns: 'minmax(0, 1.4fr) minmax(0, 1fr)',
        gap: 80, alignItems: 'center'
      }}>
        <div>
          <Reveal><Eyebrow>Suporte editorial · Construção de autoridade</Eyebrow></Reveal>
          <Reveal delay={120}>
            <h1 style={{ marginTop: 36, marginBottom: 36 }}>
              Construímos<br />
              o legado de<br />
              <em>quem lidera.</em>
            </h1>
          </Reveal>
          <Reveal delay={220}>
            <p style={{ fontSize: 18, lineHeight: 1.55, maxWidth: 560, marginBottom: 48 }}>
              o Legado é o suporte editorial silencioso que assenta a autoridade de
              C-Levels, founders e lideranças públicas. Não promovemos. <strong>Construímos.</strong>
            </p>
          </Reveal>
          <Reveal delay={320}>
            <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
              <a href="#diagnostico" className="btn">
                <Pill />
                Iniciar a construção
              </a>
              <a href="#movimentos" className="btn btn--ghost">
                <Pill />
                Conhecer os movimentos
              </a>
            </div>
          </Reveal>
          <Reveal delay={460}>
            <div className="meta-line" style={{
              marginTop: 64, display: 'flex', gap: 48, flexWrap: 'wrap',
              fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '1.5px',
              color: 'var(--smoke)', textTransform: 'uppercase'
            }}>
              <div>
                <div className="num" style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 28, color: 'var(--bone)', textTransform: 'none', letterSpacing: '-0.02em', marginBottom: 4 }}>21</div>
                Dias de imersão
              </div>
              <div>
                <div className="num" style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 28, color: 'var(--bone)', textTransform: 'none', letterSpacing: '-0.02em', marginBottom: 4 }}>14</div>
                Entregas no programa
              </div>
              <div>
                <div className="num" style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 28, color: 'var(--bone)', textTransform: 'none', letterSpacing: '-0.02em', marginBottom: 4 }}>02</div>
                Movimentos
              </div>
            </div>
          </Reveal>
        </div>

        <Reveal delay={300} className="hero-photo">
          <div className="photo-frame" style={{
            position: 'relative', aspectRatio: '3 / 4',
            background: 'rgba(242,242,242,.04)',
            overflow: 'hidden'
          }}>
            <img src="assets/joao.png" alt="João Rios, founder de o Legado" className="joao-img" style={{
              width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 20%'
            }} />
            <div style={{
              position: 'absolute', top: 16, left: 16, right: 16,
              display: 'flex', justifyContent: 'space-between',
              fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: '1.5px',
              color: 'var(--bone)', textTransform: 'uppercase',
              textShadow: '0 1px 8px rgba(0,0,0,.5)'
            }}>
              <span>FOUNDER</span>
              <span>RET. 2026</span>
            </div>
            <div style={{
              position: 'absolute', bottom: 16, left: 16, right: 16,
              display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
              fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: '1.5px',
              color: 'var(--bone)', textTransform: 'uppercase',
              textShadow: '0 1px 8px rgba(0,0,0,.5)'
            }}>
              <span>JOÃO RIOS · FOUNDER</span>
              <span>MARINGÁ / PR</span>
            </div>
          </div>
        </Reveal>
      </div>
    </div>

    <div className="scroll-cue" style={{
      position: 'absolute', bottom: 32, left: '50%', transform: 'translateX(-50%)',
      fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '2px',
      color: 'var(--smoke)', display: 'flex', alignItems: 'center', gap: 12
    }}>
      <span className="dot" style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--bone)', animation: 'pulse 2s infinite' }} />
      ROLE PARA DESCER
    </div>
    <style>{`@keyframes pulse {0%,100%{opacity:.4}50%{opacity:1}}`}</style>
  </header>
);

/* ============= PROBLEMA ============= */
const Problema = () => (
  <section id="problema">
    <div className="wrap">
      <Reveal><Eyebrow>O problema</Eyebrow></Reveal>
      <Reveal delay={120}>
        <h2 style={{ marginTop: 32, maxWidth: 980 }}>
          Sua autoridade não é<br />
          falta de <em>conteúdo.</em><br />
          É falta de <em>suporte.</em>
        </h2>
      </Reveal>
      <Reveal delay={220}>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
          gap: 48, marginTop: 80, paddingTop: 32,
          borderTop: '0.5px solid var(--line)'
        }}>
          <div>
            <Pill className="pill--lg" />
            <p style={{ marginTop: 24, fontSize: 16 }}>
              <strong>Você já é a tese.</strong> Tem repertório, decisão, posição. O que falta é
              quem assente isso em documento — não em postagem.
            </p>
          </div>
          <div>
            <Pill className="pill--lg" />
            <p style={{ marginTop: 24, fontSize: 16 }}>
              <strong>Marketing pessoal te empurra para a frente.</strong> Suporte editorial te
              assenta. São ofícios diferentes.
            </p>
          </div>
          <div>
            <Pill className="pill--lg" />
            <p style={{ marginTop: 24, fontSize: 16 }}>
              <strong>Liderar dá audiência. Construir dá legado.</strong> O primeiro se compra com
              alcance. O segundo, só com ofício.
            </p>
          </div>
        </div>
      </Reveal>
    </div>
  </section>
);

/* ============= MANIFESTO ============= */
const Manifesto = () => (
  <section id="manifesto" style={{ background: 'var(--graphite)' }}>
    <div className="wrap">
      <Reveal><Eyebrow>Manifesto</Eyebrow></Reveal>
      <div style={{ display: 'flex', gap: 80, alignItems: 'flex-start', marginTop: 56, flexWrap: 'wrap' }}>
        <Reveal delay={100} style={{ flex: '0 0 auto' }}>
          <Seal className="seal" fill="var(--bone)" />
        </Reveal>
        <Reveal delay={200} style={{ flex: '1 1 600px' }}>
          <blockquote style={{
            fontFamily: 'var(--serif)', fontSize: 'clamp(28px, 3.4vw, 48px)',
            fontWeight: 400, lineHeight: 1.2, letterSpacing: '-0.025em',
            color: 'var(--bone)', textWrap: 'balance', maxWidth: 880
          }}>
            "Toda autoridade duradoura é <em style={{ color: '#D9D9D9', fontStyle: 'italic' }}>construção.</em><br />
            E construir, ao contrário de promover, <em style={{ color: '#D9D9D9', fontStyle: 'italic' }}>exige silêncio.</em><br />
            <span style={{ color: 'var(--mute)' }}>O cliente é a tese. Nós somos o suporte."</span>
          </blockquote>
          <div style={{
            marginTop: 48, paddingTop: 24, borderTop: '0.5px solid var(--line)',
            fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '1.7px', color: 'var(--smoke)',
            display: 'flex', justifyContent: 'space-between', textTransform: 'uppercase', flexWrap: 'wrap', gap: 12
          }}>
            <span>O LEGADO · TESE EDITORIAL</span>
            <span>MARINGÁ / PR · 2026</span>
          </div>
        </Reveal>
      </div>
    </div>
  </section>
);

/* ============= MOVIMENTOS ============= */
const movimento1Entregas = [
  { tag: '01 · Briefing Estratégico', desc: 'Sessão profunda. Narrativa, posicionamento, ICP, missão de marca.' },
  { tag: '02 · Linha Editorial', desc: 'Documento de identidade de conteúdo. Pilares, tom, temas-âncora, linguagem.' },
  { tag: '03 · Planejamento', desc: 'Dois meses de calendário editorial — posts, reels, carrosséis, LinkedIn.' },
  { tag: '04 · Sessão de Fotos', desc: 'Estúdio profissional. Ensaio de autoridade — para LinkedIn, mídia e presença digital.' },
  { tag: '05 · Dia de Gravação', desc: 'Produção audiovisual completa. Roteiros, gravação, direção de cena e postura.' },
  { tag: '06 · Manifesto de Marca', desc: 'Estilo trailer. Um vídeo-âncora que declara sua autoridade pessoal.' },
  { tag: '07 · 8 Vídeos Editados', desc: 'Entrega final premium. Motion, legenda, corte editorial, formatos múltiplos.' },
  { tag: '08 · Instagram Redondo', desc: 'Perfil de autoridade. Bio, destaques, plano de feed, stories e capa.' }
];
const movimento2Entregas = [
  { tag: '01 · Mentoria Mensal', desc: '60 minutos por mês. Sessão estratégica com agenda controlada pelo founder.' },
  { tag: '02 · Gestão de Reputação', desc: 'Monitoramento contínuo da narrativa pública, percepção e alertas de imagem.' },
  { tag: '03 · Assessoria de Conteúdo', desc: 'Revisão e ajuste mensal. Calibração do planejamento, performance e oportunidades.' },
  { tag: '04 · Posicionamento Estratégico', desc: 'Evolução de autoridade. Novas frentes — eventos, mídia, parcerias, indicações.' },
  { tag: '05 · Relatório de Presença', desc: 'Visibilidade mensurada. Avanços de percepção, marcos atingidos, próximos passos.' },
  { tag: '06 · Suporte Direto', desc: 'Acesso prioritário ao founder. Canal exclusivo para dúvidas, crises e decisões.' }
];

const DeliverableItem = ({ item, light, isLast }) => {
  const [open, setOpen] = React.useState(false);
  const contentRef = React.useRef(null);
  const [maxH, setMaxH] = React.useState(0);

  React.useEffect(() => {
    if (contentRef.current) {
      setMaxH(open ? contentRef.current.scrollHeight : 0);
    }
  }, [open]);

  const tagColor = light ? 'var(--onyx)' : 'var(--bone)';
  const descColor = light ? 'var(--smoke)' : 'var(--mute)';
  const borderCol = light ? 'rgba(10,10,10,.08)' : 'var(--line-soft)';

  return (
    <li style={{
      borderBottom: isLast ? 'none' : `0.5px solid ${borderCol}`
    }}>
      <button
        type="button"
        onClick={() => setOpen(o => !o)}
        aria-expanded={open}
        style={{
          width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          gap: 16, padding: '14px 0', background: 'transparent', border: 'none',
          cursor: 'pointer', textAlign: 'left', color: 'inherit',
          fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '1.5px',
          textTransform: 'uppercase', fontWeight: 500
        }}
      >
        <span style={{ color: tagColor }}>{item.tag}</span>
        <span aria-hidden="true" style={{
          flexShrink: 0, width: 12, height: 12, display: 'inline-block',
          color: descColor, transition: 'transform .35s ease',
          transform: open ? 'rotate(180deg)' : 'rotate(0deg)'
        }}>
          <svg viewBox="0 0 12 12" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="square">
            <path d="M2 4.5 L6 8.5 L10 4.5" />
          </svg>
        </span>
      </button>
      <div style={{
        maxHeight: maxH, overflow: 'hidden',
        transition: 'max-height .4s ease, opacity .35s ease',
        opacity: open ? 1 : 0
      }}>
        <div ref={contentRef} style={{ paddingBottom: 16, paddingRight: 24 }}>
          <span style={{
            display: 'block', fontSize: 13, lineHeight: 1.6, color: descColor
          }}>{item.desc}</span>
        </div>
      </div>
    </li>
  );
};

const DeliverableList = ({ items, light = false }) => (
  <ul style={{
    listStyle: 'none', display: 'flex', flexDirection: 'column',
    margin: 0, padding: 0
  }}>
    {items.map((item, i) => (
      <DeliverableItem
        key={i}
        item={item}
        light={light}
        isLast={i === items.length - 1}
      />
    ))}
  </ul>
);

const PriceBlock = ({ value, period = '', meta, light = false }) => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
    <span style={{
      fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '1.7px',
      color: 'var(--smoke)', textTransform: 'uppercase'
    }}>Investimento</span>
    <span style={{
      fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 36,
      letterSpacing: '-0.02em', color: light ? 'var(--onyx)' : 'var(--bone)',
      lineHeight: 1
    }}>
      {value}
      {period && (
        <span style={{
          fontSize: 18, color: light ? 'var(--smoke)' : 'var(--mute)',
          fontStyle: 'italic'
        }}>{period}</span>
      )}
    </span>
    <span style={{
      fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '1.5px',
      color: light ? 'var(--smoke)' : 'var(--mute)',
      textTransform: 'uppercase', marginTop: 6
    }}>{meta}</span>
  </div>
);

const Movimentos = () => (
  <section id="movimentos">
    <div className="wrap">
      <Reveal><Eyebrow>Movimentos</Eyebrow></Reveal>
      <Reveal delay={120}>
        <h2 style={{ marginTop: 32, marginBottom: 32 }}>
          Dois movimentos.<br />
          Uma <em>construção.</em>
        </h2>
      </Reveal>
      <Reveal delay={200}>
        <p style={{ maxWidth: 720, fontSize: 17, marginBottom: 64, color: '#D9D9D9' }}>
          O programa Legado opera em duas frentes complementares: uma imersão de imagem que
          <em style={{ fontStyle: 'italic' }}> assenta</em> a autoridade — e um retainer mensal
          que a <em style={{ fontStyle: 'italic' }}>sustenta</em>. Catorze entregas no total,
          dirigidas pessoalmente pelo founder.
        </p>
      </Reveal>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(420px, 1fr))', gap: 24 }}>
        {/* Movimento 1 */}
        <Reveal delay={100}>
          <div style={{ background: 'var(--graphite)', padding: 48, height: '100%', display: 'flex', flexDirection: 'column' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 56 }}>
              <span style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '1.7px', color: 'var(--smoke)', textTransform: 'uppercase' }}>
                Fase 01 · Dias 1 — 21
              </span>
              <Pill />
            </div>
            <h3 style={{ marginBottom: 20 }}>
              Imersão<br />
              <em style={{ color: 'var(--mute)' }}>de Imagem.</em>
            </h3>
            <p style={{ marginBottom: 40, fontSize: 15, lineHeight: 1.6, color: '#D9D9D9' }}>
              Construção concentrada. Vinte e um dias. Oito entregas. Um único pagamento. Ao final,
              sua narrativa, sua estética e sua presença pública estão assentadas sobre uma base sólida.
            </p>
            <div style={{ marginBottom: 32, paddingTop: 24, borderTop: '0.5px solid var(--line)' }}>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '1.7px', color: 'var(--smoke)', textTransform: 'uppercase', marginBottom: 20 }}>
                Oito entregas
              </div>
              <DeliverableList items={movimento1Entregas} />
            </div>
          </div>
        </Reveal>

        {/* Movimento 2 */}
        <Reveal delay={200}>
          <div style={{ background: 'var(--bone)', color: 'var(--onyx)', padding: 48, height: '100%', display: 'flex', flexDirection: 'column' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 56 }}>
              <span style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '1.7px', color: 'var(--smoke)', textTransform: 'uppercase' }}>
                Fase 02 · Mensal · Contínuo
              </span>
              <span className="pill" style={{ background: 'var(--onyx)' }}>
                <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'var(--bone)' }} />
              </span>
            </div>
            <h3 style={{ marginBottom: 20, color: 'var(--onyx)' }}>
              Retainer<br />
              <em style={{ color: 'var(--smoke)' }}>de Autoridade.</em>
            </h3>
            <p style={{ marginBottom: 40, fontSize: 15, lineHeight: 1.6, color: 'var(--graphite)' }}>
              O que foi assentado precisa ser sustentado. Acompanhamento mensal com agenda
              dirigida pelo founder. Construção em camadas — não em campanhas.
            </p>
            <div style={{ marginBottom: 32, paddingTop: 24, borderTop: '0.5px solid rgba(10,10,10,.15)' }}>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '1.7px', color: 'var(--smoke)', textTransform: 'uppercase', marginBottom: 20 }}>
                Seis entregas mensais
              </div>
              <DeliverableList items={movimento2Entregas} light />
            </div>
          </div>
        </Reveal>
      </div>

      <Reveal delay={320}>
        <div style={{
          marginTop: 48, padding: '20px 24px', border: '0.5px solid var(--line)',
          display: 'flex', alignItems: 'center', gap: 16,
          fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '1.2px',
          color: 'var(--mute)', textTransform: 'uppercase', lineHeight: 1.5
        }}>
          <Pill />
          <span>O Retainer é o caminho natural após a Imersão — mas pode ser contratado de forma independente, mediante diagnóstico.</span>
        </div>
      </Reveal>
    </div>
  </section>
);

/* ============= PROCESSO 10 DIAS ============= */
const Processo = () => {
  const fases = [
    { dias: '01 — 05', titulo: 'Diagnóstico', desc: 'Briefing estratégico profundo. Mapeamento de narrativa, posicionamento, ICP e missão de marca.' },
    { dias: '06 — 10', titulo: 'Assentamento', desc: 'Linha editorial, planejamento de dois meses, definição de pilares, tom e temas-âncora.' },
    { dias: '11 — 16', titulo: 'Produção', desc: 'Sessão de fotos em estúdio. Dia de gravação. Roteiros, direção de cena e postura.' },
    { dias: '17 — 21', titulo: 'Entrega', desc: 'Manifesto de marca, oito vídeos editados, perfil redondo. Apresentação e calibração final.' }
  ];
  return (
    <section id="processo">
      <div className="wrap">
        <Reveal><Eyebrow>Processo</Eyebrow></Reveal>
        <Reveal delay={120}>
          <h2 style={{ marginTop: 32, marginBottom: 32 }}>
            Vinte e um dias.<br />
            <em>Quatro fases.</em>
          </h2>
        </Reveal>
        <Reveal delay={200}>
          <p style={{ maxWidth: 640, fontSize: 16, marginBottom: 64 }}>
            A Imersão de Imagem segue uma cadência calibrada — do diagnóstico estratégico
            à entrega final dos materiais editados.
          </p>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 0, borderTop: '0.5px solid var(--line)' }}>
          {fases.map((f, i) => (
            <Reveal key={i} delay={i * 100}>
              <div style={{
                padding: '40px 32px 40px 0',
                borderRight: i < fases.length - 1 ? '0.5px solid var(--line)' : 'none',
                paddingLeft: i === 0 ? 0 : 32,
                height: '100%'
              }}>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '1.7px', color: 'var(--smoke)', textTransform: 'uppercase', marginBottom: 32 }}>
                  Dias {f.dias}
                </div>
                <Pill className="pill--lg" />
                <h3 style={{ marginTop: 24, marginBottom: 16, fontSize: 28 }}>
                  <em>{f.titulo}</em>
                </h3>
                <p style={{ fontSize: 14 }}>{f.desc}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ============= ENTREGÁVEIS ============= */
const Entregaveis = () => {
  const docs = [
    { num: '01', nome: 'Diagnóstico Editorial', desc: 'Mapa de autoridade, brechas e território.' },
    { num: '02', nome: 'Tese', desc: 'A frase única que sustenta tudo o que vem depois.' },
    { num: '03', nome: 'Sistema de Léxico', desc: 'Palavras próprias. Léxico vinculante.' },
    { num: '04', nome: 'Manifesto', desc: 'Texto fundador. Posição registrada em peça editorial.' },
    { num: '05', nome: 'Dossiê de Autoridade', desc: 'Documento de credenciais, repertório e trajetória.' },
    { num: '06', nome: 'Pilares de Comunicação', desc: 'Os 4 a 6 territórios em que sua voz opera.' },
    { num: '07', nome: 'Sistema Editorial', desc: 'Modelo de produção contínua. Régua para o Acompanhamento.' }
  ];
  return (
    <section id="entregaveis" style={{ background: 'var(--graphite)' }}>
      <div className="wrap">
        <Reveal><Eyebrow>Documentos</Eyebrow></Reveal>
        <Reveal delay={120}>
          <h2 style={{ marginTop: 32, marginBottom: 24 }}>
            Sete documentos.<br />
            <em>Um sistema.</em>
          </h2>
        </Reveal>
        <Reveal delay={200}>
          <p style={{ maxWidth: 640, fontSize: 16, marginBottom: 64 }}>
            A Aplicação não entrega "conteúdo". Entrega documentos — peças editoriais que sustentam
            sua autoridade muito depois do encerramento do projeto.
          </p>
        </Reveal>
        <div style={{ borderTop: '0.5px solid var(--line)' }}>
          {docs.map((d, i) => (
            <Reveal key={i} delay={i * 60}>
              <div style={{
                display: 'grid', gridTemplateColumns: '64px minmax(0, 1.4fr) minmax(0, 2fr) auto',
                gap: 32, alignItems: 'center', padding: '28px 0',
                borderBottom: '0.5px solid var(--line)'
              }}>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '1.7px', color: 'var(--smoke)' }}>
                  N° {d.num}
                </div>
                <h4 style={{ fontFamily: 'var(--serif)', fontWeight: 500, fontStyle: 'italic', fontSize: 22, letterSpacing: '-0.01em' }}>
                  {d.nome}
                </h4>
                <p style={{ fontSize: 14, color: 'var(--mute)' }}>{d.desc}</p>
                <Pill />
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ============= JOÃO ============= */
const Joao = () => (
  <section id="joao">
    <div className="wrap">
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.2fr)', gap: 80, alignItems: 'center' }}>
        <Reveal>
          <div style={{ position: 'relative', aspectRatio: '3 / 4', background: 'var(--graphite)', overflow: 'hidden' }}>
            <img src="assets/joao-autor.jpg" alt="João Rios, founder de o Legado" className="joao-img" style={{
              width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 25%'
            }} />
            <div style={{
              position: 'absolute', top: 16, left: 16, right: 16,
              display: 'flex', justifyContent: 'space-between',
              fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: '1.5px',
              color: 'var(--bone)', textTransform: 'uppercase',
              textShadow: '0 1px 8px rgba(0,0,0,.5)'
            }}>
              <span>FOUNDER · DIRETOR DE COMUNICAÇÃO</span>
              <span>RET. 2026</span>
            </div>
          </div>
        </Reveal>
        <div>
          <Reveal><Eyebrow>O autor</Eyebrow></Reveal>
          <Reveal delay={120}>
            <h2 style={{ marginTop: 32, marginBottom: 32 }}>
              João Rios,<br />
              <em>diretor de</em><br />
              <em>comunicação.</em>
            </h2>
          </Reveal>
          <Reveal delay={200}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 20, fontSize: 16, color: '#D9D9D9' }}>
              <p>
                Founder de o Legado, João dirige pessoalmente cada Aplicação. Sua
                disciplina editorial nasce de uma convicção simples: autoridade não se
                promove — <em style={{ fontStyle: 'italic' }}>assenta-se</em>.
              </p>
              <p>
                Com raízes no marketing eleitoral, liderou o reposicionamento da maior
                distribuidora de materiais médicos do noroeste do Paraná. Cada cliente é
                um C-Level único, com história e posição já formadas. Cabe ao suporte
                editorial silencioso transformar essa substância em documento — sem
                competir com quem lidera.
              </p>
              <p>
                Maringá / PR. Trabalha com um <strong>número limitado de clientes por
                trimestre</strong>.
              </p>
            </div>
          </Reveal>
          <Reveal delay={300}>
            <div style={{
              marginTop: 48, paddingTop: 24, borderTop: '0.5px solid var(--line)',
              display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))', gap: 32
            }}>
              <div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '1.5px', color: 'var(--smoke)', marginBottom: 6, textTransform: 'uppercase' }}>Base</div>
                <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 18 }}>Maringá / PR</div>
              </div>
              <div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '1.5px', color: 'var(--smoke)', marginBottom: 6, textTransform: 'uppercase' }}>Percepção pública</div>
                <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 18 }}>Suporte editorial</div>
              </div>
              <div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '1.5px', color: 'var(--smoke)', marginBottom: 6, textTransform: 'uppercase' }}>Origem</div>
                <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 18 }}>Marketing eleitoral</div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </div>
  </section>
);

/* ============= CTA FINAL ============= */
const CTA = () => (
  <section id="diagnostico" style={{
    background: 'var(--bone)', color: 'var(--onyx)',
    padding: '160px 0'
  }}>
    <div className="wrap" style={{ textAlign: 'center' }}>
      <Reveal>
        <span className="eyebrow" style={{ color: 'var(--smoke)', justifyContent: 'center' }}>
          <span className="pill" style={{ background: 'var(--onyx)' }}>
            <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'var(--bone)' }} />
          </span>
          <span>Diagnóstico</span>
        </span>
      </Reveal>
      <Reveal delay={120}>
        <h2 style={{ marginTop: 40, marginBottom: 32, color: 'var(--onyx)' }}>
          Iniciar a <em style={{ color: 'var(--smoke)' }}>construção</em><br />
          começa por uma <em style={{ color: 'var(--smoke)' }}>conversa.</em>
        </h2>
      </Reveal>
      <Reveal delay={200}>
        <p style={{ fontSize: 18, color: 'var(--graphite)', maxWidth: 640, margin: '0 auto 56px' }}>
          Diagnóstico de 30 minutos. Sem custo. Conversa direta com o João Rios para
          entender se há aderência mútua antes de qualquer proposta.
        </p>
      </Reveal>
      <Reveal delay={300}>
        <a href="mailto:contato@olegado.co?subject=Diagnostico%20Editorial" className="btn" style={{
          background: 'var(--onyx)', color: 'var(--bone)', fontSize: 15, padding: '22px 32px 22px 28px'
        }}>
          <span className="pill" style={{ background: 'var(--bone)' }}>
            <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'var(--onyx)' }} />
          </span>
          Solicitar diagnóstico
        </a>
      </Reveal>
      <Reveal delay={420}>
        <div style={{
          marginTop: 80, paddingTop: 32, borderTop: '0.5px solid rgba(10,10,10,.15)',
          display: 'flex', justifyContent: 'center', gap: 56, flexWrap: 'wrap',
          fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '1.5px',
          color: 'var(--smoke)', textTransform: 'uppercase'
        }}>
          <span>Conversa de 30 min</span>
          <span>Sem custo</span>
          <span>Resposta em até 48h</span>
        </div>
      </Reveal>
    </div>
  </section>
);

/* ============= FOOTER ============= */
const Footer = () => (
  <footer style={{ background: 'var(--onyx)', padding: '80px 0 48px', borderTop: '0.5px solid var(--line)' }}>
    <div className="wrap">
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr)', gap: 64, marginBottom: 80, flexWrap: 'wrap' }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24 }}>
            <Seal fill="var(--bone)" />
            <span style={{ fontFamily: 'var(--serif)', fontWeight: 500, fontSize: 24, letterSpacing: '-0.02em' }}>Legado</span>
          </div>
          <p style={{ fontSize: 14, color: 'var(--mute)', maxWidth: 360 }}>
            Suporte editorial silencioso para C-Levels, founders e lideranças públicas.
            Maringá / PR.
          </p>
        </div>
        <div>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '1.5px', color: 'var(--smoke)', marginBottom: 16, textTransform: 'uppercase' }}>Navegar</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontSize: 14, color: '#D9D9D9' }}>
            <a href="#movimentos">Movimentos</a>
            <a href="#processo">Processo</a>
            <a href="#entregaveis">Documentos</a>
            <a href="#joao">O autor</a>
          </div>
        </div>
        <div>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '1.5px', color: 'var(--smoke)', marginBottom: 16, textTransform: 'uppercase' }}>Contato</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontSize: 14, color: '#D9D9D9' }}>
            <a href="mailto:contato@olegado.co">contato@olegado.co</a>
            <a href="#diagnostico">Solicitar diagnóstico</a>
          </div>
        </div>
      </div>
      <div style={{
        paddingTop: 32, borderTop: '0.5px solid var(--line)',
        display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16,
        fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '1.5px',
        color: 'var(--smoke)', textTransform: 'uppercase'
      }}>
        <span>© 2026 · o Legado · Maringá / PR</span>
        <span>Documento editorial · v1.0</span>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Topbar, Hero, Problema, Manifesto, Movimentos, Processo, Entregaveis, Joao, CTA, Footer });