/* IGI — Product Detail (Motor) */

function Motor({ navigate }) {
  const [tab, setTab] = React.useState('coverage');
  const tabs = [
    { id: 'coverage', label: 'What\'s covered' },
    { id: 'plans', label: 'Plans & pricing' },
    { id: 'addons', label: 'Add-ons' },
    { id: 'claims', label: 'How claims work' },
    { id: 'docs', label: 'Documents' },
  ];

  return (
    <>
      <section className="page-hero" style={{ paddingTop: 48, paddingBottom: 40 }}>
        <div className="container">
          <div style={{ fontSize: 13, color: 'var(--ink-500)', marginBottom: 16 }}>
            <a onClick={() => navigate('home')} style={{ cursor: 'pointer' }}>Home</a>
            <span style={{ margin: '0 8px' }}>/</span>
            <a onClick={() => navigate('home')} style={{ cursor: 'pointer' }}>Products</a>
            <span style={{ margin: '0 8px' }}>/</span>
            <span style={{ color: 'var(--navy-800)', fontWeight: 600 }}>Motor Insurance</span>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48, alignItems: 'flex-start' }} className="motor-hero-grid">
            <div>
              <span className="badge badge-blue"><I.Car size={12} /> Motor Insurance</span>
              <h1 className="h-display" style={{ marginTop: 16 }}>
                Drive with<br />
                <span className="serif" style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--blue-700)' }}>peace of mind.</span>
              </h1>
              <p style={{ marginTop: 20, fontSize: 18, color: 'var(--ink-700)', maxWidth: 520 }}>
                Comprehensive cover for private cars, commercial vehicles, and motorcycles — with same-day claim assessment at 180+ approved workshops nationwide.
              </p>
              <div style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap' }}>
                <button className="btn btn-accent btn-lg" onClick={() => navigate('quote')}>
                  Get a quote <I.ArrowRight size={16} />
                </button>
                <button className="btn btn-ghost btn-lg">Download brochure <I.Download size={14} /></button>
              </div>
              <div style={{ marginTop: 32, display: 'flex', gap: 32, flexWrap: 'wrap' }}>
                {[['98%', 'Claims paid'], ['7 days', 'Avg. settlement'], ['180+', 'Workshops']].map(([n, l]) => (
                  <div key={l}>
                    <div className="serif" style={{ fontSize: 28, color: 'var(--navy-800)' }}>{n}</div>
                    <div style={{ fontSize: 12, color: 'var(--ink-500)' }}>{l}</div>
                  </div>
                ))}
              </div>
            </div>
            <div className="placeholder-img" style={{ aspectRatio: '4/5', minHeight: 360 }}>
              [ illustration: motor cover ]
            </div>
          </div>
        </div>
      </section>

      <div style={{ position: 'sticky', top: 78, background: 'white', zIndex: 10, borderBottom: '1px solid var(--ink-200)' }}>
        <div className="container">
          <div className="tabs" style={{ borderBottom: 0 }}>
            {tabs.map(t => (
              <button key={t.id} className={`tab ${tab === t.id ? 'active' : ''}`} onClick={() => setTab(t.id)}>{t.label}</button>
            ))}
          </div>
        </div>
      </div>

      {tab === 'coverage' && <CoverageSection />}
      {tab === 'plans' && <PlansSection navigate={navigate} />}
      {tab === 'addons' && <AddonsSection />}
      {tab === 'claims' && <ClaimsFlowSection navigate={navigate} />}
      {tab === 'docs' && <DocsSection />}
    </>
  );
}

