/* Viamar PWA — shared tokens, icons, primitives, mock data */

// ─────────────────────────────────────────────────────────────
// Design tokens
// ─────────────────────────────────────────────────────────────
const T = {
  navy:   '#0A1B2E',   // chrome / primary ink
  navy2:  '#112A44',   // raised navy surface
  navy3:  '#1B3A57',   // sea / map
  red:    '#DD1C24',   // Viamar primary action
  redDeep:'#B3171D',
  paper:  '#F4F5F7',   // app background
  card:   '#FFFFFF',
  line:   '#E5E8EC',
  line2:  '#EEF1F4',
  ink:    '#0A1B2E',
  body:   '#3A4A59',
  muted:  '#6B7B8B',
  faint:  '#9AA7B4',
  amber:  '#E0922F',   // in transit
  green:  '#2E8B6F',   // delivered
  gold:   '#C8A24B',   // seals
  seaLine:'#2C5172',
};

const FD = "'Archivo Expanded','Archivo',system-ui,sans-serif"; // display
const FB = "'Archivo',system-ui,sans-serif";                     // body
const FM = "'Space Mono',ui-monospace,monospace";                // mono

const ASSETS = {
  logo: 'uploads/logo.png',
  hero: 'uploads/site/faqleftImage.png',
  aiScan: 'uploads/site/shipmentThumbnail.png',
  warehouse: 'uploads/site/provideImage1.png',
  container: 'uploads/site/provideImage4-1.png',
  truck: 'uploads/site/truck.jpg',
  pallets: 'uploads/70592fac-7e05-41a2-b170-5a5c9ec505b1.png',
};

function AssetImage({ src, alt = '', fit = 'cover', style = {}, overlay, children }) {
  return (
    <div style={{ position: 'relative', overflow: 'hidden', background: T.line2, ...style }}>
      <img src={src} alt={alt} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: fit, display: 'block' }} />
      {overlay && <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', ...overlay }} />}
      {children}
    </div>
  );
}

function ViamarLogo({ width = 142, onDark = false, style = {} }) {
  return (
    <img src={ASSETS.logo} alt="Viamar Scilla Transport International" style={{ width, height: 'auto', display: 'block', filter: onDark ? 'drop-shadow(0 1px 0 rgba(255,255,255,0.08))' : 'none', ...style }} />
  );
}

// ─────────────────────────────────────────────────────────────
// Icons — Lucide icon set
// ─────────────────────────────────────────────────────────────
const LUCIDE_BASE = 'uploads/icons/';
const LUCIDE_ICONS = {
  home: 'house',
  ship: 'ship',
  track: 'map-pin',
  menu: 'menu',
  plus: 'plus',
  truck: 'truck',
  plane: 'plane',
  car: 'car-front',
  box: 'package',
  bike: 'bike',
  globe: 'globe',
  shield: 'shield-check',
  star: 'star',
  bell: 'bell',
  chevR: 'chevron-right',
  chevL: 'chevron-left',
  chevD: 'chevron-down',
  arrowR: 'arrow-right',
  search: 'search',
  camera: 'camera',
  check: 'check',
  checkC: 'circle-check',
  clock: 'clock',
  user: 'user',
  doc: 'file-text',
  pin: 'map-pin',
  spark: 'sparkles',
  phone: 'phone',
  anchor: 'anchor',
  gift: 'gift',
  scan: 'scan-line',
  waves: 'waves',
};

