// Section 9 — Escada de valor. Horizontal timeline; the connecting line
// draws in as it enters view; nodes light up in sequence.
function ValueLadder() {
  const ref = React.useRef(null);
  const [on, setOn] = React.useState(false);
  const stations = [
    { icon: 'rocket', t: 'Setup', d: 'Seu site no ar em 48h.' },
    { icon: 'refresh', t: 'Manutenção', d: 'Atualizações e suporte mensais.' },
    { icon: 'edit', t: 'Conteúdo Pro', d: 'Textos e fotos que vendem.' },
    { icon: 'map', t: 'Google Meu Negócio', d: 'Apareça no mapa e nas buscas.' },
    { icon: 'trending', t: 'Tráfego pago', d: 'Anúncios no Meta e Google.' },
  ];
  React.useEffect(() => {
    const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setOn(true); io.disconnect(); } }, { rootMargin: '-15% 0px' });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return (
    <section className="section" style={{ background: 'var(--ink)', color: '#fff', paddingTop: 0, position: 'relative', overflow: 'hidden' }}>
      <div style={{ paddingTop: 'clamp(64px,9vw,128px)' }} />
      <div className="container" ref={ref}>
        <Reveal>
          <span className="eyebrow" style={{ color: 'var(--mint)' }}>Cresce com você</span>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'clamp(34px,5vw,56px)', lineHeight: 1.04, letterSpacing: '-.015em', color: '#fff', margin: '14px 0 0', maxWidth: '18ch' }}>
            Do primeiro site à <span style={{ fontStyle: 'italic', color: 'var(--brand-300)' }}>máquina de clientes.</span>
          </h2>
        </Reveal>
        <div className="ladder" style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 18, marginTop: 64, position: 'relative' }}>
          {/* connecting line */}
          <div style={{ position: 'absolute', top: 27, left: '10%', right: '10%', height: 2, background: 'rgba(255,255,255,.12)' }}>
            <div style={{ position: 'absolute', inset: 0, background: 'var(--brand-300)', transformOrigin: 'left', transform: `scaleX(${on ? 1 : 0})`, transition: 'transform 1.6s var(--ease-out)' }} />
          </div>
          {stations.map((s, i) => (
            <div key={s.t} style={{ position: 'relative', textAlign: 'center', opacity: on ? 1 : 0, transform: on ? 'none' : 'translateY(14px)', transition: `all .5s var(--ease-out) ${0.3 + i * 0.22}s` }}>
              <div className="bob" style={{ width: 56, height: 56, margin: '0 auto 18px', borderRadius: 17,
                background: 'linear-gradient(150deg,#1f8a76,#0b5246)', display: 'flex', alignItems: 'center', justifyContent: 'center',
                boxShadow: '0 16px 30px -14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.25)', animationDelay: `${i * 0.4}s` }}>
                <Icon name={s.icon} size={26} color="#eafff7" />
              </div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 18, color: '#fff', margin: '0 0 6px' }}>{s.t}</h3>
              <p style={{ margin: '0 auto', fontSize: 13.5, lineHeight: 1.5, color: '#9fb3ab', maxWidth: '20ch' }}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`@keyframes bobk { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} } .bob{ animation: bobk 4.5s ease-in-out infinite; }
        @media (max-width: 860px){ .ladder { grid-template-columns: 1fr 1fr !important; } .ladder > div > .bob {} }`}</style>
    </section>
  );
}

window.ValueLadder = ValueLadder;