function CoverageSection() {
  const covered = [
    { i: I.Car, t: 'Accidental damage', d: 'Repair or replacement up to your insured value.' },
    { i: I.Flame, t: 'Fire & explosion', d: 'Including self-ignition and short-circuits.' },
    { i: I.Lock, t: 'Theft & burglary', d: 'Whole vehicle and accessories permanently fitted.' },
    { i: I.Users, t: 'Third-party liability', d: 'Up to PKR 20 lakh as standard, extendable.' },
    { i: I.Zap, t: 'Natural disasters', d: 'Floods, storms, earthquakes — covered as standard.' },
    { i: I.ShieldCheck, t: 'Riot, strike, terrorism', d: 'Damage from civil disturbance, no extra cost.' },
  ];
  const notCovered = [
    'Wear & tear, mechanical breakdown',
    'Driving without a valid license',
    'Use of vehicle for racing or rallying',
    'Damage caused while under influence',
  ];
  return (
    <section>
      <div className="container">
        <div className="eyebrow">What\'s covered</div>
        <h2 className="h-2" style={{ marginTop: 8, marginBottom: 32 }}>The cover, in plain language.</h2>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 32 }} className="cov-grid">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: 16 }}>
            {covered.map(c => (
              <div key={c.t} className="card" style={{ padding: 22, display: 'flex', flexDirection: 'column', gap: 10 }}>
                <span style={{ width: 38, height: 38, borderRadius: 10, background: '#ecfdf5', color: '#047857', display: 'grid', placeItems: 'center' }}>
                  <I.Check size={18} />
                </span>
                <div style={{ fontSize: 15, fontWeight: 700 }}>{c.t}</div>
                <div style={{ fontSize: 13, color: 'var(--ink-500)' }}>{c.d}</div>
              </div>
            ))}
          </div>
          <div style={{ background: 'var(--ink-50)', borderRadius: 14, padding: 24 }}>
            <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--ink-700)', marginBottom: 12 }}>Not covered</div>
            {notCovered.map(n => (
              <div key={n} style={{ display: 'flex', gap: 10, padding: '10px 0', borderBottom: '1px solid var(--ink-200)', fontSize: 14 }}>
                <I.X size={16} style={{ color: 'var(--ink-400)', flexShrink: 0, marginTop: 2 }} />
                <span style={{ color: 'var(--ink-700)' }}>{n}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 920px) { .cov-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

function PlansSection({ navigate }) {
  const plans = [
    { name: 'Third Party', price: 'from 2,500', highlights: ['Mandatory legal cover', 'Liability up to PKR 20L', 'No own-damage cover'], color: 'var(--ink-200)' },
    { name: 'Standard', price: 'from 18,500', highlights: ['Accidental damage', 'Theft & fire', 'Third-party liability', '120+ workshops'], featured: true, color: 'var(--blue-600)' },
    { name: 'Comprehensive Plus', price: 'from 28,900', highlights: ['Everything in Standard', 'Zero depreciation', 'Roadside assistance 24/7', 'Free pickup & drop'], color: 'var(--navy-800)' },
  ];
  return (
    <section>
      <div className="container">
        <div style={{ textAlign: 'center', maxWidth: 600, margin: '0 auto 40px' }}>
          <div className="eyebrow">Plans & pricing</div>
          <h2 className="h-2" style={{ marginTop: 8 }}>Pick the plan that fits.</h2>
          <p style={{ color: 'var(--ink-500)', marginTop: 8 }}>Indicative prices for a 2024 Toyota Yaris in Karachi. Your final premium depends on your vehicle, location, and history.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }} className="plans-grid">
          {plans.map(p => (
            <div key={p.name} className="card" style={{
              padding: 28,
              borderColor: p.featured ? p.color : 'var(--ink-200)',
              borderWidth: p.featured ? 2 : 1,
              position: 'relative',
              background: p.featured ? 'linear-gradient(180deg, var(--blue-50), white)' : 'white',
            }}>
              {p.featured && (
                <span style={{
                  position: 'absolute', top: -12, left: 24,
                  padding: '4px 12px', background: p.color, color: 'white',
                  borderRadius: 999, fontSize: 11, fontWeight: 700, letterSpacing: '0.06em',
                }}>MOST POPULAR</span>
              )}
              <div style={{ fontSize: 18, fontWeight: 700 }}>{p.name}</div>
              <div style={{ marginTop: 12, display: 'flex', alignItems: 'baseline', gap: 6 }}>
                <span style={{ fontSize: 13, color: 'var(--ink-500)', fontWeight: 600 }}>PKR</span>
                <span className="serif" style={{ fontSize: 38, color: 'var(--navy-800)' }}>{p.price.replace('from ', '')}</span>
                <span style={{ fontSize: 13, color: 'var(--ink-500)' }}>/year</span>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 20, marginBottom: 24 }}>
                {p.highlights.map(h => (
                  <div key={h} style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 14 }}>
                    <I.Check size={16} style={{ color: 'var(--success)', flexShrink: 0 }} />
                    {h}
                  </div>
                ))}
              </div>
              <button className={p.featured ? 'btn btn-accent' : 'btn btn-ghost'} style={{ width: '100%' }} onClick={() => navigate('quote')}>
                Choose {p.name}
              </button>
            </div>
          ))}
        </div>
      </div>
      <style>{`@media (max-width: 920px) { .plans-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

function AddonsSection() {
  const addons = [
    { i: I.Wrench, t: 'Roadside assistance', p: '+1,800/yr', d: '24/7 towing, jump-start, flat tyre, fuel delivery within 50km.' },
    { i: I.User, t: 'Personal accident cover', p: '+1,200/yr', d: 'Up to PKR 10 lakh for driver & passengers.' },
    { i: I.Sparkles, t: 'Zero depreciation', p: '+3,400/yr', d: 'No deduction for wear & tear on parts during claim.' },
    { i: I.Car, t: 'Replacement vehicle', p: '+2,100/yr', d: 'Rental car for up to 14 days during repair.' },
    { i: I.Lock, t: 'Key & lock cover', p: '+600/yr', d: 'Replacement of stolen or damaged keys, fobs and locks.' },
    { i: I.Globe, t: 'Cross-border (UAE)', p: '+4,500/yr', d: 'Extend cover for trips to UAE — popular with Karachi families.' },
  ];
  return (
    <section>
      <div className="container">
        <div className="eyebrow">Optional add-ons</div>
        <h2 className="h-2" style={{ marginTop: 8, marginBottom: 32 }}>Tailor it to your life.</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 16 }}>
          {addons.map(a => (
            <div key={a.t} className="card" style={{ padding: 24 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
                <span style={{ width: 42, height: 42, borderRadius: 10, background: 'var(--blue-50)', color: 'var(--blue-700)', display: 'grid', placeItems: 'center' }}>
                  <a.i size={20} />
                </span>
                <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--blue-700)' }}>{a.p}</span>
              </div>
              <div style={{ fontSize: 16, fontWeight: 700 }}>{a.t}</div>
              <div style={{ fontSize: 13, color: 'var(--ink-500)', marginTop: 6, lineHeight: 1.5 }}>{a.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ClaimsFlowSection({ navigate }) {
  return (
    <section>
      <div className="container">
        <div className="eyebrow">Motor claims</div>
        <h2 className="h-2" style={{ marginTop: 8, marginBottom: 32 }}>From dent to drive — seven days.</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }} className="cf-grid">
          {[
            { d: 'Day 1', t: 'Report incident', dx: 'Call, app, or web. Share photos & FIR if applicable.' },
            { d: 'Day 1-2', t: 'Surveyor visit', dx: 'On-site assessment within 4 working hours.' },
            { d: 'Day 3-5', t: 'Approval', dx: 'Estimate reviewed and approved by our claims team.' },
            { d: 'Day 5-7', t: 'Repair & deliver', dx: 'Workshop completes repair. We pay them directly.' },
          ].map((s, i) => (
            <div key={i} style={{ background: 'var(--ink-50)', borderRadius: 14, padding: 22, position: 'relative' }}>
              <div className="serif" style={{ fontSize: 13, color: 'var(--blue-700)' }}>{s.d}</div>
              <div style={{ fontSize: 16, fontWeight: 700, marginTop: 6 }}>{s.t}</div>
              <div style={{ fontSize: 13, color: 'var(--ink-500)', marginTop: 8 }}>{s.dx}</div>
              <div style={{ position: 'absolute', top: 22, right: 22, fontSize: 11, fontWeight: 700, color: 'var(--ink-300)' }}>0{i+1}</div>
            </div>
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: 32 }}>
          <button className="btn btn-primary" onClick={() => navigate('claims')}>File a motor claim now <I.ArrowRight size={14} /></button>
        </div>
      </div>
      <style>{`@media (max-width: 920px) { .cf-grid { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 540px) { .cf-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

function DocsSection() {
  const docs = [
    'Policy wording (Comprehensive)',
    'Policy wording (Third Party)',
    'Claim form — Motor',
    'List of approved workshops (PDF)',
    'Premium calculation methodology',
    'Customer service charter',
  ];
  return (
    <section>
      <div className="container">
        <div className="eyebrow">Documents</div>
        <h2 className="h-2" style={{ marginTop: 8, marginBottom: 32 }}>Everything in writing.</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 12 }}>
          {docs.map(d => (
            <a key={d} href="#" className="card" style={{ padding: 20, display: 'flex', alignItems: 'center', gap: 14 }}>
              <span style={{ width: 40, height: 40, borderRadius: 8, background: 'var(--ink-100)', color: 'var(--navy-800)', display: 'grid', placeItems: 'center' }}>
                <I.FileText size={18} />
              </span>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 600 }}>{d}</div>
                <div style={{ fontSize: 12, color: 'var(--ink-500)' }}>PDF · ~140 KB</div>
              </div>
              <I.Download size={18} style={{ color: 'var(--ink-500)' }} />
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Motor = Motor;