// Sobre page — honest young-studio framing, scroll-driven timeline
function PageSobre({ setPage }) {
  useReveal();
  const t = useT();

  // Scroll-driven timeline logic
  const tlRef = React.useRef(null);
  const itemRefs = React.useRef([]);
  const [activeIdx, setActiveIdx] = React.useState(0);

  const timeline = [
    { y: '2023', q: 'T3', t: t('so.tl1t'), d: t('so.tl1d'), dot: t('so.tl1dot') },
    { y: '2024', q: 'T1', t: t('so.tl2t'), d: t('so.tl2d'), dot: t('so.tl2dot') },
    { y: '2024', q: 'T3', t: t('so.tl3t'), d: t('so.tl3d'), dot: t('so.tl3dot') },
    { y: '2025', q: 'T2', t: t('so.tl4t'), d: t('so.tl4d'), dot: t('so.tl4dot') },
    { y: '2026', q: 'T1', t: t('so.tl5t'), d: t('so.tl5d'), dot: t('so.tl5dot') },
  ];

  React.useEffect(() => {
    const obs = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            const idx = Number(e.target.dataset.idx);
            setActiveIdx(idx);
          }
        });
      },
      { rootMargin: '-45% 0px -45% 0px', threshold: 0 }
    );
    itemRefs.current.forEach((el) => el && obs.observe(el));
    return () => obs.disconnect();
  }, []);

  return (
    <>
      <section style={{ padding: '80px 0 60px', position: 'relative', overflow: 'hidden' }}>
        <div className="tick-grid" />
        <div className="shell" style={{ position: 'relative' }}>
          <Eyebrow>{t('so.ey')}</Eyebrow>
          <h1 className="display sobre-h1" style={{ fontSize: 'clamp(44px, 7vw, 108px)', margin: '24px 0', maxWidth: '17ch', lineHeight: 0.98 }}>
            {t('so.h1a')} <em className="display-italic" style={{ color: 'var(--crimson)' }}>{t('so.h1em')}</em> {t('so.h1b')}
          </h1>
        </div>
      </section>

      <div className="divider" />

      {/* Manifesto */}
      <section className="section-pad-sm">
        <div className="shell mani-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80 }}>
          <div>
            <Eyebrow>{t('so.mf_ey')}</Eyebrow>
          </div>
          <div style={{ fontSize: 21, lineHeight: 1.55, color: 'var(--ink)', opacity: 0.92, fontFamily: 'var(--serif)', maxWidth: 700 }}>
            <p style={{ marginTop: 0 }}>{t('so.mf_p1')}</p>
            <p>{t('so.mf_p2')}</p>
            <p>{t('so.mf_p3')}</p>
          </div>
        </div>
      </section>

      {/* SCROLL-DRIVEN TIMELINE */}
      <section ref={tlRef} style={{ background: 'var(--bg-2)', padding: '120px 0', position: 'relative' }}>
        <div className="shell">
          <SectionHeader
            eyebrow={t('so.tl_ey')}
            title={<>{t('so.tl_h2a')} <em className="display-italic">{t('so.tl_h2em')}</em></>}
            subtitle={t('so.tl_sub')}
          />
          <div className="tl-grid" style={{
            marginTop: 80,
            display: 'grid',
            gridTemplateColumns: '0.9fr 1.1fr',
            gap: 80,
            alignItems: 'flex-start',
          }}>
            {/* STICKY FOCUSED ITEM */}
            <div className="tl-focus-wrap" style={{ position: 'sticky', top: 120, minHeight: 420 }}>
              <div className="tl-focus" key={activeIdx} style={{
                position: 'relative',
                padding: 36,
                border: '1px solid var(--line)',
                borderRadius: 22,
                background: 'var(--bg)',
                overflow: 'hidden',
                animation: 'tlFade 0.5s ease',
              }}>
                <div style={{
                  position: 'absolute', inset: 0,
                  background: 'radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--crimson) 18%, transparent), transparent 55%)',
                  pointerEvents: 'none',
                }} />
                <div style={{ position: 'relative' }}>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 18 }}>
                    <div className="display" style={{ fontSize: 'clamp(56px, 7vw, 92px)', color: 'var(--crimson)', lineHeight: 1 }}>{timeline[activeIdx].y}</div>
                    <div className="eyebrow" style={{ color: 'var(--crimson)' }}>{timeline[activeIdx].q}</div>
                  </div>
                  <div className="display" style={{ fontSize: 'clamp(28px, 3vw, 40px)', margin: '0 0 14px', lineHeight: 1.1 }}>{timeline[activeIdx].t}</div>
                  <p style={{ fontSize: 17, opacity: 0.78, lineHeight: 1.55, margin: 0, maxWidth: 50 + 'ch' }}>{timeline[activeIdx].d}</p>
                  <div style={{
                    display: 'inline-flex', alignItems: 'center', gap: 8,
                    marginTop: 28, padding: '8px 14px', borderRadius: 999,
                    background: 'var(--bg-2)', border: '1px solid var(--line)',
                    fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase',
                  }}>
                    <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--crimson)' }} />
                    {timeline[activeIdx].dot}
                  </div>
                  {/* Progress */}
                  <div style={{ marginTop: 28, display: 'flex', gap: 6 }}>
                    {timeline.map((_, i) => (
                      <div key={i} style={{
                        flex: 1, height: 3, borderRadius: 2,
                        background: i <= activeIdx ? 'var(--crimson)' : 'var(--line)',
                        transition: 'background 0.35s',
                      }} />
                    ))}
                  </div>
                </div>
              </div>
            </div>

            {/* SCROLL LIST */}
            <div style={{ position: 'relative' }}>
              {/* vertical rail */}
              <div style={{
                position: 'absolute', left: 13, top: 0, bottom: 0, width: 2,
                background: 'var(--line)',
              }} />
              {timeline.map((e, i) => (
                <div
                  key={i}
                  ref={(el) => (itemRefs.current[i] = el)}
                  data-idx={i}
                  onMouseEnter={() => setActiveIdx(i)}
                  style={{
                    position: 'relative',
                    paddingLeft: 50,
                    paddingBottom: 80,
                    cursor: 'pointer',
                    opacity: i === activeIdx ? 1 : 0.38,
                    transition: 'opacity 0.4s',
                  }}
                >
                  <div style={{
                    position: 'absolute', left: 6, top: 8,
                    width: 16, height: 16, borderRadius: '50%',
                    background: i <= activeIdx ? 'var(--crimson)' : 'var(--bg-2)',
                    border: '2px solid ' + (i <= activeIdx ? 'var(--crimson)' : 'var(--line)'),
                    transition: 'all 0.35s',
                    boxShadow: i === activeIdx ? '0 0 0 6px color-mix(in srgb, var(--crimson) 20%, transparent)' : 'none',
                  }} />
                  <div className="eyebrow" style={{ color: 'var(--crimson)', fontSize: 11 }}>{e.y} · {e.q}</div>
                  <div className="display" style={{ fontSize: 'clamp(22px, 2.4vw, 30px)', margin: '10px 0 6px', lineHeight: 1.1 }}>{e.t}</div>
                  <div style={{ opacity: 0.68, fontSize: 14.5, lineHeight: 1.5, maxWidth: 46 + 'ch' }}>{e.d}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Principles */}
      <section className="section-pad">
        <div className="shell">
          <SectionHeader eyebrow={t('so.pr_ey')} title={<>{t('so.pr_h2a')} <em className="display-italic">{t('so.pr_h2em')}</em></>} />
          <div className="grid grid-2" style={{ marginTop: 56, gap: 0, borderTop: '1px solid var(--line)' }}>
            {[
              { n: '01', t: t('so.p1t'), d: t('so.p1d') },
              { n: '02', t: t('so.p2t'), d: t('so.p2d') },
              { n: '03', t: t('so.p3t'), d: t('so.p3d') },
              { n: '04', t: t('so.p4t'), d: t('so.p4d') },
              { n: '05', t: t('so.p5t'), d: t('so.p5d') },
              { n: '06', t: t('so.p6t'), d: t('so.p6d') },
            ].map((p, i) => (
              <Reveal key={p.n} delay={i * 50}>
                <div style={{
                  padding: '36px 28px',
                  borderRight: i % 2 === 0 ? '1px solid var(--line)' : 'none',
                  borderBottom: '1px solid var(--line)',
                  display: 'flex', gap: 24, alignItems: 'flex-start',
                  minHeight: 180,
                }} className="princ-cell">
                  <div className="eyebrow" style={{ fontSize: 12, color: 'var(--crimson)', flexShrink: 0 }}>{p.n}</div>
                  <div>
                    <div className="display" style={{ fontSize: 'clamp(20px, 2vw, 24px)', marginBottom: 10, lineHeight: 1.15 }}>{p.t}</div>
                    <div style={{ fontSize: 14.5, opacity: 0.72, lineHeight: 1.55 }}>{p.d}</div>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Numbers — small, honest */}
      <section className="surface-dark section-pad" style={{ overflow: 'hidden', position: 'relative' }}>
        <div className="tick-grid" />
        <div className="shell" style={{ position: 'relative' }}>
          <SectionHeader dark eyebrow={t('so.num_ey')} title={<>{t('so.num_h2a')} <em className="display-italic">{t('so.num_h2em')}</em></>} />
          <div style={{
            marginTop: 64,
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
            borderTop: '1px solid rgba(237,235,230,0.14)',
            borderBottom: '1px solid rgba(237,235,230,0.14)',
          }} className="bene-grid">
            {[
              ['18', t('so.n1l')],
              ['3',  t('so.n2l')],
              ['9',  t('so.n3l')],
              ['3',  t('so.n4l')],
              ['24h',  t('so.n5l')],
              ['100%', t('so.n6l')],
              ['4',  t('so.n7l')],
              ['1',  t('so.n8l')],
            ].map(([n, l], i) => (
              <div key={l} style={{
                padding: '36px 24px',
                borderRight: (i + 1) % 4 === 0 ? 'none' : '1px solid rgba(237,235,230,0.14)',
                borderTop: i >= 4 ? '1px solid rgba(237,235,230,0.14)' : 'none',
              }}>
                <div className="display" style={{ fontSize: 'clamp(36px, 4vw, 52px)', color: 'var(--crimson)', lineHeight: 1 }}>{n}</div>
                <div className="eyebrow" style={{ color: 'rgba(237,235,230,0.6)', marginTop: 10 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Offices */}
      <section className="section-pad">
        <div className="shell">
          <SectionHeader eyebrow={t('so.off_ey')} title={<>{t('so.off_h2a')} <em className="display-italic">{t('so.off_h2em')}</em></>} subtitle={t('so.off_sub')} />
          <div className="grid grid-4" style={{ marginTop: 56 }}>
            {[
              { city: 'Recife', ad: 'Rua da Moeda, 68 — Recife Antigo', tag: t('so.o1tag') },
              { city: 'São Paulo', ad: 'Coworking — Pinheiros', tag: t('so.o2tag') },
              { city: 'Lisboa', ad: 'R. do Alecrim, 12 — Chiado', tag: t('so.o3tag') },
              { city: 'Berlin', ad: 'Torstraße 140 — Mitte', tag: t('so.o4tag') },
            ].map((o, i) => (
              <Reveal key={o.city} delay={i * 60}>
                <div style={{
                  padding: 28, border: '1px solid var(--line)', borderRadius: 18,
                  height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
                  minHeight: 200, background: 'var(--bg-2)',
                }}>
                  <div>
                    <Chip>{o.tag}</Chip>
                    <div className="display" style={{ fontSize: 'clamp(28px, 3vw, 36px)', margin: '16px 0 8px', lineHeight: 1.05 }}>{o.city}</div>
                  </div>
                  <div style={{ opacity: 0.7, fontSize: 13, fontFamily: 'var(--mono)', lineHeight: 1.5 }}>{o.ad}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <style>{`
        @keyframes tlFade {
          from { opacity: 0.4; transform: translateY(8px); }
          to { opacity: 1; transform: translateY(0); }
        }
        @media (max-width: 980px) {
          .tl-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          .tl-focus-wrap { position: relative !important; top: 0 !important; min-height: 0 !important; }
          .mani-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          .bene-grid { grid-template-columns: repeat(2, 1fr) !important; }
          .bene-grid > div { border-right: none !important; border-top: 1px solid rgba(237,235,230,0.14) !important; }
          .princ-cell { border-right: none !important; }
        }
        @media (max-width: 640px) {
          .bene-grid { grid-template-columns: 1fr !important; }
          .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </>
  );
}

Object.assign(window, { PageSobre });