/* IGI — Homepage */

function Home({ navigate }) {
  return (
    <>
      <HomeHero navigate={navigate} />
      <TrustBar />
      <ProductsGrid navigate={navigate} />
      <ClaimsHow navigate={navigate} />
      <WhyChoose />
      <Testimonials />
      <FAQ />
      <FinalCTA navigate={navigate} />
    </>
  );
}

/* ----- HERO ----- */
function HomeHero({ navigate }) {
  const [insure, setInsure] = React.useState('motor');
  const insureOptions = [
    { id: 'motor', label: 'Car', icon: I.Car },
    { id: 'home', label: 'Home', icon: I.Home },
    { id: 'travel', label: 'Travel', icon: I.Plane },
    { id: 'health', label: 'Health', icon: I.Heart },
  ];

  return (
    <section style={{
      position: 'relative',
      background: 'linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%)',
      color: 'white', overflow: 'hidden',
      padding: '64px 0 96px',
    }}>
      {/* Subtle radial glow */}
      <div style={{
        position: 'absolute', top: '-20%', right: '-10%', width: 600, height: 600,
        background: 'radial-gradient(circle, rgba(59,130,246,0.25) 0%, transparent 60%)',
        pointerEvents: 'none',
      }} />
      {/* Grid pattern */}
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.06,
        backgroundImage: 'linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px)',
        backgroundSize: '48px 48px',
        maskImage: 'radial-gradient(ellipse at center, black 30%, transparent 80%)',
      }} />

      <div className="container" style={{ position: 'relative' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: 'minmax(0, 1.1fr) minmax(0, 0.9fr)',
          gap: 64, alignItems: 'center',
        }} className="hero-grid">
          {/* LEFT */}
          <div>
            <span className="badge badge-blue" style={{
              background: 'rgba(59,130,246,0.15)', color: '#93c5fd',
              border: '1px solid rgba(59,130,246,0.3)',
            }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#10b981', display: 'inline-block' }} />
              ANNUAL REPORT 2025 RELEASED
            </span>
            <h1 className="h-display" style={{ marginTop: 20, color: 'white' }}>
              Insurance built<br />
              <span className="serif" style={{ fontStyle: 'italic', fontWeight: 400 }}>for the way</span><br />
              Pakistan lives.
            </h1>
            <p style={{
              marginTop: 24, fontSize: 18, lineHeight: 1.55,
              color: 'rgba(255,255,255,0.78)', maxWidth: 520,
            }}>
              From your first car to your family's health, your home to your business — get protection that's clear, claims that are quick, and people who pick up the phone.
            </p>

            <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
              <button className="btn btn-accent btn-lg" onClick={() => navigate('quote')}>
                Get an instant quote <I.ArrowRight size={16} />
              </button>
              <button className="btn btn-lg" style={{
                background: 'rgba(255,255,255,0.08)', color: 'white',
                border: '1px solid rgba(255,255,255,0.18)',
              }} onClick={() => navigate('claims')}>
                File or track a claim
              </button>
            </div>

            <div style={{
              marginTop: 40, paddingTop: 24,
              borderTop: '1px solid rgba(255,255,255,0.12)',
              display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
            }}>
              {[
                ['72+', 'Years protecting Pakistan'],
                ['9', 'Cities nationwide'],
                ['AA', 'PACRA-rated, 9 yrs'],
              ].map(([n, l]) => (
                <div key={l}>
                  <div className="serif" style={{ fontSize: 36, color: 'white', letterSpacing: '-0.03em' }}>{n}</div>
                  <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)', marginTop: 4, lineHeight: 1.3 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>

          {/* RIGHT — Quote builder card */}
          <div>
            <div style={{
              background: 'white', color: 'var(--ink-900)',
              borderRadius: 20, padding: 28,
              boxShadow: '0 30px 80px rgba(0,0,0,0.4)',
              position: 'relative',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
                <div>
                  <div style={{ fontSize: 18, fontWeight: 700 }}>Get an instant quote</div>
                  <div style={{ fontSize: 13, color: 'var(--ink-500)', marginTop: 2 }}>
                    No paperwork. No phone calls. ~2 minutes.
                  </div>
                </div>
                <span className="badge badge-green">
                  <I.Lock size={11} /> Secure
                </span>
              </div>

              <div style={{ marginBottom: 16 }}>
                <label className="field-label">What do you want to insure?</label>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
                  {insureOptions.map(opt => (
                    <button
                      key={opt.id}
                      onClick={() => setInsure(opt.id)}
                      style={{
                        padding: '14px 8px', borderRadius: 10,
                        border: insure === opt.id ? '2px solid var(--blue-600)' : '1px solid var(--ink-200)',
                        background: insure === opt.id ? 'var(--blue-50)' : 'white',
                        color: insure === opt.id ? 'var(--blue-700)' : 'var(--ink-700)',
                        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
                        fontWeight: 600, fontSize: 12,
                        transition: 'all 0.15s ease',
                      }}
                    >
                      <opt.icon size={20} />
                      {opt.label}
                    </button>
                  ))}
                </div>
              </div>

              {insure === 'motor' && (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                    <div>
                      <label className="field-label">Vehicle make</label>
                      <select className="field-select" defaultValue="Toyota">
                        <option>Toyota</option><option>Honda</option><option>Suzuki</option><option>Hyundai</option><option>Kia</option>
                      </select>
                    </div>
                    <div>
                      <label className="field-label">Model year</label>
                      <select className="field-select" defaultValue="2024">
                        {Array.from({ length: 8 }, (_, i) => 2026 - i).map(y => <option key={y}>{y}</option>)}
                      </select>
                    </div>
                  </div>
                  <div>
                    <label className="field-label">City</label>
                    <select className="field-select" defaultValue="Karachi">
                      <option>Karachi</option><option>Lahore</option><option>Islamabad</option><option>Rawalpindi</option><option>Faisalabad</option><option>Peshawar</option><option>Multan</option><option>Quetta</option>
                    </select>
                  </div>
                  <div>
                    <label className="field-label">Estimated vehicle value</label>
                    <div style={{ position: 'relative' }}>
                      <span style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)', color: 'var(--ink-500)', fontSize: 14, fontWeight: 600 }}>PKR</span>
                      <input className="field-input" defaultValue="4,500,000" style={{ paddingLeft: 50 }} />
                    </div>
                  </div>
                </div>
              )}
              {insure !== 'motor' && (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                  <div>
                    <label className="field-label">City</label>
                    <select className="field-select" defaultValue="Karachi">
                      <option>Karachi</option><option>Lahore</option><option>Islamabad</option><option>Rawalpindi</option>
                    </select>
                  </div>
                  <div>
                    <label className="field-label">CNIC (or Passport for travel)</label>
                    <input className="field-input" placeholder="35202-XXXXXXX-X" />
                  </div>
                  <div>
                    <label className="field-label">Mobile number</label>
                    <input className="field-input" placeholder="+92 3XX-XXXXXXX" />
                  </div>
                </div>
              )}

              <button
                className="btn btn-accent btn-lg"
                style={{ width: '100%', marginTop: 20 }}
                onClick={() => navigate('quote')}
              >
                See my premium <I.ArrowRight size={16} />
              </button>
              <div style={{ marginTop: 12, fontSize: 12, color: 'var(--ink-500)', textAlign: 'center' }}>
                <I.Lock size={11} style={{ display: 'inline', marginRight: 4, verticalAlign: 'middle' }} />
                256-bit encrypted · SECP-regulated · No spam, ever
              </div>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 920px) {
          .hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
      `}</style>
    </section>
  );
}

/* ----- TRUST BAR ----- */
function TrustBar() {
  const partners = ['Atlas Honda', 'Suzuki', 'Toyota Indus', 'Habib Bank', 'MCB Bank', 'Engro', 'PSO', 'Lucky Cement'];
  return (
    <div style={{ padding: '36px 0', borderBottom: '1px solid var(--ink-200)' }}>
      <div className="container">
        <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ink-500)', textAlign: 'center', marginBottom: 24 }}>
          Trusted by Pakistan's leading institutions
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',
          gap: 24, alignItems: 'center', justifyItems: 'center',
        }}>
          {partners.map(p => (
            <div key={p} style={{
              fontSize: 14, fontWeight: 700, color: 'var(--ink-400)',
              letterSpacing: '-0.01em', fontStyle: 'italic',
            }}>{p}</div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ----- PRODUCTS GRID ----- */
function ProductsGrid({ navigate }) {
  return (
    <section>
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 40, flexWrap: 'wrap', gap: 16 }}>
          <div style={{ maxWidth: 540 }}>
            <div className="eyebrow">Our products</div>
            <h2 className="h-1" style={{ marginTop: 8 }}>
              One insurer.<br />
              <span className="serif" style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--blue-700)' }}>Every cover</span> you'll need.
            </h2>
          </div>
          <button className="btn btn-ghost" onClick={() => navigate('motor')}>
            Browse all products <I.ArrowRight size={14} />

          </button>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: 16,
        }}>
          {PRODUCTS.map((p, i) => (
            <button
              key={p.id}
              onClick={() => p.href ? window.location.href = p.href : navigate(p.id)}
              className="card"
              style={{
                padding: 24, textAlign: 'left', cursor: 'pointer',
                display: 'flex', flexDirection: 'column', gap: 12,
                position: 'relative', overflow: 'hidden',
              }}
            >
              <div style={{
                width: 48, height: 48, borderRadius: 12,
                background: i % 3 === 0 ? 'var(--navy-50)' : i % 3 === 1 ? 'var(--blue-50)' : '#fef3c7',
                color: i % 3 === 0 ? 'var(--navy-800)' : i % 3 === 1 ? 'var(--blue-700)' : '#b45309',
                display: 'grid', placeItems: 'center',
              }}>
                <p.icon size={24} />
              </div>
              <div>
                <div style={{ fontSize: 17, fontWeight: 700 }}>{p.label}</div>
                <div style={{ fontSize: 13, color: 'var(--ink-500)', marginTop: 4, lineHeight: 1.45 }}>{p.desc}</div>
              </div>
              <div style={{
                marginTop: 'auto', paddingTop: 12,
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                fontSize: 13, fontWeight: 600, color: 'var(--blue-700)',
              }}>
                <span>Get a quote</span>
                <I.ArrowUpRight size={16} />
              </div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ----- CLAIMS HOW IT WORKS ----- */
function ClaimsHow({ navigate }) {
  const steps = [
    { n: '01', t: 'Report in 60 seconds', d: 'Open the app or call 111-308-308. Snap a few photos, share what happened.', icon: I.Phone },
    { n: '02', t: 'We assign a surveyor', d: 'A claims officer is dispatched within 4 hours. You get their number on WhatsApp.', icon: I.User },
    { n: '03', t: 'Approval & payment', d: '85% of claims under PKR 500,000 are settled within 7 working days. Direct to your account.', icon: I.CreditCard },
  ];
  return (
    <section style={{ background: 'var(--navy-50)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 0.9fr) minmax(0, 1.1fr)', gap: 64, alignItems: 'center' }} className="claims-grid">
          <div>
            <div className="eyebrow">Claims, simplified</div>
            <h2 className="h-1" style={{ marginTop: 8 }}>
              Three steps from<br />incident to <span className="serif" style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--blue-700)' }}>paid</span>.
            </h2>
            <p style={{ marginTop: 16, fontSize: 16, color: 'var(--ink-700)', lineHeight: 1.6, maxWidth: 440 }}>
              No jargon. No runaround. We've redesigned the claims experience around one principle: tell us once, and we'll handle the rest.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap' }}>
              <button className="btn btn-primary" onClick={() => navigate('claims')}>
                File a new claim <I.ArrowRight size={14} />
              </button>
              <button className="btn btn-ghost" onClick={() => navigate('claims')}>
                Track existing claim
              </button>
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {steps.map((s, i) => (
              <div key={s.n} className="card" style={{ padding: 24, background: 'white', display: 'flex', gap: 20, alignItems: 'flex-start' }}>
                <div style={{
                  width: 56, height: 56, borderRadius: 14, flexShrink: 0,
                  background: 'var(--navy-800)', color: 'white',
                  display: 'grid', placeItems: 'center',
                }}>
                  <s.icon size={22} />
                </div>
                <div style={{ flex: 1 }}>
                  <div className="serif" style={{ fontSize: 14, color: 'var(--blue-700)', letterSpacing: '0.04em' }}>{s.n}</div>
                  <div style={{ fontSize: 18, fontWeight: 700, marginTop: 4 }}>{s.t}</div>
                  <div style={{ fontSize: 14, color: 'var(--ink-500)', marginTop: 6, lineHeight: 1.55 }}>{s.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 920px) {
          .claims-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
      `}</style>
    </section>
  );
}

/* ----- WHY CHOOSE ----- */
function WhyChoose() {
  const items = [
    { icon: I.Award, title: 'AA-rated by PACRA', desc: 'Insurer Financial Strength rating sustained for 9 consecutive years.' },
    { icon: I.Hospital, title: '450+ panel hospitals', desc: 'Cashless treatment at top hospitals across all major cities of Pakistan.' },
    { icon: I.Wrench, title: '180+ approved workshops', desc: 'From Karachi to Skardu — your car gets serviced where you trust it.' },
    { icon: I.Headset, title: '24/7 multilingual support', desc: 'English, Urdu, Punjabi, Sindhi, Pashto. Real humans, not bots.' },
    { icon: I.Zap, title: 'Quote in 2 minutes', desc: 'Buy online, pay with debit/credit card, JazzCash or Easypaisa.' },
    { icon: I.ShieldCheck, title: 'Sharia-compliant takaful', desc: 'A full takaful range certified by our independent Sharia board.' },
  ];
  return (
    <section>
      <div className="container">
        <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 56px' }}>
          <div className="eyebrow">Why IGI</div>
          <h2 className="h-1" style={{ marginTop: 8 }}>
            The fundamentals,<br />done right.
          </h2>
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1,
          background: 'var(--ink-200)', borderRadius: 16, overflow: 'hidden',
          border: '1px solid var(--ink-200)',
        }}>
          {items.map(it => (
            <div key={it.title} style={{
              padding: 32, background: 'white',
              display: 'flex', flexDirection: 'column', gap: 14,
            }}>
              <div style={{
                width: 44, height: 44, borderRadius: 10,
                background: 'var(--navy-50)', color: 'var(--navy-800)',
                display: 'grid', placeItems: 'center',
              }}>
                <it.icon size={22} />
              </div>
              <div style={{ fontSize: 17, fontWeight: 700 }}>{it.title}</div>
              <div style={{ fontSize: 14, color: 'var(--ink-500)', lineHeight: 1.55 }}>{it.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ----- TESTIMONIALS ----- */
function Testimonials() {
  const t = [
    { quote: 'Filed my motor claim from the parking lot of the accident. The surveyor showed up before the recovery van. Genuinely impressed.', name: 'Ahmed Faraz', role: 'Karachi · Motor Comprehensive', rating: 5 },
    { quote: 'My mother needed cardiac surgery at AKU. Cashless from admission to discharge — not a single rupee out of pocket. Worth every paisa.', name: 'Sana Riaz', role: 'Lahore · Health Plan Gold', rating: 5 },
    { quote: 'We insure our entire factory through IGI. Their engineering surveyors actually understand textile machinery. That makes a difference.', name: 'Tariq Mahmood', role: 'Faisalabad · Industrial', rating: 5 },
  ];
  return (
    <section style={{ background: 'var(--warm-paper)' }}>
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 40, flexWrap: 'wrap', gap: 16 }}>
          <div>
            <div className="eyebrow">Customer voices</div>
            <h2 className="h-1" style={{ marginTop: 8 }}>What our policyholders say.</h2>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ display: 'flex', gap: 2 }}>
              {[1,2,3,4,5].map(i => <I.Star key={i} size={18} style={{ fill: '#fbbf24', color: '#fbbf24' }} />)}
            </div>
            <div>
              <div style={{ fontWeight: 700, fontSize: 15 }}>4.7 / 5</div>
              <div style={{ fontSize: 12, color: 'var(--ink-500)' }}>from 12,400+ reviews</div>
            </div>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 20 }}>
          {t.map((q, i) => (
            <div key={i} className="card" style={{ padding: 28, background: 'white', display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div style={{ display: 'flex', gap: 2 }}>
                {Array.from({ length: q.rating }).map((_, k) => <I.Star key={k} size={14} style={{ fill: '#fbbf24', color: '#fbbf24' }} />)}
              </div>
              <p className="serif" style={{ fontSize: 19, lineHeight: 1.45, color: 'var(--navy-800)' }}>
                "{q.quote}"
              </p>
              <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{
                  width: 40, height: 40, borderRadius: '50%', flexShrink: 0,
                  background: ['var(--navy-800)', 'var(--blue-600)', 'var(--success)'][i],
                  color: 'white', display: 'grid', placeItems: 'center', fontWeight: 700,
                }}>{q.name[0]}</div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 700 }}>{q.name}</div>
                  <div style={{ fontSize: 12, color: 'var(--ink-500)' }}>{q.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ----- FAQ ----- */
function FAQ() {
  const [open, setOpen] = React.useState(0);
  const items = [
    { q: 'How quickly can I get a quote?', a: 'Most quotes are generated in under 2 minutes. For complex commercial covers, an underwriter may follow up within 1 working day.' },
    { q: 'What documents do I need to buy a policy online?', a: 'For most policies: CNIC, vehicle registration (for motor), and a valid mobile number. Health policies may require a brief health declaration. No medical exam for plans up to PKR 1 million sum insured.' },
    { q: 'How are claims paid out?', a: 'Direct bank transfer (IBFT) for motor and property claims. For health, we settle directly with our 450+ panel hospitals — you pay nothing at the hospital.' },
    { q: 'Do you offer Takaful (Sharia-compliant) plans?', a: 'Yes. IGI Takaful offers a full range of Sharia-compliant covers across motor, property, health, and family takaful, certified by our independent Sharia Supervisory Board.' },
    { q: 'What if I want to cancel my policy?', a: 'You can cancel within 14 days of purchase for a full refund (cooling-off period). After that, refunds are pro-rated based on the unused period of cover, less administrative charges as per your policy schedule.' },
    { q: 'Is my data secure?', a: 'All data is encrypted at rest and in transit using 256-bit encryption. We are SECP-regulated and adhere to the Personal Data Protection Bill standards.' },
  ];

  return (
    <section>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 64 }} className="faq-grid">
          <div>
            <div className="eyebrow">FAQ</div>
            <h2 className="h-1" style={{ marginTop: 8 }}>
              Questions,<br />answered.
            </h2>
            <p style={{ marginTop: 16, color: 'var(--ink-500)', maxWidth: 320 }}>
              Can't find what you're looking for? Our 24/7 support team is one call or chat away.
            </p>
            <a href="#" style={{
              display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 20,
              fontSize: 14, fontWeight: 600, color: 'var(--blue-700)',
            }}>
              Browse all 120+ FAQs <I.ArrowRight size={14} />
            </a>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
            {items.map((it, i) => (
              <div key={i} style={{
                borderBottom: i === items.length - 1 ? 0 : '1px solid var(--ink-200)',
              }}>
                <button
                  onClick={() => setOpen(open === i ? -1 : i)}
                  style={{
                    width: '100%', padding: '20px 0', textAlign: 'left',
                    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                    fontSize: 17, fontWeight: 600, color: 'var(--navy-800)', gap: 16,
                  }}
                >
                  {it.q}
                  <span style={{
                    width: 32, height: 32, borderRadius: '50%', flexShrink: 0,
                    background: open === i ? 'var(--navy-800)' : 'var(--ink-100)',
                    color: open === i ? 'white' : 'var(--ink-700)',
                    display: 'grid', placeItems: 'center',
                    transition: 'all 0.2s ease',
                  }}>
                    {open === i ? <I.Minus size={14} /> : <I.Plus size={14} />}
                  </span>
                </button>
                {open === i && (
                  <div style={{ padding: '0 0 20px', fontSize: 15, color: 'var(--ink-700)', lineHeight: 1.6, maxWidth: 620, animation: 'fadeUp 0.25s ease' }}>
                    {it.a}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 920px) {
          .faq-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </section>
  );
}

/* ----- FINAL CTA ----- */
function FinalCTA({ navigate }) {
  return (
    <section style={{
      background: 'var(--navy-900)', color: 'white',
      borderRadius: 0, position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', top: 0, right: 0, width: '60%', height: '100%',
        background: 'radial-gradient(circle at 70% 50%, rgba(37,99,235,0.3) 0%, transparent 60%)',
      }} />
      <div className="container" style={{ position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center' }} className="cta-grid">
          <div>
            <h2 className="h-1" style={{ color: 'white' }}>
              Get the cover you need.<br />
              <span className="serif" style={{ fontStyle: 'italic', fontWeight: 400, color: '#93c5fd' }}>Get on with your day.</span>
            </h2>
            <p style={{ marginTop: 20, fontSize: 17, color: 'rgba(255,255,255,0.78)', maxWidth: 520 }}>
              Quote in 2 minutes. Buy in 5. Backed by 72 years of Pakistani insurance heritage.
            </p>
          </div>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'flex-end', flexWrap: 'wrap' }}>
            <button className="btn btn-accent btn-lg" onClick={() => navigate('quote')}>
              Get my quote <I.ArrowRight size={16} />
            </button>
            <button className="btn btn-lg" style={{
              background: 'rgba(255,255,255,0.08)', color: 'white',
              border: '1px solid rgba(255,255,255,0.18)',
            }} onClick={() => navigate('contact')}>
              Talk to us
            </button>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 768px) {
          .cta-grid { grid-template-columns: 1fr !important; }
          .cta-grid > div:last-child { justify-content: flex-start !important; }
        }
      `}</style>
    </section>
  );
}

window.Home = Home;