// Home page
function PageHome({ setPage }) {
  useReveal();
  const t = useT();
  const [activeInd, setActiveInd] = React.useState(0);

  const services = [
    { t: t('h.s1t'), d: t('h.s1d'), n: '01' },
    { t: t('h.s2t'), d: t('h.s2d'), n: '02' },
    { t: t('h.s3t'), d: t('h.s3d'), n: '03' },
    { t: t('h.s4t'), d: t('h.s4d'), n: '04' },
  ];

  const industries = [
    { t: t('h.ind1t'), d: t('h.ind1d'), kind: 'fintech', photo: 'assets/fintech.png' },
    { t: t('h.ind2t'), d: t('h.ind2d'), kind: 'saude', photo: 'uploads/ind-saude.png' },
    { t: t('h.ind3t'), d: t('h.ind3d'), kind: 'varejo', photo: 'uploads/ind-varejo.png', bgPos: 'center 25%' },
    { t: t('h.ind4t'), d: t('h.ind4d'), kind: 'energia', photo: 'uploads/ind-energia.png' },
  ];

  const projects = [
    { tag: 'Fintech · em andamento', t: 'Núcleo de conciliação para uma operadora de cartão', d: 'Event-sourcing em Elixir processando 80k eventos/min com replay determinístico.', kind: 'fintech' },
    { tag: 'Saúde · 2025', t: 'Triagem assistida por IA em rede de clínicas', d: 'Copiloto auditável por médicos, decisões versionadas, LGPD desde o dia 1.', kind: 'saude' },
    { tag: 'Varejo · 2025', t: 'Checkout edge-rendered para e-commerce regional', d: 'Reengenharia completa cortando abandono em dois dígitos no mobile.', kind: 'varejo' },
  ];

  return (
    <>
      {/* HERO */}
      <section style={{ position: 'relative', overflow: 'hidden', padding: '80px 0 120px' }}>
        <div className="tick-grid" />
        <div className="orb" style={{ width: 560, height: 560, background: 'var(--crimson)', top: -160, right: -160, opacity: 0.35 }} />
        <div className="orb" style={{ width: 420, height: 420, background: 'var(--crimson-deep)', bottom: -140, left: -80, opacity: 0.2 }} />
        <CurveAccent style={{ right: -180, top: 40, opacity: 0.25 }} />

        <div className="shell" style={{ position: 'relative' }}>
          <Eyebrow>{t('h.eyebrow')}</Eyebrow>
          <h1 className="display hero-h1" style={{
            fontSize: 'clamp(44px, 9vw, 148px)',
            margin: '24px 0 20px',
            maxWidth: '14ch',
            lineHeight: 0.98,
          }}>
            {t('h.h1a')}{' '}
            <span className="display-italic" style={{ color: 'var(--crimson)' }}>{t('h.h1em')}</span>{' '}
            {t('h.h1b')}
          </h1>

          <div style={{ display: 'flex', gap: 40, alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', marginTop: 40 }}>
            <p style={{ fontSize: 19, lineHeight: 1.5, maxWidth: 560, margin: 0, opacity: 0.82 }}>
              {t('h.sub')}
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <Btn onClick={() => setPage('contato')}>{t('c.start_project')}</Btn>
              <Btn variant="ghost" onClick={() => setPage('servicos')}>{t('c.see_services')}</Btn>
            </div>
          </div>

          <div style={{
            marginTop: 88,
            display: 'grid',
            gridTemplateColumns: 'repeat(4, 1fr)',
            gap: 0,
            borderTop: '1px solid var(--line)',
            borderBottom: '1px solid var(--line)'
          }} className="stat-strip">
            {[
              ['18', t('h.stat1')],
              ['2023', t('h.stat2')],
              ['9', t('h.stat3')],
              ['100%', t('h.stat4')],
            ].map(([n, l], i) => (
              <div key={i} style={{
                padding: '28px 24px',
                borderLeft: i === 0 ? 'none' : '1px solid var(--line)',
              }}>
                <div className="display stat-num" data-count={n} style={{ fontSize: 'clamp(32px, 4vw, 52px)' }}>0</div>
                <div className="eyebrow" style={{ marginTop: 8 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* SERVICES */}
      <section className="section-pad">
        <div className="shell">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 80, alignItems: 'start' }} className="svc-grid">
            <Reveal>
              <SectionHeader
                eyebrow={t('h.svc_ey')}
                title={<>{t('h.svc_h2a')}<br /><em className="display-italic">{t('h.svc_h2em')}</em></>}
                subtitle={t('h.svc_sub')}
              />
              <div style={{ marginTop: 32 }}>
                <Btn variant="ghost" onClick={() => setPage('servicos')}>{t('c.all_services')}</Btn>
              </div>
            </Reveal>

            <div style={{ display: 'flex', flexDirection: 'column' }}>
              {services.map((s, i) => (
                <Reveal key={s.t} delay={i * 80}>
                  <a href="#servicos" onClick={(e) => { e.preventDefault(); setPage('servicos'); }}
                     style={{
                       display: 'grid',
                       gridTemplateColumns: '56px 1fr auto',
                       alignItems: 'center',
                       gap: 20,
                       padding: '24px 0',
                       borderTop: '1px solid var(--line)',
                       borderBottom: i === services.length - 1 ? '1px solid var(--line)' : 'none',
                       transition: 'padding 0.3s',
                     }}
                     onMouseEnter={(e) => e.currentTarget.style.paddingLeft = '12px'}
                     onMouseLeave={(e) => e.currentTarget.style.paddingLeft = '0'}>
                    <span className="eyebrow" style={{ margin: 0 }}>{s.n}</span>
                    <div>
                      <div className="display" style={{ fontSize: 'clamp(22px, 2.4vw, 30px)', marginBottom: 4, lineHeight: 1.1 }}>{s.t}</div>
                      <div style={{ opacity: 0.68, fontSize: 14.5, lineHeight: 1.45 }}>{s.d}</div>
                    </div>
                    <ArrowIcon size={18} />
                  </a>
                </Reveal>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* MANIFESTO */}
      <section className="surface-dark section-pad" style={{ position: 'relative', overflow: 'hidden' }}>
        <div className="tick-grid" />
        <div className="orb" style={{ width: 500, height: 500, background: 'var(--crimson-deep)', top: '-30%', right: '-10%', opacity: 0.3 }} />
        <div className="shell" style={{ position: 'relative' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80, alignItems: 'start' }} className="mani-grid">
            <div>
              <Eyebrow dark>{t('h.mf_ey')}</Eyebrow>
              <h2 className="display" style={{ fontSize: 'clamp(40px, 6vw, 84px)', margin: '20px 0', lineHeight: 1.02 }}>
                {t('h.mf_h2a')}{' '}
                <em className="display-italic" style={{ color: 'var(--crimson)' }}>{t('h.mf_h2em')}</em>
              </h2>
            </div>
            <div style={{ fontSize: 19, lineHeight: 1.55, fontFamily: 'var(--serif)', opacity: 0.85 }}>
              <p style={{ marginTop: 0 }}>{t('h.mf_p1')}</p>
              <p>{t('h.mf_p2')}</p>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 40, paddingTop: 32, borderTop: '1px solid rgba(237,235,230,0.14)' }}>
                {[
                  [t('h.mf1k'), t('h.mf1v')],
                  [t('h.mf2k'), t('h.mf2v')],
                  [t('h.mf3k'), t('h.mf3v')],
                ].map(([k, v]) => (
                  <div key={k}>
                    <div className="display" style={{ fontSize: 18, marginBottom: 8, color: 'var(--crimson)' }}>{k}</div>
                    <div style={{ fontSize: 13.5, opacity: 0.7, lineHeight: 1.5, fontFamily: 'var(--sans)' }}>{v}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* INDUSTRIES */}
      <section className="section-pad">
        <div className="shell">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 64, flexWrap: 'wrap', gap: 24 }}>
            <SectionHeader
              eyebrow={t('h.ind_ey')}
              title={<>{t('h.ind_h2a')} <em className="display-italic">{t('h.ind_h2em')}</em></>}
            />
            <Btn variant="ghost" onClick={() => setPage('industrias')}>{t('c.all_industries')}</Btn>
          </div>

          <div className="ind-split" style={{ display: 'grid', gridTemplateColumns: '1.2fr 0.8fr', gap: 56, alignItems: 'flex-start' }}>
            <div style={{ position: 'sticky', top: 120 }}>
              <div key={activeInd} style={{
                position: 'relative',
                aspectRatio: '4 / 3',
                borderRadius: 22,
                overflow: 'hidden',
                border: '1px solid var(--line)',
                animation: 'tlFade 0.4s ease',
              }}>
                <div style={{
                  position: 'absolute', inset: 0,
                  backgroundImage: `url("${industries[activeInd].photo}")`,
                  backgroundSize: 'cover',
                  backgroundPosition: industries[activeInd].bgPos || 'center',
                }} />
                <div style={{
                  position: 'absolute', inset: 0,
                  background: 'linear-gradient(to top, rgba(11,11,14,0.88) 35%, rgba(11,11,14,0.15) 100%)',
                }} />
                <div style={{ position: 'absolute', bottom: 32, left: 32, right: 32 }}>
                  <div className="eyebrow" style={{ color: 'var(--crimson)', marginBottom: 14 }}>0{activeInd + 1} · {t('c.sector')}</div>
                  <div className="display" style={{ fontSize: 'clamp(36px, 5vw, 60px)', lineHeight: 1, marginBottom: 12 }}>
                    {industries[activeInd].t}
                  </div>
                  <p style={{ opacity: 0.82, fontSize: 15, lineHeight: 1.55, margin: '0 0 24px' }}>{industries[activeInd].d}</p>
                  <div style={{ display: 'flex', gap: 6 }}>
                    {industries.map((_, i) => (
                      <div key={i} style={{
                        flex: 1, height: 3, borderRadius: 2,
                        background: i <= activeInd ? 'var(--crimson)' : 'rgba(244,243,241,0.2)',
                        transition: 'background 0.35s',
                      }} />
                    ))}
                  </div>
                </div>
              </div>
            </div>

            <div style={{ position: 'relative' }}>
              <div style={{ position: 'absolute', left: 13, top: 0, bottom: 0, width: 2, background: 'var(--line)' }} />
              {industries.map((ind, i) => (
                <div
                  key={i}
                  onMouseEnter={() => setActiveInd(i)}
                  style={{
                    position: 'relative',
                    paddingLeft: 50,
                    paddingBottom: 72,
                    cursor: 'pointer',
                    opacity: i === activeInd ? 1 : 0.38,
                    transition: 'opacity 0.35s',
                  }}
                >
                  <div style={{
                    position: 'absolute', left: 6, top: 8,
                    width: 16, height: 16, borderRadius: '50%',
                    background: i <= activeInd ? 'var(--crimson)' : 'var(--bg-2)',
                    border: '2px solid ' + (i <= activeInd ? 'var(--crimson)' : 'var(--line)'),
                    transition: 'all 0.35s',
                    boxShadow: i === activeInd ? '0 0 0 6px color-mix(in srgb, var(--crimson) 20%, transparent)' : 'none',
                  }} />
                  <div className="eyebrow" style={{ color: 'var(--crimson)', fontSize: 11 }}>0{i + 1} · {t('c.sector')}</div>
                  <div className="display" style={{ fontSize: 'clamp(26px, 3vw, 40px)', margin: '10px 0 6px', lineHeight: 1.05 }}>{ind.t}</div>
                  <div style={{ opacity: 0.68, fontSize: 14.5, lineHeight: 1.5 }}>{ind.d}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* PROJECTS */}
      <section className="section-pad" style={{ background: 'var(--bg-2)' }}>
        <div className="shell">
          <SectionHeader
            eyebrow={t('h.proj_ey')}
            title={<>{t('h.proj_h2a')} <em className="display-italic">{t('h.proj_h2em')}</em></>}
            subtitle={t('h.proj_sub')}
          />

          <div className="grid grid-3" style={{ marginTop: 56 }}>
            {projects.map((c, i) => (
              <Reveal key={c.t} delay={i * 80}>
                <div>
                  <Placeholder label={c.tag} ratio="4 / 5" style={{ marginBottom: 20 }} dark>
                    <CaseVisual kind={c.kind} />
                  </Placeholder>
                  <div className="display" style={{ fontSize: 'clamp(20px, 2.2vw, 26px)', marginBottom: 8, lineHeight: 1.15 }}>{c.t}</div>
                  <div style={{ opacity: 0.7, fontSize: 14, lineHeight: 1.5 }}>{c.d}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* THOUGHT LEADERSHIP */}
      <section className="section-pad">
        <div className="shell">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 40, flexWrap: 'wrap', gap: 24 }}>
            <SectionHeader
              eyebrow={t('h.ins_ey')}
              title={<>{t('h.ins_h2a')} <em className="display-italic">{t('h.ins_h2em')}</em></>}
            />
            <Btn variant="ghost" onClick={() => setPage('insights')}>{t('c.all_insights')}</Btn>
          </div>

          <div className="grid grid-3">
            {[
              { id: 1, tag: 'Ensaio', t: 'O fim da arquitetura de microsserviços (como conhecemos)', d: '8 min de leitura', cat: 'Arquitetura' },
              { id: 2, tag: 'Pesquisa', t: 'Estado da IA aplicada no Brasil — 2026', d: 'Relatório · 44 páginas', cat: 'IA' },
              { id: 3, tag: 'Entrevista', t: 'Design systems como infraestrutura, não biblioteca', d: '22 min de leitura', cat: 'Design' },
            ].map((p, i) => (
              <Reveal key={p.t} delay={i * 80}>
                <article onClick={() => setPage('insight-' + p.id)} style={{ borderTop: '1px solid var(--line)', paddingTop: 24, cursor: 'pointer' }}>
                  <div style={{
                    aspectRatio: '4 / 3',
                    background: 'var(--bg-2)',
                    borderRadius: 14,
                    marginBottom: 20,
                    position: 'relative',
                    overflow: 'hidden',
                    border: '1px solid var(--line)',
                  }}>
                    <InsightVisualByCat cat={p.cat} />
                  </div>
                  <Chip>{p.tag}</Chip>
                  <div className="display" style={{ fontSize: 'clamp(18px, 1.9vw, 22px)', margin: '14px 0 10px', lineHeight: 1.18 }}>{p.t}</div>
                  <div style={{ opacity: 0.6, fontSize: 13, fontFamily: 'var(--mono)' }}>{p.d}</div>
                </article>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="surface-dark section-pad" style={{ position: 'relative', overflow: 'hidden' }}>
        <div className="orb" style={{ width: 600, height: 600, background: 'var(--crimson)', top: '-30%', left: '30%', opacity: 0.35 }} />
        <div className="shell" style={{ position: 'relative', textAlign: 'center' }}>
          <Eyebrow dark>{t('h.cta_ey')}</Eyebrow>
          <h2 className="display" style={{
            fontSize: 'clamp(44px, 8vw, 120px)',
            margin: '24px auto',
            maxWidth: '14ch',
            lineHeight: 1,
          }}>
            {t('h.cta_h2a')} <em className="display-italic" style={{ color: 'var(--crimson)' }}>{t('h.cta_h2em')}</em>
          </h2>
          <p style={{ fontSize: 18, opacity: 0.7, maxWidth: 560, margin: '0 auto 40px', lineHeight: 1.55 }}>
            {t('h.cta_sub')}
          </p>
          <div style={{ display: 'inline-flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center' }}>
            <Btn onClick={() => setPage('contato')}>{t('c.start_conv')}</Btn>
            <Btn variant="ghost" onClick={() => setPage('carreiras')}>{t('c.work_with_us')}</Btn>
          </div>
        </div>
      </section>

      <style>{`
        @keyframes tlFade {
          from { opacity: 0.4; transform: translateY(8px); }
          to   { opacity: 1;   transform: translateY(0); }
        }
        @media (max-width: 980px) {
          .stat-strip { grid-template-columns: 1fr 1fr !important; }
          .stat-strip > div:nth-child(3) { border-left: none !important; border-top: 1px solid var(--line); }
          .svc-grid, .case-grid, .mani-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
          .ind-split { grid-template-columns: 1fr !important; gap: 32px !important; }
          .ind-split > div:first-child { position: relative !important; top: 0 !important; }
        }
        @media (max-width: 640px) {
          .stat-strip { grid-template-columns: 1fr !important; }
          .stat-strip > div { border-left: none !important; border-top: 1px solid var(--line); }
          .stat-strip > div:first-child { border-top: none; }
          .grid-4, .grid-3 { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </>
  );
}

Object.assign(window, { PageHome });