function HowItWorks() {
  const steps = [
    {
      n: '1',
      title: 'CONVERSAMOS',
      desc: 'Você conta o que sua loja precisa mostrar na internet.',
      color: 'var(--cyan)',
      icon: (
        <svg viewBox="0 0 80 80" fill="none">
          <circle cx="40" cy="40" r="32" stroke="currentColor" strokeWidth="1.5" opacity="0.3"/>
          <circle cx="40" cy="40" r="22" stroke="currentColor" strokeWidth="1.5" opacity="0.5"/>
          <circle cx="40" cy="40" r="12" stroke="currentColor" strokeWidth="1.5" opacity="0.7"/>
          <circle cx="40" cy="40" r="3" fill="currentColor"/>
          <line x1="40" y1="40" x2="65" y2="22" stroke="currentColor" strokeWidth="1.5">
            <animateTransform attributeName="transform" type="rotate" from="0 40 40" to="360 40 40" dur="6s" repeatCount="indefinite"/>
          </line>
        </svg>
      )
    },
    {
      n: '2',
      title: 'ANALISAMOS',
      desc: 'Conferimos com você as informações do seu negócio.',
      color: 'var(--purple)',
      icon: (
        <svg viewBox="0 0 80 80" fill="none">
          <circle cx="34" cy="34" r="20" stroke="currentColor" strokeWidth="1.6"/>
          <circle cx="34" cy="34" r="14" stroke="currentColor" strokeWidth="1" opacity="0.5"/>
          <line x1="50" y1="50" x2="68" y2="68" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"/>
          <text x="34" y="38" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="11" fontWeight="700" fill="currentColor">+</text>
        </svg>
      )
    },
    {
      n: '3',
      title: 'CRIAMOS',
      desc: 'Preparamos uma prévia para você revisar textos e imagens.',
      color: 'var(--cyan)',
      icon: (
        <svg viewBox="0 0 80 80" fill="none">
          <rect x="14" y="20" width="52" height="40" rx="3" stroke="currentColor" strokeWidth="1.6"/>
          <line x1="14" y1="30" x2="66" y2="30" stroke="currentColor" strokeWidth="1.4"/>
          <circle cx="20" cy="25" r="1.5" fill="currentColor"/>
          <circle cx="25" cy="25" r="1.5" fill="currentColor"/>
          <circle cx="30" cy="25" r="1.5" fill="currentColor"/>
          <text x="40" y="50" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="13" fontWeight="700" fill="currentColor">{'</>'}</text>
        </svg>
      )
    },
    {
      n: '4',
      title: 'APROVAÇÃO E ENTREGA',
      desc: 'Após sua aprovação e envio do conteúdo necessário, publicação em até 48 horas úteis.',
      color: 'var(--green)',
      icon: (
        <svg viewBox="0 0 80 80" fill="none">
          <path d="M30 60 Q22 60 22 52 L26 38 Q30 22 42 14 Q54 14 60 22 Q60 32 50 38 L42 52 Q42 60 30 60 Z"
                stroke="currentColor" strokeWidth="1.6" fill="currentColor" fillOpacity="0.1"/>
          <circle cx="46" cy="32" r="3.5" stroke="currentColor" strokeWidth="1.6" fill="none"/>
          <path d="M22 52 L18 66 L32 60" stroke="currentColor" strokeWidth="1.4" fill="none"/>
          <path d="M58 22 L70 14 M62 28 L72 22" stroke="currentColor" strokeWidth="1.4" opacity="0.6"/>
        </svg>
      )
    }
  ];

  return (
    <section id="como-funciona" style={{ padding: '40px 0 60px' }}>
      <div className="container">
        <div className="panel bracketed reveal" style={{ padding: '40px 32px 48px' }}>
          <h2 className="display" style={{
            textAlign: 'center',
            margin: '0 0 44px',
            fontSize: 24,
            letterSpacing: '0.18em'
          }}>COMO FUNCIONA</h2>

          <div style={{
            display: 'grid',
            gridTemplateColumns: '1fr auto 1fr auto 1fr auto 1fr',
            gap: 16,
            alignItems: 'flex-start'
          }} data-steps>
            {steps.map((s, i) => (
              <React.Fragment key={s.n}>
                <Step {...s}/>
                {i < steps.length - 1 && <Arrow />}
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          [data-steps] { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
          [data-steps] [data-arrow] { display: none; }
        }
      `}</style>
    </section>
  );
}

function Step({ n, title, desc, color, icon }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        textAlign: 'center',
        transition: 'transform .35s ease',
        transform: hover ? 'translateZ(20px) translateY(-6px)' : 'translateZ(0)',
        transformStyle: 'preserve-3d'
      }}
    >
      <div style={{
        width: 96, height: 96,
        margin: '0 auto 18px',
        color,
        filter: `drop-shadow(0 0 ${hover ? 18 : 8}px ${color})`,
        transition: 'filter .3s'
      }}>
        {icon}
      </div>
      <div style={{
        fontFamily: 'Orbitron, sans-serif',
        fontSize: 13,
        fontWeight: 700,
        letterSpacing: '0.1em',
        color: '#fff',
        marginBottom: 8
      }}>
        {n}. {title}
      </div>
      <p style={{
        margin: 0,
        fontSize: 12,
        color: 'var(--text-dim)',
        lineHeight: 1.55,
        maxWidth: 200,
        marginInline: 'auto'
      }}>{desc}</p>
    </div>
  );
}

function Arrow() {
  return (
    <div data-arrow style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', paddingTop: 30 }}>
      <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
        <defs>
          <linearGradient id="arr-grad" x1="0" y1="0" x2="40" y2="0">
            <stop offset="0%" stopColor="#00E5FF" stopOpacity="0.2"/>
            <stop offset="100%" stopColor="#7C3AED"/>
          </linearGradient>
        </defs>
        <path d="M5 20h28M25 12l10 8-10 8" stroke="url(#arr-grad)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
      </svg>
    </div>
  );
}

window.HowItWorks = HowItWorks;