function Icon({ name, size = 24, color = 'currentColor', stroke = 2, fill = 'none' }) {
  const icon = LUCIDE_ICONS[name] || name || 'circle';
  const url = `url("${LUCIDE_BASE}${icon}.svg")`;
  return (
    <span aria-hidden="true" style={{
      width: size,
      height: size,
      display: 'block',
      flexShrink: 0,
      backgroundColor: color,
      WebkitMaskImage: url,
      maskImage: url,
      WebkitMaskRepeat: 'no-repeat',
      maskRepeat: 'no-repeat',
      WebkitMaskPosition: 'center',
      maskPosition: 'center',
      WebkitMaskSize: 'contain',
      maskSize: 'contain',
    }} />
  );
  const p = { fill: 'none', stroke: color, strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const paths = {
    home:   <><path d="M3 11.5 12 4l9 7.5" {...p}/><path d="M5 10v10h14V10" {...p}/></>,
    ship:   <><path d="M3 14h18l-2 6H5l-2-6Z" {...p}/><path d="M6 14V8h9l4 6" {...p}/><path d="M11 8V4h-1" {...p}/></>,
    track:  <><circle cx="12" cy="10" r="3" {...p}/><path d="M12 21c5-5 7-8.5 7-11a7 7 0 1 0-14 0c0 2.5 2 6 7 11Z" {...p}/></>,
    menu:   <><path d="M4 7h16M4 12h16M4 17h16" {...p}/></>,
    plus:   <><path d="M12 5v14M5 12h14" {...p}/></>,
    truck:  <><path d="M3 6h11v9H3z" {...p}/><path d="M14 9h4l3 3v3h-7z" {...p}/><circle cx="7" cy="18" r="1.8" {...p}/><circle cx="17.5" cy="18" r="1.8" {...p}/></>,
    plane:  <><path d="M21 15.5 13.5 11V5a1.5 1.5 0 0 0-3 0v6L3 15.5V18l7.5-2v3L8 20.5V22l4-1 4 1v-1.5L13.5 19v-3l7.5 2v-2.5Z" {...p}/></>,
    car:    <><path d="M3 16v-3l2-5a2 2 0 0 1 2-1.3h10A2 2 0 0 1 19 8l2 5v3" {...p}/><path d="M3 16h18v3h-2v-3M5 19v-3" {...p}/><circle cx="7.5" cy="16" r="1.4" {...p}/><circle cx="16.5" cy="16" r="1.4" {...p}/></>,
    box:    <><path d="M12 3 3 7.5v9L12 21l9-4.5v-9L12 3Z" {...p}/><path d="M3 7.5 12 12l9-4.5M12 12v9" {...p}/></>,
    bike:   <><circle cx="6" cy="16" r="3" {...p}/><circle cx="18" cy="16" r="3" {...p}/><path d="M6 16l3-6h5l2 6M9 10h6M14 10l2-3h2" {...p}/></>,
    globe:  <><circle cx="12" cy="12" r="9" {...p}/><path d="M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18" {...p}/></>,
    shield: <><path d="M12 3 5 6v5c0 4.5 3 8 7 10 4-2 7-5.5 7-10V6l-7-3Z" {...p}/><path d="m9 12 2 2 4-4" {...p}/></>,
    star:   <><path d="M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.9 6.8 19.6l1-5.8-4.3-4.1 5.9-.9L12 3.5Z" fill={color} stroke={color} strokeWidth="0.5"/></>,
    bell:   <><path d="M6 9a6 6 0 0 1 12 0c0 6 2 7 2 7H4s2-1 2-7Z" {...p}/><path d="M10 20a2 2 0 0 0 4 0" {...p}/></>,
    chevR:  <><path d="m9 5 7 7-7 7" {...p}/></>,
    chevL:  <><path d="m15 5-7 7 7 7" {...p}/></>,
    chevD:  <><path d="m5 9 7 7 7-7" {...p}/></>,
    arrowR: <><path d="M4 12h15M13 6l6 6-6 6" {...p}/></>,
    search: <><circle cx="11" cy="11" r="7" {...p}/><path d="m20 20-3.5-3.5" {...p}/></>,
    camera: <><path d="M3 8h3l1.5-2.5h9L18 8h3v12H3z" {...p}/><circle cx="12" cy="13" r="3.5" {...p}/></>,
    check:  <><path d="m5 12 5 5 9-10" {...p}/></>,
    checkC: <><circle cx="12" cy="12" r="9" {...p}/><path d="m8 12 2.5 2.5L16 9" {...p}/></>,
    clock:  <><circle cx="12" cy="12" r="9" {...p}/><path d="M12 7v5l3 2" {...p}/></>,
    user:   <><circle cx="12" cy="8" r="3.5" {...p}/><path d="M5 20c0-3.5 3-6 7-6s7 2.5 7 6" {...p}/></>,
    doc:    <><path d="M6 3h8l4 4v14H6z" {...p}/><path d="M14 3v4h4M9 13h6M9 17h6" {...p}/></>,
    pin:    <><circle cx="12" cy="10" r="2.5" {...p}/><path d="M12 21c5-5 7-8.5 7-11a7 7 0 1 0-14 0c0 2.5 2 6 7 11Z" {...p}/></>,
    spark:  <><path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5 18 18M18 6l-2.5 2.5M8.5 15.5 6 18" {...p}/><circle cx="12" cy="12" r="2.5" {...p}/></>,
    phone:  <><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L19 13l2 5v2a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2Z" {...p}/></>,
    anchor: <><circle cx="12" cy="5" r="2" {...p}/><path d="M12 7v13M7 12H5c0 4 3 7 7 7s7-3 7-7h-2M9 10h6" {...p}/></>,
    gift:   <><path d="M4 11h16v9H4z" {...p}/><path d="M3 7h18v4H3zM12 7v13M12 7C9 3 5 5 7 7M12 7c3-4 7-2 5 0" {...p}/></>,
    scan:   <><path d="M4 8V5h3M20 8V5h-3M4 16v3h3M20 16v3h-3" {...p}/><path d="M4 12h16" {...p} stroke={color}/></>,
    waves:  <><path d="M2 8c2-2 4-2 6 0s4 2 6 0 4-2 6 0M2 14c2-2 4-2 6 0s4 2 6 0 4-2 6 0" {...p}/></>,
  };
  return <svg width={size} height={size} viewBox="0 0 24 24" style={{ display: 'block', flexShrink: 0 }}>{paths[name]}</svg>;
}

// ─────────────────────────────────────────────────────────────
// Striped image placeholder with mono label
// ─────────────────────────────────────────────────────────────
function Placeholder({ label, h = 160, r = 16, dark = false, style = {}, children }) {
  const bg = dark ? T.navy2 : '#E7EBEF';
  const stripe = dark ? 'rgba(255,255,255,0.04)' : 'rgba(10,27,46,0.045)';
  const txt = dark ? 'rgba(255,255,255,0.55)' : 'rgba(10,27,46,0.4)';
  return (
    <div style={{
      height: h, borderRadius: r, background: `repeating-linear-gradient(135deg, ${bg}, ${bg} 11px, ${stripe} 11px, ${stripe} 22px)`,
      display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative',
      overflow: 'hidden', ...style,
    }}>
      {label && <span style={{ fontFamily: FM, fontSize: 10.5, letterSpacing: 0.5, textTransform: 'uppercase', color: txt, textAlign: 'center', padding: '0 12px' }}>{label}</span>}
      {children}
    </div>
  );
}

// Micro kicker label (mono uppercase)
function Kicker({ children, color = T.red, style = {} }) {
  return <div style={{ fontFamily: FM, fontSize: 11, fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase', color, ...style }}>{children}</div>;
}

// Display heading
function Display({ children, size = 28, color = T.ink, style = {} }) {
  return <div style={{ fontFamily: FD, fontWeight: 800, fontSize: size, lineHeight: 1.04, letterSpacing: '-0.01em', color, fontStretch: '125%', ...style }}>{children}</div>;
}

// ─────────────────────────────────────────────────────────────
// Authority chip strip / seal
// ─────────────────────────────────────────────────────────────
function Seal({ label, sub, color = T.gold }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5, flex: 1 }}>
      <div style={{
        width: 46, height: 46, borderRadius: '50%', border: `1.5px solid ${color}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative',
        boxShadow: `inset 0 0 0 3px rgba(255,255,255,0.04)`,
      }}>
        <span style={{ fontFamily: FD, fontWeight: 800, fontSize: 13, color, fontStretch: '125%' }}>{label}</span>
      </div>
      <span style={{ fontFamily: FM, fontSize: 8.5, letterSpacing: 0.8, textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)' }}>{sub}</span>
    </div>
  );
}

// Pill button
function Btn({ children, onClick, variant = 'primary', icon, size = 'lg', full = false, style = {}, disabled = false }) {
  const base = {
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 9,
    fontFamily: FB, fontWeight: 700, border: 'none', cursor: disabled ? 'default' : 'pointer',
    borderRadius: 14, transition: 'transform .12s ease, box-shadow .2s ease, background .2s ease',
    width: full ? '100%' : undefined, opacity: disabled ? 0.4 : 1,
    padding: size === 'lg' ? '16px 22px' : size === 'sm' ? '9px 14px' : '13px 18px',
    fontSize: size === 'lg' ? 16 : size === 'sm' ? 13 : 15, letterSpacing: '-0.01em',
  };
  const vstyle = {
    primary: { background: T.red, color: '#fff', boxShadow: '0 6px 18px rgba(221,28,36,0.32)' },
    navy:    { background: T.navy, color: '#fff', boxShadow: '0 6px 18px rgba(10,27,46,0.28)' },
    ghost:   { background: 'transparent', color: T.ink, boxShadow: 'inset 0 0 0 1.5px ' + T.line },
    light:   { background: '#fff', color: T.ink, boxShadow: '0 1px 3px rgba(10,27,46,0.08)' },
  }[variant];
  return (
    <button disabled={disabled} onClick={onClick} style={{ ...base, ...vstyle, ...style }}
      onMouseDown={e => !disabled && (e.currentTarget.style.transform = 'scale(0.975)')}
      onMouseUp={e => (e.currentTarget.style.transform = 'scale(1)')}
      onMouseLeave={e => (e.currentTarget.style.transform = 'scale(1)')}>
      {icon && <Icon name={icon} size={size === 'sm' ? 16 : 19} color={vstyle.color} stroke={2.2} />}
      {children}
    </button>
  );
}

// Card
function Card({ children, style = {}, pad = 18, onClick }) {
  return (
    <div onClick={onClick} style={{
      background: T.card, borderRadius: 20, padding: pad,
      boxShadow: '0 1px 2px rgba(10,27,46,0.04), 0 8px 24px rgba(10,27,46,0.05)',
      border: '1px solid ' + T.line2, cursor: onClick ? 'pointer' : 'default', ...style,
    }}>{children}</div>
  );
}

// Status badge
function Status({ kind }) {
  const map = {
    transit:   { c: T.amber, bg: 'rgba(224,146,47,0.12)', t: 'In transit' },
    delivered: { c: T.green, bg: 'rgba(46,139,111,0.12)', t: 'Delivered' },
    review:    { c: T.navy3, bg: 'rgba(27,58,87,0.1)', t: 'In review' },
    booked:    { c: T.red,   bg: 'rgba(221,28,36,0.1)', t: 'Booked' },
    customs:   { c: '#7A5AA8', bg: 'rgba(122,90,168,0.12)', t: 'At customs' },
  };
  const s = map[kind] || map.review;
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: s.bg, color: s.c,
      fontFamily: FM, fontSize: 10.5, fontWeight: 700, letterSpacing: 0.5, textTransform: 'uppercase',
      padding: '5px 10px', borderRadius: 999 }}>
      <span style={{ width: 6, height: 6, borderRadius: '50%', background: s.c }} />{s.t}
    </span>
  );
}

// Linear progress
function Progress({ value, color = T.red, track = T.line, h = 6 }) {
  return (
    <div style={{ height: h, borderRadius: 999, background: track, overflow: 'hidden' }}>
      <div style={{ width: `${Math.max(4, value)}%`, height: '100%', background: color, borderRadius: 999, transition: 'width .5s ease' }} />
    </div>
  );
}

// Section header row
function SectionHead({ title, action, onAction }) {
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12, marginBottom: 12 }}>
      <span style={{ fontFamily: FD, fontWeight: 800, fontSize: 16, color: T.ink, fontStretch: '110%', letterSpacing: '-0.01em', whiteSpace: 'nowrap' }}>{title}</span>
      {action && <span onClick={onAction} style={{ fontFamily: FM, fontSize: 10.5, fontWeight: 700, letterSpacing: 0.5, textTransform: 'uppercase', color: T.red, cursor: 'pointer', whiteSpace: 'nowrap' }}>{action}</span>}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Mock data
// ─────────────────────────────────────────────────────────────
const SHIPMENTS = [
  {
    id: 'VMR-48217', kind: 'transit', cargo: 'BMW M4 Competition',
    cargoType: 'car', from: 'Toronto, ON', fromPort: 'CA TOR',
    to: 'Bremerhaven, DE', toPort: 'DE BRV', method: 'Shared Container',
    vessel: 'MV Atlantic Crown', progress: 62, eta: 'Jun 14, 2026',
    photos: 32, ref: 'BL-7741-DE',
    steps: [
      { t: 'Quote accepted', d: 'May 02', done: true },
      { t: 'Picked up — Toronto', d: 'May 06', done: true },
      { t: 'At Courtice warehouse', d: 'May 08', done: true },
      { t: 'Loaded & sailing', d: 'May 19', done: true, active: true },
      { t: 'Arrive Bremerhaven', d: 'Jun 12', done: false },
      { t: 'Customs cleared', d: 'Jun 13', done: false },
      { t: 'Delivered', d: 'Jun 14', done: false },
    ],
  },
  {
    id: 'VMR-48090', kind: 'review', cargo: 'Household goods — 6 pallets',
    cargoType: 'box', from: 'Calgary, AB', fromPort: 'CA YYC',
    to: 'Lisbon, PT', toPort: 'PT LIS', method: 'LCL Consolidated',
    vessel: 'Pending assignment', progress: 12, eta: 'Quote review',
    photos: 0, ref: '—',
    steps: [
      { t: 'Quote submitted', d: 'May 28', done: true, active: true },
      { t: 'Team review', d: 'In progress', done: false },
      { t: 'Quote confirmed', d: '—', done: false },
    ],
  },
  {
    id: 'VMR-47788', kind: 'delivered', cargo: 'Harley-Davidson Road Glide',
    cargoType: 'bike', from: 'Toronto, ON', fromPort: 'CA TOR',
    to: 'Kingston, JM', toPort: 'JM KIN', method: 'RORO',
    vessel: 'MV Caribbean Star', progress: 100, eta: 'Delivered Apr 22',
    photos: 28, ref: 'BL-7129-JM',
    steps: [
      { t: 'Quote accepted', d: 'Mar 18', done: true },
      { t: 'Picked up', d: 'Mar 22', done: true },
      { t: 'Loaded & sailing', d: 'Apr 02', done: true },
      { t: 'Delivered — Kingston', d: 'Apr 22', done: true, active: true },
    ],
  },
];

const SAILINGS = [
  { dest: 'Europe', ports: 'Bremerhaven · Antwerp · Genoa', day: 'Every Thursday', next: 'Jun 05', transit: '14–18 days' },
  { dest: 'Caribbean', ports: 'Kingston · Port of Spain', day: 'Every Tuesday', next: 'Jun 03', transit: '9–12 days' },
  { dest: 'West Africa', ports: 'Tema · Lagos · Abidjan', day: 'Bi-weekly Fri', next: 'Jun 06', transit: '21–28 days' },
  { dest: 'Australia', ports: 'Sydney · Melbourne', day: 'Bi-weekly Mon', next: 'Jun 09', transit: '32–40 days' },
];

const REVIEWS = [
  { name: 'Michael Rizi', loc: 'Toronto → Germany', stars: 5, text: 'My car made it to Germany incredibly fast and arrived in the same condition I dropped it off in. They treated it with the utmost care.' },
  { name: 'Robert Mack', loc: 'Canada → Caribbean', stars: 5, text: 'They sent me 30+ photos of the vehicle secured in the container, then a link to track the shipment. Responsive and professional.' },
  { name: 'Peppe D.', loc: 'Canada → Italy', stars: 5, text: 'Fantastic prices and service. They kept me updated through every situation and even sent loading photos of the car in the container.' },
];

Object.assign(window, {
  T, FD, FB, FM, Icon, Placeholder, Kicker, Display, Seal, Btn, Card, Status, Progress, SectionHead,
  ASSETS, AssetImage, ViamarLogo, SHIPMENTS, SAILINGS, REVIEWS,
});