/* Viamar PWA — Quote flow (controller + steps) */

const CARGO_TYPES = [
  { id: 'car',  icon: 'car',   label: 'Vehicle', sub: 'Cars, SUVs, exotics' },
  { id: 'bike', icon: 'bike',  label: 'Motorcycle', sub: 'Bikes, snowmobiles, jet skis' },
  { id: 'box',  icon: 'box',   label: 'Household & pallets', sub: 'Boxes, furniture, effects' },
  { id: 'ship', icon: 'ship',  label: 'Boat or oversized', sub: 'Boats, RVs, equipment' },
];

const DESTINATIONS = [
  { city: 'Bremerhaven', country: 'Germany', port: 'DE BRV', region: 'Europe', days: '14–18 days' },
  { city: 'Genoa', country: 'Italy', port: 'IT GOA', region: 'Europe', days: '16–20 days' },
  { city: 'Lisbon', country: 'Portugal', port: 'PT LIS', region: 'Europe', days: '15–19 days' },
  { city: 'Kingston', country: 'Jamaica', port: 'JM KIN', region: 'Caribbean', days: '9–12 days' },
  { city: 'Tema', country: 'Ghana', port: 'GH TEM', region: 'West Africa', days: '21–28 days' },
  { city: 'Sydney', country: 'Australia', port: 'AU SYD', region: 'Oceania', days: '32–40 days' },
  { city: 'Vancouver', country: 'Canada', port: 'CA YVR', region: 'Domestic', days: '5–7 days' },
  { city: 'Calgary', country: 'Canada', port: 'CA YYC', region: 'Domestic', days: '4–6 days' },
];

function StepShell({ step, total, title, kicker, onBack, footer, children }) {
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: T.paper }}>
      {/* Header */}
      <div style={{ background: T.navy, padding: '54px 20px 18px', flexShrink: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 16 }}>
          <div onClick={onBack} style={{ width: 38, height: 38, borderRadius: 11, background: 'rgba(255,255,255,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
            <Icon name="chevL" size={20} color="#fff" stroke={2.2} />
          </div>
          <div style={{ flex: 1, display: 'flex', gap: 5 }}>
            {[...Array(total)].map((_, i) => (
              <div key={i} style={{ flex: 1, height: 4, borderRadius: 999, background: i <= step ? T.red : 'rgba(255,255,255,0.16)', transition: 'background .3s' }} />
            ))}
          </div>
          <span style={{ fontFamily: FM, fontSize: 11, color: 'rgba(255,255,255,0.55)', letterSpacing: 0.5 }}>{step + 1}/{total}</span>
        </div>
        {kicker && <Kicker color={T.red} style={{ marginBottom: 7 }}>{kicker}</Kicker>}
        <Display size={24} color="#fff">{title}</Display>
      </div>
      {/* Body */}
      <div style={{ flex: 1, overflowY: 'auto', padding: '20px 20px 20px' }}>{children}</div>
      {/* Footer */}
      {footer && (
        <div style={{ flexShrink: 0, padding: '14px 20px 30px', background: 'rgba(255,255,255,0.86)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', borderTop: '1px solid ' + T.line }}>
          {footer}
        </div>
      )}
    </div>
  );
}

