/* IGI — Claims Center */

function Claims({ navigate }) {
  const [tab, setTab] = React.useState('file');
  return (
    <>
      <section className="page-hero">
        <div className="container">
          <span className="badge badge-blue"><I.ShieldCheck size={12} /> Claims Center</span>
          <h1 className="h-display" style={{ marginTop: 12, maxWidth: 720 }}>
            We're here when<br />
            <span className="serif" style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--blue-700)' }}>things go wrong.</span>
          </h1>
          <p style={{ marginTop: 16, fontSize: 17, color: 'var(--ink-700)', maxWidth: 560 }}>
            File a new claim in minutes, track an existing one, or request emergency assistance — 24 hours a day, 7 days a week.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 24, flexWrap: 'wrap' }}>
            <a href="tel:111308308" className="btn btn-primary"><I.Phone size={14} /> Call 111-308-308</a>
            <button className="btn btn-ghost"><I.MessageCircle size={14} /> WhatsApp Us</button>
          </div>
        </div>
      </section>

      <section style={{ padding: '40px 0' }}>
        <div className="container">
          <div className="tabs" style={{ marginBottom: 32 }}>
            <button className={`tab ${tab === 'file' ? 'active' : ''}`} onClick={() => setTab('file')}>File a new claim</button>
            <button className={`tab ${tab === 'track' ? 'active' : ''}`} onClick={() => setTab('track')}>Track existing claim</button>
            <button className={`tab ${tab === 'help' ? 'active' : ''}`} onClick={() => setTab('help')}>Emergency help</button>
          </div>
          {tab === 'file' && <FileClaim />}
          {tab === 'track' && <TrackClaim />}
          {tab === 'help' && <EmergencyHelp />}
        </div>
      </section>
    </>
  );
}

