/* Service modes — Compare Mode vs. Priority Mode, side by side. */
function ServiceModes() {
  const { Badge } = window.RevvoDesignSystem_a89086;
  const { Reveal, Ic } = window;

  const modes = [
    { key: 'compare', icon: 'Scale', tone: 'green', name: 'Compare Mode', tag: 'Best value',
      desc: 'Post your repair and let vetted shops respond. Compare offers on price, rating, and value before you commit.',
      points: ['Multiple offers, side by side', 'Scored on six value factors', 'Best for non-urgent repairs'] },
    { key: 'priority', icon: 'Zap', tone: 'red', name: 'Priority Mode', tag: 'Fastest help',
      desc: 'Need it handled now? Surface the closest available shops that can take you today and book in minutes.',
      points: ['Soonest availability first', 'Closest qualified shops', 'Best for urgent or unsafe faults'] },
  ];
  const toneCol = { green: 'var(--positive-bright)', red: 'var(--accent)' };
  const toneBd = { green: 'rgba(22,214,128,0.45)', red: 'rgba(255,46,63,0.42)' };
  const toneFill = { green: 'var(--green-tint)', red: 'var(--red-tint)' };

  return (
    <section 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 }}>Two ways to get it done</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)' }}>
            Save money, or save time.
          </h2>
          <p style={{ fontSize: 'var(--fs-lead)', color: 'var(--text-body)', maxWidth: 540, margin: '0 auto' }}>
            Choose how ALEROQ finds your mechanic &mdash; whichever the moment calls for.
          </p>
        </Reveal>

        <div className="modes-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 18 }}>
          {modes.map((m, i) => (
            <Reveal key={m.key} delay={i * 120} dir={i === 0 ? 'left' : 'right'} style={{ height: '100%' }}>
              <div style={{
                height: '100%', boxSizing: 'border-box', background: 'var(--surface)',
                border: `1px solid ${toneBd[m.tone]}`, 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: toneFill[m.tone], border: `1px solid ${toneBd[m.tone]}`, color: toneCol[m.tone] }}>
                    <Ic name={m.icon} size={24} color={toneCol[m.tone]} />
                  </div>
                  <span style={{ padding: '5px 12px', borderRadius: 'var(--radius-pill)', background: toneFill[m.tone],
                    color: toneCol[m.tone], fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{m.tag}</span>
                </div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 24, color: 'var(--text-strong)', margin: '0 0 10px', letterSpacing: '-0.01em' }}>{m.name}</h3>
                <p style={{ fontSize: 15.5, lineHeight: 1.6, color: 'var(--text-body)', margin: '0 0 22px', textWrap: 'pretty' }}>{m.desc}</p>
                <div style={{ display: 'grid', gap: 11 }}>
                  {m.points.map((pt) => (
                    <div key={pt} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14.5, color: 'var(--text-body)' }}>
                      <Ic name="Check" size={16} color={toneCol[m.tone]} /> {pt}
                    </div>
                  ))}
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}
window.ServiceModes = ServiceModes;