// Step 0 — cargo type
function StepCargo({ value, onPick }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      {CARGO_TYPES.map(c => {
        const sel = value === c.id;
        return (
          <div key={c.id} onClick={() => onPick(c.id)} style={{
            background: '#fff', borderRadius: 18, padding: 16, display: 'flex', alignItems: 'center', gap: 14,
            cursor: 'pointer', border: `2px solid ${sel ? T.red : T.line2}`, transition: 'border .15s, box-shadow .15s',
            boxShadow: sel ? '0 8px 24px rgba(221,28,36,0.14)' : '0 1px 2px rgba(10,27,46,0.04)',
          }}>
            <div style={{ width: 50, height: 50, borderRadius: 14, background: sel ? 'rgba(221,28,36,0.1)' : T.paper, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name={c.icon} size={27} color={sel ? T.red : T.navy} stroke={1.9} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: FD, fontWeight: 800, fontSize: 16, color: T.ink, fontStretch: '110%' }}>{c.label}</div>
              <div style={{ fontFamily: FB, fontSize: 12.5, color: T.muted }}>{c.sub}</div>
            </div>
            <div style={{ width: 22, height: 22, borderRadius: '50%', border: `2px solid ${sel ? T.red : T.line}`, background: sel ? T.red : '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              {sel && <Icon name="check" size={13} color="#fff" stroke={3} />}
            </div>
          </div>
        );
      })}
    </div>
  );
}

// Step 1 — route
function StepRoute({ from, dest, onPickDest, service, onService }) {
  const [q, setQ] = React.useState('');
  const list = DESTINATIONS.filter(d => service === 'domestic' ? d.region === 'Domestic' : d.region !== 'Domestic')
    .filter(d => (d.city + d.country).toLowerCase().includes(q.toLowerCase()));
  return (
    <div>
      {/* service toggle */}
      <div style={{ display: 'flex', gap: 6, background: '#fff', borderRadius: 14, padding: 5, border: '1px solid ' + T.line2, marginBottom: 18 }}>
        {[['intl', 'International'], ['domestic', 'Across Canada']].map(([id, lbl]) => (
          <div key={id} onClick={() => onService(id)} style={{
            flex: 1, textAlign: 'center', padding: '10px 0', borderRadius: 10, cursor: 'pointer',
            fontFamily: FB, fontWeight: 700, fontSize: 13.5, color: service === id ? '#fff' : T.muted,
            background: service === id ? T.navy : 'transparent', transition: 'all .2s',
          }}>{lbl}</div>
        ))}
      </div>

      {/* From (fixed warehouse origins) */}
      <div style={{ background: '#fff', borderRadius: 16, padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 12, border: '1px solid ' + T.line2, marginBottom: 10 }}>
        <div style={{ width: 34, height: 34, borderRadius: 10, background: 'rgba(221,28,36,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="pin" size={18} color={T.red} stroke={2} /></div>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: FM, fontSize: 9.5, letterSpacing: 1, color: T.faint, textTransform: 'uppercase' }}>Pickup from</div>
          <div style={{ fontFamily: FB, fontWeight: 700, fontSize: 15, color: T.ink }}>{from}</div>
        </div>
        <span style={{ fontFamily: FM, fontSize: 10, color: T.green, background: 'rgba(46,139,111,0.1)', padding: '4px 8px', borderRadius: 8 }}>Door-to-door</span>
      </div>

      {/* destination search */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, background: '#fff', borderRadius: 16, padding: '13px 16px', border: '1px solid ' + T.line2, marginBottom: 14 }}>
        <Icon name="search" size={19} color={T.faint} stroke={2} />
        <input value={q} onChange={e => setQ(e.target.value)} placeholder={service === 'domestic' ? 'Search Canadian cities' : 'Search destination port or country'} style={{ flex: 1, border: 'none', outline: 'none', fontFamily: FB, fontSize: 14.5, color: T.ink, background: 'transparent' }} />
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {list.map(d => {
          const sel = dest && dest.port === d.port;
          return (
            <div key={d.port} onClick={() => onPickDest(d)} style={{
              background: '#fff', borderRadius: 14, padding: '13px 15px', display: 'flex', alignItems: 'center', gap: 12,
              cursor: 'pointer', border: `2px solid ${sel ? T.red : T.line2}`,
            }}>
              <div style={{ width: 42, height: 42, borderRadius: 11, background: T.navy, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
                <span style={{ fontFamily: FD, fontWeight: 800, fontSize: 10.5, color: '#fff', fontStretch: '110%' }}>{d.port.split(' ')[0]}</span>
                <span style={{ fontFamily: FM, fontSize: 8, color: 'rgba(255,255,255,0.55)' }}>{d.port.split(' ')[1]}</span>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: FB, fontWeight: 700, fontSize: 15, color: T.ink }}>{d.city}, {d.country}</div>
                <div style={{ fontFamily: FM, fontSize: 10.5, color: T.muted }}>{d.region} · {d.days}</div>
              </div>
              <Icon name={sel ? 'checkC' : 'chevR'} size={20} color={sel ? T.red : T.faint} stroke={2} />
            </div>
          );
        })}
        {list.length === 0 && <div style={{ fontFamily: FB, fontSize: 13, color: T.muted, textAlign: 'center', padding: 24 }}>No matches — our team ships to 250+ ports. Try another name.</div>}
      </div>
    </div>
  );
}

Object.assign(window, { CARGO_TYPES, DESTINATIONS, StepShell, StepCargo, StepRoute });