// Services page
function ScrambleStepNumber({ value }) {
  const ref = React.useRef(null);

  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const spans = Array.from(el.querySelectorAll('.ssn-c'));
    const DIGITS = '0123456789';
    const targets = value.split('');

    // init: random digits, hidden
    spans.forEach(s => { s.textContent = DIGITS[Math.floor(Math.random() * 10)]; });

    const animate = () => {
      if (window.gsap) gsap.fromTo(el, { opacity: 0 }, { opacity: 1, duration: 0.25, ease: 'power2.out' });

      spans.forEach((span, idx) => {
        const target = targets[idx];
        const CYCLES = 14;
        let count = 0;

        setTimeout(() => {
          const iv = setInterval(() => {
            count++;
            if (count >= CYCLES) {
              clearInterval(iv);
              span.textContent = target;
            } else {
              const left = CYCLES - count;
              if (left <= 3) {
                const n = (parseInt(target, 10) + left - 1) % 10;
                span.textContent = n.toString();
              } else {
                span.textContent = DIGITS[Math.floor(Math.random() * 10)];
              }
            }
          }, 50);
        }, idx * 110);
      });
    };

    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { animate(); obs.disconnect(); }
    }, { threshold: 0.4 });

    obs.observe(el);
    return () => obs.disconnect();
  }, [value]);

  return (
    <div ref={ref} className="display" style={{
      fontSize: 'clamp(52px, 6vw, 80px)', color: 'var(--crimson)', lineHeight: 1,
      fontFeatureSettings: '"tnum"',
    }}>
      {value.split('').map((c, i) => (
        <span key={i} className="ssn-c" style={{ display: 'inline-block', minWidth: '0.58em', textAlign: 'center' }}>{c}</span>
      ))}
    </div>
  );
}