function FileClaim() {
  const [step, setStep] = React.useState(0);
  const types = [
    { id: 'motor', i: I.Car, l: 'Motor', d: 'Accident, theft, damage' },
    { id: 'home', i: I.Home, l: 'Home', d: 'Burglary, fire, leakage' },
    { id: 'health', i: I.Heart, l: 'Health', d: 'Hospitalization, OPD' },
    { id: 'travel', i: I.Plane, l: 'Travel', d: 'Cancellation, baggage' },
  ];
  const [type, setType] = React.useState('motor');
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 32 }} className="claim-grid">
      <div className="card" style={{ padding: 32 }}>
        {step === 0 && (
          <>
            <div className="eyebrow">Step 1 of 3</div>
            <h2 style={{ fontSize: 22, fontWeight: 700, marginTop: 8, marginBottom: 6 }}>What type of claim is this?</h2>
            <p style={{ color: 'var(--ink-500)', marginBottom: 24 }}>Pick the policy type that matches your incident.</p>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
              {types.map(t => {
                const sel = type === t.id;
                return (
                  <button key={t.id} onClick={() => setType(t.id)} style={{
                    padding: 18, border: sel ? '2px solid var(--blue-600)' : '1px solid var(--ink-200)',
                    borderRadius: 10, background: sel ? 'var(--blue-50)' : 'white',
                    display: 'flex', alignItems: 'center', gap: 14, textAlign: 'left',
                  }}>
                    <span style={{ width: 40, height: 40, borderRadius: 8, background: sel ? 'var(--blue-600)' : 'var(--ink-100)', color: sel ? 'white' : 'var(--ink-700)', display: 'grid', placeItems: 'center' }}>
                      <t.i size={20} />
                    </span>
                    <div>
                      <div style={{ fontSize: 15, fontWeight: 700 }}>{t.l}</div>
                      <div style={{ fontSize: 12, color: 'var(--ink-500)' }}>{t.d}</div>
                    </div>
                  </button>
                );
              })}
            </div>
            <button className="btn btn-accent" style={{ marginTop: 24 }} onClick={() => setStep(1)}>Continue <I.ArrowRight size={14} /></button>
          </>
        )}
        {step === 1 && (
          <>
            <div className="eyebrow">Step 2 of 3</div>
            <h2 style={{ fontSize: 22, fontWeight: 700, marginTop: 8, marginBottom: 6 }}>Tell us what happened</h2>
            <p style={{ color: 'var(--ink-500)', marginBottom: 24 }}>The more detail you give, the faster we can act.</p>
            <div style={{ display: 'grid', gap: 16 }}>
              <Field label="Policy number"><input className="field-input" placeholder="POL-MTR-2024-XXXXXX" /></Field>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <Field label="Date of incident"><input type="date" className="field-input" defaultValue="2026-05-06" /></Field>
                <Field label="Time"><input type="time" className="field-input" defaultValue="14:30" /></Field>
              </div>
              <Field label="Where did it happen?"><input className="field-input" placeholder="Sharah-e-Faisal, near Drigh Road, Karachi" /></Field>
              <Field label="What happened? (brief description)">
                <textarea className="field-input" rows="3" placeholder="e.g. Hit from behind by another vehicle while stationary at a signal." />
              </Field>
              <Field label="Photos / documents (optional but recommended)">
                <div style={{ border: '2px dashed var(--ink-200)', borderRadius: 10, padding: 28, textAlign: 'center', color: 'var(--ink-500)' }}>
                  <I.Download size={24} style={{ display: 'inline-block', transform: 'rotate(180deg)', marginBottom: 8 }} />
                  <div style={{ fontWeight: 600, color: 'var(--navy-800)' }}>Drag photos here or browse</div>
                  <div style={{ fontSize: 12, marginTop: 4 }}>JPG, PNG, PDF up to 10MB each</div>
                </div>
              </Field>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 28 }}>
              <button className="btn btn-ghost" onClick={() => setStep(0)}><I.ChevronLeft size={14} /> Back</button>
              <button className="btn btn-accent" onClick={() => setStep(2)}>Submit claim <I.ArrowRight size={14} /></button>
            </div>
          </>
        )}
        {step === 2 && (
          <div style={{ textAlign: 'center', padding: '40px 0' }}>
            <div style={{ width: 72, height: 72, borderRadius: '50%', background: '#ecfdf5', color: '#047857', display: 'grid', placeItems: 'center', margin: '0 auto 20px' }}>
              <I.CheckCircle size={36} />
            </div>
            <h2 style={{ fontSize: 26, fontWeight: 700 }}>Claim submitted</h2>
            <p style={{ color: 'var(--ink-500)', marginTop: 8, fontSize: 15 }}>Reference number: <strong style={{ color: 'var(--navy-800)' }}>CLM-2026-04821</strong></p>
            <div style={{ marginTop: 32, padding: 20, background: 'var(--blue-50)', borderRadius: 12, maxWidth: 420, margin: '32px auto', textAlign: 'left' }}>
              <div style={{ fontWeight: 700, marginBottom: 12, color: 'var(--blue-700)' }}>What happens next</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13, color: 'var(--ink-700)' }}>
                <div style={{ display: 'flex', gap: 10 }}><I.Check size={16} style={{ color: 'var(--success)', flexShrink: 0, marginTop: 2 }} /> SMS confirmation sent to your registered mobile</div>
                <div style={{ display: 'flex', gap: 10 }}><I.Clock size={16} style={{ color: 'var(--blue-700)', flexShrink: 0, marginTop: 2 }} /> Surveyor will call within 4 working hours</div>
                <div style={{ display: 'flex', gap: 10 }}><I.User size={16} style={{ color: 'var(--ink-500)', flexShrink: 0, marginTop: 2 }} /> Track progress in your dashboard or via SMS updates</div>
              </div>
            </div>
            <button className="btn btn-primary" onClick={() => setStep(0)}>File another claim</button>
          </div>
        )}
      </div>

      <ClaimSidebar />
      <style>{`@media (max-width: 920px) { .claim-grid { grid-template-columns: 1fr !important; } }`}</style>
    </div>
  );
}

