/* Better for drivers & mechanics — two-sided fairness panels. */
function TwoSided() {
  const { Badge } = window.RevvoDesignSystem_a89086;
  const { Reveal, Ic } = window;

  const sides = [
    { key: 'drivers', icon: 'UserRound', tone: 'green', name: 'For drivers',
      points: [
        ['ShieldCheck', 'Walk in informed', 'Know what\u2019s wrong and the fair price before you arrive.'],
        ['Scale', 'Real choice', 'Compare vetted offers instead of taking the first quote.'],
        ['HandCoins', 'Stop overpaying', 'Pay for the repair you need \u2014 nothing you don\u2019t.'],
      ] },
    { key: 'mechanics', icon: 'Wrench', tone: 'silver', name: 'For mechanics',
      points: [
        ['FileCheck', 'Better requests', 'Clear, complete diagnostics mean less guesswork and fewer call-backs.'],
        ['Trophy', 'Win on quality', 'Compete on rating and value \u2014 not just the lowest number.'],
        ['CalendarCheck', 'Fill your schedule', 'Connect with nearby drivers who are ready to book.'],
      ] },
  ];
  const toneCol = { green: 'var(--positive-bright)', silver: 'var(--silver-200)' };
  const toneBd = { green: 'rgba(22,214,128,0.4)', silver: 'var(--border)' };

  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 }}>A fairer market</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)' }}>
            Better for both sides of the wrench.
          </h2>
          <p style={{ fontSize: 'var(--fs-lead)', color: 'var(--text-body)', maxWidth: 560, margin: '0 auto' }}>
            Transparency isn&rsquo;t a threat to good mechanics &mdash; it&rsquo;s how they win. ALEROQ rewards honest, quality work.
          </p>
        </Reveal>

        <div className="two-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 18 }}>
          {sides.map((s, i) => (
            <Reveal key={s.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[s.tone]}`, borderRadius: 'var(--radius-lg)', padding: 'clamp(28px, 4vw, 40px)' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 13, marginBottom: 26 }}>
                  <div style={{ width: 48, height: 48, display: 'flex', alignItems: 'center', justifyContent: 'center',
                    borderRadius: 'var(--radius-md)', background: 'var(--inset)', border: `1px solid ${toneBd[s.tone]}`, color: toneCol[s.tone] }}>
                    <Ic name={s.icon} size={22} color={toneCol[s.tone]} />
                  </div>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, color: 'var(--text-strong)', margin: 0, letterSpacing: '-0.01em' }}>{s.name}</h3>
                </div>
                <div style={{ display: 'grid', gap: 18 }}>
                  {s.points.map(([icon, t, d]) => (
                    <div key={t} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                      <Ic name={icon} size={20} color={toneCol[s.tone]} />
                      <div>
                        <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--text-strong)', marginBottom: 4 }}>{t}</div>
                        <div style={{ fontSize: 14.5, lineHeight: 1.55, color: 'var(--text-muted)', textWrap: 'pretty' }}>{d}</div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}
window.TwoSided = TwoSided;