// Section 3 — Como funciona. Sticky-pinned section; the active step
// advances as you scroll through a tall scroll track.
function HowItWorks() {
  const wrapRef = React.useRef(null);
  const [active, setActive] = React.useState(0);
  const [prog, setProg] = React.useState(0);
  const steps = [
    { n: '01', icon: 'file', title: 'Você preenche um briefing curto.', body: 'Nome do negócio, ramo, @ do Instagram e algumas fotos. Leva um minuto, pelo celular.', from: '#cfe7df', to: '#e9d9c2' },
    { n: '02', icon: 'wand', title: 'A gente monta a sua prévia.', body: 'Design pronto em 24–48h, já com o seu conteúdo de verdade — não um template vazio.', from: '#e9d9c2', to: '#dcc7e0' },
    { n: '03', icon: 'rocket', title: 'Aprovou? Sobe no ar.', body: 'Domínio próprio, hospedagem, WhatsApp e mapa — tudo configurado por nós.', from: '#cfe1e7', to: '#cfe7df' },
  ];
  React.useEffect(() => {
    const onScroll = () => {
      const el = wrapRef.current; if (!el) return;
      const r = el.getBoundingClientRect();
      const total = el.offsetHeight - window.innerHeight;
      const p = Math.min(1, Math.max(0, -r.top / total));
      setProg(p);
      setActive(Math.min(steps.length - 1, Math.floor(p * steps.length + 0.0001)));
    };
    window.addEventListener('scroll', onScroll);
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <section id="como" ref={wrapRef} style={{ position: 'relative', height: '300vh', background: 'var(--bg)', scrollMarginTop: 80 }}>
      <div style={{ position: 'sticky', top: 64, height: 'calc(100vh - 64px)', display: 'flex', alignItems: 'center', overflow: 'hidden' }}>
        <div className="container" style={{ width: '100%' }}>
          <div className="grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
            {/* left: text */}
            <div>
              <span className="eyebrow">Como funciona</span>
              <h2 className="h-section" style={{ margin: '14px 0 36px' }}>Da ideia ao ar, em <span className="em">três passos.</span></h2>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {steps.map((s, i) => {
                  const on = i === active;
                  return (
                    <div key={i} style={{
                      display: 'flex', gap: 18, padding: '20px 22px', borderRadius: 18,
                      background: on ? 'var(--paper)' : 'transparent',
                      border: on ? '1px solid var(--line)' : '1px solid transparent',
                      boxShadow: on ? 'var(--shadow-sm)' : 'none', opacity: on ? 1 : 0.42,
                      transition: 'all .45s var(--ease-out)',
                    }}>
                      <div style={{ flex: 'none', width: 46, height: 46, borderRadius: 13,
                        background: on ? 'var(--brand)' : 'var(--mint)', color: on ? '#fff' : 'var(--brand-700)',
                        display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'all .45s var(--ease-out)' }}>
                        <Icon name={s.icon} size={22} color={on ? '#fff' : 'var(--brand-700)'} />
                      </div>
                      <div>
                        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--brand)', marginBottom: 4 }}>{s.n}</div>
                        <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 21, color: 'var(--ink-2)', margin: '0 0 6px', letterSpacing: '-.01em' }}>{s.title}</h3>
                        <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.55, color: 'var(--muted)', maxWidth: '40ch' }}>{s.body}</p>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
            {/* right: visual that swaps per step */}
            <div className="grid-2-hide" style={{ position: 'relative', height: 440 }}>
              {steps.map((s, i) => (
                <div key={i} style={{
                  position: 'absolute', inset: 0, borderRadius: 'var(--r-2xl)', overflow: 'hidden',
                  background: `linear-gradient(150deg, ${s.from}, ${s.to})`, boxShadow: 'var(--shadow-lg)',
                  opacity: i === active ? 1 : 0, transform: i === active ? 'scale(1)' : 'scale(.96)',
                  transition: 'opacity .5s var(--ease-out), transform .5s var(--ease-out)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 70% 26%, rgba(15,107,92,.2), transparent 60%)' }} />
                  <div style={{ width: 92, height: 92, borderRadius: 24, background: 'rgba(255,253,248,.9)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'var(--shadow-md)', position: 'relative' }}>
                    <Icon name={s.icon} size={42} color="var(--brand)" stroke={1.6} />
                  </div>
                  <span style={{ position: 'absolute', bottom: 22, left: 24, fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 22, color: 'var(--ink-2)' }}>Passo {s.n}</span>
                </div>
              ))}
              {/* progress rail */}
              <div style={{ position: 'absolute', right: -22, top: 20, bottom: 20, width: 3, borderRadius: 99, background: 'var(--line)' }}>
                <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: `${prog * 100}%`, background: 'var(--brand)', borderRadius: 99, transition: 'height .2s linear' }} />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.HowItWorks = HowItWorks;