/* IGI — Locator (Hospitals + Workshops), About, Contact */

function Locator() {
  const [type, setType] = React.useState('hospitals');
  const [city, setCity] = React.useState('Karachi');
  const [search, setSearch] = React.useState('');

  const data = {
    hospitals: [
      { name: 'Aga Khan University Hospital', city: 'Karachi', area: 'Stadium Road', tags: ['Tertiary care', 'Cashless', '24/7 ER'], specs: 'Cardiology · Oncology · Maternity' },
      { name: 'Liaquat National Hospital', city: 'Karachi', area: 'Stadium Road', tags: ['Tertiary care', 'Cashless'], specs: 'Multi-speciality · Pediatric ICU' },
      { name: 'Indus Hospital', city: 'Karachi', area: 'Korangi', tags: ['Cashless', 'Charitable'], specs: 'General · Trauma' },
      { name: 'Ziauddin Hospital', city: 'Karachi', area: 'Clifton', tags: ['Cashless', '24/7 ER'], specs: 'Cardiac · Orthopedic' },
      { name: 'Shaukat Khanum Memorial', city: 'Lahore', area: 'Johar Town', tags: ['Cashless', 'Specialist'], specs: 'Oncology · Diagnostics' },
      { name: 'Doctors Hospital', city: 'Lahore', area: 'Johar Town', tags: ['Cashless', '24/7 ER'], specs: 'Cardiac · Neurology' },
      { name: 'Hameed Latif Hospital', city: 'Lahore', area: 'Garden Town', tags: ['Cashless'], specs: 'Maternity · General' },
      { name: 'Shifa International', city: 'Islamabad', area: 'H-8/4', tags: ['Cashless', 'Tertiary care', '24/7 ER'], specs: 'Cardiac · Liver Transplant' },
      { name: 'Maroof International', city: 'Islamabad', area: 'F-10', tags: ['Cashless'], specs: 'Multi-speciality' },
      { name: 'KRL Hospital', city: 'Islamabad', area: 'G-9', tags: ['Cashless'], specs: 'General · Maternity' },
    ],
    workshops: [
      { name: 'Toyota Defence Motors', city: 'Karachi', area: 'DHA Phase 6', tags: ['Authorized', 'Same-day estimate'], specs: 'Toyota & Lexus' },
      { name: 'Honda Quaideen', city: 'Karachi', area: 'Shahrah-e-Faisal', tags: ['Authorized'], specs: 'Honda · all models' },
      { name: 'Suzuki South', city: 'Karachi', area: 'Korangi Industrial', tags: ['Authorized', 'Cashless'], specs: 'Suzuki · light commercial' },
      { name: 'Toyota Walton Motors', city: 'Lahore', area: 'Walton Road', tags: ['Authorized', 'Same-day estimate'], specs: 'Toyota & Lexus' },
      { name: 'Honda Airport', city: 'Lahore', area: 'Allama Iqbal Town', tags: ['Authorized'], specs: 'Honda · all models' },
      { name: 'Suzuki Capital', city: 'Islamabad', area: 'I-10/3', tags: ['Authorized', 'Cashless'], specs: 'Suzuki passenger & commercial' },
      { name: 'BMW Dewan Motors', city: 'Karachi', area: 'Clifton Block 4', tags: ['Authorized', 'Premium'], specs: 'BMW · MINI' },
      { name: 'Mercedes Shahnawaz', city: 'Karachi', area: 'Korangi Road', tags: ['Authorized', 'Premium'], specs: 'Mercedes-Benz' },
    ],
  };

  const items = data[type].filter(d =>
    (city === 'All' || d.city === city) &&
    (search === '' || d.name.toLowerCase().includes(search.toLowerCase()))
  );

  return (
    <>
      <section className="page-hero">
        <div className="container">
          <span className="badge badge-blue"><I.MapPin size={12} /> Network locator</span>
          <h1 className="h-display" style={{ marginTop: 12, maxWidth: 720 }}>
            Find a panel hospital<br />or <span className="serif" style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--blue-700)' }}>approved workshop.</span>
          </h1>
          <p style={{ marginTop: 16, fontSize: 17, color: 'var(--ink-700)', maxWidth: 560 }}>
            450+ hospitals and 180+ workshops across all major cities. Cashless treatment & repair, no out-of-pocket hassle.
          </p>
        </div>
      </section>

      <section style={{ padding: '32px 0 80px' }}>
        <div className="container">
          {/* Toggle + filters */}
          <div className="card" style={{ padding: 20, marginBottom: 24, display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
            <div style={{ display: 'flex', background: 'var(--ink-100)', borderRadius: 999, padding: 4 }}>
              {[['hospitals', 'Hospitals', I.Hospital], ['workshops', 'Workshops', I.Wrench]].map(([id, l, Ic]) => (
                <button key={id} onClick={() => setType(id)} style={{
                  padding: '10px 20px', borderRadius: 999, fontSize: 14, fontWeight: 600,
                  background: type === id ? 'white' : 'transparent',
                  color: type === id ? 'var(--navy-800)' : 'var(--ink-500)',
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                  boxShadow: type === id ? 'var(--shadow-sm)' : 'none',
                }}>
                  <Ic size={16} /> {l}
                </button>
              ))}
            </div>
            <div style={{ flex: 1, minWidth: 200, position: 'relative' }}>
              <I.Search size={16} style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)', color: 'var(--ink-500)' }} />
              <input className="field-input" placeholder={`Search ${type}…`} value={search} onChange={e => setSearch(e.target.value)} style={{ paddingLeft: 40 }} />
            </div>
            <select className="field-select" value={city} onChange={e => setCity(e.target.value)} style={{ width: 180 }}>
              <option>All</option><option>Karachi</option><option>Lahore</option><option>Islamabad</option><option>Rawalpindi</option><option>Faisalabad</option>
            </select>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 360px', gap: 24 }} className="loc-grid">
            <div>
              <div style={{ fontSize: 14, color: 'var(--ink-500)', marginBottom: 12 }}>{items.length} results</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {items.map((it, i) => (
                  <div key={i} className="card" style={{ padding: 20, display: 'grid', gridTemplateColumns: '40px 1fr auto', gap: 16, alignItems: 'center' }}>
                    <span style={{ width: 40, height: 40, borderRadius: 10, background: type === 'hospitals' ? '#fef2f2' : 'var(--blue-50)', color: type === 'hospitals' ? '#dc2626' : 'var(--blue-700)', display: 'grid', placeItems: 'center' }}>
                      {type === 'hospitals' ? <I.Hospital size={18} /> : <I.Wrench size={18} />}
                    </span>
                    <div>
                      <div style={{ fontSize: 15, fontWeight: 700 }}>{it.name}</div>
                      <div style={{ fontSize: 12, color: 'var(--ink-500)', marginTop: 2 }}>
                        <I.MapPin size={11} style={{ display: 'inline', marginRight: 4, verticalAlign: -1 }} />
                        {it.area}, {it.city} · {it.specs}
                      </div>
                      <div style={{ display: 'flex', gap: 6, marginTop: 8, flexWrap: 'wrap' }}>
                        {it.tags.map(t => (
                          <span key={t} style={{
                            fontSize: 10, fontWeight: 600,
                            padding: '2px 8px', borderRadius: 4,
                            background: t === 'Cashless' ? '#ecfdf5' : t === 'Authorized' ? 'var(--blue-50)' : 'var(--ink-100)',
                            color: t === 'Cashless' ? '#047857' : t === 'Authorized' ? 'var(--blue-700)' : 'var(--ink-700)',
                          }}>{t.toUpperCase()}</span>
                        ))}
                      </div>
                    </div>
                    <button className="btn btn-ghost btn-sm">Directions <I.ArrowUpRight size={14} /></button>
                  </div>
                ))}
                {items.length === 0 && (
                  <div className="card" style={{ padding: 40, textAlign: 'center', color: 'var(--ink-500)' }}>
                    No results. Try a different city or search term.
                  </div>
                )}
              </div>
            </div>

            {/* Map placeholder */}
            <div className="card" style={{ padding: 0, position: 'sticky', top: 100, height: 'fit-content', overflow: 'hidden' }}>
              <div style={{
                height: 400,
                background: `
                  linear-gradient(135deg, transparent 49%, var(--ink-200) 49% 51%, transparent 51%) 0 0/40px 40px,
                  linear-gradient(45deg, transparent 49%, var(--ink-200) 49% 51%, transparent 51%) 0 0/40px 40px,
                  var(--ink-50)
                `,
                position: 'relative',
              }}>
                {[[30, 35], [55, 40], [40, 60], [70, 30], [60, 70], [25, 55]].map(([x, y], i) => (
                  <div key={i} style={{
                    position: 'absolute', left: `${x}%`, top: `${y}%`,
                    width: 28, height: 28, borderRadius: '50% 50% 50% 0',
                    transform: 'rotate(-45deg)',
                    background: 'var(--blue-600)', color: 'white',
                    display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 700,
                    boxShadow: '0 4px 12px rgba(37, 99, 235, 0.4)',
                  }}>
                    <span style={{ transform: 'rotate(45deg)' }}>{i+1}</span>
                  </div>
                ))}
                <div style={{ position: 'absolute', bottom: 12, right: 12, padding: '6px 10px', background: 'white', borderRadius: 6, fontSize: 11, color: 'var(--ink-500)', boxShadow: 'var(--shadow-sm)' }}>
                  Map preview · Live map in full app
                </div>
              </div>
              <div style={{ padding: 16, borderTop: '1px solid var(--ink-200)' }}>
                <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 4 }}>Nearest to you</div>
                <div style={{ fontSize: 12, color: 'var(--ink-500)' }}>Enable location to see distance & ETA</div>
                <button className="btn btn-ghost btn-sm" style={{ width: '100%', marginTop: 10 }}><I.MapPin size={14} /> Use my location</button>
              </div>
            </div>
          </div>
        </div>
      </section>
      <style>{`@media (max-width: 920px) { .loc-grid { grid-template-columns: 1fr !important; } }`}</style>
    </>
  );
}

