const howStyles = {
  section: { background: 'white' },
  header: { textAlign: 'center', marginBottom: 'clamp(32px, 6vw, 56px)', maxWidth: 720, margin: '0 auto clamp(32px, 6vw, 56px)' },
  grid: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 'var(--grid-gap, 24px)', position: 'relative' },
  step: {
    background: 'var(--bg)', borderRadius: 18, padding: 'var(--card-pad, 24px)',
    border: '1px solid var(--silver-100)',
    position: 'relative',
  },
  stepNum: {
    position: 'absolute', top: -18, left: 24,
    width: 38, height: 38, borderRadius: 12,
    background: 'var(--navy-700)', color: 'white',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontWeight: 800, fontSize: 18, fontFamily: 'Archivo',
    boxShadow: '0 8px 20px rgba(30,58,111,.3)',
  },
  stepIcon: { marginTop: 12, marginBottom: 14 },
};

const steps = [
  {
    icon: <IconWhatsApp size={28} color="#25D366"/>,
    title: 'Fale com a gente',
    text: 'Chama no WhatsApp e conta o que está acontecendo. Sem pressa, sem termos difíceis.',
  },
  {
    icon: <IconClock size={28} color="#1E3A6F"/>,
    title: 'Orçamento grátis',
    text: 'Vamos até você (ou atendemos remoto) e explicamos o problema em palavras simples. Só começa se concordar.',
  },
  {
    icon: <IconHome size={28} color="#1E3A6F"/>,
    title: 'Arrumamos tudo',
    text: 'Consertamos com cuidado, na sua casa ou na oficina. Você acompanha cada passo.',
  },
  {
    icon: <IconShield size={28} color="#1E3A6F"/>,
    title: 'Suporte depois',
    text: 'Qualquer dúvida depois do serviço, estamos aqui. Seu computador sai com garantia.',
  },
];

function HowItWorks() {
  return (
    <section style={howStyles.section} id="como">
      <div className="container">
        <div style={howStyles.header}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>
            <span className="dot"></span>
            Simples do começo ao fim
          </div>
          <h2 className="t-h2" style={{ marginBottom: 14 }}>Como funciona</h2>
          <p className="t-lead">
            Sem complicação, sem surpresas. Da primeira conversa até o seu computador funcionando perfeitamente.
          </p>
        </div>
        <div className="how-grid" style={howStyles.grid}>
          {steps.map((s, i) => (
            <div key={i} style={howStyles.step}>
              <div style={howStyles.stepNum}>{i + 1}</div>
              <div style={howStyles.stepIcon}>{s.icon}</div>
              <div className="t-h4" style={{ color: 'var(--navy-800)', marginBottom: 8 }}>{s.title}</div>
              <div className="t-small">{s.text}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{``}</style>
    </section>
  );
}

Object.assign(window, { HowItWorks });