/* IGI Drive + IGI Vitality Drive — product detail pages */

function IGIDrive({ navigate }) {
  const features = [
    { i: I.MapPin, t: 'GPS tracking & live data', d: 'Monitor your vehicle\'s exact location in real time, 24/7.' },
    { i: I.TrendingUp, t: 'Driving behaviour monitoring', d: 'Insights into driving habits to improve safety and efficiency.' },
    { i: I.Building, t: 'Fleet efficiency & maintenance', d: 'Detailed performance reports and maintenance alerts for corporate fleets.' },
    { i: I.Sparkles, t: 'Cold chain monitoring', d: 'Ensure temperature-sensitive goods are safely transported.' },
    { i: I.ShieldCheck, t: 'Asset & stolen vehicle recovery', d: 'Track valuable assets; recovery assistance if a vehicle is stolen.' },
    { i: I.FileText, t: 'Comprehensive dashboards', d: 'Access detailed reports via user-friendly dashboards.' },
  ];
  return (
    <>
      <section className="page-hero">
        <div className="container">
          <span className="badge badge-blue"><I.Zap size={12} /> IGI Drive · PTA-licensed</span>
          <h1 className="h-display" style={{ marginTop: 12, maxWidth: 760 }}>
            Vehicle tracking and<br />
            <span className="serif" style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--blue-700)' }}>fleet management</span> — built in.
          </h1>
          <p style={{ marginTop: 16, fontSize: 17, color: 'var(--ink-700)', maxWidth: 620 }}>
            IGI Drive is a subsidiary of IGI General Insurance, licensed by the PTA to provide vehicle tracking and fleet management services across Pakistan. Bundle it with any comprehensive motor policy.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 24, flexWrap: 'wrap' }}>
            <button className="btn btn-accent" onClick={() => navigate('quote')}>Add to my policy <I.ArrowRight size={14} /></button>
            <a href="tel:+92211113083​08" className="btn btn-ghost"><I.Phone size={14} /> 021-111-308-308</a>
          </div>
        </div>
      </section>

      <section>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'var(--ink-200)', borderRadius: 16, overflow: 'hidden', border: '1px solid var(--ink-200)' }}>
            {features.map(f => (
              <div key={f.t} style={{ padding: 32, background: 'white' }}>
                <span style={{ width: 44, height: 44, borderRadius: 10, background: 'var(--blue-50)', color: 'var(--blue-700)', display: 'grid', placeItems: 'center' }}>
                  <f.i size={22} />
                </span>
                <div style={{ fontSize: 17, fontWeight: 700, marginTop: 14 }}>{f.t}</div>
                <p style={{ fontSize: 14, color: 'var(--ink-500)', lineHeight: 1.55, marginTop: 8 }}>{f.d}</p>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 64, padding: '48px 40px', background: 'var(--navy-50)', borderRadius: 20 }}>
            <div className="eyebrow">How it works</div>
            <h2 className="h-1" style={{ marginTop: 8, marginBottom: 32 }}>From sign-up to peace of mind.</h2>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
              {[
                ['01', 'Choose IGI Vehicle Insurance', 'Ask for IGI Drive tracking to be included with your comprehensive plan.'],
                ['02', 'Complete enrolment', 'Our team guides you through enrolment and installs the GPS tracker.'],
                ['03', 'Start tracking', 'Monitor via the IGI Drive mobile app or Fleet Management portal.'],
                ['04', 'Enjoy peace of mind', 'Round-the-clock vehicle monitoring with industry-leading features.'],
              ].map(([n, t, d]) => (
                <div key={n}>
                  <div className="serif" style={{ fontSize: 24, color: 'var(--blue-700)' }}>{n}</div>
                  <div style={{ fontSize: 16, fontWeight: 700, marginTop: 8 }}>{t}</div>
                  <p style={{ fontSize: 13, color: 'var(--ink-500)', marginTop: 6, lineHeight: 1.55 }}>{d}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

function IGIVitalityDrive({ navigate }) {
  return (
    <>
      <section className="page-hero">
        <div className="container">
          <span className="badge badge-blue"><I.Sparkles size={12} /> IGI Vitality Drive · with Discovery Insure</span>
          <h1 className="h-display" style={{ marginTop: 12, maxWidth: 800 }}>
            Drive safely.<br />
            <span className="serif" style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--blue-700)' }}>Get rewarded.</span>
          </h1>
          <p style={{ marginTop: 16, fontSize: 17, color: 'var(--ink-700)', maxWidth: 620 }}>
            A telematics programme that scores your driving out of 100 and pays you back. Earn fuel cashback, ride-hailing discounts and maintenance perks — every month you drive well.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 24, flexWrap: 'wrap' }}>
            <button className="btn btn-accent" onClick={() => navigate('quote')}>Get started <I.ArrowRight size={14} /></button>
            <button className="btn btn-ghost">Download the app <I.Download size={14} /></button>
          </div>
        </div>
      </section>

      <section>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center', marginBottom: 64 }} className="vd-grid">
            <div>
              <div className="eyebrow">How it works</div>
              <h2 className="h-1" style={{ marginTop: 8 }}>Your Driver Behaviour Score, monthly.</h2>
              <p style={{ marginTop: 16, fontSize: 16, color: 'var(--ink-700)', lineHeight: 1.7 }}>
                Three components capture how you drive: a Vitality Drive Sensor (VDS) on your windscreen, the Discovery Insure mobile app using GPS and accelerometer, and professionally-installed advanced telematics. Each month you receive a score out of 100 — the higher, the better.
              </p>
              <div style={{ marginTop: 24, display: 'flex', flexDirection: 'column', gap: 12 }}>
                {[
                  ['Vitality Drive Sensor (VDS)', 'Wireless windscreen device, paired via Bluetooth.'],
                  ['Discovery Insure mobile app', 'GPS + accelerometer integration on your phone.'],
                  ['Advanced telematics', 'Professionally-installed for richer tracking and analytics.'],
                ].map(([t, d]) => (
                  <div key={t} style={{ display: 'flex', gap: 12 }}>
                    <I.Check size={18} style={{ color: 'var(--success)', flexShrink: 0, marginTop: 3 }} />
                    <div>
                      <div style={{ fontWeight: 700 }}>{t}</div>
                      <div style={{ fontSize: 13, color: 'var(--ink-500)' }}>{d}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div className="card" style={{ padding: 40, background: 'var(--navy-900)', color: 'white', textAlign: 'center', border: 0 }}>
              <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.6)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600 }}>Your DBS this month</div>
              <div className="serif" style={{ fontSize: 120, lineHeight: 1, color: '#93c5fd', marginTop: 16 }}>87</div>
              <div style={{ fontSize: 14, marginTop: 8, color: 'rgba(255,255,255,0.7)' }}>out of 100 · "Excellent" tier</div>
              <div style={{ display: 'flex', justifyContent: 'space-around', marginTop: 32, paddingTop: 24, borderTop: '1px solid rgba(255,255,255,0.1)' }}>
                {[['Speed', 92], ['Braking', 84], ['Cornering', 88], ['Phone use', 95]].map(([l, v]) => (
                  <div key={l}>
                    <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', fontWeight: 600 }}>{l}</div>
                    <div style={{ fontSize: 18, fontWeight: 700, marginTop: 4 }}>{v}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div className="eyebrow">Rewards</div>
          <h2 className="h-1" style={{ marginTop: 8, marginBottom: 32 }}>Earn back, every month.</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }} className="rewards-grid">
            {[
              { i: I.Zap, l: 'Up to 50%', s: 'fuel cashback monthly for safe drivers' },
              { i: I.Car, l: '20% off', s: 'on vehicle maintenance & servicing' },
              { i: I.MapPin, l: '25% off', s: 'on Uber rides every month' },
              { i: I.Award, l: '20% off', s: 'on Tiger Wheel & Tyre purchases' },
            ].map(r => (
              <div key={r.s} className="card" style={{ padding: 24 }}>
                <span style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--blue-50)', color: 'var(--blue-700)', display: 'grid', placeItems: 'center' }}>
                  <r.i size={20} />
                </span>
                <div className="serif" style={{ fontSize: 28, color: 'var(--navy-800)', marginTop: 14 }}>{r.l}</div>
                <p style={{ fontSize: 13, color: 'var(--ink-500)', marginTop: 6, lineHeight: 1.5 }}>{r.s}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
      <style>{`@media (max-width: 920px) { .vd-grid, .rewards-grid { grid-template-columns: 1fr !important; } }`}</style>
    </>
  );
}

Object.assign(window, { IGIDrive, IGIVitalityDrive });