// car-flow.jsx — Car dashboard, add car, quote → offers, delivery, tracking

const { useState: useStateC, useEffect: useEffectC, useRef: useRefC, useMemo: useMemoC } = React;

// ────────────────────────────────────────────────────────────
// Car silhouette decoration (for car-card background)
// ────────────────────────────────────────────────────────────
function CarSilhouette() {
  return (
    <svg className="silhouette" viewBox="0 0 100 100" fill="none" preserveAspectRatio="xMidYMid meet">
      <defs>
        <linearGradient id="silBody" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#ffffff"/>
          <stop offset="100%" stopColor="#E7ECFF"/>
        </linearGradient>
        <linearGradient id="silRoof" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="rgba(255,255,255,.45)"/>
          <stop offset="100%" stopColor="rgba(255,255,255,.2)"/>
        </linearGradient>
      </defs>
      {/* roof */}
      <path d="M28 50 L40 30 Q42 27 46 27 L62 27 Q66 27 70 30 L84 50 Z" fill="url(#silRoof)"/>
      {/* body */}
      <path d="M14 64 Q14 56 22 54 L80 54 Q92 56 94 64 L94 72 Q94 76 90 76 L84 76 Q82 80 78 80 Q74 80 72 76 L36 76 Q34 80 30 80 Q26 80 24 76 L18 76 Q14 76 14 72 Z" fill="url(#silBody)"/>
      {/* window highlight */}
      <path d="M40 36 L60 36 L66 49 L34 49 Z" fill="rgba(255,255,255,.4)" opacity=".25"/>
      {/* wheels */}
      <circle cx="30" cy="76" r="6" fill="#0A0E1A" opacity=".75"/>
      <circle cx="30" cy="76" r="2.5" fill="rgba(255,255,255,.5)"/>
      <circle cx="78" cy="76" r="6" fill="#0A0E1A" opacity=".75"/>
      <circle cx="78" cy="76" r="2.5" fill="rgba(255,255,255,.5)"/>
    </svg>
  );
}