function ClaimSidebar() {
  return (
    <div>
      <div className="card" style={{ padding: 22 }}>
        <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 14 }}>Need help right now?</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <a href="tel:111308308" className="card" style={{ padding: 14, display: 'flex', gap: 12, alignItems: 'center' }}>
            <span style={{ width: 36, height: 36, borderRadius: 8, background: 'var(--navy-50)', color: 'var(--navy-800)', display: 'grid', placeItems: 'center' }}><I.Phone size={16} /></span>
            <div>
              <div style={{ fontSize: 13, fontWeight: 700 }}>24/7 Helpline</div>
              <div style={{ fontSize: 12, color: 'var(--ink-500)' }}>111-308-308</div>
            </div>
          </a>
          <a className="card" style={{ padding: 14, display: 'flex', gap: 12, alignItems: 'center', cursor: 'pointer' }}>
            <span style={{ width: 36, height: 36, borderRadius: 8, background: '#ecfdf5', color: '#047857', display: 'grid', placeItems: 'center' }}><I.MessageCircle size={16} /></span>
            <div>
              <div style={{ fontSize: 13, fontWeight: 700 }}>WhatsApp</div>
              <div style={{ fontSize: 12, color: 'var(--ink-500)' }}>+92 333-IGI-IGIO</div>
            </div>
          </a>
        </div>
      </div>
      <div className="card" style={{ padding: 22, marginTop: 16, background: 'var(--navy-800)', color: 'white', border: 0 }}>
        <I.Sparkles size={20} style={{ color: '#fbbf24' }} />
        <div style={{ fontSize: 16, fontWeight: 700, marginTop: 12 }}>Did you know?</div>
        <p style={{ fontSize: 13, color: 'rgba(255,255,255,0.78)', marginTop: 8, lineHeight: 1.5 }}>
          85% of motor claims under PKR 500,000 are settled within 7 working days when filed with photos and FIR (where applicable).
        </p>
      </div>
    </div>
  );
}

