/* IGI — Individual Product Pages (Home, Travel, Health, Marine, Fire, Engineering, Liability, Crop, Corporate) */

/* ─── Shared Helpers ─────────────────────────────────────── */

function ProductHero({ navigate, badge, icon: Icon, title, italic, desc, stats, imgLabel }) {
  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 }}>{badge}</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"><Icon size={12} /> {badge}</span>
            <h1 className="h-display" style={{ marginTop: 16 }}>
              {title}<br />
              <span className="serif" style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--blue-700)' }}>{italic}</span>
            </h1>
            <p style={{ marginTop: 20, fontSize: 18, color: 'var(--ink-700)', maxWidth: 520 }}>{desc}</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' }}>
              {stats.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: {imgLabel} ]</div>
        </div>
      </div>
    </section>
  );
}

function ProductTabs({ tabs, tab, setTab }) {
  return (
    <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>
  );
}

function CoverageTab({ covered, notCovered }) {
  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 PlansTab({ navigate, plans, note }) {
  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>
          {note && <p style={{ color: 'var(--ink-500)', marginTop: 8 }}>{note}</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}</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 AddonsTab({ addons }) {
  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 needs.</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 ClaimsTab({ navigate, steps }) {
  return (
    <section>
      <div className="container">
        <div className="eyebrow">How claims work</div>
        <h2 className="h-2" style={{ marginTop: 8, marginBottom: 32 }}>Simple, transparent, fast.</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }} className="cf-grid">
          {steps.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 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 DocsTab({ docs }) {
  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>
  );
}

const DEFAULT_CLAIMS_STEPS = [
  { d: 'Day 1', t: 'Report the claim', dx: 'Call 021-111-308-308 or submit online. Provide photos and incident details.' },
  { d: 'Day 1–2', t: 'Surveyor assigned', dx: 'A qualified surveyor is dispatched within 4 working hours.' },
  { d: 'Day 3–5', t: 'Assessment & approval', dx: 'Survey report reviewed and approved by our claims team.' },
  { d: 'Day 5–7', t: 'Settlement', dx: 'Payment transferred directly to your bank account or repair facility.' },
];

const STANDARD_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' },
];

/* ─── Home & Property ─────────────────────────────────────── */
function HomeProp({ navigate }) {
  const [tab, setTab] = React.useState('coverage');

  const covered = [
    { t: 'Fire & explosion', d: 'Damage from fire, lightning, explosion, including self-ignition and short-circuits.' },
    { t: 'Burglary & theft', d: 'Theft of contents, electronics, jewellery and other valuables.' },
    { t: 'Flood & storm damage', d: 'Damage from flooding, storms, cyclones, rainwater ingress and inundation.' },
    { t: 'Earthquake', d: 'Structural and contents damage caused by seismic events.' },
    { t: 'Third-party liability', d: 'Accidental injury to guests or neighbours occurring on your property.' },
    { t: 'Riot & malicious damage', d: 'Damage to building and contents caused by civil unrest or vandalism.' },
  ];
  const notCovered = [
    'Wear & tear, gradual deterioration',
    'Damage caused by war or nuclear risk',
    'Intentional damage by the insured',
    'Cash or negotiable instruments above stated limit',
  ];
  const plans = [
    { name: 'Houseowner', price: '8,500', highlights: ['Building structure cover', 'Fire, lightning & explosion', 'Flood & earthquake', 'Third-party liability'], color: 'var(--ink-200)' },
    { name: 'Householder', price: '12,000', highlights: ['All Houseowner benefits', 'Contents & valuables', 'Burglary & theft cover', 'Electronics protection'], featured: true, color: 'var(--blue-600)' },
    { name: 'All Risk', price: '19,500', highlights: ['All Householder benefits', 'Accidental all-risk cover', 'Personal effects worldwide', 'High-value jewellery limit'], color: 'var(--navy-800)' },
  ];
  const addons = [
    { i: I.Zap, t: 'Electrical appliance breakdown', p: '+2,500/yr', d: 'Repair or replacement of home appliances after sudden breakdown.' },
    { i: I.User, t: 'Domestic worker accident', p: '+1,000/yr', d: 'Personal accident cover for household staff employed full-time.' },
    { i: I.Globe, t: 'Worldwide personal effects', p: '+3,200/yr', d: 'Extends jewellery & valuables cover globally while travelling.' },
    { i: I.ShieldCheck, t: 'Enhanced malicious damage', p: '+800/yr', d: 'Broader cover for deliberate damage by third parties.' },
  ];
  const docs = [
    'Policy wording — Houseowner',
    'Policy wording — Householder',
    'Claim form — Property',
    'Schedule of rates & sums insured guide',
    'Customer service charter',
  ];

  return (
    <>
      <ProductHero
        navigate={navigate}
        badge="Home & Property Insurance"
        icon={I.Home}
        title="Your home,"
        italic="fully protected."
        desc="Houseowner and householder policies that shield your building, contents, and valuables against fire, theft, flood, earthquake and more — all under one policy."
        stats={[['24 hrs', 'Claim response'], ['7 days', 'Avg. settlement'], ['All-risk', 'Option available']]}
        imgLabel="home cover"
      />
      <ProductTabs tabs={STANDARD_TABS} tab={tab} setTab={setTab} />
      {tab === 'coverage' && <CoverageTab covered={covered} notCovered={notCovered} />}
      {tab === 'plans' && <PlansTab navigate={navigate} plans={plans} note="Indicative annual premiums. Final premium depends on property sum insured, location, and security features." />}
      {tab === 'addons' && <AddonsTab addons={addons} />}
      {tab === 'claims' && <ClaimsTab navigate={navigate} steps={DEFAULT_CLAIMS_STEPS} />}
      {tab === 'docs' && <DocsTab docs={docs} />}
    </>
  );
}

/* ─── Travel ──────────────────────────────────────────────── */
function Travel({ navigate }) {
  const [tab, setTab] = React.useState('coverage');

  const covered = [
    { t: 'Emergency medical expenses', d: 'Hospitalization and treatment abroad with cashless facility at network hospitals.' },
    { t: 'Medical evacuation & repatriation', d: 'Emergency air evacuation and repatriation of mortal remains if required.' },
    { t: 'Trip cancellation & curtailment', d: 'Reimbursement of non-refundable travel costs for covered cancellation reasons.' },
    { t: 'Baggage loss & delay', d: 'Compensation for lost, stolen or delayed checked-in baggage.' },
    { t: 'Flight delay & missed connection', d: 'Daily allowance for delays over 6 hours; rebooking costs for missed connections.' },
    { t: 'Personal accident', d: 'Accidental death and permanent disability cover throughout the trip.' },
  ];
  const notCovered = [
    'Pre-existing conditions (unless declared & accepted)',
    'Travel to FCDO-advised countries without endorsement',
    'Self-inflicted injury or substance-related incidents',
    'Losses not reported to local authorities within 24 hours',
  ];
  const plans = [
    { name: 'Basic', price: '2,800', highlights: ['Emergency medical up to $30,000', 'Baggage loss up to $500', 'Flight delay cover', 'Personal accident'], color: 'var(--ink-200)' },
    { name: 'Standard', price: '5,500', highlights: ['Emergency medical up to $100,000', 'Trip cancellation cover', 'Baggage loss up to $1,500', 'Medical evacuation'], featured: true, color: 'var(--blue-600)' },
    { name: 'Gold', price: '9,200', highlights: ['Emergency medical up to $500,000', 'Cancel for any reason (50%)', 'Baggage loss up to $3,000', 'Concierge & legal assist'], color: 'var(--navy-800)' },
  ];
  const addons = [
    { i: I.Zap, t: 'Adventure sports cover', p: '+1,800/yr', d: 'Extends cover for skiing, scuba diving, trekking and other adventure activities.' },
    { i: I.Car, t: 'Rental car excess waiver', p: '+900/yr', d: 'Covers the excess charged by rental companies in case of damage or theft.' },
    { i: I.Anchor, t: 'Cruise cover', p: '+1,500/yr', d: 'Missed port departure, cabin confinement and itinerary change protection.' },
    { i: I.Globe, t: 'Annual multi-trip plan', p: '+12,000/yr', d: 'Cover unlimited trips up to 30 days each — ideal for frequent travellers.' },
  ];
  const docs = [
    'Policy wording — Travel Insurance',
    'Claim form — Travel',
    'Schedule of benefits (all plans)',
    'Emergency contact card',
    'Customer service charter',
  ];

  return (
    <>
      <ProductHero
        navigate={navigate}
        badge="Travel Insurance"
        icon={I.Plane}
        title="Travel freely,"
        italic="without worry."
        desc="International and domestic travel plans covering medical emergencies, trip cancellations, baggage loss and flight delays — so the only surprises are the good kind."
        stats={[['$500K', 'Max medical cover'], ['180+', 'Countries covered'], ['24/7', 'Emergency helpline']]}
        imgLabel="travel cover"
      />
      <ProductTabs tabs={STANDARD_TABS} tab={tab} setTab={setTab} />
      {tab === 'coverage' && <CoverageTab covered={covered} notCovered={notCovered} />}
      {tab === 'plans' && <PlansTab navigate={navigate} plans={plans} note="Per-trip premiums shown for a 7-day international trip. Annual multi-trip plans available separately." />}
      {tab === 'addons' && <AddonsTab addons={addons} />}
      {tab === 'claims' && <ClaimsTab navigate={navigate} steps={[
        { d: 'Immediately', t: 'Call our helpline', dx: 'Dial the 24/7 emergency number on your policy card. Pre-authorise hospital admission.' },
        { d: 'Within 30 days', t: 'Submit claim docs', dx: 'Upload receipts, medical reports, flight delay certificates or police reports online.' },
        { d: 'Day 3–7', t: 'Claim assessed', dx: 'Our travel claims team reviews your submission and may request supporting documents.' },
        { d: 'Day 7–10', t: 'Settlement', dx: 'Approved claims paid by bank transfer in PKR at the prevailing exchange rate.' },
      ]} />}
      {tab === 'docs' && <DocsTab docs={docs} />}
    </>
  );
}

/* ─── Health ──────────────────────────────────────────────── */
function Health({ navigate }) {
  const [tab, setTab] = React.useState('coverage');

  const covered = [
    { t: 'Inpatient hospitalisation', d: 'Room, board, nursing, surgery and all in-hospital treatment costs.' },
    { t: 'Surgical procedures', d: 'All elective and emergency surgeries by a qualified surgeon at a panel hospital.' },
    { t: 'Maternity cover', d: 'Normal and Caesarean delivery costs, including pre- and post-natal care.' },
    { t: 'Outpatient (OPD)', d: 'GP visits, specialist consultations, diagnostics and pharmacy under OPD plans.' },
    { t: 'Cashless treatment', d: 'Direct billing at 450+ panel hospitals nationwide — no out-of-pocket at admission.' },
    { t: 'Emergency ambulance', d: 'Ground ambulance charges for emergency transport to a panel hospital.' },
  ];
  const notCovered = [
    'Cosmetic or aesthetic procedures',
    'Pre-existing conditions (12-month waiting period)',
    'Self-inflicted injury or substance abuse treatment',
    'Experimental or unregistered treatments',
  ];
  const plans = [
    { name: 'Silver', price: '35,000', highlights: ['Inpatient cover up to PKR 1M', 'Surgical cover included', '450+ cashless hospitals', 'Emergency ambulance'], color: 'var(--ink-200)' },
    { name: 'Gold', price: '65,000', highlights: ['Inpatient cover up to PKR 3M', 'Maternity cover (PKR 150K)', 'OPD up to PKR 50K', 'Dental emergencies'], featured: true, color: 'var(--blue-600)' },
    { name: 'Platinum', price: '1,20,000', highlights: ['Inpatient cover up to PKR 7M', 'Maternity (PKR 300K)', 'Full OPD & dental', 'International emergency cover'], color: 'var(--navy-800)' },
  ];
  const addons = [
    { i: I.Heart, t: 'Critical illness rider', p: '+8,000/yr', d: 'Lump-sum payment on diagnosis of cancer, heart attack or stroke.' },
    { i: I.Eye, t: 'Vision care', p: '+3,500/yr', d: 'Spectacles, contact lenses and annual eye examination costs.' },
    { i: I.ShieldCheck, t: 'Dental care', p: '+4,200/yr', d: 'Fillings, extractions, root canals and annual check-up at panel clinics.' },
    { i: I.Users, t: 'Family floater add-on', p: '+25,000/yr', d: 'Extend cover to spouse and up to 3 dependent children on one policy.' },
  ];
  const docs = [
    'Policy wording — Health Insurance',
    'Panel hospital list (PDF)',
    'Claim form — Health',
    'Pre-authorisation form',
    'OPD reimbursement form',
    'Customer service charter',
  ];

  return (
    <>
      <ProductHero
        navigate={navigate}
        badge="Health Insurance"
        icon={I.Heart}
        title="Your health,"
        italic="our priority."
        desc="Individual and family health plans with cashless treatment at 450+ panel hospitals nationwide — from routine consultations to major surgery and maternity."
        stats={[['450+', 'Panel hospitals'], ['PKR 7M', 'Max cover'], ['24/7', 'Medical helpline']]}
        imgLabel="health cover"
      />
      <ProductTabs tabs={STANDARD_TABS} tab={tab} setTab={setTab} />
      {tab === 'coverage' && <CoverageTab covered={covered} notCovered={notCovered} />}
      {tab === 'plans' && <PlansTab navigate={navigate} plans={plans} note="Annual premiums for an individual aged 18–35. Family floater rates calculated on oldest member's age." />}
      {tab === 'addons' && <AddonsTab addons={addons} />}
      {tab === 'claims' && <ClaimsTab navigate={navigate} steps={[
        { d: 'Before admission', t: 'Pre-authorisation', dx: 'Call our medical helpline or use the app to pre-authorise planned hospitalisation.' },
        { d: 'At hospital', t: 'Cashless treatment', dx: 'Show your IGI health card. We bill the hospital directly — you pay nothing at discharge.' },
        { d: 'For reimbursement', t: 'Submit documents', dx: 'Upload original bills, discharge summary and prescriptions via the portal within 60 days.' },
        { d: 'Day 7–14', t: 'Reimbursement paid', dx: 'Approved reimbursement claims paid directly to your bank account.' },
      ]} />}
      {tab === 'docs' && <DocsTab docs={docs} />}
    </>
  );
}

/* ─── Marine ──────────────────────────────────────────────── */
function Marine({ navigate }) {
  const [tab, setTab] = React.useState('coverage');

  const covered = [
    { t: 'Import & export cargo', d: 'All-risk cover for goods in transit by sea, air or land (Institute Cargo Clauses A).' },
    { t: 'Inland transit', d: 'Goods in transit by road or rail within Pakistan, including loading and unloading.' },
    { t: 'General average', d: 'Proportional contribution to extraordinary expenses incurred for the common safety of the voyage.' },
    { t: 'Natural perils', d: 'Loss or damage caused by storms, flooding, stranding, sinking or capsizing.' },
    { t: 'Theft & pilferage', d: 'Loss of cargo due to theft, pilferage or non-delivery at destination.' },
    { t: 'War & strikes (marine)', d: 'Available as a separate endorsement under Institute War Clauses.' },
  ];
  const notCovered = [
    'Inherent vice or nature of goods',
    'Improper packaging by the shipper',
    'Delay, loss of market or consequential loss',
    'Wilful misconduct of the insured',
  ];
  const plans = [
    { name: 'ICC "C" — Basic', price: 'On enquiry', highlights: ['Major casualties only', 'Stranding, sinking, fire', 'General average', 'Best for bulk commodities'], color: 'var(--ink-200)' },
    { name: 'ICC "B" — Standard', price: 'On enquiry', highlights: ['All ICC C perils', 'Earthquake & volcanic eruption', 'Washing overboard', 'Entry of sea water'], featured: true, color: 'var(--blue-600)' },
    { name: 'ICC "A" — All Risk', price: 'On enquiry', highlights: ['All risks of loss or damage', 'Theft & pilferage', 'War & strikes (optional)', 'Refrigerated cargo available'], color: 'var(--navy-800)' },
  ];
  const addons = [
    { i: I.ShieldCheck, t: 'War & strikes cover', p: 'Rate on line', d: 'Extends cover under Institute War Clauses and Strikes Clauses (Cargo).' },
    { i: I.Sparkles, t: 'Refrigerated cargo', p: 'Rate on value', d: 'Temperature excursion monitoring and spoilage cover for perishable goods.' },
    { i: I.Building, t: 'Storage extension', p: '+As agreed', d: 'Extends cover during storage at intermediate warehouses for up to 60 days.' },
    { i: I.Anchor, t: 'Hull & machinery', p: 'Rate on hull value', d: 'Cover for vessels, barges and watercraft against marine perils and collision.' },
  ];
  const docs = [
    'Policy wording — Marine Cargo (ICC A)',
    'Policy wording — Marine Cargo (ICC B & C)',
    'Claim form — Marine',
    'Open cover declaration form',
    'Surveyor panel list (ports)',
    'Customer service charter',
  ];

  return (
    <>
      <ProductHero
        navigate={navigate}
        badge="Marine Insurance"
        icon={I.Anchor}
        title="Your cargo,"
        italic="safe at sea and beyond."
        desc="Comprehensive marine cargo, inland transit and hull insurance for importers, exporters and freight operators — from port to warehouse, across every shipping lane."
        stats={[['All-risk', 'ICC "A" cover'], ['Global', 'Network of surveyors'], ['24 hrs', 'Claim notification']]}
        imgLabel="marine cover"
      />
      <ProductTabs tabs={STANDARD_TABS} tab={tab} setTab={setTab} />
      {tab === 'coverage' && <CoverageTab covered={covered} notCovered={notCovered} />}
      {tab === 'plans' && <PlansTab navigate={navigate} plans={plans} note="Marine premiums are calculated on cargo value and voyage risk. Contact our marine team for a tailored quote." />}
      {tab === 'addons' && <AddonsTab addons={addons} />}
      {tab === 'claims' && <ClaimsTab navigate={navigate} steps={[
        { d: 'Immediately', t: 'Notify IGI & carrier', dx: 'Report loss to IGI and note protest with the carrier/shipping line within 3 days of discovery.' },
        { d: 'Day 1–2', t: 'Surveyor appointed', dx: 'IGI appoints an independent marine surveyor to inspect and report on the loss.' },
        { d: 'Day 3–10', t: 'Survey & documents', dx: 'Submit bill of lading, packing list, invoice and survey report for assessment.' },
        { d: 'Day 10–21', t: 'Settlement', dx: 'Claims paid in PKR equivalent of the agreed cargo value at the time of loss.' },
      ]} />}
      {tab === 'docs' && <DocsTab docs={docs} />}
    </>
  );
}

/* ─── Fire & Allied Perils ────────────────────────────────── */
function Fire({ navigate }) {
  const [tab, setTab] = React.useState('coverage');

  const covered = [
    { t: 'Fire & lightning', d: 'Direct loss or damage caused by fire, lightning or thunderbolt.' },
    { t: 'Explosion', d: 'Explosion of boilers, gas cylinders or other pressure vessels (non-industrial boilers).' },
    { t: 'Riot, strike & malicious damage', d: 'Physical loss or damage caused by rioters, strikers or malicious persons.' },
    { t: 'Flood, storm & inundation', d: 'Damage caused by rising water, storm, tempest or overflowing of water bodies.' },
    { t: 'Earthquake & volcanic eruption', d: 'Structural damage and contents loss caused by seismic or volcanic events.' },
    { t: 'Impact damage', d: 'Damage caused by impact from vehicles, aircraft or falling trees.' },
  ];
  const notCovered = [
    'Spontaneous heating, fermentation or self-ignition of goods',
    'Damage caused by war or nuclear risk',
    'Consequential loss / loss of profit (separate BI policy needed)',
    'Gradual deterioration or inherent defect',
  ];
  const plans = [
    { name: 'Standard Fire', price: 'On enquiry', highlights: ['Fire & lightning', 'Explosion cover', 'Third-party liability', 'Debris removal costs'], color: 'var(--ink-200)' },
    { name: 'Fire + Allied Perils', price: 'On enquiry', highlights: ['All Standard Fire perils', 'RSMD cover', 'Flood & storm', 'Earthquake & eruption'], featured: true, color: 'var(--blue-600)' },
    { name: 'Industrial All Risk', price: 'On enquiry', highlights: ['All Allied Perils cover', 'Machinery breakdown', 'Business interruption option', 'Tailored for large plants'], color: 'var(--navy-800)' },
  ];
  const addons = [
    { i: I.TrendingUp, t: 'Business interruption / Loss of profit', p: 'Rate on gross profit', d: 'Covers ongoing fixed costs and lost profit during the indemnity period following a fire loss.' },
    { i: I.Wrench, t: 'Machinery breakdown', p: 'Rate on plant value', d: 'Sudden and unforeseen mechanical or electrical breakdown of insured machinery.' },
    { i: I.Zap, t: 'Boiler & pressure vessel', p: 'Rate on vessel value', d: 'Explosion of boilers, economisers and pressure vessels used in industrial processes.' },
    { i: I.Building, t: 'Advance loss of profit (ALOP)', p: 'On enquiry', d: 'Delays in commencement of operations at a new project due to an insured peril.' },
  ];
  const docs = [
    'Policy wording — Fire & Allied Perils',
    'Business interruption — policy wording',
    'Claim form — Fire & Property',
    'Risk inspection checklist',
    'Approved fire-safety standards guide',
    'Customer service charter',
  ];

  return (
    <>
      <ProductHero
        navigate={navigate}
        badge="Fire & Allied Perils Insurance"
        icon={I.Flame}
        title="Protect your property"
        italic="from every threat."
        desc="Comprehensive fire and allied perils cover for industrial, commercial and residential properties — safeguarding your buildings, stock, plant and machinery against fire, flood, earthquake and more."
        stats={[['Full rebuilding', 'Replacement cost basis'], ['72 hrs', 'Surveyor on site'], ['All perils', 'Policy available']]}
        imgLabel="fire cover"
      />
      <ProductTabs tabs={STANDARD_TABS} tab={tab} setTab={setTab} />
      {tab === 'coverage' && <CoverageTab covered={covered} notCovered={notCovered} />}
      {tab === 'plans' && <PlansTab navigate={navigate} plans={plans} note="Fire premiums are rated on sum insured, construction type, occupancy and fire protection measures. Contact our team for a site-specific quote." />}
      {tab === 'addons' && <AddonsTab addons={addons} />}
      {tab === 'claims' && <ClaimsTab navigate={navigate} steps={[
        { d: 'Immediately', t: 'Notify IGI & authorities', dx: 'Call 021-111-308-308. Notify fire brigade / police. Preserve evidence — do not disturb the site.' },
        { d: 'Day 1–3', t: 'Loss adjuster appointed', dx: 'IGI appoints a qualified loss adjuster to visit the site and assess the extent of damage.' },
        { d: 'Day 5–15', t: 'Assessment & quantum', dx: 'Adjuster prepares a detailed loss report; reinstatement estimates obtained from contractors.' },
        { d: 'As agreed', t: 'Settlement', dx: 'Agreed quantum paid promptly — reinstatement basis or market value as per policy.' },
      ]} />}
      {tab === 'docs' && <DocsTab docs={docs} />}
    </>
  );
}

/* ─── Engineering ─────────────────────────────────────────── */
function Engineering({ navigate }) {
  const [tab, setTab] = React.useState('coverage');

  const covered = [
    { t: "Contractor's All Risk (CAR)", d: 'Loss or damage to contract works, plant & equipment, and third-party liability during construction.' },
    { t: 'Erection All Risk (EAR)', d: 'All-risk cover during erection, testing and commissioning of mechanical and electrical plant.' },
    { t: 'Machinery Breakdown (MB)', d: 'Sudden and unforeseen mechanical or electrical breakdown of installed machinery.' },
    { t: 'Electronic Equipment Insurance', d: 'Loss, damage or breakdown of computers, medical equipment and electronic systems.' },
    { t: 'Boiler & Pressure Vessel', d: 'Explosion and collapse of boilers, steam vessels and pressure equipment.' },
    { t: 'Deterioration of Stock (DOS)', d: 'Loss of stock in cold storage following breakdown of refrigeration plant.' },
  ];
  const notCovered = [
    'Faulty design (professional indemnity covers this separately)',
    'Wear & tear, gradual deterioration',
    'War, nuclear or radioactive contamination',
    'Loss of use / consequential loss (unless BI extension added)',
  ];
  const plans = [
    { name: 'CAR / EAR', price: 'On enquiry', highlights: ['Contract works cover', 'Construction plant & equipment', 'Third-party liability', 'Testing period included'], color: 'var(--ink-200)' },
    { name: 'Machinery Breakdown', price: 'On enquiry', highlights: ['All installed machinery', 'Electrical & mechanical failure', 'OT & emergency repair costs', 'Expediting expenses'], featured: true, color: 'var(--blue-600)' },
    { name: 'Engineering All Lines', price: 'On enquiry', highlights: ['CAR / EAR combined', 'Machinery breakdown', 'Electronic equipment', 'BI / advanced loss of profit'], color: 'var(--navy-800)' },
  ];
  const addons = [
    { i: I.TrendingUp, t: 'Advanced Loss of Profit (ALOP)', p: 'On enquiry', d: 'Delay in project revenue caused by an insured loss during construction or erection.' },
    { i: I.Sparkles, t: 'Extended Maintenance Period', p: 'On enquiry', d: 'Continues cover during the maintenance period after project completion and hand-over.' },
    { i: I.Users, t: "Employer's liability extension", p: 'On enquiry', d: 'Covers legal liability to employees injured during the construction or erection period.' },
    { i: I.Globe, t: 'Cross-border project cover', p: 'On enquiry', d: 'Extends CAR / EAR policy to cover materials and equipment temporarily moved abroad.' },
  ];
  const docs = [
    'Policy wording — CAR Insurance',
    'Policy wording — EAR Insurance',
    'Policy wording — Machinery Breakdown',
    'Policy wording — Electronic Equipment',
    'Claim form — Engineering',
    'Risk inspection questionnaire',
  ];

  return (
    <>
      <ProductHero
        navigate={navigate}
        badge="Engineering Insurance"
        icon={I.HardHat}
        title="Build with confidence,"
        italic="covered every step."
        desc="Specialised engineering policies for construction projects, installed plant, and high-value machinery — protecting contractors, developers and industrial operators from unforeseen physical loss."
        stats={[['CAR / EAR', 'Full project cover'], ['All perils', 'Policy basis'], ['72 hrs', 'Site visit SLA']]}
        imgLabel="engineering cover"
      />
      <ProductTabs tabs={STANDARD_TABS} tab={tab} setTab={setTab} />
      {tab === 'coverage' && <CoverageTab covered={covered} notCovered={notCovered} />}
      {tab === 'plans' && <PlansTab navigate={navigate} plans={plans} note="Engineering premiums are individually rated based on contract value, project type, duration and risk profile." />}
      {tab === 'addons' && <AddonsTab addons={addons} />}
      {tab === 'claims' && <ClaimsTab navigate={navigate} steps={[
        { d: 'Immediately', t: 'Notify IGI & secure site', dx: 'Call 021-111-308-308. Secure the site to prevent further damage and preserve evidence.' },
        { d: 'Day 1–3', t: 'Engineer / adjuster appointed', dx: 'A qualified engineering adjuster and technical expert are dispatched for site assessment.' },
        { d: 'Day 5–20', t: 'Assessment & repair estimation', dx: 'Detailed technical report prepared; contractor quotes obtained for reinstatement works.' },
        { d: 'As agreed', t: 'Settlement / reinstatement', dx: 'Claims settled on reinstatement cost basis or agreed value, as per policy terms.' },
      ]} />}
      {tab === 'docs' && <DocsTab docs={docs} />}
    </>
  );
}

/* ─── Liability ───────────────────────────────────────────── */
function Liability({ navigate }) {
  const [tab, setTab] = React.useState('coverage');

  const covered = [
    { t: 'Public liability', d: 'Legal liability for bodily injury or property damage caused to third parties by your business operations.' },
    { t: 'Product liability', d: 'Claims arising from personal injury or property damage caused by products you manufacture or supply.' },
    { t: 'Professional indemnity', d: 'Legal defence costs and damages arising from errors, omissions or negligent professional advice.' },
    { t: "Employer's liability / Workmen's Comp", d: 'Statutory and common law liability to employees injured or killed during the course of employment.' },
    { t: 'Directors & Officers (D&O)', d: 'Personal liability of directors and officers for wrongful acts in managing the company.' },
    { t: 'Cyber liability', d: 'First- and third-party losses arising from data breaches, ransomware and cyber incidents.' },
  ];
  const notCovered = [
    'Criminal fines, penalties or punitive damages',
    'Intentional or fraudulent acts of the insured',
    'Contractual liability (unless specifically endorsed)',
    'War, terrorism or nuclear contamination',
  ];
  const plans = [
    { name: 'Public Liability', price: 'On enquiry', highlights: ['Third-party BI & PD cover', 'Legal defence costs included', 'On-site & off-site activities', 'Suitable for SMEs'], color: 'var(--ink-200)' },
    { name: 'Professional Indemnity', price: 'On enquiry', highlights: ['Errors & omissions cover', 'Legal defence costs', 'Worldwide jurisdiction (optional)', 'Run-off cover available'], featured: true, color: 'var(--blue-600)' },
    { name: 'Corporate Liability Suite', price: 'On enquiry', highlights: ['D&O + EPL combined', 'Product & public liability', 'Cyber liability included', 'Tailored for corporates'], color: 'var(--navy-800)' },
  ];
  const addons = [
    { i: I.Globe, t: 'Worldwide jurisdiction endorsement', p: 'On enquiry', d: 'Extends PI or PL cover to include claims filed in USA / Canada jurisdictions.' },
    { i: I.ShieldCheck, t: 'Cyber liability extension', p: 'On enquiry', d: 'Data breach response, ransomware, business interruption and third-party cyber claims.' },
    { i: I.Users, t: 'Employment practices liability (EPL)', p: 'On enquiry', d: 'Claims by employees for wrongful dismissal, harassment or discrimination.' },
    { i: I.FileText, t: 'Legal expenses insurance', p: 'On enquiry', d: 'Covers legal costs for commercial contract disputes, not just liability claims.' },
  ];
  const docs = [
    'Policy wording — Public Liability',
    'Policy wording — Professional Indemnity',
    'Policy wording — Directors & Officers',
    'Claim form — Liability',
    'Proposal form — PI / D&O',
    'Customer service charter',
  ];

  return (
    <>
      <ProductHero
        navigate={navigate}
        badge="Liability Insurance"
        icon={I.Scale}
        title="Run your business"
        italic="without legal fear."
        desc="Public, product, professional indemnity, employer's liability and D&O policies — protecting your business and its people against the financial consequences of claims and legal action."
        stats={[['Full legal', 'Defence costs covered'], ['Bespoke', 'Limits available'], ['D&O', 'Cover for executives']]}
        imgLabel="liability cover"
      />
      <ProductTabs tabs={STANDARD_TABS} tab={tab} setTab={setTab} />
      {tab === 'coverage' && <CoverageTab covered={covered} notCovered={notCovered} />}
      {tab === 'plans' && <PlansTab navigate={navigate} plans={plans} note="Liability premiums depend on turnover, nature of business, indemnity limit required and claims history." />}
      {tab === 'addons' && <AddonsTab addons={addons} />}
      {tab === 'claims' && <ClaimsTab navigate={navigate} steps={[
        { d: 'Day 1', t: 'Report the claim / demand', dx: 'Notify IGI immediately upon receipt of any claim, demand, writ or summons. Do not admit liability.' },
        { d: 'Day 1–5', t: 'Legal panel appointed', dx: 'IGI appoints experienced defence counsel from our legal panel to handle the matter.' },
        { d: 'Ongoing', t: 'Investigation & defence', dx: 'Our claims and legal teams manage investigation, correspondence and court proceedings.' },
        { d: 'Resolution', t: 'Settlement or judgment', dx: 'Claims settled within policy limits; defence costs and damages paid directly by IGI.' },
      ]} />}
      {tab === 'docs' && <DocsTab docs={docs} />}
    </>
  );
}

/* ─── Crop ────────────────────────────────────────────────── */
function Crop({ navigate }) {
  const [tab, setTab] = React.useState('coverage');

  const covered = [
    { t: 'Drought & rainfall deficit', d: 'Triggered when cumulative rainfall falls below a pre-agreed index threshold during the crop season.' },
    { t: 'Flood & excess rainfall', d: 'Loss triggered by excess rainfall causing waterlogging or crop submergence beyond the index trigger.' },
    { t: 'Pest & disease outbreak', d: 'Yield shortfall linked to verified pest or disease outbreaks under Multi-Peril Crop Insurance (MPCI).' },
    { t: 'Temperature extremes (frost / heat)', d: 'Weather-index trigger for temperature excursions damaging crops at critical growth stages.' },
    { t: 'Hailstorm damage', d: 'Named-peril cover for direct physical crop damage from hailstorms.' },
    { t: 'Area yield index cover', d: 'Payout triggered when area-level average yield falls below the guaranteed threshold.' },
  ];
  const notCovered = [
    'Losses due to farmer negligence or poor agronomic practice',
    'Theft or pilferage of harvested produce',
    'Equipment or irrigation system breakdown',
    'Price risk or commodity market losses',
  ];
  const plans = [
    { name: 'Weather Index', price: 'On enquiry', highlights: ['Objective weather triggers', 'Fast parametric payouts', 'Drought & excess rain', 'Transparent index design'], color: 'var(--ink-200)' },
    { name: 'Area Yield Index', price: 'On enquiry', highlights: ['Yield-based trigger', 'Covers multiple perils', 'Based on official crop-cut data', 'Wheat, cotton, sugarcane & rice'], featured: true, color: 'var(--blue-600)' },
    { name: 'MPCI (Multi-Peril)', price: 'On enquiry', highlights: ['Broadest crop protection', 'All major perils covered', 'Yield shortfall compensation', 'Suitable for large farms & banks'], color: 'var(--navy-800)' },
  ];
  const addons = [
    { i: I.Sparkles, t: 'Livestock cover', p: 'On enquiry', d: 'Mortality and accident cover for cattle, poultry and other farm animals.' },
    { i: I.Building, t: 'Farm structure cover', p: 'On enquiry', d: 'Physical damage to farm buildings, grain stores and irrigation infrastructure.' },
    { i: I.TrendingUp, t: 'Input cost cover', p: 'On enquiry', d: 'Protects fertiliser, seed and pesticide investment if the crop fails before harvest.' },
    { i: I.Globe, t: 'Export crop endorsement', p: 'On enquiry', d: 'Extended cover for quality deterioration affecting export-grade produce.' },
  ];
  const docs = [
    'Policy wording — Weather Index Crop Insurance',
    'Policy wording — MPCI',
    'Area yield guarantee tables (by district)',
    'Claim form — Crop',
    'Index trigger methodology note',
    'Customer service charter',
  ];

  return (
    <>
      <ProductHero
        navigate={navigate}
        badge="Crop Insurance"
        icon={I.Wheat}
        title="Protect your harvest,"
        italic="every season."
        desc="Yield-index and weather-based crop insurance for farmers, agri-businesses and lending institutions — ensuring that a bad monsoon or pest outbreak doesn't wipe out a year's work."
        stats={[['MPCI', 'Multi-peril cover'], ['Area yield', 'Index available'], ['Swift', 'Parametric payouts']]}
        imgLabel="crop cover"
      />
      <ProductTabs tabs={STANDARD_TABS} tab={tab} setTab={setTab} />
      {tab === 'coverage' && <CoverageTab covered={covered} notCovered={notCovered} />}
      {tab === 'plans' && <PlansTab navigate={navigate} plans={plans} note="Crop premiums depend on crop type, district, sum insured per acre and selected trigger level. Contact our agri-team for a tailored quote." />}
      {tab === 'addons' && <AddonsTab addons={addons} />}
      {tab === 'claims' && <ClaimsTab navigate={navigate} steps={[
        { d: 'At trigger event', t: 'Automatic or reported', dx: 'Weather-index claims trigger automatically from official weather station data. MPCI losses must be reported within 7 days of occurrence.' },
        { d: 'Day 1–7', t: 'Field assessment', dx: 'An IGI-appointed crop loss assessor visits the farm to verify the loss and gather crop-cut data.' },
        { d: 'Day 7–21', t: 'Loss calculation', dx: 'Loss quantified against the guaranteed yield or weather index threshold per the policy schedule.' },
        { d: 'Day 21–30', t: 'Payout', dx: 'Claims paid directly to the farmer or lending institution at the agreed rate per acre.' },
      ]} />}
      {tab === 'docs' && <DocsTab docs={docs} />}
    </>
  );
}

/* ─── Corporate / Group ───────────────────────────────────── */
function Corporate({ navigate }) {
  const [tab, setTab] = React.useState('coverage');

  const covered = [
    { t: 'Group health insurance', d: 'Cashless inpatient, OPD, maternity and dental cover for your entire workforce and their families.' },
    { t: 'Group personal accident', d: 'Accidental death and permanent total / partial disability for all enrolled employees.' },
    { t: 'Key man insurance', d: 'Life and disability cover for key executives whose loss would materially impact the business.' },
    { t: 'Corporate fleet motor', d: 'Comprehensive cover for company vehicles with priority repair at 180+ approved workshops.' },
    { t: 'Marine cargo (open cover)', d: 'Automatic open cover for all import / export shipments declared throughout the policy year.' },
    { t: 'Trade credit insurance', d: 'Protection against non-payment by buyers due to insolvency or protracted default.' },
  ];
  const notCovered = [
    'Individual health claims for employees excluded from group roster',
    'Consequential losses not covered under the specific sub-policy',
    'Director loans or inter-company transactions under trade credit',
    'Personal use of company vehicles (unless specifically endorsed)',
  ];
  const plans = [
    { name: 'SME Package', price: 'On enquiry', highlights: ['5–50 employees', 'Group health + GPA', 'Fleet motor cover', 'Dedicated relationship manager'], color: 'var(--ink-200)' },
    { name: 'Business', price: 'On enquiry', highlights: ['51–200 employees', 'All SME covers', 'Marine open cover', 'Directors & Officers', 'Quarterly claims report'], featured: true, color: 'var(--blue-600)' },
    { name: 'Enterprise', price: 'On enquiry', highlights: ['200+ employees', 'All Business covers', 'Key man insurance', 'Trade credit', 'Bespoke underwriting'], color: 'var(--navy-800)' },
  ];
  const addons = [
    { i: I.Heart, t: 'Group life (via IGI Life)', p: 'On enquiry', d: 'Term life cover for all employees with sum assured linked to salary multiples.' },
    { i: I.Globe, t: 'Group travel', p: 'On enquiry', d: 'Annual multi-trip travel policy covering all employee business travel worldwide.' },
    { i: I.ShieldCheck, t: 'Cyber liability', p: 'On enquiry', d: 'Data breach, ransomware and business interruption cover for corporate digital risks.' },
    { i: I.Users, t: 'Directors & Officers (D&O)', p: 'On enquiry', d: 'Personal liability protection for board members against wrongful acts in their managerial roles.' },
  ];
  const docs = [
    'Group health — master policy wording',
    'Group personal accident — policy wording',
    'Corporate fleet — fleet schedule template',
    'Trade credit — proposal form',
    'Claim form — Group health',
    'Employee enrolment form template',
  ];

  return (
    <>
      <ProductHero
        navigate={navigate}
        badge="Group & Corporate Insurance"
        icon={I.Building}
        title="Protect your people,"
        italic="power your business."
        desc="Tailored insurance solutions for businesses of every size — group health, fleet motor, marine open covers, trade credit and key-man policies managed by a dedicated corporate team."
        stats={[['Bespoke', 'Corporate solutions'], ['Single point', 'Relationship manager'], ['Quarterly', 'Claims reporting']]}
        imgLabel="corporate cover"
      />
      <ProductTabs tabs={STANDARD_TABS} tab={tab} setTab={setTab} />
      {tab === 'coverage' && <CoverageTab covered={covered} notCovered={notCovered} />}
      {tab === 'plans' && <PlansTab navigate={navigate} plans={plans} note="Corporate premiums are structured based on headcount, payroll, fleet size and specific risk requirements. Request a corporate proposal." />}
      {tab === 'addons' && <AddonsTab addons={addons} />}
      {tab === 'claims' && <ClaimsTab navigate={navigate} steps={[
        { d: 'Day 1', t: 'Report via corporate portal', dx: 'Submit claims through your dedicated corporate portal or contact your relationship manager directly.' },
        { d: 'Day 1–2', t: 'Claims team assigned', dx: 'A dedicated corporate claims handler is assigned — single point of contact for all sub-policies.' },
        { d: 'Ongoing', t: 'Assessment & coordination', dx: 'IGI coordinates with surveyors, hospitals and panel providers across all active claims.' },
        { d: 'As per policy', t: 'Consolidated settlement', dx: 'Claims settled per sub-policy terms with monthly consolidated reporting to your finance team.' },
      ]} />}
      {tab === 'docs' && <DocsTab docs={docs} />}
    </>
  );
}

Object.assign(window, { HomeProp, Travel, Health, Marine, Fire, Engineering, Liability, Crop, Corporate });