// pages.jsx — sub-pages

// ── Sobre ───────────────────────────────────────────────────
function SobrePage() {
  useReveal();
  return (
    <main className="page-view">
      {/* Editorial cover */}
      <section style={{ paddingTop: '160px' }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 28 }}>Sobre · Adriana Schneider</div>
          <h1 className="display" data-reveal="words" data-reveal-imm style={{
            fontSize: 'clamp(3rem, 9vw, 9rem)',
            letterSpacing: '-0.04em',
            lineHeight: 0.92,
            fontWeight: 'var(--display-weight)',
          }}>
            Ser <em style={{ fontStyle: 'italic', color: 'var(--terracotta)' }}>visível</em> sem distorcer<br/>o que <em style={{ fontStyle: 'italic', color: 'var(--terracotta)' }}>se é</em>.
          </h1>
        </div>
      </section>

      {/* Editorial photo strip */}
      <section style={{ padding: '60px 0' }}>
        <div className="container" style={{
          display: 'grid',
          gridTemplateColumns: '2fr 1fr 1.5fr',
          gap: 24,
          height: 'clamp(360px, 50vh, 560px)',
        }}>
          <div className="placeholder-photo" style={{ backgroundImage: `url(${PHOTOS.about})`, backgroundSize: 'cover', backgroundPosition: 'center' }} />
          <div style={{
            background: 'var(--terracotta)', color: 'var(--bg)',
            padding: 36, display: 'flex', alignItems: 'flex-end',
            fontFamily: 'var(--font-display)', fontStyle: 'italic',
            fontSize: 'clamp(1.4rem, 2vw, 2rem)', lineHeight: 1.15,
          }}>
            "Ser visível sem<br/>distorcer o que se é."
          </div>
          <div className="placeholder-photo" style={{ backgroundImage: `url(${PHOTOS.portrait})`, backgroundSize: 'cover', backgroundPosition: 'center' }} />
        </div>
      </section>

      {/* The letter — long form intimate intro */}
      <section className="section">
        <div className="container">
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 2fr',
            gap: 'clamp(40px, 6vw, 100px)', alignItems: 'start',
          }}>
            <div style={{ position: 'sticky', top: 120 }}>
              <div className="eyebrow">Uma carta de chegada</div>
              <h2 className="display" style={{ marginTop: 16, fontSize: 'clamp(2rem, 3.5vw, 3rem)', letterSpacing: '-0.025em', lineHeight: 1.02 }}>
                Da Adriana, <em style={{ fontStyle: 'italic', color: 'var(--terracotta)' }}>para você</em>.
              </h2>
              <div style={{ marginTop: 24, fontFamily: 'var(--font-mono)', fontSize: '0.7rem', letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--ink-mute)' }}>
                Rio de Janeiro · 2026
              </div>
            </div>
            <div className="conheca-letter" style={{ fontSize: 'clamp(1.2rem, 1.7vw, 1.7rem)', maxWidth: 760 }}>
              {CARTA.map((line, i) =>
                typeof line === 'string'
                  ? <p key={i}>{line}</p>
                  : <p key={i} className="pergunta">{line.italic}</p>
              )}
              <p style={{ marginTop: 28 }}>
                Sou carioca, mãe de quatro, e desde 2021 divido a minha vida entre
                Lisboa, Rio de Janeiro e São Paulo. Comecei a carreira em RH no início
                dos anos 2000, quando ninguém ainda usava a palavra <em>cultura organizacional</em> em
                reuniões de diretoria. Vinte e cinco anos depois, ela está em todas,
                mas raramente do jeito certo.
              </p>
              <p>
                Fundei a Humanāre em 2016. Aceitei a curadoria do Rio Innovation Week em 2019.
                Lancei <em>O Caminho do Protagonista</em> em 2025, em três cidades, um livro
                que reverte 100% dos lucros para programas de aceleração de carreira feminina.
                Já fui Top 5 palestrante do CBTD e cinco vezes premiada pelo e-Learning Brasil.
              </p>
              <p>
                Mas o que mais me orgulha é a continuidade: o mesmo método, a mesma
                pergunta, há duas décadas e meia. <em>Em que tipo de mundo você está
                trabalhando para viver?</em>
              </p>
              <div className="sig">Com afeto, <em>Adriana</em></div>
            </div>
          </div>
        </div>
      </section>

      {/* HOJE widget */}
      <HojeWidget />

      {/* Cinco coisas */}
      <CincoCoisas />

      {/* Trajetória timeline */}
      <section className="section" style={{ background: 'var(--paper)' }}>
        <SecHead
          eyebrow="Trajetória"
          titleA="Vinte anos "
          titleEm="em movimento"
          sub="Os marcos que vieram construindo o trabalho que faço hoje."
        />
        <div className="container">
          <div className="timeline">
            {TRAJETORIA.map((t, i) => (
              <div key={i} className="tl-item reveal">
                <div className="tl-year">{t.ano}</div>
                <div className="tl-title">{t.titulo.plain}<em>{t.titulo.em}</em></div>
                <div className="tl-desc">{t.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Valores */}
      <section className="section">
        <SecHead
          eyebrow="O que me move"
          titleA="Os "
          titleEm="seis"
          titleB=" que não negocio."
          sub="Não é manifesto de empresa. É como acordo todos os dias e decido o que vou e o que não vou fazer."
        />
        <div className="container">
          <div className="values">
            {VALORES.map((v) => (
              <article key={v.n} className="value">
                <div className="num">{v.n}</div>
                <h4>{v.titulo.plain}<em>{v.titulo.em}</em></h4>
                <p>{v.desc}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <EmpresasMarquee />
      <Newsletter />
    </main>
  );
}

// ── Palestras ───────────────────────────────────────────────
function PalestrasPage({ setRoute }) {
  useReveal();
  return (
    <main className="page-view">
      <section className="page-hero">
        <div>
          <div className="eyebrow" style={{ marginBottom: 28 }}>Territórios de Fala</div>
          <h1 className="ttl">
            Três conversas que <em>tiram</em> a sala da inércia.
          </h1>
        </div>
        <div className="intro">
          <p>
            Falo para plateias entre 50 e 5.000 pessoas, em três cidades, dois continentes.
            Conteúdos adaptáveis ao seu contexto: empresarial, acadêmico ou aberto.
          </p>
          <p>
            Formatos: <span className="italic-accent">keynote</span> ·{' '}
            <span className="italic-accent">painel</span> ·{' '}
            <span className="italic-accent">mentoria coletiva</span> ·{' '}
            <span className="italic-accent">imersão fechada</span>.
          </p>
          <a href="#" onClick={(e) => { e.preventDefault(); setRoute('contato'); window.scrollTo({top:0,behavior:'instant'});}} className="btn primary" style={{ marginTop: 24 }}>Convidar para palestra <span className="arrow">→</span></a>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 0 }}>
        <PalestrasGrid columns={3} />
      </section>

      {/* Formatos */}
      <section className="section" style={{ background: 'var(--paper)' }}>
        <SecHead
          eyebrow="Formatos"
          titleA="Como podemos "
          titleEm="trabalhar"
          titleB=" juntos."
        />
        <div className="container" style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24,
        }}>
          {[
            { t: 'Keynote', dur: '45 a 60 min', desc: 'Palestra principal para grandes plateias.' },
            { t: 'Painel', dur: '60 a 90 min', desc: 'Mediada ou participativa, com convidados.' },
            { t: 'Mentoria', dur: '2 a 4h', desc: 'Coletiva ou fechada para C-level.' },
            { t: 'Imersão', dur: '1 a 2 dias', desc: 'Workshop profundo de cultura ou liderança.' },
          ].map((f) => (
            <article key={f.t} className="reveal" style={{
              background: 'var(--bg)', padding: '36px 28px', minHeight: 240,
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              border: '1px solid var(--line)',
            }}>
              <div>
                <div className="eyebrow" style={{ marginBottom: 16 }}>{f.dur}</div>
                <h4 className="display" style={{
                  fontSize: '2rem', letterSpacing: '-0.02em', fontStyle: 'italic',
                  marginBottom: 12,
                }}>{f.t}</h4>
                <p style={{ color: 'var(--ink-soft)', fontSize: '0.95rem' }}>{f.desc}</p>
              </div>
            </article>
          ))}
        </div>
      </section>

      <Depoimentos />
      <Eventos limit={5} />
      <Newsletter />
    </main>
  );
}

// ── Conteúdo ────────────────────────────────────────────────
function ConteudoPage() {
  useReveal();
  const [filter, setFilter] = React.useState('Tudo');
  const cats = ['Tudo', 'Vídeos', 'Podcast', 'Newsletter', 'Texto'];
  return (
    <main className="page-view">
      <section className="page-hero">
        <div>
          <div className="eyebrow" style={{ marginBottom: 28 }}>Mídia · Conteúdo · Livro</div>
          <h1 className="ttl">
            A conversa <em>continua</em> aqui.
          </h1>
        </div>
        <div className="intro">
          <p>
            Livro, podcasts, webinars, entrevistas e a newsletter <em>Janelas</em>.
            Tudo que dá para ouvir, ler e assistir entre uma palestra e outra.
          </p>
          <p>
            Procure pelo que te interessa, ou se inscreva na{' '}
            <span className="italic-accent" style={{ color: 'var(--terracotta)' }}>newsletter</span>{' '}
            para receber por primeiro.
          </p>
        </div>
      </section>

      <CaminhoSlice />
      <LivroSlice />

      <section className="section">
        <SecHead
          eyebrow="Biblioteca aberta"
          titleA="Ouvir, ler, "
          titleEm="assistir"
          sub="Uma seleção do que está disponível agora. Atualizada toda semana."
          action={
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
              {cats.map(c => (
                <button key={c} onClick={() => setFilter(c)} style={{
                  fontFamily: 'var(--font-mono)', fontSize: '0.65rem',
                  letterSpacing: '0.18em', textTransform: 'uppercase',
                  padding: '8px 16px', borderRadius: 100,
                  background: filter === c ? 'var(--ink)' : 'transparent',
                  color: filter === c ? 'var(--bg)' : 'var(--ink-soft)',
                  border: '1px solid ' + (filter === c ? 'var(--ink)' : 'var(--line)'),
                  cursor: 'pointer', transition: 'all .2s var(--ease)',
                }}>{c}</button>
              ))}
            </div>
          }
        />
        <div className="container">
          <div className="media-grid">
            {MIDIA.map((m, i) => (
              <article key={i} className="media-card reveal">
                <div className="thumb" style={{ backgroundImage: `url(${m.thumb})` }}>
                  <span className="play">
                    <svg width="14" height="14" viewBox="0 0 14 14"><path d="M3 2 L11 7 L3 12 Z" fill="currentColor" /></svg>
                  </span>
                </div>
                <div className="meta">
                  <div className="cat">{m.cat}</div>
                  <h4>{m.titulo.plain}{m.titulo.em && <em>{m.titulo.em}</em>}{m.titulo.plain2 || ''}</h4>
                  <div className="info">{m.info}</div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      <RIWSlice />
      <Newsletter />
    </main>
  );
}

// ── Contato ─────────────────────────────────────────────────
function ContatoPage() {
  useReveal();
  return (
    <main className="page-view">
      <section className="page-hero">
        <div>
          <div className="eyebrow" style={{ marginBottom: 28 }}>Contato · 2026</div>
          <h1 className="ttl">
            Vamos <em>começar</em> uma conversa?
          </h1>
        </div>
        <div className="intro">
          <p>
            Para convites, parcerias, mentorias ou simplesmente para dizer oi:
            preencha o formulário ao lado, escreva para{' '}
            <span className="italic-accent" style={{ color: 'var(--terracotta)' }}>contato@humanare.com</span>{' '}
            ou fale com a gente no <a href={CONTATO.whatsapp} target="_blank" rel="noopener" className="italic-accent" style={{ color: 'var(--terracotta)' }}>WhatsApp</a>.
          </p>
          <p>
            Operamos em <em className="italic-accent">{CONTATO.cidades.join(' · ')}</em>. Respondemos em até 48h úteis.
          </p>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="contato">
            <div className="contato-info">
              <div className="eyebrow">Como combinamos</div>
              <h3 style={{ marginTop: 16 }}>Direto, simples e pessoal.</h3>
              <p>
                Cada convite é avaliado por mim mesma. Você não vai falar com
                uma assessoria sem rosto. Vai falar com a equipe pequena que
                trabalha comigo de perto.
              </p>

              <div className="ci-item">
                <div>
                  <small>Convites para palestras</small>
                  <div className="v">palestras@humanare.com</div>
                </div>
                <span style={{ color: 'var(--terracotta)' }}>→</span>
              </div>
              <div className="ci-item">
                <div>
                  <small>Consultoria & projetos · Humanāre</small>
                  <div className="v">contato@humanare.com</div>
                </div>
                <span style={{ color: 'var(--terracotta)' }}>→</span>
              </div>
              <div className="ci-item">
                <div>
                  <small>WhatsApp</small>
                  <div className="v"><a href={CONTATO.whatsapp} target="_blank" rel="noopener">+351 96 812 9415</a></div>
                </div>
                <span style={{ color: 'var(--terracotta)' }}>→</span>
              </div>
              <div className="ci-item">
                <div>
                  <small>Onde atuamos</small>
                  <div className="v">{CONTATO.cidades.join(' · ')}</div>
                </div>
                <span style={{ color: 'var(--terracotta)' }}>→</span>
              </div>

              <div style={{ marginTop: 36, display: 'flex', gap: 20, fontFamily: 'var(--font-mono)', fontSize: '0.65rem', letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink-mute)'}}>
                <a href={CONTATO.linkedin} target="_blank" rel="noopener">LinkedIn ↗</a>
                <a href={CONTATO.instagram} target="_blank" rel="noopener">Instagram ↗</a>
                <a href={CONTATO.facebook} target="_blank" rel="noopener">Facebook ↗</a>
                <a href={CONTATO.whatsapp} target="_blank" rel="noopener">WhatsApp ↗</a>
              </div>
            </div>

            <form className="form" onSubmit={(e) => { e.preventDefault(); alert('Mensagem enviada ✦ obrigada!'); }}>
              <div className="form-row">
                <div className="field"><label>Nome</label><input type="text" required /></div>
                <div className="field"><label>Empresa</label><input type="text" /></div>
              </div>
              <div className="form-row">
                <div className="field"><label>Email</label><input type="email" required /></div>
                <div className="field"><label>WhatsApp</label><input type="tel" /></div>
              </div>
              <div className="field">
                <label>Qual o motivo do contato?</label>
                <select>
                  <option>Convite para palestra</option>
                  <option>Mentoria de líder C-level</option>
                  <option>Programa Humanāre · liderança virtuosa</option>
                  <option>Team building / design de times</option>
                  <option>Consultoria de cultura de impacto</option>
                  <option>Curadoria de evento</option>
                  <option>Imprensa</option>
                  <option>Outro</option>
                </select>
              </div>
              <div className="form-row">
                <div className="field"><label>Data prevista</label><input type="date" /></div>
                <div className="field"><label>Cidade / formato</label><input type="text" placeholder="Ex: SP · presencial" /></div>
              </div>
              <div className="field">
                <label>Conte um pouco sobre o convite</label>
                <textarea placeholder="Plateia, tema desejado, objetivo do evento..." rows="5" />
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 12, flexWrap: 'wrap', gap: 16 }}>
                <small style={{ color: 'var(--ink-mute)', fontFamily: 'var(--font-mono)', fontSize: '0.65rem', letterSpacing: '0.16em', textTransform: 'uppercase' }}>
                  Resposta em até 48h
                </small>
                <button type="submit" className="btn terracotta">Enviar mensagem <span className="arrow">→</span></button>
              </div>
            </form>
          </div>
        </div>
      </section>

      <EmpresasMarquee />
    </main>
  );
}

Object.assign(window, { SobrePage, PalestrasPage, ConteudoPage, ContatoPage });