/* Viamar Desktop — Dashboard */

// Route launcher band (navy hero) — slick, AI-first, with hero imagery
function HeroLauncher({ onQuote, headline }) {
  return (
    <div style={{ background: T.navy, borderRadius: 24, overflow: 'hidden', position: 'relative', display: 'flex', minHeight: 384 }}>
      {/* LEFT — content on navy */}
      <div style={{ flex: 1.12, padding: '34px 36px', position: 'relative', zIndex: 2, display: 'flex', flexDirection: 'column' }}>
        {/* AI badge */}
        <div style={{ display: 'inline-flex', alignSelf: 'flex-start', alignItems: 'center', gap: 8, background: 'rgba(221,28,36,0.14)', border: '1px solid rgba(221,28,36,0.3)', borderRadius: 999, padding: '7px 14px', marginBottom: 18 }}>
          <Icon name="spark" size={15} color={T.red} stroke={2.2} />
          <span style={{ fontFamily: FM, fontSize: 10.5, fontWeight: 700, color: '#fff', letterSpacing: 1, textTransform: 'uppercase' }}>AI-first freight · instant quote</span>
        </div>

        <Display size={40} color="#fff" style={{ marginBottom: 14, maxWidth: 480 }}>
          {headline || 'Ship anything, anywhere — by sea, land or air.'}
        </Display>
        <div style={{ fontFamily: FB, fontSize: 14.5, color: 'rgba(255,255,255,0.6)', lineHeight: 1.55, maxWidth: 420, marginBottom: 'auto' }}>
          Snap a photo, let our AI estimate your volume in seconds, and get a team-verified price to 250+ ports.
        </div>

        {/* route picker */}
        <div onClick={onQuote} style={{ display: 'flex', alignItems: 'center', background: '#fff', borderRadius: 16, padding: 7, maxWidth: 540, boxShadow: '0 18px 40px rgba(0,0,0,0.35)', cursor: 'pointer', marginTop: 24 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '11px 14px', flex: 1 }}>
            <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>
              <div style={{ fontFamily: FM, fontSize: 9, letterSpacing: 1, color: T.faint, textTransform: 'uppercase' }}>From</div>
              <div style={{ fontFamily: FB, fontWeight: 700, fontSize: 14.5, color: T.ink }}>Toronto, ON</div>
            </div>
          </div>
          <div style={{ width: 28, height: 28, borderRadius: '50%', background: T.navy, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name="arrowR" size={14} color="#fff" stroke={2.4} /></div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '11px 14px', flex: 1 }}>
            <div style={{ width: 34, height: 34, borderRadius: 10, background: 'rgba(27,58,87,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="globe" size={18} color={T.navy3} stroke={2} /></div>
            <div>
              <div style={{ fontFamily: FM, fontSize: 9, letterSpacing: 1, color: T.faint, textTransform: 'uppercase' }}>To</div>
              <div style={{ fontFamily: FB, fontWeight: 700, fontSize: 14.5, color: T.faint }}>Choose destination</div>
            </div>
          </div>
          <Btn variant="primary" icon="spark" onClick={onQuote} style={{ flexShrink: 0, borderRadius: 12 }}>Start AI quote</Btn>
        </div>

        {/* trust strip */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginTop: 22, flexWrap: 'wrap' }}>
          {['CIFFA Certified', 'FIATA Member', '50+ Years', '250 Ports'].map((t, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
              {i > 0 && <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'rgba(255,255,255,0.25)' }} />}
              <span style={{ fontFamily: FM, fontSize: 10.5, letterSpacing: 0.5, color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase' }}>{t}</span>
            </div>
          ))}
        </div>
      </div>

      {/* RIGHT — hero image slot */}
      <div style={{ flex: 0.92, position: 'relative', minWidth: 320 }}>
        <AssetImage src={ASSETS.hero} alt="Viamar international shipping service" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }} />
        {/* left-edge navy blend so the image melts into the panel */}
        <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', background: `linear-gradient(90deg, ${T.navy} 0%, rgba(10,27,46,0.6) 16%, rgba(10,27,46,0) 42%)` }} />
        {/* floating AI chip */}
        <div style={{ position: 'absolute', left: 22, bottom: 22, pointerEvents: 'none', display: 'flex', alignItems: 'center', gap: 9, background: 'rgba(6,16,28,0.62)', backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)', border: '1px solid rgba(255,255,255,0.14)', borderRadius: 12, padding: '10px 14px' }}>
          <div style={{ width: 30, height: 30, borderRadius: 9, background: T.red, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="spark" size={17} color="#fff" stroke={2.2} /></div>
          <div>
            <div style={{ fontFamily: FB, fontWeight: 700, fontSize: 12.5, color: '#fff' }}>AI volume estimate</div>
            <div style={{ fontFamily: FM, fontSize: 9.5, color: 'rgba(255,255,255,0.7)', letterSpacing: 0.3 }}>Scanned in ~12 seconds</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function DashSailing({ s }) {
  return (
    <div style={{ background: '#fff', borderRadius: 16, padding: 17, border: '1px solid ' + T.line2, boxShadow: '0 1px 2px rgba(10,27,46,0.04)' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
        <span style={{ fontFamily: FD, fontWeight: 800, fontSize: 16, color: T.ink, fontStretch: '110%' }}>{s.dest}</span>
        <Icon name="anchor" size={17} color={T.navy3} stroke={1.8} />
      </div>
      <div style={{ fontFamily: FB, fontSize: 11.5, color: T.muted, lineHeight: 1.4, marginBottom: 14, minHeight: 32 }}>{s.ports}</div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
        <div>
          <div style={{ fontFamily: FM, fontSize: 8.5, letterSpacing: 0.8, color: T.faint, textTransform: 'uppercase' }}>Next sailing</div>
          <div style={{ fontFamily: FD, fontWeight: 800, fontSize: 18, color: T.red, fontStretch: '110%' }}>{s.next}</div>
        </div>
        <span style={{ fontFamily: FM, fontSize: 10.5, color: T.muted }}>{s.transit}</span>
      </div>
    </div>
  );
}

function DashReview({ r }) {
  return (
    <div style={{ background: '#fff', borderRadius: 16, padding: 18, border: '1px solid ' + T.line2 }}>
      <div style={{ display: 'flex', gap: 2, marginBottom: 10 }}>
        {[...Array(r.stars)].map((_, i) => <Icon key={i} name="star" size={15} color={T.gold} />)}
      </div>
      <div style={{ fontFamily: FB, fontSize: 13.5, color: T.body, lineHeight: 1.55, marginBottom: 14 }}>"{r.text}"</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
        <div style={{ width: 30, height: 30, borderRadius: '50%', background: T.paper, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: FD, fontWeight: 800, fontSize: 13, color: T.navy }}>{r.name[0]}</div>
        <div>
          <div style={{ fontFamily: FB, fontWeight: 700, fontSize: 13, color: T.ink }}>{r.name}</div>
          <div style={{ fontFamily: FM, fontSize: 10, color: T.muted, letterSpacing: 0.3 }}>{r.loc}</div>
        </div>
      </div>
    </div>
  );
}

// Big active-shipment card with route line + mini timeline
function ActiveCard({ s, onOpen }) {
  const lastDone = [...s.steps].reverse().find(x => x.done || x.active);
  return (
    <Card pad={0} style={{ overflow: 'hidden' }}>
      <div style={{ padding: '22px 24px 18px' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 13 }}>
            <div style={{ width: 46, height: 46, borderRadius: 13, background: T.paper, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name={s.cargoType} size={26} color={T.navy} stroke={1.9} />
            </div>
            <div>
              <div style={{ fontFamily: FB, fontWeight: 700, fontSize: 17, color: T.ink }}>{s.cargo}</div>
              <div style={{ fontFamily: FM, fontSize: 11, color: T.muted, letterSpacing: 0.3 }}>{s.id} · {s.method}</div>
            </div>
          </div>
          <Status kind={s.kind} />
        </div>
        {/* route */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, margin: '4px 0 6px' }}>
          <div>
            <div style={{ fontFamily: FD, fontWeight: 800, fontSize: 18, color: T.ink, fontStretch: '110%' }}>{s.fromPort}</div>
            <div style={{ fontFamily: FB, fontSize: 11.5, color: T.muted, marginTop: 2 }}>{s.from}</div>
          </div>
          <div style={{ flex: 1, position: 'relative', height: 24, display: 'flex', alignItems: 'center' }}>
            <div style={{ flex: 1, height: 2.5, background: T.line, borderRadius: 2 }} />
            <div style={{ position: 'absolute', left: 0, width: `${s.progress}%`, height: 2.5, background: T.red, borderRadius: 2 }} />
            <div style={{ position: 'absolute', left: `${s.progress}%`, transform: 'translateX(-50%)', width: 28, height: 28, borderRadius: '50%', background: '#fff', boxShadow: '0 2px 8px rgba(0,0,0,0.16)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name="ship" size={16} color={T.red} stroke={2} />
            </div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontFamily: FD, fontWeight: 800, fontSize: 18, color: T.ink, fontStretch: '110%' }}>{s.toPort}</div>
            <div style={{ fontFamily: FB, fontSize: 11.5, color: T.muted, marginTop: 2 }}>{s.to}</div>
          </div>
        </div>
      </div>
      <div style={{ display: 'flex', borderTop: '1px solid ' + T.line2 }}>
        {[['Latest update', lastDone ? lastDone.t : '—', 'pin'], ['ETA', s.eta, 'clock'], ['Vessel', s.vessel, 'anchor']].map(([l, v, ic], i) => (
          <div key={i} style={{ flex: 1, padding: '15px 20px', borderLeft: i ? '1px solid ' + T.line2 : 'none', display: 'flex', gap: 11, alignItems: 'flex-start' }}>
            <Icon name={ic} size={17} color={T.navy3} stroke={1.9} />
            <div>
              <div style={{ fontFamily: FM, fontSize: 9, letterSpacing: 1, color: T.faint, textTransform: 'uppercase' }}>{l}</div>
              <div style={{ fontFamily: FB, fontWeight: 700, fontSize: 13, color: T.ink, marginTop: 3 }}>{v}</div>
            </div>
          </div>
        ))}
        <div style={{ display: 'flex', alignItems: 'center', padding: '0 20px', borderLeft: '1px solid ' + T.line2 }}>
          <Btn variant="navy" size="sm" icon="arrowR" onClick={onOpen}>Open</Btn>
        </div>
      </div>
    </Card>
  );
}

const MOVE_SIZES = [
  { pallet: '0.5 Pallet', cuft: '80–100', m3: '2.3–2.8 m³', fill: '~8% of a 20ft', move: 'Small move', icon: 'bike', desc: 'Bike, a few boxes, small furniture', who: 'Students & minimal moves' },
  { pallet: '1 Pallet', cuft: '170–200', m3: '4.8–5.7 m³', fill: '~15% of a 20ft', move: 'Medium move', icon: 'box', desc: '1-bedroom apartment (partial)', who: 'Condo or apartment shipments' },
  { pallet: '2–3 Pallets', cuft: '350–600', m3: '10–17 m³', fill: '30–50% of a 20ft', move: 'Large move', icon: 'truck', desc: 'Full apartment or small house', who: 'Family moves & larger shipments' },
  { pallet: '4+ Pallets', cuft: '700–800+', m3: '20–23 m³', fill: 'A full 20ft container', move: 'Full house move', icon: 'home', desc: '3+ bedroom house (full move)', who: 'Full household by dedicated truck' },
];

function MoveSizes({ onQuote }) {
  const [intl, setIntl] = React.useState(true);
  const [sel, setSel] = React.useState(null);
  return (
    <div style={{ background: '#fff', borderRadius: 20, border: '1px solid ' + T.line2, boxShadow: '0 1px 2px rgba(10,27,46,0.04), 0 8px 24px rgba(10,27,46,0.05)', overflow: 'hidden' }}>
      {/* head */}
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 20, padding: '24px 28px 18px' }}>
        <div>
          <Kicker color={T.red} style={{ marginBottom: 8 }}>Visual move sizes</Kicker>
          <div style={{ fontFamily: FD, fontWeight: 800, fontSize: 24, color: T.ink, fontStretch: '115%', lineHeight: 1.1 }}>Find your size on our 7′ × 4′ pallets</div>
          <div style={{ fontFamily: FB, fontSize: 13.5, color: T.muted, marginTop: 5 }}>Every shipment is measured on the same standard platform — so pricing stays transparent.</div>
        </div>
        {/* service toggle */}
        <div style={{ display: 'flex', gap: 5, background: T.paper, borderRadius: 12, padding: 4, border: '1px solid ' + T.line2, flexShrink: 0 }}>
          {[['ca', 'Across Canada', false], ['intl', 'International', true]].map(([id, lbl, on]) => {
            const active = intl === on;
            return (
              <div key={id} onClick={() => setIntl(on)} style={{ padding: '8px 16px', borderRadius: 9, cursor: 'pointer', fontFamily: FB, fontWeight: 700, fontSize: 13, color: active ? '#fff' : T.muted, background: active ? T.navy : 'transparent', transition: 'all .2s', whiteSpace: 'nowrap' }}>{lbl}</div>
            );
          })}
        </div>
      </div>

      {/* cards */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, padding: '0 28px 8px' }}>
        {MOVE_SIZES.map((m, i) => {
          const on = sel === i;
          return (
            <div key={i} onClick={() => setSel(i)} style={{ borderRadius: 16, border: `2px solid ${on ? T.red : T.line2}`, overflow: 'hidden', cursor: 'pointer', transition: 'border .15s, box-shadow .15s', boxShadow: on ? '0 10px 26px rgba(221,28,36,0.12)' : 'none', display: 'flex', flexDirection: 'column' }}>
              <div style={{ position: 'relative' }}>
                <AssetImage src={ASSETS.pallets} alt={m.pallet + ' visual move size'} style={{ width: '100%', height: 150 }} fit="cover" />
                <div style={{ position: 'absolute', top: 12, left: 12, display: 'flex', alignItems: 'center', gap: 7, background: T.navy, borderRadius: 9, padding: '6px 11px', pointerEvents: 'none' }}>
                  <Icon name={m.icon} size={15} color="#fff" stroke={2} />
                  <span style={{ fontFamily: FD, fontWeight: 800, fontSize: 12.5, color: '#fff', fontStretch: '110%', letterSpacing: 0.2 }}>{m.pallet}</span>
                </div>
              </div>
              <div style={{ padding: '14px 16px 16px', display: 'flex', flexDirection: 'column', flex: 1 }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
                  <span style={{ fontFamily: FD, fontWeight: 800, fontSize: 20, color: T.ink, fontStretch: '110%' }}>{m.cuft}</span>
                  <span style={{ fontFamily: FM, fontSize: 10.5, color: T.faint }}>cu ft</span>
                </div>
                <div style={{ fontFamily: FB, fontWeight: 700, fontSize: 13.5, color: T.red, marginTop: 6 }}>{m.move}</div>
                <div style={{ fontFamily: FB, fontSize: 12, color: T.body, lineHeight: 1.4, marginTop: 3, minHeight: 34 }}>{m.desc}</div>
                {/* context line swaps with service */}
                <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginTop: 12, paddingTop: 12, borderTop: '1px solid ' + T.line2 }}>
                  <Icon name={intl ? 'box' : 'truck'} size={15} color={T.navy3} stroke={1.9} />
                  <span style={{ fontFamily: FM, fontSize: 10.5, color: T.muted, letterSpacing: 0.2 }}>{intl ? m.fill : m.who}</span>
                </div>
              </div>
            </div>
          );
        })}
      </div>

      {/* footer */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, margin: '14px 28px 22px', padding: '14px 18px', background: T.navy, borderRadius: 14 }}>
        <div style={{ width: 30, height: 30, borderRadius: '50%', background: 'rgba(255,255,255,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name="checkC" size={18} color={T.gold} stroke={2} /></div>
        <div style={{ flex: 1 }}>
          <span style={{ fontFamily: FB, fontWeight: 700, fontSize: 13, color: '#fff' }}>Standard platform — 7′ (L) × 4′ (W).</span>
          <span style={{ fontFamily: FB, fontSize: 12.5, color: 'rgba(255,255,255,0.6)' }}>  Consistent measurement · transparent pricing · {intl ? 'priced by container space' : 'dedicated-truck pallet pricing'}.</span>
        </div>
        <Btn variant="primary" size="sm" icon="spark" onClick={onQuote}>{sel != null ? `Quote ${MOVE_SIZES[sel].pallet}` : 'Get a quote'}</Btn>
      </div>
    </div>
  );
}

function DashboardScreen({ onQuote, onOpenShipment, onNav, headline }) {
  const active = SHIPMENTS[0];
  return (
    <div className="vscroll" style={{ height: '100%', overflowY: 'auto' }}>
      <div style={{ padding: '30px 40px 48px', display: 'flex', flexDirection: 'column', gap: 28 }}>
      <HeroLauncher onQuote={onQuote} headline={headline} />

      {/* AI feature strip */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, background: '#fff', borderRadius: 20, overflow: 'hidden', border: '1px solid ' + T.line2, boxShadow: '0 1px 2px rgba(10,27,46,0.04), 0 8px 24px rgba(10,27,46,0.05)' }}>
        <div style={{ padding: '28px 30px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <Kicker color={T.red} style={{ marginBottom: 10 }}>AI volume estimate</Kicker>
          <div style={{ fontFamily: FD, fontWeight: 800, fontSize: 24, color: T.ink, fontStretch: '115%', lineHeight: 1.12, marginBottom: 14, maxWidth: 380 }}>Point your camera. Get a price in seconds.</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
            {[['scan', 'Our AI detects items and estimates volume from a photo'], ['shield', 'A Viamar agent verifies before your price locks in'], ['clock', 'Most quotes confirmed within 1 business hour']].map(([ic, t], i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
                <div style={{ width: 32, height: 32, borderRadius: 9, background: T.paper, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name={ic} size={17} color={T.navy} stroke={1.9} /></div>
                <span style={{ fontFamily: FB, fontSize: 13.5, color: T.body, lineHeight: 1.4 }}>{t}</span>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 20 }}><Btn variant="navy" size="sm" icon="camera" onClick={onQuote}>Try the AI scan</Btn></div>
        </div>
        <AssetImage src={ASSETS.aiScan} alt="Shipment photo used for AI volume scan" style={{ width: '100%', minHeight: 240 }} />
      </div>

      {/* visual move sizes — pallet system */}
      <MoveSizes onQuote={onQuote} />

      {/* main grid */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.55fr 1fr', gap: 28, alignItems: 'start' }}>
        {/* left column */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
          <div>
            <SectionHead title="Active shipment" action="View all shipments" onAction={() => onNav('track')} />
            <ActiveCard s={active} onOpen={() => onOpenShipment(active)} />
          </div>
          <div>
            <SectionHead title="Weekly sailings" action="Full schedule" />
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }}>
              {SAILINGS.map((s, i) => <DashSailing key={i} s={s} />)}
            </div>
          </div>
        </div>

        {/* right column */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
          {/* capability band */}
          <div style={{ background: T.navy, borderRadius: 20, overflow: 'hidden', position: 'relative' }}>
            <AssetImage src={ASSETS.warehouse} alt="Viamar loading and warehouse capability" style={{ width: '100%', height: 150 }} />
            <div style={{ padding: 24 }}>
              <Kicker color={T.red} style={{ marginBottom: 10 }}>Why Viamar</Kicker>
              <div style={{ fontFamily: FD, fontWeight: 800, fontSize: 21, color: '#fff', fontStretch: '115%', lineHeight: 1.12, marginBottom: 18 }}>We load our own containers — no third-party consolidators.</div>
              <div style={{ display: 'flex', gap: 11 }}>
                {[['4', 'cars / 40ft'], ['30+', 'photos / load'], ['2 wks', 'free storage']].map(([n, l], i) => (
                  <div key={i} style={{ flex: 1, background: 'rgba(255,255,255,0.06)', borderRadius: 14, padding: '14px 14px' }}>
                    <div style={{ fontFamily: FD, fontWeight: 800, fontSize: 24, color: T.red, fontStretch: '110%' }}>{n}</div>
                    <div style={{ fontFamily: FB, fontSize: 11, color: 'rgba(255,255,255,0.6)', lineHeight: 1.3, marginTop: 3 }}>{l}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
          {/* reviews */}
          <div>
            <SectionHead title="Trusted since 1976" />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {REVIEWS.slice(0, 2).map((r, i) => <DashReview key={i} r={r} />)}
            </div>
          </div>
        </div>
      </div>
      </div>
    </div>
  );
}

Object.assign(window, { DashboardScreen });