/* ----- ABOUT ----- */
function About({ navigate }) {
  return (
    <>
      <section className="page-hero" style={{ paddingBottom: 64 }}>
        <div className="container" style={{ maxWidth: 880 }}>
          <span className="badge badge-blue"><I.Building size={12} /> About IGI General</span>
          <h1 className="h-display" style={{ marginTop: 12 }}>
            Seventy-two years of<br />
            <span className="serif" style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--blue-700)' }}>protecting Pakistan.</span>
          </h1>
          <p style={{ marginTop: 20, fontSize: 19, lineHeight: 1.55, color: 'var(--ink-700)', maxWidth: 720 }}>
            Incorporated in November 1953 as a joint venture between Alliance PLC (UK) and the Ali Group, IGI is today a flagship enterprise of the Packages Group — headquartered in Karachi with offices in 9 cities nationwide. PACRA-rated AA for nine consecutive years.
          </p>
        </div>
      </section>

      <section>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32, marginBottom: 80 }} className="about-stats">
            {[
              ['1953', 'Founded'],
              ['9', 'Cities nationwide'],
              ['PKR 14.3B', 'Gross premium 2023'],
              ['AA', 'PACRA · 9 years'],
            ].map(([n, l]) => (
              <div key={l}>
                <div className="serif" style={{ fontSize: 56, color: 'var(--navy-800)', letterSpacing: '-0.04em', lineHeight: 1 }}>{n}</div>
                <div style={{ fontSize: 13, color: 'var(--ink-500)', marginTop: 8, textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600 }}>{l}</div>
              </div>
            ))}
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 64, alignItems: 'center', marginBottom: 80 }} className="about-grid">
            <div className="placeholder-img" style={{ aspectRatio: '4/5', minHeight: 420 }}>[ photo: head office Karachi ]</div>
            <div>
              <div className="eyebrow">Our story</div>
              <h2 className="h-1" style={{ marginTop: 8 }}>Built in Karachi.<br/>Trusted across Pakistan.</h2>
              <p style={{ marginTop: 20, fontSize: 16, color: 'var(--ink-700)', lineHeight: 1.7 }}>
                Founded as International General Insurance by Syed Maratib Ali, with Syed Babar Ali as its first MD. In 2004, we acquired the Pakistan operations of Royal & SunAlliance (RSA) UK, and in 2014 entered life insurance through the acquisition of MetLife Alico's Pakistan business — now IGI Life.
              </p>
              <p style={{ marginTop: 16, fontSize: 16, color: 'var(--ink-700)', lineHeight: 1.7 }}>
                We offer Fire, Motor, Marine, Travel, Health, Personal Accident, Home and Miscellaneous insurance, with reinsurance arrangements with "A"-rated foreign reinsurers. The first general insurer in Pakistan to obtain ISO 9002 certification.
              </p>
              <div style={{ display: 'flex', gap: 12, marginTop: 24 }}>
                <button className="btn btn-primary">Annual Report 2025 <I.Download size={14} /></button>
                <button className="btn btn-ghost">Investor relations <I.ArrowRight size={14} /></button>
              </div>
            </div>
          </div>

          <div style={{ background: 'var(--navy-900)', color: 'white', borderRadius: 24, padding: '64px 48px', marginBottom: 80, position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', top: '-30%', right: '-10%', width: 500, height: 500, background: 'radial-gradient(circle, rgba(37,99,235,0.3), transparent 60%)' }} />
            <div style={{ position: 'relative', maxWidth: 720 }}>
              <div className="eyebrow" style={{ color: '#93c5fd' }}>Our values</div>
              <h2 className="h-1" style={{ marginTop: 8, color: 'white' }}>What we stand for.</h2>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32, marginTop: 40 }} className="values-grid">
                {[
                  { t: 'Pay claims fast.', d: 'Every delay is a broken promise. We measure ourselves on settlement speed first.' },
                  { t: 'Speak human.', d: 'No fine print games. Our policy wording is reviewed by plain-language consultants.' },
                  { t: 'Pick up the phone.', d: '94% of calls answered within 30 seconds. We staff for peak, not for average.' },
                ].map((v, i) => (
                  <div key={i}>
                    <div className="serif" style={{ fontSize: 18, color: '#93c5fd' }}>0{i+1}</div>
                    <div style={{ fontSize: 22, fontWeight: 700, marginTop: 8 }}>{v.t}</div>
                    <p style={{ marginTop: 10, fontSize: 14, color: 'rgba(255,255,255,0.7)', lineHeight: 1.55 }}>{v.d}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div className="eyebrow">Leadership</div>
          <h2 className="h-1" style={{ marginTop: 8, marginBottom: 32 }}>The people steering IGI.</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 20 }}>
            {[
              { n: 'Tahir Masaud', r: 'Chief Executive Officer', sub: '24 years in insurance · Joined IGI 2019' },
              { n: 'Faiza Bhutta', r: 'Chief Operating Officer', sub: 'Former MD, Adamjee Allianz' },
              { n: 'Asad Khan', r: 'Chief Financial Officer', sub: 'CFA · ex-EY Pakistan' },
              { n: 'Sadia Latif', r: 'Chief Underwriting Officer', sub: 'FCII · 18 years experience' },
            ].map((p, i) => (
              <div key={i} className="card" style={{ padding: 24 }}>
                <div className="placeholder-img" style={{ aspectRatio: '1/1', borderRadius: '50%', width: 80, marginBottom: 16, fontSize: 10 }}>portrait</div>
                <div style={{ fontSize: 16, fontWeight: 700 }}>{p.n}</div>
                <div style={{ fontSize: 13, color: 'var(--blue-700)', fontWeight: 600, marginTop: 4 }}>{p.r}</div>
                <div style={{ fontSize: 12, color: 'var(--ink-500)', marginTop: 6, lineHeight: 1.5 }}>{p.sub}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <style>{`@media (max-width: 920px) { .about-stats { grid-template-columns: repeat(2, 1fr) !important; } .about-grid, .values-grid { grid-template-columns: 1fr !important; gap: 32px !important; } }`}</style>
    </>
  );
}

/* ----- CONTACT ----- */
function Contact() {
  const [topic, setTopic] = React.useState('general');
  return (
    <>
      <section className="page-hero">
        <div className="container">
          <span className="badge badge-blue"><I.Headset size={12} /> Get in touch</span>
          <h1 className="h-display" style={{ marginTop: 12, maxWidth: 700 }}>
            We're here<br />
            <span className="serif" style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--blue-700)' }}>to help.</span>
          </h1>
          <p style={{ marginTop: 16, fontSize: 17, color: 'var(--ink-700)', maxWidth: 560 }}>
            Whether you need a quote, want to file a claim, or just have a question — pick the channel that suits you.
          </p>
        </div>
      </section>

      <section>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 64 }} className="contact-channels">
            {[
              { i: I.Phone, l: 'Karachi UAN', v: '021-111-308-308', s: 'Or 021-111-567-567' },
              { i: I.Phone, l: 'Lahore UAN', v: '042-111-308-308', s: 'Toll-free 0800-2-34-34' },
              { i: I.Phone, l: 'Islamabad UAN', v: '051-111-308-308', s: 'Mon-Fri, 9am – 6pm' },
              { i: I.Mail, l: 'Email claims', v: 'claims@igi.com.pk', s: 'Reply within 4 hrs' },
            ].map(c => (
              <div key={c.l} className="card" style={{ padding: 24 }}>
                <span style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--blue-50)', color: 'var(--blue-700)', display: 'grid', placeItems: 'center', marginBottom: 16 }}>
                  <c.i size={20} />
                </span>
                <div style={{ fontSize: 12, color: 'var(--ink-500)', textTransform: 'uppercase', fontWeight: 600, letterSpacing: '0.06em' }}>{c.l}</div>
                <div style={{ fontSize: 17, fontWeight: 700, marginTop: 4 }}>{c.v}</div>
                <div style={{ fontSize: 12, color: 'var(--ink-500)', marginTop: 4 }}>{c.s}</div>
              </div>
            ))}
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 48 }} className="contact-grid">
            <div className="card" style={{ padding: 32 }}>
              <h2 className="h-2">Send us a message</h2>
              <p style={{ color: 'var(--ink-500)', marginTop: 6, marginBottom: 24 }}>We'll respond within 1 working day.</p>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                <Field label="Name"><input className="field-input" placeholder="Your full name" /></Field>
                <Field label="Email"><input className="field-input" type="email" placeholder="you@example.com" /></Field>
                <Field label="Mobile"><input className="field-input" placeholder="+92 3XX-XXXXXXX" /></Field>
                <Field label="City">
                  <select className="field-select"><option>Karachi</option><option>Lahore</option><option>Islamabad</option><option>Other</option></select>
                </Field>
                <div style={{ gridColumn: 'span 2' }}>
                  <Field label="What's this about?">
                    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                      {[['general', 'General'], ['quote', 'Get quote'], ['claim', 'Claim help'], ['complaint', 'Complaint'], ['career', 'Careers']].map(([id, l]) => (
                        <button key={id} onClick={() => setTopic(id)} style={{
                          padding: '8px 14px', borderRadius: 999, fontSize: 13, fontWeight: 600,
                          border: topic === id ? '1px solid var(--blue-600)' : '1px solid var(--ink-200)',
                          background: topic === id ? 'var(--blue-50)' : 'white',
                          color: topic === id ? 'var(--blue-700)' : 'var(--ink-700)',
                        }}>{l}</button>
                      ))}
                    </div>
                  </Field>
                </div>
                <div style={{ gridColumn: 'span 2' }}>
                  <Field label="Message"><textarea className="field-input" rows="5" placeholder="How can we help?" /></Field>
                </div>
              </div>
              <button className="btn btn-accent btn-lg" style={{ marginTop: 20 }}>Send message <I.Send size={14} /></button>
            </div>

            <div>
              <div className="card" style={{ padding: 28, marginBottom: 16 }}>
                <I.Building size={20} style={{ color: 'var(--navy-800)' }} />
                <div style={{ fontSize: 18, fontWeight: 700, marginTop: 12 }}>Head office</div>
                <div style={{ fontSize: 14, color: 'var(--ink-700)', marginTop: 8, lineHeight: 1.6 }}>
                  7th Floor, The Forum, Suite 701-713,<br />
                  G-20, Block 9, Khayaban-e-Jami,<br />
                  Clifton, Karachi – 75600, Pakistan<br />
                  <br />
                  <strong>Lahore:</strong> 5 FCC, Syed Maratib Ali Road, Gulberg II<br />
                  <strong>Islamabad:</strong> 3rd Floor, Kamran Centre, Blue Area<br />
                  <strong>UAN:</strong> 021-111-308-308 · <strong>Fax:</strong> +92-21-35301729
                </div>
              </div>
              <div className="card" style={{ padding: 28 }}>
                <I.Bell size={20} style={{ color: 'var(--warning)' }} />
                <div style={{ fontSize: 18, fontWeight: 700, marginTop: 12 }}>Lodge a complaint</div>
                <p style={{ fontSize: 13, color: 'var(--ink-500)', marginTop: 8, lineHeight: 1.6 }}>
                  Not satisfied with our service? Escalate directly to our Complaints Resolution Officer. We respond within 7 working days, as mandated by SECP.
                </p>
                <button className="btn btn-ghost btn-sm" style={{ marginTop: 16 }}>File a complaint <I.ArrowRight size={14} /></button>
              </div>
            </div>
          </div>
        </div>
      </section>

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

function Field({ label, children }) {
  return <div><label className="field-label">{label}</label>{children}</div>;
}

Object.assign(window, { Locator, About, Contact });