// SALE & TRANSFER — the complete record of how the car left the
// collection: terms, buyer, logistics, and a tracked delivery progression.

function ScreenSale({ vehicle = VEHICLE_FERRARI }) {
  const v = vehicle;
  const s = v.sale;

  const Field = ({ label, value, accent }) => (
    <div style={{ padding: '12px 0', borderBottom: `1px solid ${P.graphite}` }}>
      <Eyebrow color={P.mute}>{label}</Eyebrow>
      <div style={{
        fontFamily: T.display, fontSize: 15, fontWeight: 600,
        color: accent ? P.gold : P.paper, marginTop: 5, letterSpacing: '-0.005em',
        lineHeight: 1.2,
      }}>{value}</div>
    </div>
  );

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

      <ScreenIntro
        eyebrow="SALE & TRANSFER · CLOSED"
        title="HOW IT CHANGED HANDS"
        sub="Terms, buyer, and the full logistics chain — from the auction block to the new owner's door."
        right={
          <div style={{ textAlign: 'right' }}>
            <div style={{
              fontFamily: T.display, fontSize: 26, fontWeight: 700,
              color: P.gold, letterSpacing: '-0.02em',
            }}>{fmtMoney(s.price, { compact: true })}</div>
            <Eyebrow color={P.mute}>HAMMER + PREM</Eyebrow>
          </div>
        }
      />

      {/* ── SALE TERMS ── */}
      <RowRule>SALE TERMS</RowRule>
      <div style={{ padding: '8px 22px 8px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', columnGap: 18 }}>
          <Field label="SALE PRICE" value={fmtMoney(s.price)} accent />
          <Field label="SALE DATE" value={s.date} />
          <Field label="METHOD" value={s.method} />
          <Field label="VENUE" value={s.venue} />
        </div>
        <div style={{
          marginTop: 10, fontFamily: T.mono, fontSize: 9, color: P.mute,
          letterSpacing: '0.16em', textTransform: 'uppercase',
        }}>{s.lotNote}</div>
      </div>

      {/* ── BUYER ── */}
      <div style={{ padding: '14px 0 4px' }}>
        <RowRule>BUYER</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 }}>
                {s.buyerName}
              </div>
              <div style={{
                fontFamily: T.mono, fontSize: 10, color: P.gold,
                letterSpacing: '0.14em', textTransform: 'uppercase', marginTop: 4,
              }}>{s.buyerType.toUpperCase()}</div>
            </div>
            <Icon name="certificate" size={22} color={P.gold} strokeWidth={1.5} />
          </div>
          <div style={{ height: 1, background: P.slate, margin: '14px 0' }} />
          <div style={{ display: 'grid', gap: 8 }}>
            {[
              ['LOCATION', s.buyerLocation],
              ['ACQUIRED VIA', s.buyerVia],
            ].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>

      {/* ── TRANSPORT ── */}
      <div style={{ padding: '14px 0 4px' }}>
        <RowRule>TRANSPORT & LOGISTICS</RowRule>
      </div>
      <div style={{ padding: '14px 22px 8px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', columnGap: 18 }}>
          <Field label="METHOD" value={s.transport} />
          <Field label="FINAL LEG" value={s.transportLeg2} />
          <Field label="SHIPPER" value={s.shipper} />
          <Field label="REFERENCE" value={s.tracking} accent />
        </div>
      </div>

      {/* ── DELIVERY PROGRESSION (tracked) ── */}
      <div style={{ padding: '14px 0 4px' }}>
        <RowRule>DELIVERY PROGRESSION</RowRule>
      </div>
      <div style={{ padding: '18px 22px 8px', position: 'relative' }}>
        <div style={{
          position: 'absolute', left: 30, top: 22, bottom: 30,
          width: 1, background: P.slate,
        }} />
        {s.steps.map((step, i) => (
          <div key={i} style={{ position: 'relative', paddingLeft: 48, paddingBottom: 20 }}>
            <div style={{
              position: 'absolute', left: 24, top: 4,
              width: 12, height: 12,
              background: step.done ? P.gold : P.ink,
              border: `2px solid ${step.done ? P.gold : P.slate}`,
              borderRadius: 6,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              {step.done && <div style={{ width: 3, height: 3, background: P.ink, borderRadius: 2 }} />}
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 10 }}>
              <div style={{
                fontFamily: T.display, fontSize: 15, fontWeight: 600,
                color: P.paper, letterSpacing: '-0.005em',
              }}>{step.label}</div>
              <div style={{
                fontFamily: T.mono, fontSize: 9, color: P.gold,
                letterSpacing: '0.12em', textTransform: 'uppercase', whiteSpace: 'nowrap',
              }}>{step.date}</div>
            </div>
            <div style={{
              fontFamily: T.body, fontSize: 11, color: P.mute, marginTop: 3, lineHeight: 1.4,
            }}>{step.note}</div>
          </div>
        ))}
      </div>

      {/* ── DELIVERY CONFIRMATION ── */}
      {s.deliveryConfirmed && (
        <div style={{ padding: '6px 22px 8px' }}>
          <div style={{
            background: P.graphite, borderLeft: `2px solid ${P.gold}`,
            padding: 16,
            display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12,
          }}>
            <div>
              <Eyebrow color={P.gold}>DELIVERY CONFIRMED</Eyebrow>
              <div style={{
                fontFamily: T.display, fontSize: 16, fontWeight: 600,
                color: P.paper, marginTop: 5,
              }}>{s.buyerLocation}</div>
              <div style={{
                fontFamily: T.mono, fontSize: 9, color: P.mute,
                letterSpacing: '0.14em', textTransform: 'uppercase', marginTop: 3,
              }}>{s.deliveryConfirmedDate}</div>
            </div>
            <div style={{
              width: 44, height: 44, border: `1.5px solid ${P.gold}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: P.gold, fontSize: 20,
            }}>✓</div>
          </div>
        </div>
      )}

      {/* ── DOC POINTER ── */}
      <div style={{ padding: '14px 22px 8px' }}>
        <button style={{
          width: '100%', padding: '14px 0',
          background: 'transparent', border: `1px solid ${P.slate}`,
          color: P.paper, fontFamily: T.mono, fontSize: 10, fontWeight: 600,
          letterSpacing: '0.2em', textTransform: 'uppercase', cursor: 'pointer',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        }}>
          <Icon name="bookmark" size={14} color={P.paper} strokeWidth={1.5} />
          VIEW SALE DOCUMENTS · VAULT
        </button>
      </div>

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

Object.assign(window, { ScreenSale });