function PageServicos({ setPage }) {
  useReveal();
  const t = useT();

  const pillars = [
    { n: '01', t: t('sv.p1t'), sub: t('sv.p1sub'), deliverables: [t('sv.p1d1'), t('sv.p1d2'), t('sv.p1d3'), t('sv.p1d4')], stack: ['TypeScript', 'Go', 'Elixir', 'React Native', 'Swift', 'Kotlin'] },
    { n: '02', t: t('sv.p2t'), sub: t('sv.p2sub'), deliverables: [t('sv.p2d1'), t('sv.p2d2'), t('sv.p2d3'), t('sv.p2d4')], stack: ['Python', 'PyTorch', 'DBT', 'LangGraph', 'Databricks', 'Snowflake'] },
    { n: '03', t: t('sv.p3t'), sub: t('sv.p3sub'), deliverables: [t('sv.p3d1'), t('sv.p3d2'), t('sv.p3d3'), t('sv.p3d4')], stack: ['AWS', 'GCP', 'Terraform', 'K8s', 'Datadog', 'ArgoCD'] },
    { n: '04', t: t('sv.p4t'), sub: t('sv.p4sub'), deliverables: [t('sv.p4d1'), t('sv.p4d2'), t('sv.p4d3'), t('sv.p4d4')], stack: ['Figma', 'Tokens Studio', 'Storybook', 'Lottie', 'After Effects'] },
  ];

  const process = [
    { n: '00', t: t('sv.pr0t'), d: t('sv.pr0d') },
    { n: '01', t: t('sv.pr1t'), d: t('sv.pr1d') },
    { n: '02', t: t('sv.pr2t'), d: t('sv.pr2d') },
    { n: '03', t: t('sv.pr3t'), d: t('sv.pr3d') },
  ];

  return (
    <>
      <section style={{ padding: '80px 0 80px', position: 'relative', overflow: 'hidden' }}>
        <div className="tick-grid" />
        <div className="shell" style={{ position: 'relative' }}>
          <Eyebrow>{t('sv.ey')}</Eyebrow>
          <h1 className="display" style={{ fontSize: 'clamp(44px, 8vw, 116px)', margin: '24px 0', maxWidth: '14ch', lineHeight: 0.98 }}>
            {t('sv.h1a')}{' '}
            <em className="display-italic" style={{ color: 'var(--crimson)' }}>{t('sv.h1em')}</em>
          </h1>
          <p style={{ fontSize: 19, maxWidth: 620, opacity: 0.78, lineHeight: 1.55 }}>
            {t('sv.sub')}
          </p>
        </div>
      </section>

      <div className="divider" />

      <section className="section-pad-sm">
        <div className="shell">
          {pillars.map((p, i) => (
            <Reveal key={p.t} delay={i * 60}>
              <div style={{
                display: 'grid',
                gridTemplateColumns: '100px 1.2fr 1fr 1fr',
                gap: 40,
                padding: '56px 0',
                borderTop: '1px solid var(--line)',
                borderBottom: i === pillars.length - 1 ? '1px solid var(--line)' : 'none',
              }} className="pillar-row">
                <div className="eyebrow" style={{ margin: 0 }}>{p.n}</div>
                <div>
                  <h3 className="display" style={{ fontSize: 'clamp(28px, 3.5vw, 40px)', margin: '0 0 14px', lineHeight: 1.1 }}>{p.t}</h3>
                  <p style={{ opacity: 0.72, fontSize: 15.5, lineHeight: 1.55, margin: 0, maxWidth: 380 }}>{p.sub}</p>
                </div>
                <div>
                  <div className="eyebrow" style={{ marginBottom: 14 }}>{t('c.deliverables')}</div>
                  <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8, fontSize: 15 }}>
                    {p.deliverables.map(d => <li key={d}>— {d}</li>)}
                  </ul>
                </div>
                <div>
                  <div className="eyebrow" style={{ marginBottom: 14 }}>Stack</div>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    {p.stack.map(s => <Chip key={s}>{s}</Chip>)}
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      <section className="surface-dark section-pad">
        <div className="shell">
          <SectionHeader
            dark
            eyebrow={t('sv.proc_ey')}
            title={<>{t('sv.proc_h2a')} <em className="display-italic">{t('sv.proc_em1')}</em> {t('sv.proc_to')} <em className="display-italic">{t('sv.proc_em2')}</em></>}
            subtitle={t('sv.proc_sub')}
          />

          <div style={{ marginTop: 72, display: 'flex', flexDirection: 'column', gap: 0 }}>
            {process.map((s, i) => (
              <Reveal key={s.n} delay={i * 60}>
                <div style={{
                  display: 'grid', gridTemplateColumns: '100px 1fr 1fr',
                  gap: 48, padding: '48px 0',
                  borderTop: '1px solid rgba(244,239,230,0.1)',
                  borderBottom: i === process.length - 1 ? '1px solid rgba(244,239,230,0.1)' : 'none',
                  alignItems: 'center',
                }} className="proc-row">
                  <div>
                    <ScrambleStepNumber value={s.n} />
                  </div>
                  <div>
                    <div className="display" style={{ fontSize: 'clamp(24px, 2.5vw, 32px)', lineHeight: 1.1, marginBottom: 12 }}>{s.t}</div>
                    <div style={{ opacity: 0.65, fontSize: 14.5, lineHeight: 1.6, fontFamily: 'var(--mono)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>
                      {t('sv.pr' + i + 'dur')}
                    </div>
                  </div>
                  <div style={{ opacity: 0.75, fontSize: 15, lineHeight: 1.65 }}>{s.d}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="section-pad">
        <div className="shell">
          <SectionHeader
            eyebrow={t('sv.mod_ey')}
            title={<>{t('sv.mod_h2a')} <em className="display-italic">{t('sv.mod_h2em')}</em></>}
          />

          <div className="grid grid-3" style={{ marginTop: 56 }}>
            {[
              { t: t('sv.m1t'), d: t('sv.m1d'), tag: t('sv.m1tag'), bullets: [t('sv.m1b1'), t('sv.m1b2'), t('sv.m1b3'), t('sv.m1b4')], hl: false },
              { t: t('sv.m2t'), d: t('sv.m2d'), tag: t('sv.m2tag'), bullets: [t('sv.m2b1'), t('sv.m2b2'), t('sv.m2b3'), t('sv.m2b4')], hl: true },
              { t: t('sv.m3t'), d: t('sv.m3d'), tag: t('sv.m3tag'), bullets: [t('sv.m3b1'), t('sv.m3b2'), t('sv.m3b3'), t('sv.m3b4')], hl: false },
            ].map((m, i) => (
              <Reveal key={m.t} delay={i * 80}>
                <div style={{
                  padding: 32, borderRadius: 18,
                  border: '1px solid ' + (m.hl ? 'var(--ink)' : 'var(--line)'),
                  background: m.hl ? 'var(--ink)' : 'var(--bg-2)',
                  color: m.hl ? 'var(--bg)' : 'var(--ink)',
                  height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
                  minHeight: 340, position: 'relative',
                }}>
                  <div>
                    <span style={{
                      display: 'inline-block', padding: '5px 12px', borderRadius: 999,
                      background: m.hl ? 'var(--crimson)' : 'var(--bg-3)',
                      color: m.hl ? 'var(--ink)' : 'var(--ink-dim)',
                      fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase',
                    }}>{m.tag}</span>
                    <div className="display" style={{ fontSize: 34, margin: '20px 0 12px', color: 'inherit' }}>{m.t}</div>
                    <div style={{ opacity: m.hl ? 0.7 : 0.72, fontSize: 15, lineHeight: 1.5, marginBottom: 24, color: 'inherit' }}>{m.d}</div>
                    <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
                      {m.bullets.map(b => (
                        <li key={b} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13.5, opacity: m.hl ? 0.75 : 0.68 }}>
                          <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--crimson)', flexShrink: 0 }} />
                          {b}
                        </li>
                      ))}
                    </ul>
                  </div>
                  <div style={{ marginTop: 28, paddingTop: 20, borderTop: '1px solid ' + (m.hl ? 'rgba(14,14,18,0.15)' : 'var(--line)') }}>
                    <a href="#contato" onClick={(e) => { e.preventDefault(); setPage('contato'); }}
                       style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 14, fontWeight: 500,
                                color: m.hl ? 'var(--bg)' : 'var(--crimson)', textDecoration: 'none' }}>
                      {t('sv.talk_model')}
                      <svg width="13" height="13" viewBox="0 0 14 14" fill="none"><path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
                    </a>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="section-pad" style={{ background: 'var(--bg-2)' }}>
        <div className="shell" style={{ display: 'grid', gridTemplateColumns: '1fr 1.5fr', gap: 80 }}>
          <div>
            <Eyebrow>{t('sv.faq_ey')}</Eyebrow>
            <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 64px)', margin: '20px 0' }}>
              {t('sv.faq_h2a')} <em className="display-italic">{t('sv.faq_em')}</em>
            </h2>
          </div>
          <div>
            {[
              [t('sv.faq_q1'), t('sv.faq_a1')],
              [t('sv.faq_q2'), t('sv.faq_a2')],
              [t('sv.faq_q3'), t('sv.faq_a3')],
              [t('sv.faq_q4'), t('sv.faq_a4')],
            ].map(([q, a], i) => (
              <details key={q} style={{
                borderTop: '1px solid var(--line)',
                borderBottom: i === 3 ? '1px solid var(--line)' : 'none',
                padding: '24px 0'
              }}>
                <summary style={{ listStyle: 'none', cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span className="display" style={{ fontSize: 24 }}>{q}</span>
                  <span style={{ fontFamily: 'var(--mono)', fontSize: 12 }}>+</span>
                </summary>
                <p style={{ opacity: 0.72, fontSize: 15, lineHeight: 1.6, marginTop: 14, maxWidth: 640 }}>{a}</p>
              </details>
            ))}
          </div>
        </div>
      </section>

      <style>{`
        @media (max-width: 980px) {
          .pillar-row { grid-template-columns: 1fr !important; gap: 20px !important; }
          .proc-row { grid-template-columns: 60px 1fr !important; gap: 24px !important; }
          .proc-row > div:last-child { grid-column: 2; }
        }
        @media (max-width: 640px) {
          .proc-row { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </>
  );
}

Object.assign(window, { PageServicos });