// ────────────────────────────────────────────────────────────
// Car dashboard
// ────────────────────────────────────────────────────────────
function CarDashboard({ user, cars, policies, onBack, onAvatar, onBell, onOrders, onAddCar, onGetQuote, onTrack, onViewPolicy, onViewRoadworthy, onViewVignette, onViewKat, lang, onLang }) {
  const trackRef = useRefC(null);
  const [idx, setIdx] = useStateC(0);

  useEffectC(() => {
    const el = trackRef.current;
    if (!el) return;
    const onScroll = () => {
      const w = el.clientWidth;
      const sl = el.scrollLeft;
      const n = Math.round(sl / (w * 0.9));
      setIdx(Math.min(n, cars.length));
    };
    el.addEventListener('scroll', onScroll, { passive:true });
    return () => el.removeEventListener('scroll', onScroll);
  }, [cars.length]);

  const current = cars[Math.min(idx, cars.length - 1)] || cars[0];
  const carPolicies = current ? (policies[current.id] || []) : [];
  const hasGo = carPolicies.some(p => p.kind === 'go' && p.status !== 'ended');
  const hasCasco = carPolicies.some(p => p.kind === 'casco' && p.status !== 'ended');
  const showNewInsurance = !hasGo || !hasCasco;

  return (
    <>
      <TopBar user={user} onAvatar={onAvatar} onBell={onBell} onOrders={onOrders} elevated lang={lang} onLang={onLang} />
      <PageHead title={t('myCars')} onBack={onBack} right={
        <button className="icon-btn" onClick={onAddCar} aria-label="Добави"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5v14M5 12h14"/></svg></button>
      }/>
      <div className="scrollarea">
        <div className="car-stage">
          <div className="car-track" ref={trackRef}>
            {cars.map(c => (
              <div key={c.id} className={`car-card ${c.style || ''}`}>
                <div>
                  <span className="plate">
                    {c.plate}
                  </span>
                  <div className="model">{c.make} {c.model}</div>
                  <div className="meta">{c.year} · {c.color}</div>
                </div>
                <span className="status-pill">
                  <span className="dot"/>
                  {t('allGood')}
                </span>
                <CarSilhouette/>
              </div>
            ))}
            <button className="car-add" onClick={onAddCar}>
              <span className="plus">{I.plus()}</span>
              <div style={{ fontWeight:700, fontSize:13.5 }}>{t('addCar')}</div>
              <div style={{ fontSize:12, color:'var(--ink-4)' }}>{t('addCarSub')}</div>
            </button>
          </div>
          <div className="dots">
            {Array.from({ length: cars.length + 1 }).map((_,i) => (
              <span key={i} className={i === idx ? 'active' : ''}/>
            ))}
          </div>
        </div>

        {current && (
          <>
            <div className="stack-section">
              <div className="stack-title-row">
                <div className="stack-title">{t('activePolicies')}</div>
              </div>
              {carPolicies.map(p => (
                <div key={p.id} className="policy-card" onClick={() => onViewPolicy(p, current)}>
                  <div className="head">
                    <div className="ico">{p.kind === 'go' ? I.shieldCheck() : I.shield()}</div>
                    <div className="ttl">
                      <div className="name">{p.name}</div>
                    </div>
                    <div className="price">{p.price}</div>
                  </div>
                  <div className="body">
                    <div className="row"><span className="k">{t('company')}</span><span className="v"><img className="policy-logo" src={`assets/insurers/${p.logo}`} alt={p.company}/></span></div>
                    <div className="row"><span className="k">{t('validity')}</span><span className="v">{p.validFrom} → {p.validTo}</span></div>
                    <div className="row"><span className="k">{t('installments')}</span><span className="v">{p.installments}</span></div>
                    <div className="progress"><i style={{ width:`${p.progress*100}%`, background: p.status === 'expiring' ? 'var(--warn)' : 'var(--accent)' }}/></div>
                    <div style={{ display:'flex', justifyContent:'space-between', fontSize:11.5, color:'var(--ink-4)', marginTop:4 }}>
                      <span>{t('termRemaining', { p: Math.round((1-p.progress)*100) })}</span>
                      {p.status === 'expiring' && <span style={{ color:'var(--warn)', fontWeight:700 }}>{t('expiringSoon')}</span>}
                    </div>
                    {(1 - p.progress) < 0.1 && (
                      <button className="btn btn-primary btn-block btn-sm" style={{ marginTop:12 }} onClick={(e) => { e.stopPropagation(); onGetQuote(p.kind, current); }}>
                        {t('renewPolicy')} {I.arrowRight({ width:13, height:13 })}
                      </button>
                    )}
                  </div>
                </div>
              ))}
            </div>

            {showNewInsurance && (
            <div className="stack-section">
              <div className="stack-title-row">
                <div className="stack-title">{t('newInsurance')}</div>
              </div>
              {!hasGo && (
              <div className="row-item" onClick={() => onGetQuote('go', current)}>
                <div className="ri-ico accent">{I.shieldCheck()}</div>
                <div className="ri-body">
                  <div className="ri-title">{t('mtpl')}</div>
                  <div className="ri-sub">{t('mtplSub')}</div>
                </div>
                <div className="ri-cta">{t('offerCta')} {I.chevron()}</div>
              </div>
              )}
              {!hasCasco && (
              <div className="row-item" onClick={() => onGetQuote('casco', current)}>
                <div className="ri-ico accent">{I.shield()}</div>
                <div className="ri-body">
                  <div className="ri-title">{t('casco')}</div>
                  <div className="ri-sub">{t('cascoSub')}</div>
                </div>
                <div className="ri-cta">{t('offerCta')} {I.chevron()}</div>
              </div>
              )}
            </div>
            )}

            <div className="stack-section">
              <div className="stack-title-row">
                <div className="stack-title">{t('checks')}</div>
              </div>
              <div className="row-item" onClick={() => onViewRoadworthy(current)} style={{ cursor:'pointer' }}>
                <div className="ri-ico ok">{I.shieldCheck()}</div>
                <div className="ri-body">
                  <div className="ri-title">{t('roadworthy')}</div>
                  <div className="ri-sub">{t('roadworthySub')}</div>
                </div>
                <div className="ri-cta">{t('okShort')} {I.chevron()}</div>
              </div>
              <div className="row-item" onClick={() => onViewVignette(current)} style={{ cursor:'pointer' }}>
                <div className="ri-ico ok">{I.spark()}</div>
                <div className="ri-body">
                  <div className="ri-title">{t('vignette')}</div>
                  <div className="ri-sub">{t('vignetteSub')}</div>
                </div>
                <div className="ri-cta">{t('renew')} {I.chevron()}</div>
              </div>
              <div className="row-item" onClick={() => onViewKat(current)} style={{ cursor:'pointer' }}>
                <div className="ri-ico" style={{ background:'rgba(31,111,235,.12)', color:'#1F6FEB' }}>{I.building()}</div>
                <div className="ri-body">
                  <div className="ri-title">{t('katCheck')}</div>
                  <div className="ri-sub">{t('katSub')}</div>
                </div>
                <div className="ri-cta">{t('okShort')} {I.chevron()}</div>
              </div>
            </div>

            <div style={{ height: 30 }}/>
          </>
        )}
      </div>
    </>
  );
}

