/* Homepage — How it works (4 cards with radar graphic), placed after the platform section */
function HowItWorks() {
  const vw = useVW();
  const cols = vw <= 620 ? '1fr' : vw <= 980 ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)';
  const steps = [
    ['user-plus', 'Sign up', 'Create your account in minutes — no commitment to see live prices.'],
    ['ship', 'Set up a fleet', 'Add your vessels, suppliers, and presets so every order is one click.'],
    ['lock', 'Fix', 'Lock a live price the moment it’s right and confirm the full stem.'],
    ['wallet', 'Pay later', 'Draw on your credit line and settle on Net 30, 60, or 90.'],
  ];
  return (
    <section id="how" style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '112px 28px' }}>
      <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 56px' }}>
        <span style={{ display: 'inline-block', whiteSpace: 'nowrap', fontSize: 'var(--text-2xs)', fontWeight: 600, letterSpacing: 'var(--tracking-eyebrow)', textTransform: 'uppercase', color: 'var(--blue-600)', background: 'var(--accent-subtle)', border: '1px solid var(--accent-border)', borderRadius: 'var(--radius-pill)', padding: '5px 14px', marginBottom: 18 }}>How it works</span>
        <h2 style={{ fontSize: 'var(--text-h1)', fontWeight: 600, letterSpacing: 'var(--tracking-tight)', lineHeight: 1.08, marginBottom: 14 }}>
          How <span style={{ color: 'var(--blue-500)' }}>bunkerme</span> works
        </h2>
        <p style={{ fontSize: 'var(--text-lg)', color: 'var(--text-secondary)', lineHeight: 'var(--leading-normal)' }}>From sign-up to settled — a simple, fast flow that gets your fleet fuelled in four easy steps.</p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: cols, gap: 22 }}>
        {steps.map(([icon, t, d], i) => (
          <div key={t} className="bm-howcard" style={{ background: 'var(--surface-card)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-2xl)', overflow: 'hidden', boxShadow: 'var(--shadow-xs)', transition: 'box-shadow 220ms var(--ease-out), transform 220ms var(--ease-out)' }}>
            <div style={{ position: 'relative', height: 188, display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden', background: 'radial-gradient(120px 120px at 50% 46%, var(--accent-subtle), transparent 70%)' }}>
              {[176, 132, 92].map((s) => (
                <span key={s} style={{ position: 'absolute', width: s, height: s, borderRadius: '50%', border: '1px solid var(--border-subtle)' }} />
              ))}
              <span style={{ position: 'relative', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 58, height: 58, borderRadius: '50%', background: 'linear-gradient(150deg, var(--blue-400), var(--blue-600))', boxShadow: '0 10px 22px rgba(12,41,241,0.30), 0 1px 0 rgba(255,255,255,0.25) inset' }}>
                <Icon name={icon} size={24} color="#fff" />
              </span>
            </div>
            <div style={{ padding: '24px 24px 28px', borderTop: '1px solid var(--border-subtle)' }}>
              <div className="tnum" style={{ fontSize: 'var(--text-sm)', fontWeight: 600, color: 'var(--blue-600)', marginBottom: 8 }}>Step {i + 1}</div>
              <h3 style={{ fontSize: 'var(--text-h4)', fontWeight: 600, letterSpacing: 'var(--tracking-tight)', marginBottom: 8 }}>{t}</h3>
              <p style={{ fontSize: 'var(--text-sm)', color: 'var(--text-secondary)', lineHeight: 'var(--leading-normal)' }}>{d}</p>
            </div>
          </div>
        ))}
      </div>
      <style>{`
        .bm-howcard:hover{ box-shadow: var(--shadow-md); transform: translateY(-3px); }
      `}</style>
    </section>
  );
}

Object.assign(window, { HowItWorks });