// How it works — 4 steps, more visual and connected
function HowItWorks() {
  const steps = [
    {
      n: '01',
      title: 'Busca',
      desc: 'Categoría + ciudad. Ej: taxidermista Bilbao.',
      icon: <IconSearch size={22} />,
      visual: <VBusca />,
      meta: '⏱ 2 seg',
    },
    {
      n: '02',
      title: 'Analiza',
      desc: 'Google Maps + SERP + scoring SEO de cada web.',
      icon: <IconTarget size={22} />,
      visual: <VAnaliza />,
      meta: '🤖 IA + APIs',
    },
    {
      n: '03',
      title: 'Genera web',
      desc: 'Web nueva con su logo, fotos y datos reales.',
      icon: <IconWand size={22} />,
      visual: <VGenera />,
      meta: '30 seg / web',
    },
    {
      n: '04',
      title: 'Vende',
      desc: 'Email + WhatsApp + link a tu calendario.',
      icon: <IconCalendar size={22} />,
      visual: <VVende />,
      meta: 'Cita reservada',
    },
  ];

  return (
    <section id="como-funciona" style={{ padding: 'var(--pl-section-py) 0' }}>
      <div className="pl-container">
        <div className="pl-section-head">
          <span className="pl-eyebrow">Cómo funciona</span>
          <h2 className="pl-display">De búsqueda a venta <span className="pl-accent-grad">en 4 pasos</span></h2>
          <p>Cada paso lo hace la herramienta. Tú solo decides la categoría y atiendes las citas.</p>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20, position: 'relative',
        }}>
          {/* connector */}
          <div style={{
            position: 'absolute', top: 92, left: '12.5%', right: '12.5%',
            height: 2, background: 'repeating-linear-gradient(90deg, var(--pl-accent) 0 6px, transparent 6px 14px)',
            opacity: .35, zIndex: 0,
          }} />
          {steps.map((s, i) => (
            <div key={i} style={{
              background: 'var(--pl-surface)',
              border: '1px solid var(--pl-border)',
              borderRadius: 20,
              padding: 20,
              position: 'relative', zIndex: 1,
              boxShadow: 'var(--pl-shadow-sm)',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
                <span style={{
                  fontFamily: 'var(--pl-font-mono)', fontSize: 11.5, fontWeight: 700,
                  letterSpacing: '.06em', color: 'var(--pl-accent)',
                  background: 'rgba(124,58,237,.10)',
                  padding: '3px 9px', borderRadius: 6,
                }}>{s.n}</span>
                <span style={{ color: 'var(--pl-accent-deep)' }}>{s.icon}</span>
              </div>
              <div style={{
                height: 90, borderRadius: 12,
                background: 'linear-gradient(180deg, #f7f5ff 0%, #fff 100%)',
                border: '1px solid var(--pl-border)',
                marginBottom: 14,
                overflow: 'hidden',
              }}>
                {s.visual}
              </div>
              <h3 style={{ margin: '0 0 6px', fontFamily: 'var(--pl-font-display)', fontWeight: 700, fontSize: 22, letterSpacing: '-.01em' }}>{s.title}</h3>
              <p style={{ margin: '0 0 10px', fontSize: 14, color: 'var(--pl-ink-3)' }}>{s.desc}</p>
              <span style={{ fontSize: 11.5, fontWeight: 700, color: 'var(--pl-accent-deep)' }}>{s.meta}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// step visuals
function VBusca() {
  return (
    <div style={{ padding: 12, height: '100%', display: 'flex', alignItems: 'center' }}>
      <div style={{
        flex: 1, background: '#fff', border: '1px solid var(--pl-border)',
        borderRadius: 8, padding: '8px 10px', display: 'flex', alignItems: 'center', gap: 8,
        fontFamily: 'var(--pl-font-mono)', fontSize: 12,
      }}>
        <IconSearch size={12} color="var(--pl-accent)" />
        <span>taxidermista Bilbao</span>
        <span style={{ marginLeft: 'auto', fontSize: 9, fontWeight: 700, padding: '2px 6px', background: 'var(--pl-accent)', color: '#fff', borderRadius: 4 }}>↵</span>
      </div>
    </div>
  );
}
function VAnaliza() {
  const rows = [{ n: 'Lead 1', s: 22, c: '#dc2626' }, { n: 'Lead 2', s: 14, c: '#dc2626' }, { n: 'Lead 3', s: 38, c: '#ea580c' }];
  return (
    <div style={{ padding: '10px 12px', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 5 }}>
      {rows.map((r, i) => (
        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 10.5 }}>
          <span style={{ flex: 1, color: 'var(--pl-ink-3)' }}>{r.n}</span>
          <span style={{
            flex: 2, height: 4, background: 'rgba(0,0,0,.06)', borderRadius: 999, overflow: 'hidden',
          }}>
            <span style={{ display: 'block', width: r.s + '%', height: '100%', background: r.c }} />
          </span>
          <span style={{ fontFamily: 'var(--pl-font-mono)', fontWeight: 700, color: r.c, minWidth: 22, textAlign: 'right' }}>{r.s}</span>
        </div>
      ))}
    </div>
  );
}
function VGenera() {
  return (
    <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
      {/* fake mini website */}
      <div style={{
        width: '72%', height: 64, borderRadius: 6, background: '#fff',
        border: '1px solid var(--pl-border)',
        boxShadow: '0 4px 12px -4px rgba(60,24,140,.15)',
        overflow: 'hidden',
      }}>
        <div style={{ height: 28, background: 'linear-gradient(120deg, var(--pl-accent-ink), var(--pl-accent-deep))' }} />
        <div style={{ padding: 6, display: 'flex', flexDirection: 'column', gap: 3 }}>
          <span style={{ height: 4, width: '60%', borderRadius: 99, background: 'var(--pl-ink-mute)', opacity: .4 }} />
          <span style={{ height: 4, width: '85%', borderRadius: 99, background: 'var(--pl-ink-mute)', opacity: .2 }} />
          <span style={{ height: 4, width: '40%', borderRadius: 99, background: 'var(--pl-accent)' }} />
        </div>
      </div>
      <span style={{
        position: 'absolute', top: 6, right: 10,
        fontSize: 9.5, fontWeight: 700, color: '#fff',
        background: 'var(--pl-success)', padding: '2px 6px', borderRadius: 4,
      }}>NUEVA</span>
    </div>
  );
}
function VVende() {
  return (
    <div style={{ padding: 10, height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 6 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11 }}>
        <IconMail size={12} color="var(--pl-accent)" /> <b style={{ fontFamily: 'var(--pl-font-display)' }}>Hola Juan,</b>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11 }}>
        <IconCalendar size={12} color="var(--pl-success)" />
        <span style={{ color: 'var(--pl-success)', fontWeight: 700 }}>✓ Cita</span>
        <span style={{ color: 'var(--pl-ink-mute)' }}>jue 18:00</span>
      </div>
    </div>
  );
}

window.HowItWorks = HowItWorks;