function TrackClaim() {
  const [search, setSearch] = React.useState('CLM-2026-04621');
  const stages = [
    { l: 'Claim filed', d: 'Apr 28, 2026', done: true, time: '10:42 AM' },
    { l: 'Surveyor assigned', d: 'Apr 28, 2026', done: true, time: '01:15 PM', sub: 'Mr. Imran Shah · +92 300-XXXXXXX' },
    { l: 'Survey completed', d: 'Apr 29, 2026', done: true, time: '11:30 AM' },
    { l: 'Estimate approved', d: 'Apr 30, 2026', done: true, time: '04:20 PM', sub: 'Approved amount: PKR 187,400' },
    { l: 'Repair in progress', d: 'May 02, 2026', done: false, current: true, sub: 'Workshop: Toyota Defence Motors' },
    { l: 'Vehicle delivered', d: 'Expected May 8', done: false },
    { l: 'Payment settled', d: 'Expected May 10', done: false },
  ];

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 32 }} className="claim-grid">
      <div>
        <div className="card" style={{ padding: 24, marginBottom: 24, display: 'flex', gap: 12 }}>
          <div style={{ flex: 1, position: 'relative' }}>
            <I.Search size={18} style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)', color: 'var(--ink-500)' }} />
            <input className="field-input" placeholder="Enter claim ID or CNIC" value={search} onChange={e => setSearch(e.target.value)} style={{ paddingLeft: 42 }} />
          </div>
          <button className="btn btn-primary">Track</button>
        </div>

        <div className="card" style={{ padding: 28 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 24, flexWrap: 'wrap', gap: 12 }}>
            <div>
              <div style={{ fontSize: 13, color: 'var(--ink-500)' }}>Claim ID</div>
              <div className="serif" style={{ fontSize: 22, color: 'var(--navy-800)', marginTop: 2 }}>CLM-2026-04621</div>
              <div style={{ marginTop: 8, fontSize: 13, color: 'var(--ink-700)' }}>Toyota Corolla 2024 · Karachi · Accident damage</div>
            </div>
            <span className="badge badge-amber"><span style={{ width: 8, height: 8, borderRadius: '50%', background: '#d97706', animation: 'pulseDot 1.6s infinite' }} /> IN PROGRESS</span>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
            {stages.map((s, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '32px 1fr', gap: 16, position: 'relative' }}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                  <div style={{
                    width: 24, height: 24, borderRadius: '50%',
                    background: s.done ? 'var(--blue-600)' : s.current ? 'white' : 'var(--ink-100)',
                    border: s.current ? '3px solid var(--blue-600)' : 0,
                    display: 'grid', placeItems: 'center', color: 'white',
                    flexShrink: 0,
                  }}>
                    {s.done && <I.Check size={12} />}
                  </div>
                  {i < stages.length - 1 && (
                    <div style={{
                      width: 2, flex: 1, minHeight: 32,
                      background: s.done ? 'var(--blue-600)' : 'var(--ink-200)',
                    }} />
                  )}
                </div>
                <div style={{ paddingBottom: 24 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', flexWrap: 'wrap', gap: 8 }}>
                    <div style={{ fontSize: 15, fontWeight: 700, color: s.done || s.current ? 'var(--navy-800)' : 'var(--ink-400)' }}>{s.l}</div>
                    <div style={{ fontSize: 12, color: 'var(--ink-500)' }}>{s.d} {s.time && `· ${s.time}`}</div>
                  </div>
                  {s.sub && <div style={{ fontSize: 13, color: 'var(--ink-500)', marginTop: 4 }}>{s.sub}</div>}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div>
        <div className="card" style={{ padding: 22 }}>
          <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 14 }}>Your claim handler</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 48, height: 48, borderRadius: '50%', background: 'var(--navy-800)', color: 'white', display: 'grid', placeItems: 'center', fontWeight: 700 }}>IS</div>
            <div>
              <div style={{ fontSize: 14, fontWeight: 700 }}>Imran Shah</div>
              <div style={{ fontSize: 12, color: 'var(--ink-500)' }}>Senior Surveyor · Karachi</div>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
            <button className="btn btn-ghost btn-sm" style={{ flex: 1 }}><I.Phone size={14} /> Call</button>
            <button className="btn btn-ghost btn-sm" style={{ flex: 1 }}><I.MessageCircle size={14} /> Chat</button>
          </div>
        </div>

        <div className="card" style={{ padding: 22, marginTop: 16 }}>
          <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 12 }}>Documents</div>
          {['Survey report', 'Estimate approval', 'FIR copy'].map(d => (
            <a key={d} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0', fontSize: 13, color: 'var(--ink-700)', cursor: 'pointer' }}>
              <I.FileText size={14} style={{ color: 'var(--ink-500)' }} />
              <span style={{ flex: 1 }}>{d}</span>
              <I.Download size={14} style={{ color: 'var(--ink-500)' }} />
            </a>
          ))}
        </div>
      </div>
    </div>
  );
}

function EmergencyHelp() {
  const cards = [
    { i: I.Wrench, l: 'Roadside breakdown', d: 'Tow, jump-start, flat tyre — anywhere within 50km of major cities.', cta: 'Request tow' },
    { i: I.Hospital, l: 'Medical emergency', d: 'Cashless admission at 450+ panel hospitals. Zero wait at front desk.', cta: 'Find hospital' },
    { i: I.Phone, l: 'Speak to a human', d: '24/7 multilingual helpline. Average wait time: 22 seconds.', cta: 'Call now' },
  ];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 16 }}>
      {cards.map(c => (
        <div key={c.l} className="card" style={{ padding: 28 }}>
          <span style={{ width: 48, height: 48, borderRadius: 12, background: '#fef2f2', color: '#dc2626', display: 'grid', placeItems: 'center' }}>
            <c.i size={22} />
          </span>
          <div style={{ fontSize: 18, fontWeight: 700, marginTop: 16 }}>{c.l}</div>
          <p style={{ fontSize: 14, color: 'var(--ink-500)', marginTop: 8, lineHeight: 1.55 }}>{c.d}</p>
          <button className="btn btn-primary btn-sm" style={{ marginTop: 16 }}>{c.cta} <I.ArrowRight size={14} /></button>
        </div>
      ))}
    </div>
  );
}

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

window.Claims = Claims;