// SOLD OVERVIEW — the archival overview for a vehicle that has left the
// collection. Leads with the sale, recaps the hold, and points into the
// permanent record.

function ScreenSoldOverview({ vehicle = VEHICLE_FERRARI }) {
  const v = vehicle;
  const c = v.costs;

  return (
    <div className="proto-screen" style={{ background: P.ink, color: P.paper }}>

      {/* ───── HERO with SOLD treatment ───── */}
      <div style={{ position: 'relative' }}>
        <PhotoSlot dirId="concours" height={300} tone="dark"
          src={v.hero || undefined}
          label={`${v.year} · ${v.make.toUpperCase()} ${v.model.toUpperCase()}`}
          sub="ARCHIVED" />
        {/* Desaturate + darken overlay to read as 'past' */}
        <div style={{
          position: 'absolute', inset: 0,
          background:
            'linear-gradient(to bottom,' +
            ' rgba(10,10,11,0.35) 0%,' +
            ' rgba(10,10,11,0.2) 35%,' +
            ' rgba(10,10,11,0.6) 65%,' +
            ' rgba(10,10,11,0.95) 100%)',
        }} />
        {/* Status label — canonical platform chip */}
        <div style={{ position: 'absolute', top: 16, right: 16 }}>
          <VehicleStatusChip status={v.status} />
        </div>

        <div style={{
          position: 'absolute', inset: 0, padding: 22,
          display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
        }}>
          <div style={{
            fontFamily: T.display, fontWeight: 700, fontSize: 38,
            letterSpacing: '-0.02em', lineHeight: 0.9, color: P.paper,
          }}>
            {v.year}<br/>
            {v.make.toUpperCase()}<br/>
            <span style={{ fontSize: 22 }}>{v.model.toUpperCase()}</span>
          </div>
          <Eyebrow color={P.gold} style={{ marginTop: 10 }}>
            "{v.nickname.toUpperCase()}" · LEFT THE COLLECTION
          </Eyebrow>
        </div>
      </div>

      {/* ───── SALE HEADLINE STRIP ───── */}
      <div style={{
        background: P.graphite, borderBottom: `1px solid ${P.gold}`,
        padding: '18px 22px',
        display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 14, alignItems: 'flex-end',
      }}>
        <div>
          <Eyebrow color={P.mute}>SOLD FOR</Eyebrow>
          <div style={{
            fontFamily: T.display, fontSize: 34, fontWeight: 700,
            color: P.paper, letterSpacing: '-0.025em', lineHeight: 1, marginTop: 6,
          }}>{fmtMoney(v.sale.price)}</div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <Eyebrow color={P.mute}>APPRECIATION</Eyebrow>
          <div style={{
            fontFamily: T.display, fontSize: 22, fontWeight: 700,
            color: P.gold, letterSpacing: '-0.02em', marginTop: 6,
          }}>+{c.grossPct}%</div>
        </div>
      </div>

      {/* ───── SALE SUMMARY ───── */}
      <div style={{ padding: '22px 0 4px' }}>
        <RowRule>THE SALE</RowRule>
      </div>
      <div style={{ padding: '14px 22px 8px' }}>
        <InkCard accent padding={16}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <div>
              <div style={{
                fontFamily: T.display, fontWeight: 600, fontSize: 18, color: P.paper,
              }}>{v.sale.venue}</div>
              <div style={{
                fontFamily: T.mono, fontSize: 10, color: P.mute,
                letterSpacing: '0.12em', textTransform: 'uppercase', marginTop: 4,
              }}>{v.sale.method.toUpperCase()} · {v.sale.date.toUpperCase()}</div>
            </div>
            <Eyebrow color={P.gold}>FINAL</Eyebrow>
          </div>
          <div style={{ height: 1, background: P.slate, margin: '14px 0' }} />
          <div style={{ display: 'grid', gap: 8 }}>
            {[
              ['BUYER', `${v.sale.buyerName} · ${v.sale.buyerType}`],
              ['DESTINATION', v.sale.buyerLocation],
              ['DELIVERED', v.sale.deliveryDate],
            ].map(([k, val]) => (
              <div key={k} style={{ display: 'flex', justifyContent: 'space-between', gap: 12, fontSize: 11 }}>
                <span style={{ color: P.mute, fontFamily: T.mono, letterSpacing: '0.12em', textTransform: 'uppercase', fontSize: 9, flex: '0 0 auto' }}>{k}</span>
                <span style={{ color: P.paper, textAlign: 'right' }}>{val}</span>
              </div>
            ))}
          </div>
        </InkCard>
      </div>

      {/* ───── HOLD RECAP ───── */}
      <div style={{ padding: '22px 0 4px' }}>
        <RowRule>THE HOLD · {v.ownership.total.toUpperCase()}</RowRule>
      </div>
      <SpecStrip cols={3} items={[
        { label: 'ACQUIRED', value: v.value.purchasedDate.split(' ')[1] || '2016' },
        { label: 'PAID',     value: fmtMoney(v.costs.purchase, { compact: true }) },
        { label: 'NET GAIN', value: '+' + fmtMoney(v.costs.netGain, { compact: true }) },
      ]} />

      {/* ───── FINAL CONDITION ───── */}
      <div style={{ padding: '22px 0 4px' }}>
        <RowRule>CONDITION AT SALE · CONCOURS</RowRule>
      </div>
      <div style={{ padding: '14px 22px 8px', display: 'grid', gap: 6 }}>
        {v.health.slice(0, 4).map((h, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '28px 1fr auto',
            gap: 14, alignItems: 'center', padding: '10px 0',
            borderBottom: i < 3 ? `1px solid ${P.graphite}` : 'none',
          }}>
            <div style={{
              width: 28, height: 28, border: `1px solid ${P.slate}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon name={h.icon} size={14} color={P.gold} strokeWidth={1.5} />
            </div>
            <div style={{ fontFamily: T.display, fontSize: 14, fontWeight: 500, color: P.paper }}>{h.group}</div>
            <div style={{
              fontFamily: T.mono, fontSize: 9, color: P.gold,
              letterSpacing: '0.16em', textTransform: 'uppercase',
            }}>{h.status}</div>
          </div>
        ))}
      </div>

      {/* ───── RECORD POINTERS ───── */}
      <div style={{ padding: '22px 0 4px' }}>
        <RowRule>THE PERMANENT RECORD</RowRule>
      </div>
      <div style={{ padding: '14px 22px 12px', display: 'grid', gap: 6 }}>
        {[
          ['certificate', 'Ownership & provenance', '6 owners · matching numbers'],
          ['flag',        'Sale & transfer', 'Auction → ocean freight → Geneva'],
          ['hammer',      'Value & ROI', `${c.grossPct}% appreciation realized`],
          ['archive',     'Full timeline', `${v.timeline.length} verified events`],
        ].map(([icon, label, sub], i) => (
          <InkCard key={i} padding={14} style={{
            display: 'grid', gridTemplateColumns: '24px 1fr auto', gap: 10, alignItems: 'center',
          }}>
            <Icon name={icon} size={18} color={P.gold} strokeWidth={1.5} />
            <div>
              <div style={{ fontFamily: T.display, fontSize: 14, fontWeight: 600, color: P.paper }}>{label}</div>
              <div style={{
                fontFamily: T.mono, fontSize: 9, color: P.mute,
                letterSpacing: '0.12em', textTransform: 'uppercase', marginTop: 3,
              }}>{sub.toUpperCase()}</div>
            </div>
            <Icon name="arrow" size={16} color={P.mute} strokeWidth={1.4} />
          </InkCard>
        ))}
      </div>

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

Object.assign(window, { ScreenSoldOverview });