/* B2B — fleets and insurers. ALEROQ as the data layer: per-vehicle health for
   fleets, pre-incident SOS data + telematics for insurers. */
function B2B() {
  const { Badge, Button } = window.RevvoDesignSystem_a89086;
  const { Reveal, Ic } = window;

  const cards = [
    {
      key: 'fleet', icon: 'Truck', eyebrow: 'Fleets', title: 'Every vehicle, one dashboard',
      desc: 'Real-time health across your whole fleet, with predictive alerts that catch downtime before it costs you a route.',
      price: '$29\u2013$49', unit: 'per vehicle / month',
      points: [
        ['Activity', 'Live health on every vehicle'],
        ['CalendarClock', 'Predictive downtime alerts'],
        ['FileStack', 'Centralized service history'],
        ['Route', 'Fewer breakdowns, more uptime'],
      ],
      cta: 'Talk to fleet sales', variant: 'positive',
    },
    {
      key: 'insurer', icon: 'ShieldCheck', eyebrow: 'Insurers', title: 'Data the moment it matters',
      desc: 'License pre-incident SOS data and driving telematics through one API — for faster, better-informed claims and fairer pricing.',
      price: '$6\u2013$12', unit: 'per vehicle / month',
      points: [
        ['Siren', 'Pre-incident SOS data API'],
        ['Gauge', 'Driving-behavior telematics'],
        ['ClipboardCheck', 'Faster, informed claims'],
        ['Plug', 'One clean integration'],
      ],
      cta: 'Partner with us', variant: 'secondary',
    },
  ];

  return (
    <section id="business" style={{ position: 'relative', padding: 'var(--space-section) clamp(20px, 5vw, 48px)' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto' }}>
        <Reveal style={{ textAlign: 'center', marginBottom: 52 }}>
          <Badge variant="neutral" style={{ marginBottom: 20 }}>For business</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)' }}>
            The data layer for fleets and insurers.
          </h2>
          <p style={{ fontSize: 'var(--fs-lead)', color: 'var(--text-body)', maxWidth: 580, margin: '0 auto' }}>
            The same diagnostics that help drivers scale into a clean, per-vehicle feed for the businesses that move them.
          </p>
        </Reveal>

        <div className="b2b-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 18 }}>
          {cards.map((c, i) => (
            <Reveal key={c.key} delay={i * 120} dir={i === 0 ? 'left' : 'right'} style={{ height: '100%' }}>
              <div style={{ height: '100%', boxSizing: 'border-box', display: 'flex', flexDirection: 'column',
                background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--radius-lg)', padding: 'clamp(28px, 4vw, 40px)' }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 22 }}>
                  <div style={{ width: 52, height: 52, display: 'flex', alignItems: 'center', justifyContent: 'center',
                    borderRadius: 'var(--radius-md)', background: 'var(--inset)', border: '1px solid var(--border)', color: 'var(--silver-200)' }}>
                    <Ic name={c.icon} size={24} color="var(--silver-200)" />
                  </div>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{c.eyebrow}</span>
                </div>

                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(21px, 2.6vw, 26px)', color: 'var(--text-strong)', margin: '0 0 11px', letterSpacing: '-0.01em' }}>{c.title}</h3>
                <p style={{ fontSize: 15.5, lineHeight: 1.6, color: 'var(--text-body)', margin: '0 0 22px', textWrap: 'pretty' }}>{c.desc}</p>

                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, padding: '14px 16px', marginBottom: 22,
                  borderRadius: 'var(--radius-md)', background: 'var(--inset)', border: '1px solid var(--line-100)' }}>
                  <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 26, color: 'var(--text-strong)' }}>{c.price}</span>
                  <span style={{ fontSize: 13.5, color: 'var(--text-muted)' }}>{c.unit}</span>
                </div>

                <div style={{ display: 'grid', gap: 12, marginBottom: 28 }}>
                  {c.points.map(([icon, label]) => (
                    <div key={label} style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 14.5, color: 'var(--text-body)' }}>
                      <Ic name={icon} size={17} color="var(--silver-300)" /> {label}
                    </div>
                  ))}
                </div>

                <div style={{ marginTop: 'auto' }}>
                  <Button variant={c.variant} size="lg" onClick={() => window.aleroqScrollTo('waitlist')}>{c.cta}</Button>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}
window.B2B = B2B;