/* How it works — 7-step journey: Connect → Read → Explain → Estimate →
   Request → Compare → Book & track. Numbered grid, staggered reveal, red→green. */
function HowItWorks() {
  const { Badge } = window.RevvoDesignSystem_a89086;
  const { Reveal, Ic } = window;

  const steps = [
    { icon: 'PlugZap', title: 'Connect', desc: 'Plug in the ALEROQ OBD-II reader — thirty seconds, no tools, no appointment.', accent: 'red' },
    { icon: 'ScanLine', title: 'Read', desc: 'ALEROQ pulls every live fault code and sensor reading straight from your car.', accent: 'red' },
    { icon: 'Languages', title: 'Explain', desc: 'Each code is rewritten in plain English — what it means and how urgent it is.', accent: 'red' },
    { icon: 'Calculator', title: 'Estimate', desc: 'See a fair-market repair range for parts and labor before you talk to anyone.', accent: 'silver' },
    { icon: 'Send', title: 'Request', desc: 'Send a clear, complete repair request to vetted local shops in one tap.', accent: 'silver' },
    { icon: 'Scale', title: 'Compare', desc: 'Mechanics respond with real offers, scored on value — not just lowest price.', accent: 'green' },
    { icon: 'CalendarCheck', title: 'Book & track', desc: 'Pick your shop, book the work, and track the repair end to end.', accent: 'green' },
  ];
  const tone = { red: 'var(--accent)', silver: 'var(--silver-300)', green: 'var(--positive-bright)' };
  const toneBd = { red: 'rgba(255,46,63,0.4)', silver: 'var(--border)', green: 'rgba(22,214,128,0.45)' };

  return (
    <section id="how" style={{
      position: 'relative', padding: 'var(--space-section) clamp(20px, 5vw, 48px)',
      background: 'var(--surface-section)', borderTop: '1px solid var(--line-100)', borderBottom: '1px solid var(--line-100)',
    }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto' }}>
        <Reveal style={{ textAlign: 'center', marginBottom: 56 }}>
          <Badge variant="neutral" style={{ marginBottom: 20 }}>How it works</Badge>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--fs-display-2)',
            letterSpacing: 'var(--ls-snug)', color: 'var(--text-strong)', margin: '0 0 14px', lineHeight: 'var(--lh-snug)',
          }}>
            Seven steps. Total clarity.
          </h2>
          <p style={{ fontSize: 'var(--fs-lead)', color: 'var(--text-body)', maxWidth: 580, margin: '0 auto' }}>
            From a check-engine light to a booked repair &mdash; without a single call you didn&rsquo;t want to make.
          </p>
        </Reveal>

        <div className="hiw-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
          {steps.map((s, i) => (
            <Reveal key={s.title} delay={(i % 4) * 80} dir="up" style={{ height: '100%' }}>
              <div className="hiw-cell" style={{
                position: 'relative', height: '100%', boxSizing: 'border-box',
                background: 'var(--surface)', border: '1px solid var(--border)',
                borderRadius: 'var(--radius-md)', padding: '24px 22px 26px',
                transition: 'border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out)',
              }}>
                <div style={{
                  position: 'absolute', top: 18, right: 20, fontFamily: 'var(--font-mono)',
                  fontSize: 12, fontWeight: 600, color: 'var(--text-faint)', letterSpacing: '0.04em',
                }}>{String(i + 1).padStart(2, '0')}</div>
                <div style={{
                  width: 46, height: 46, display: 'flex', alignItems: 'center', justifyContent: 'center',
                  border: `1px solid ${toneBd[s.accent]}`, borderRadius: 'var(--radius-md)',
                  color: tone[s.accent], background: 'var(--inset)', marginBottom: 18,
                }}>
                  <Ic name={s.icon} size={20} color={tone[s.accent]} />
                </div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 18,
                  color: 'var(--text-strong)', margin: '0 0 8px', letterSpacing: '-0.01em' }}>{s.title}</h3>
                <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--text-muted)', margin: 0, textWrap: 'pretty' }}>{s.desc}</p>
              </div>
            </Reveal>
          ))}
          {/* trailing emphasis cell */}
          <Reveal delay={240} dir="up" style={{ height: '100%' }}>
            <div style={{
              height: '100%', boxSizing: 'border-box', display: 'flex', flexDirection: 'column', justifyContent: 'center',
              background: 'linear-gradient(135deg, rgba(22,214,128,0.12), rgba(22,214,128,0.03))',
              border: '1px solid rgba(22,214,128,0.4)', borderRadius: 'var(--radius-md)', padding: '24px 22px',
              boxShadow: 'var(--glow-green-sm, 0 0 24px rgba(22,214,128,0.16))',
            }}>
              <Ic name="CircleCheckBig" size={24} color="var(--positive-bright)" />
              <p style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 17, color: 'var(--text-strong)',
                margin: '14px 0 0', lineHeight: 1.35 }}>You stay in control the whole way.</p>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

window.HowItWorks = HowItWorks;