// "Cómo funciona" responsive
function HowItWorks() {
  const { isMobile, isTablet } = useBreakpoint();

  const cols = isMobile ? 'repeat(1, 1fr)' : isTablet ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)';

  const steps = [
    { n: '01', title: 'Registro de Vehículos', body: 'Los residentes registran sus vehículos en el sistema por número de placa. Una sola vez, y listo para siempre.', icon: 'plate' },
    { n: '02', title: 'Acceso Automático',     body: 'Al llegar a la caseta, la plumilla se abre automáticamente al detectar la placa de un residente registrado.', icon: 'gate' },
    { n: '03', title: 'Gestión de Visitas',    body: 'Los residentes pueden agregar visitas registrando placas para accesos temporales por WhatsApp.', icon: 'whatsapp' },
    { n: '04', title: 'Historial Detallado',   body: 'Cada acceso queda registrado, creando un historial completo de cada entrada a la colonia, residencia o privada.', icon: 'history' },
  ];

  return (
    <Section id="como" bg={TOKENS.bgAlt}>
      <div style={{ marginBottom: isMobile ? 40 : 64 }}>
        <Eyebrow>¿Cómo funciona?</Eyebrow>
        <h2 style={{
          fontSize: isMobile ? 34 : isTablet ? 44 : 56, lineHeight: 1.05,
          letterSpacing: '-0.035em', fontWeight: 600, margin: '16px 0 16px',
          color: TOKENS.ink, textWrap: 'balance',
        }}>
          De llegar a casa a estar dentro,{' '}
          <span style={{ fontFamily: '"Fraunces", serif', fontStyle: 'italic', fontWeight: 400 }}>
            sin detenerse.
          </span>
        </h2>
        <p style={{ fontSize: isMobile ? 16 : 18, lineHeight: 1.55, color: TOKENS.inkSoft, maxWidth: 600 }}>
          Reconocimiento automático de placas (LPR) para colonias, privadas y
          residencias. La pluma se abre al detectar un vehículo registrado.
          Para visitantes, registro rápido por WhatsApp.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: cols, gap: 20 }}>
        {steps.map((s, i) => (
          <div key={i} style={{
            padding: isMobile ? '24px 20px' : 28,
            background: TOKENS.bg, borderRadius: 16,
            border: `1px solid ${TOKENS.ruleSoft}`,
            display: 'flex', flexDirection: isMobile ? 'row' : 'column',
            gap: isMobile ? 16 : 0,
            alignItems: isMobile ? 'flex-start' : 'stretch',
          }}>
            <StepIcon kind={s.icon} compact={isMobile} />
            <div style={{ flex: 1 }}>
              <div style={{
                fontFamily: '"JetBrains Mono", monospace',
                fontSize: 11, color: TOKENS.accent, fontWeight: 600,
                marginTop: isMobile ? 0 : 20, letterSpacing: '0.1em',
              }}>{s.n}</div>
              <h3 style={{
                fontSize: isMobile ? 17 : 20, fontWeight: 600, color: TOKENS.ink,
                margin: '6px 0 8px', letterSpacing: '-0.02em',
              }}>{s.title}</h3>
              <p style={{ fontSize: 14, lineHeight: 1.55, color: TOKENS.inkSoft, margin: 0 }}>
                {s.body}
              </p>
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}

function StepIcon({ kind, compact }) {
  const size = compact ? 44 : 56;
  const box = {
    width: size, height: size, borderRadius: compact ? 10 : 12,
    background: TOKENS.accentSoft, display: 'grid', placeItems: 'center',
    flexShrink: 0,
  };
  if (kind === 'plate') return (
    <div style={box}>
      <div style={{
        width: 32, height: 18, background: '#fff', border: `1.5px solid ${TOKENS.accent}`,
        borderRadius: 3, display: 'grid', placeItems: 'center',
        fontFamily: '"JetBrains Mono", monospace', fontSize: 7, fontWeight: 700, color: TOKENS.ink,
      }}>ABC-204</div>
    </div>
  );
  if (kind === 'gate') return (
    <div style={box}>
      <div style={{ position: 'relative', width: 36, height: 28 }}>
        <div style={{ position: 'absolute', left: 3, bottom: 0, width: 4, height: 24, background: TOKENS.accent, borderRadius: '1px 1px 0 0' }}></div>
        <div style={{ position: 'absolute', left: 7, bottom: 18, width: 28, height: 4, background: `repeating-linear-gradient(90deg, ${TOKENS.accent} 0 5px, #fff 5px 9px)`, transformOrigin: 'left center', transform: 'rotate(-28deg)', borderRadius: 1 }}></div>
      </div>
    </div>
  );
  if (kind === 'whatsapp') return (
    <div style={box}><WhatsAppGlyph size={compact ? 22 : 28} color={TOKENS.accent} /></div>
  );
  if (kind === 'history') return (
    <div style={box}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4, width: 24 }}>
        {[1, 0.7, 0.85].map((w, i) => (
          <div key={i} style={{ height: 3, width: `${w * 100}%`, background: TOKENS.accent, borderRadius: 2, opacity: 0.4 + i * 0.2 }}></div>
        ))}
      </div>
    </div>
  );
  return null;
}

window.HowItWorks = HowItWorks;