/* Phoenix launch — two paths: driver beta + mechanic apply. */
function PhoenixLaunch() {
  const { Button } = window.RevvoDesignSystem_a89086;
  const { Reveal, Ic } = window;

  const Panel = ({ icon, eyebrow, title, desc, cta, ctaVariant, points, onClick }) => (
    <div style={{ height: '100%', boxSizing: 'border-box', background: 'var(--surface)', border: '1px solid var(--border)',
      borderRadius: 'var(--radius-lg)', padding: 'clamp(30px, 4vw, 44px)', display: 'flex', flexDirection: 'column' }}>
      <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(--positive-bright)', marginBottom: 22 }}>
        <Ic name={icon} size={24} color="var(--positive-bright)" />
      </div>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: 10 }}>{eyebrow}</div>
      <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(22px, 2.8vw, 28px)', color: 'var(--text-strong)', margin: '0 0 12px', letterSpacing: '-0.01em' }}>{title}</h3>
      <p style={{ fontSize: 15.5, lineHeight: 1.6, color: 'var(--text-body)', margin: '0 0 22px', textWrap: 'pretty' }}>{desc}</p>
      <div style={{ display: 'grid', gap: 10, marginBottom: 28 }}>
        {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="var(--positive-bright)" /> {pt}
          </div>
        ))}
      </div>
      <div style={{ marginTop: 'auto' }}>
        <Button variant={ctaVariant} size="lg" onClick={onClick}>{cta}</Button>
      </div>
    </div>
  );

  return (
    <section id="launch" 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 }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 18,
            fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--positive-bright)' }}>
            <Ic name="MapPin" size={14} color="var(--positive-bright)" /> Launching first in Phoenix
          </span>
          <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)' }}>
            Be part of the Phoenix beta.
          </h2>
          <p style={{ fontSize: 'var(--fs-lead)', color: 'var(--text-body)', maxWidth: 560, margin: '0 auto' }}>
            We&rsquo;re starting in one city to get it right. Join from whichever side of the wrench you&rsquo;re on.
          </p>
        </Reveal>

        <div className="launch-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 18 }}>
          <Reveal dir="left" style={{ height: '100%' }}>
            <Panel icon="UserRound" eyebrow="Drivers" title="Join the driver beta"
              desc="Get early access, founding-member pricing, and a direct line to shape what ALEROQ becomes."
              points={['Free during the beta', 'Founding-member pricing locked in', 'Help decide what we build next']}
              cta="Request beta access" ctaVariant="positive" onClick={() => window.aleroqScrollTo('waitlist')} />
          </Reveal>
          <Reveal dir="right" style={{ height: '100%' }}>
            <Panel icon="Wrench" eyebrow="Mechanics" title="Apply as a partner shop"
              desc="Independent Phoenix shops that value transparency can apply to receive clear, ready-to-quote repair requests."
              points={['Better-defined repair requests', 'Compete on quality and value', 'No listing fees during the beta']}
              cta="Apply as a shop" ctaVariant="secondary" onClick={() => window.aleroqScrollTo('waitlist')} />
          </Reveal>
        </div>
      </div>
    </section>
  );
}
window.PhoenixLaunch = PhoenixLaunch;