// ────────────────────────────────────────────────────────────
// Add car bottom-sheet modal
// ────────────────────────────────────────────────────────────
function AddCarModal({ open, onClose, onAdd }) {
  const [form, setForm] = useStateC({ make:'', model:'', plate:'', year:'', talon:'', vin:'' });
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const submit = (e) => {
    e.preventDefault();
    onAdd(form);
    setForm({ make:'', model:'', plate:'', year:'', talon:'', vin:'' });
  };
  return (
    <div className={`modal-scrim ${open ? 'open' : ''}`} onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="grabber"/>
        <h3>{t('newCar')}</h3>
        <p className="muted">{t('newCarSub')}</p>
        <form onSubmit={submit} style={{ display:'flex', flexDirection:'column', gap:12 }}>
          <div className="form-grid-2">
            <div className="field"><label className="field-label">{t('make')}</label><input className="field-input" placeholder="BMW" value={form.make} onChange={e=>set('make',e.target.value)} required/></div>
            <div className="field"><label className="field-label">{t('model')}</label><input className="field-input" placeholder="320i" value={form.model} onChange={e=>set('model',e.target.value)} required/></div>
          </div>
          <div className="form-grid-2">
            <div className="field"><label className="field-label">{t('plate')}</label><input className="field-input" placeholder="CB 1234 AB" value={form.plate} onChange={e=>set('plate',e.target.value)} required/></div>
            <div className="field"><label className="field-label">{t('year')}</label><input className="field-input" type="number" min="1980" max="2030" placeholder="2020" value={form.year} onChange={e=>set('year',e.target.value)} required/></div>
          </div>
          <div className="form-grid-2">
            <div className="field"><label className="field-label">{t('talonNo')}</label><input className="field-input" placeholder="000000000" value={form.talon} onChange={e=>set('talon',e.target.value)}/></div>
            <div className="field"><label className="field-label">VIN</label><input className="field-input" placeholder="WBA…" value={form.vin} onChange={e=>set('vin',e.target.value)}/></div>
          </div>
          <div className="modal-actions">
            <button type="button" className="btn btn-ghost" onClick={onClose}>{t('cancel')}</button>
            <button type="submit" className="btn btn-primary">{t('add')}</button>
          </div>
        </form>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────
// Quote → offers flow
// ────────────────────────────────────────────────────────────
function QuoteScreen({ car, kind, onBack, onPickOffer }) {
  const [step, setStep] = useStateC('form'); // 'form' | 'results'
  const [form, setForm] = useStateC({
    experience: '8',
    payment: 'once',
    from: '2026-06-01',
    coverage: 'mtpl',
  });
  const set = (k,v) => setForm(f => ({...f,[k]:v}));
  const paymentLabel = { once: t('payOnce'), '2': t('pay2'), '4': t('pay4') }[form.payment] || form.payment;

  const title = kind === 'casco' ? t('casco') : kind === 'green' ? t('greenCard') : t('mtpl');

  const offers = useMemoC(() => {
    const factor = kind === 'casco' ? 3.1 : kind === 'green' ? 0.32 : 1;
    const r2 = (n) => Math.round(n * 100) / 100;
    return window.KOLHIDA_DATA.insurers.map(ins => ({
      id: ins.id, name: ins.name, logo: ins.logo, tag: ins.tag,
      bgn:  ins.bgn  == null ? null : r2(ins.bgn  * factor),
      orig: ins.orig == null ? null : r2(ins.orig * factor),
    }));
  }, [kind]);

  if (step === 'form') {
    return (
      <>
        <PageHead title={t('offersFor', { car: `${car.make} ${car.model}` })} onBack={onBack}/>
        <div className="scrollarea">
          <div className="page-body">
            <h2 className="sect-title">{title}</h2>
            <p className="sect-sub">{t('mtplSub')}</p>

            <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
              <div className="form-grid-2">
                <div className="field">
                  <label className="field-label">{t('payment')}</label>
                  <select className="field-select" value={form.payment} onChange={e=>set('payment',e.target.value)}>
                    <option value="once">{t('payOnce')}</option>
                    <option value="2">{t('pay2')}</option>
                    <option value="4">{t('pay4')}</option>
                  </select>
                </div>
                <div className="field">
                  <label className="field-label">{t('validFrom')}</label>
                  <input className="field-input" type="date" value={form.from} onChange={e=>set('from',e.target.value)}/>
                </div>
              </div>
            </div>

            <button className="btn btn-primary btn-block" style={{ marginTop:18 }} onClick={() => setStep('results')}>
              {t('findOffers')} {I.arrowRight()}
            </button>
          </div>
        </div>
      </>
    );
  }

  // RESULTS
  const offerCount = offers.filter(o => o.bgn != null).length;
  return (
    <>
      <PageHead title={t('foundOffers')} onBack={() => setStep('form')}/>
      <div className="scrollarea">
        <div className="page-body">
          <p className="sect-sub" style={{ marginTop:4 }}>{t('offersSortedBy', { n: offerCount })}</p>
          <div className="summary-chips">
            <span className="chip">{car.make} {car.model}</span>
            <span className="chip">{car.plate}</span>
            <span className="chip">{paymentLabel}</span>
          </div>
          <div className="offer-list">
            {offers.map((o) => {
              const hasQuote = o.bgn != null;
              return (
                <div key={o.id} className={`offer-pill ${hasQuote ? '' : 'noquote'}`}
                     onClick={hasQuote ? () => onPickOffer(o, kind, car) : undefined}>
                  <span className="op-radio"/>
                  <div className="op-logo">
                    <img src={`assets/insurers/${o.logo}`} alt={o.name}/>
                  </div>
                  <div className="op-div"/>
                  <div className="op-price">
                    {hasQuote ? (
                      <>
                        {o.orig != null && (
                          <span className="op-orig">{window.eur(o.orig,2)} € / {o.orig.toFixed(2)} лв.</span>
                        )}
                        <span className="op-now">{window.eur(o.bgn,2)} € / {o.bgn.toFixed(2)} лв.</span>
                      </>
                    ) : (
                      <span className="op-request">{t('requestOffer')}</span>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
          <div style={{ height: 30 }}/>
        </div>
      </div>
    </>
  );
}

// ────────────────────────────────────────────────────────────
// Delivery picker — office vs courier
// ────────────────────────────────────────────────────────────
function DeliveryScreen({ offer, car, kind, onBack, onConfirm }) {
  const [mode, setMode] = useStateC('office'); // 'office' | 'speedy' | 'econt'
  const [office, setOffice] = useStateC('sf1');
  const [mapOpen, setMapOpen] = useStateC(false);
  const offices = window.KOLHIDA_DATA.offices;
  const selectedOffice = offices.find(o => o.id === office) || offices[0];

  return (
    <>
      <PageHead title={t('receiving')} onBack={onBack}/>
      <div className="scrollarea">
        <div className="page-body">
          <h2 className="sect-title">{t('howReceive')}</h2>
          <p className="sect-sub">{t('digitalNote')}</p>

          <button className={`deliv-opt ${mode === 'office' ? 'selected' : ''}`} onClick={() => setMode('office')}>
            <div className="top">
              <div className="ico">{I.pin()}</div>
              <div style={{ flex:1 }}>
                <div className="nm">{t('pickOffice')}</div>
                <div className="pm">{t('pickOfficeSub')}</div>
              </div>
              <div className="check">{I.check()}</div>
            </div>
            {mode === 'office' && (
              <>
                <div className="detail">
                  <span><span className="b">{window.eur(offer.price)} €</span> · {t('policyLbl')}</span>
                  <span>+ <span className="b">0.00 €</span> {t('deliveryLbl')}</span>
                </div>
                <div className="mini-map" onClick={(e) => { e.stopPropagation(); setMapOpen(true); }}>
                  <div className="map-canvas">
                    {offices.map(o => (
                      <span key={o.id} className={`map-pin ${office === o.id ? 'active' : ''}`} style={{ left:o.mx, top:o.my }}>{I.pin({ width:13, height:13 })}</span>
                    ))}
                    <span className="map-hint">{t('tapMap')}</span>
                  </div>
                  <div className="mini-map-bar">
                    <div className="pin">{I.pin()}</div>
                    <div style={{ flex:1, minWidth:0 }}>
                      <div className="nm">{selectedOffice.name}</div>
                      <div className="addr">{selectedOffice.addr}</div>
                    </div>
                    <span className="map-change">{t('changeOffice')}</span>
                  </div>
                </div>
              </>
            )}
          </button>

          <button className={`deliv-opt ${mode === 'speedy' ? 'selected' : ''}`} onClick={() => setMode('speedy')}>
            <div className="top">
              <div className="ico">{I.truck()}</div>
              <div style={{ flex:1 }}>
                <div className="nm">{t('speedyCourier')}</div>
                <div className="pm">{t('speedySub')}</div>
              </div>
              <div className="check">{I.check()}</div>
            </div>
            {mode === 'speedy' && (
              <div className="detail">
                <span><span className="b">{window.eur(offer.price)} €</span> · {t('policyLbl')}</span>
                <span>+ <span className="b">3.53 €</span> {t('deliveryLbl')}</span>
              </div>
            )}
          </button>

          <button className={`deliv-opt ${mode === 'econt' ? 'selected' : ''}`} onClick={() => setMode('econt')}>
            <div className="top">
              <div className="ico">{I.package()}</div>
              <div style={{ flex:1 }}>
                <div className="nm">{t('econtCourier')}</div>
                <div className="pm">{t('econtSub')}</div>
              </div>
              <div className="check">{I.check()}</div>
            </div>
            {mode === 'econt' && (
              <div className="detail">
                <span><span className="b">{window.eur(offer.price)} €</span> · {t('policyLbl')}</span>
                <span>+ <span className="b">2.81 €</span> {t('deliveryLbl')}</span>
              </div>
            )}
          </button>

          <div style={{ marginTop:18 }}>
            <button className="btn btn-primary btn-block" onClick={() => onConfirm({ mode, office })}>
              {t('confirmPay')} {I.arrowRight()}
            </button>
            <div style={{ textAlign:'center', fontSize:11.5, color:'var(--ink-4)', marginTop:10 }}>
              {t('confirmLegal')}
            </div>
          </div>
          <div style={{ height: 24 }}/>
        </div>
      </div>

      {mapOpen && (
        <div className="map-sheet">
          <div className="map-sheet-head">
            <button className="icon-btn" onClick={() => setMapOpen(false)} aria-label="Затвори">{I.close()}</button>
            <div className="ttl">{t('chooseOfficeTitle')}</div>
          </div>
          <div className="map-canvas big">
            {offices.map(o => (
              <button key={o.id} className={`map-pin big ${office === o.id ? 'active' : ''}`} style={{ left:o.mx, top:o.my }} onClick={() => setOffice(o.id)} aria-label={o.name}>
                {I.pin({ width:18, height:18 })}
              </button>
            ))}
          </div>
          <div className="map-sheet-card">
            <div className="office-card" style={{ borderColor:'var(--accent)', background:'var(--accent-soft)' }}>
              <div className="pin">{I.pin()}</div>
              <div style={{ flex:1, minWidth:0 }}>
                <div className="nm">{selectedOffice.name}</div>
                <div className="addr">{selectedOffice.addr}</div>
                <div className="hrs">{selectedOffice.hrs} · {selectedOffice.dist}</div>
              </div>
            </div>
            <button className="btn btn-primary btn-block" style={{ marginTop:12 }} onClick={() => setMapOpen(false)}>
              {t('selectThisOffice')}
            </button>
          </div>
        </div>
      )}
    </>
  );
}

// ────────────────────────────────────────────────────────────
// Tracking screen
// ────────────────────────────────────────────────────────────
function TrackingScreen({ kind = 'courier', onBack }) {
  // kind: 'courier' | 'office'
  const isOffice = kind === 'office';

  const courierSteps = [
    { t:t('stAccepted'), s:'Полица ГО · Лев Инс', d:'14.05.2026 · 12:14', status:'done' },
    { t:t('stIssued'), s:t('stIssuedSub'), d:'14.05.2026 · 14:02', status:'done' },
    { t:t('stHanded'), s:t('stHandedSub'), d:'15.05.2026 · 09:31', status:'done' },
    { t:t('stInVan'), s:t('stInVanSub'), d:t('today'), status:'current' },
    { t:t('stDelivered'), s:t('stDeliveredSub'), d:'', status:'pending' },
  ];

  const officeSteps = [
    { t:t('stAccepted'), s:'Полица Каско · ДЗИ', d:'09.05.2026 · 11:08', status:'done' },
    { t:t('stIssued'), s:t('stIssuedSub'), d:'09.05.2026 · 16:47', status:'done' },
    { t:t('stReady'), s:t('stReadySub'), d:t('today'), status:'current' },
    { t:t('stReceived'), s:t('stReceivedSub'), d:'', status:'pending' },
  ];

  const steps = isOffice ? officeSteps : courierSteps;

  return (
    <>
      <PageHead title={t('tracking')} onBack={onBack}/>
      <div className="scrollarea">
        <div className="page-body">
          <div className={`track-hero ${isOffice ? 'office' : ''}`}>
            <div className="lbl">{isOffice ? t('orderLbl') : t('waybill')}</div>
            <div className="num">{isOffice ? '#KZB-22847' : '1024 4388 2114'}</div>
            <div className="pol">{isOffice ? 'Casco · DZI' : 'MTPL · Lev Ins'} · BMW 320i</div>

            <div className="status-big">{isOffice ? t('readyPickup') : t('inVan')}</div>
            <div className="status-sub">{isOffice ? t('readyPickupSub') : t('inVanSub')}</div>

            <svg className="glyph" width="160" height="160" viewBox="0 0 100 100">
              {isOffice
                ? <path d="M50 12 L20 38 V82 H80 V38 Z" stroke="#fff" strokeWidth="2" fill="none"/>
                : <g stroke="#fff" strokeWidth="2" fill="none"><rect x="15" y="30" width="42" height="36"/><path d="M57 40 H72 L82 50 V66 H57Z"/><circle cx="32" cy="72" r="6"/><circle cx="70" cy="72" r="6"/></g>}
            </svg>
          </div>

          <h3 style={{ margin:'4px 0 12px', fontFamily:'var(--font-display)', fontWeight:800, fontSize:15, letterSpacing:'-0.02em' }}>{t('history')}</h3>

          <div className="timeline">
            {steps.map((s, i) => (
              <div key={i} className={`tline-step ${s.status}`}>
                <div className="marker">
                  {s.status === 'done' && I.check({ width:14, height:14 })}
                  {s.status === 'current' && <span style={{ width:8, height:8, borderRadius:99, background:'#fff' }}/>}
                </div>
                <div className="body">
                  <div className="tt">{s.t}</div>
                  <div className="ts">{s.s}</div>
                  {s.d && <div className="te">{s.d}</div>}
                </div>
              </div>
            ))}
          </div>

          {!isOffice && (
            <div className="row-item" style={{ marginTop:8 }}>
              <div className="ri-ico accent">{I.pin()}</div>
              <div className="ri-body">
                <div className="ri-title">{t('deliveryAddress')}</div>
                <div className="ri-sub">ул. Цар Симеон 124, ет. 4, ап. 12 · София 1303</div>
              </div>
            </div>
          )}
          {isOffice && (
            <div className="row-item" style={{ marginTop:8 }}>
              <div className="ri-ico accent">{I.building()}</div>
              <div className="ri-body">
                <div className="ri-title">{t('n1s')}</div>
                <div className="ri-sub">ул. Витоша 42, София · 09:00–18:00</div>
              </div>
              <div className="ri-cta">{t('map')}</div>
            </div>
          )}

          <div style={{ display:'flex', gap:8, marginTop:14 }}>
            <button className="btn btn-outline" style={{ flex:1 }}>{t('help2')}</button>
            <button className="btn btn-dark" style={{ flex:1 }}>{t('downloadPdf')}</button>
          </div>

          <div style={{ height: 24 }}/>
        </div>
      </div>
    </>
  );
}

// ────────────────────────────────────────────────────────────
// Order confirmation toast / success modal
// ────────────────────────────────────────────────────────────
function SuccessModal({ open, onClose, onTrack, deliveryMode }) {
  return (
    <div className={`modal-scrim ${open ? 'open' : ''}`} onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="grabber"/>
        <div style={{ textAlign:'center', padding:'8px 0 4px' }}>
          <div style={{ width:64, height:64, borderRadius:'50%', background:'rgba(27,163,122,.12)', color:'var(--ok)', display:'inline-flex', alignItems:'center', justifyContent:'center', margin:'0 auto 10px' }}>
            {I.check({ width:30, height:30 })}
          </div>
          <h3>{t('orderAccepted')}</h3>
          <p className="muted">
            {deliveryMode === 'office' ? t('successOffice') : t('successCourier')}
          </p>
        </div>
        <div className="modal-actions">
          <button className="btn btn-ghost" onClick={onClose}>{t('close')}</button>
          <button className="btn btn-primary" onClick={onTrack}>{t('trackCta')} {I.arrowRight()}</button>
        </div>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────
// Roadworthiness (ГТП) details — top 7 things to know
// ────────────────────────────────────────────────────────────
function RoadworthyScreen({ car, onBack }) {
  const [showTalon, setShowTalon] = useStateC(false);

  if (showTalon) {
    return (
      <>
        <PageHead title={t('rwTalon')} onBack={() => setShowTalon(false)}/>
        <div className="scrollarea">
          <div className="page-body">
            <div className="rw-talon-wrap">
              <img src="assets/talon.png" alt={t('rwTalon')} className="rw-talon-img"/>
            </div>
            <div style={{ height: 30 }}/>
          </div>
        </div>
      </>
    );
  }

  const tips = [
    { ico: I.calendar(),    tone: 'ok',     k: 'rwTip1' },
    { ico: I.sticker(),     tone: 'accent', k: 'rwTip2' },
    { ico: I.file(),        tone: '',       k: 'rwTip3' },
    { ico: I.shieldCheck(), tone: 'ok',     k: 'rwTip4' },
    { ico: I.euro(),        tone: 'warn',   k: 'rwTip5' },
    { ico: I.spark(),       tone: '',       k: 'rwTip6' },
    { ico: I.bell(),        tone: 'accent', k: 'rwTip7' },
  ];
  return (
    <>
      <PageHead title={t('roadworthy')} onBack={onBack}/>
      <div className="scrollarea">
        <div className="page-body">
          <div className="rw-hero">
            <div className="rw-hero-ico">{I.shieldCheck({ width:26, height:26 })}</div>
            <div className="rw-hero-txt">
              <div className="rw-hero-status">{t('rwPassed')}</div>
              <div className="rw-hero-sub">{car ? `${car.make} ${car.model} · ${car.plate}` : ''}</div>
            </div>
          </div>

          <div className="rw-fields">
            <div className="rw-field"><span className="rw-fk">{t('validity')}</span><span className="rw-fv">22.08.2026</span></div>
            <div className="rw-field"><span className="rw-fk">{t('rwEco')}</span><span className="rw-fv">{car ? car.eco : '—'}</span></div>
            <div className="rw-field"><span className="rw-fk">{t('rwEngineNo')}</span><span className="rw-fv">{car ? car.engineNo : '—'}</span></div>
            <div className="rw-field"><span className="rw-fk">{t('rwVin')}</span><span className="rw-fv">{car ? car.vin : '—'}</span></div>
            <div className="rw-field"><span className="rw-fk">{t('rwOdometer')}</span><span className="rw-fv">{car ? car.odometer : '—'}</span></div>
          </div>
          <div className="rw-actions">
            <button className="btn btn-ghost rw-scan" onClick={() => {}}>
              {I.scan({ width:18, height:18 })} {t('rwScan')}
            </button>
            <button className="btn btn-ghost rw-scan" onClick={() => setShowTalon(true)}>
              {I.file({ width:18, height:18 })} {t('rwShow')}
            </button>
          </div>

          <div style={{ height: 30 }}/>
        </div>
      </div>
    </>
  );
}

// ────────────────────────────────────────────────────────────
// Vignette (e-винетка) details
// ────────────────────────────────────────────────────────────
function VignetteScreen({ car, onBack }) {
  return (
    <>
      <PageHead title={t('vignette')} onBack={onBack}/>
      <div className="scrollarea">
        <div className="page-body">
          <div className="rw-hero">
            <div className="rw-hero-ico" style={{ color:'var(--ok)' }}>{I.spark({ width:26, height:26 })}</div>
            <div className="rw-hero-txt">
              <div className="rw-hero-status">{t('vgActive')}</div>
              <div className="rw-hero-sub">{car ? `${car.make} ${car.model} · ${car.plate}` : ''}</div>
            </div>
          </div>

          <div className="rw-fields">
            <div className="rw-field"><span className="rw-fk">{t('vgType')}</span><span className="rw-fv">{t('vgAnnual')}</span></div>
            <div className="rw-field"><span className="rw-fk">{t('vgCategory')}</span><span className="rw-fv">{t('vgCar')}</span></div>
            <div className="rw-field"><span className="rw-fk">{t('vgValidFrom')}</span><span className="rw-fv">29.06.2025</span></div>
            <div className="rw-field"><span className="rw-fk">{t('vgValidTo')}</span><span className="rw-fv">28.06.2026</span></div>
            <div className="rw-field"><span className="rw-fk">{t('vgPlate')}</span><span className="rw-fv">{car ? car.plate : '—'}</span></div>
            <div className="rw-field"><span className="rw-fk">{t('vgPrice')}</span><span className="rw-fv">87.00 € / 170.15 лв.</span></div>
          </div>

          <div className="vg-note">{I.spark({ width:16, height:16 })}<span>{t('vgExpiry')}</span></div>

          <button className="btn btn-primary btn-block" style={{ marginTop:14 }} onClick={() => {}}>
            {I.spark({ width:18, height:18 })} {t('vgRenew')}
          </button>

          <div style={{ height: 30 }}/>
        </div>
      </div>
    </>
  );
}

// ────────────────────────────────────────────────────────────
// KAT (traffic police) checks — fines & penalty points
// ────────────────────────────────────────────────────────────
function KatScreen({ car, onBack }) {
  const fines = [
    { id:'f1', date:'14.05.2026', place:'бул. Цариградско шосе, София', reason:t('katSpeed'), amount:'51.13 €', paid:false },
    { id:'f2', date:'02.02.2026', place:'ул. Граф Игнатиев, София',     reason:t('katParking'), amount:'10.23 €', paid:true },
  ];
  const unpaid = fines.filter(f => !f.paid);
  return (
    <>
      <PageHead title={t('katCheck')} onBack={onBack}/>
      <div className="scrollarea">
        <div className="page-body">
          <div className="rw-hero" style={{ background: unpaid.length ? 'rgba(232,151,42,.10)' : undefined }}>
            <div className="rw-hero-ico" style={{ color: unpaid.length ? 'var(--warn)' : 'var(--ok)' }}>{I.building({ width:26, height:26 })}</div>
            <div className="rw-hero-txt">
              <div className="rw-hero-status" style={{ color: unpaid.length ? 'var(--warn)' : 'var(--ok)' }}>
                {unpaid.length ? t('katHasFines', { n: unpaid.length }) : t('katClean')}
              </div>
              <div className="rw-hero-sub">{car ? `${car.make} ${car.model} · ${car.plate}` : ''}</div>
            </div>
          </div>

          <div className="rw-fields">
            <div className="rw-field"><span className="rw-fk">{t('katPoints')}</span><span className="rw-fv">33 / 39</span></div>
            <div className="rw-field"><span className="rw-fk">{t('katUnpaid')}</span><span className="rw-fv">{unpaid.length}</span></div>
            <div className="rw-field"><span className="rw-fk">{t('katChecked')}</span><span className="rw-fv">20.06.2026</span></div>
          </div>

          <button className="btn btn-ghost btn-block" style={{ marginTop:18 }} onClick={() => {}}>
            {I.shieldCheck({ width:18, height:18 })} {t('katInquiry')}
          </button>

          <div className="stack-title-row" style={{ marginTop:18, marginBottom:10 }}>
            <div className="stack-title">{t('katFines')}</div>
          </div>
          <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
            {fines.map(f => (
              <div key={f.id} className="kat-fine">
                <div className="kat-fine-top">
                  <div className="kat-reason">{f.reason}</div>
                  <span className={`kat-badge ${f.paid ? 'paid' : 'due'}`}>{f.paid ? t('katPaid') : t('katDue')}</span>
                </div>
                <div className="kat-meta">{f.date} · {f.place}</div>
                <div className="kat-fine-bottom">
                  <span className="kat-amount">{f.amount}</span>
                  {!f.paid && <button className="btn btn-primary btn-sm" onClick={(e) => e.stopPropagation()}>{t('katPay')}</button>}
                </div>
              </div>
            ))}
          </div>

          <div style={{ height: 30 }}/>
        </div>
      </div>
    </>
  );
}

Object.assign(window, { CarDashboard, AddCarModal, QuoteScreen, DeliveryScreen, TrackingScreen, RoadworthyScreen, VignetteScreen, KatScreen, SuccessModal });