// SCREEN 01 — Vehicle Overview
// The primary operational dashboard for an individual vehicle.

function ScreenOverview() {
  const v = VEHICLE;

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

      {/* ───── HERO ───── */}
      <div style={{ position: 'relative' }}>
        <PhotoSlot dirId="concours" height={300} tone="dark"
          src={(typeof window !== 'undefined' && window.__resources && window.__resources.heroPorsche) || "images/porsche-911-carrera-rs.jpg"}
          label={`HERO · ${v.year} · ${v.make.toUpperCase()} ${v.model.toUpperCase()}`}
          sub="01 / 27" />
        <div style={{
          position: 'absolute', inset: 0, padding: 22,
          display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
          background:
            'linear-gradient(to bottom,' +
            ' rgba(10,10,11,0) 0%,' +
            ' rgba(10,10,11,0) 28%,' +
            ' rgba(10,10,11,0.55) 58%,' +
            ' rgba(10,10,11,0.92) 100%)',
        }}>
          <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 }}>VEHICLE 03 OF 366 · "{v.nickname.toUpperCase()}"</Eyebrow>
        </div>

        {/* Floating status chip */}
        <div style={{ position: 'absolute', top: 14, right: 14 }}>
          <StatusChip label={`● ${v.status}`} />
        </div>
      </div>

      {/* ───── KEY SPEC STRIP ───── */}
      <SpecStrip cols={4} items={[
        { label: 'MILEAGE',  value: fmtMiles(v.mileage) },
        { label: 'VALUE',    value: fmtMoney(v.value.current, { compact: true }) },
        { label: 'OWNED',    value: `${v.ownership.years}y ${v.ownership.months}m` },
        { label: 'TRIM',     value: 'M471' },
      ]} />

      {/* ───── IDENTITY ───── */}
      <div style={{ padding: '18px 22px 4px' }}>
        <Eyebrow color={P.mute}>IDENTITY</Eyebrow>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginTop: 10 }}>
          <div>
            <div style={{
              fontFamily: T.mono, fontSize: 8, letterSpacing: '0.2em',
              color: P.mute, textTransform: 'uppercase',
            }}>VIN</div>
            <div style={{ fontFamily: T.mono, fontSize: 12, color: P.paper, marginTop: 3 }}>
              {v.vin}
            </div>
          </div>
          <div>
            <div style={{
              fontFamily: T.mono, fontSize: 8, letterSpacing: '0.2em',
              color: P.mute, textTransform: 'uppercase',
            }}>PLATE</div>
            <div style={{ fontFamily: T.mono, fontSize: 12, color: P.paper, marginTop: 3 }}>
              {v.plate}
            </div>
          </div>
          <div>
            <div style={{
              fontFamily: T.mono, fontSize: 8, letterSpacing: '0.2em',
              color: P.mute, textTransform: 'uppercase',
            }}>TRIM</div>
            <div style={{ fontFamily: T.mono, fontSize: 12, color: P.paper, marginTop: 3 }}>
              {v.trim}
            </div>
          </div>
          <div>
            <div style={{
              fontFamily: T.mono, fontSize: 8, letterSpacing: '0.2em',
              color: P.mute, textTransform: 'uppercase',
            }}>COLOR</div>
            <div style={{ fontFamily: T.mono, fontSize: 12, color: P.paper, marginTop: 3 }}>
              {v.color}
            </div>
          </div>
        </div>
      </div>

      {/* ───── LOCATION ───── */}
      <div style={{ padding: '22px 0 4px' }}>
        <RowRule>LOCATION · MULTI-GARAGE</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, letterSpacing: '0',
              }}>{v.location.name}</div>
              <div style={{
                fontFamily: T.mono, fontSize: 10, color: P.mute,
                letterSpacing: '0.12em', textTransform: 'uppercase', marginTop: 4,
              }}>{v.location.city.toUpperCase()}</div>
            </div>
            <Eyebrow color={P.gold}>HERE NOW</Eyebrow>
          </div>
          <div style={{ height: 1, background: P.slate, margin: '14px 0' }} />
          <div style={{ display: 'grid', gap: 6 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11 }}>
              <span style={{ color: P.mute, fontFamily: T.mono, letterSpacing: '0.12em', textTransform: 'uppercase', fontSize: 9 }}>MOVED</span>
              <span style={{ color: P.paper }}>{v.location.movedDate}</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11 }}>
              <span style={{ color: P.mute, fontFamily: T.mono, letterSpacing: '0.12em', textTransform: 'uppercase', fontSize: 9 }}>CLIMATE</span>
              <span style={{ color: P.paper }}>{v.location.climate}</span>
            </div>
          </div>
        </InkCard>

        {/* Other locations strip */}
        <div style={{ marginTop: 12, display: 'grid', gap: 6 }}>
          {v.location.other.filter(l => !l.active).map(l => (
            <div key={l.name} style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              padding: '8px 14px', background: P.graphite,
            }}>
              <div>
                <div style={{ fontFamily: T.body, fontSize: 12, color: P.paper }}>{l.name}</div>
                <div style={{ fontFamily: T.mono, fontSize: 9, color: P.mute,
                  letterSpacing: '0.12em', textTransform: 'uppercase', marginTop: 2,
                }}>{l.city.toUpperCase()}</div>
              </div>
              <div style={{
                fontFamily: T.mono, fontSize: 10, color: P.mute,
                letterSpacing: '0.12em', textTransform: 'uppercase',
              }}>{l.count} VEHICLES</div>
            </div>
          ))}
        </div>
      </div>

      {/* ───── ATTENTION ───── */}
      <div style={{ padding: '22px 0 4px' }}>
        <RowRule>IMMEDIATE ATTENTION · 3 ITEMS</RowRule>
      </div>
      <div style={{ padding: '14px 22px 8px', display: 'grid', gap: 6 }}>
        {v.attention.map((a, i) => {
          const sevColor = a.severity === 'soon' ? P.signal : P.gold;
          return (
            <InkCard key={i} padding={14} style={{
              display: 'grid', gridTemplateColumns: '4px 1fr auto',
              gap: 14, alignItems: 'center',
            }}>
              <div style={{ width: 4, height: 36, background: sevColor }} />
              <div style={{ gridColumn: '2' }}>
                <div style={{
                  fontFamily: T.display, fontSize: 15, fontWeight: 500,
                  color: P.paper,
                }}>{a.label}</div>
                <div style={{
                  fontFamily: T.mono, fontSize: 9, color: P.mute,
                  letterSpacing: '0.12em', textTransform: 'uppercase', marginTop: 3,
                }}>{a.detail.toUpperCase()}</div>
              </div>
              <Icon name="arrow" size={16} color={P.mute} strokeWidth={1.4} />
            </InkCard>
          );
        })}
      </div>

      {/* ───── HEALTH ───── */}
      <div style={{ padding: '22px 0 4px' }}>
        <RowRule>VEHICLE HEALTH · 7 SYSTEMS</RowRule>
      </div>
      <div style={{ padding: '14px 22px 8px', display: 'grid', gap: 6 }}>
        {v.health.map((h, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '28px 1fr auto',
            gap: 14, alignItems: 'center',
            padding: '12px 0',
            borderBottom: i < v.health.length - 1 ? `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>
              <div style={{
                fontFamily: T.display, fontSize: 14, fontWeight: 500, color: P.paper,
              }}>{h.group}</div>
              <div style={{
                fontFamily: T.mono, fontSize: 9, color: P.mute,
                letterSpacing: '0.1em', textTransform: 'uppercase', marginTop: 2,
              }}>{h.note.toUpperCase()}</div>
            </div>
            <div style={{
              fontFamily: T.mono, fontSize: 9, color: P.gold,
              letterSpacing: '0.16em', textTransform: 'uppercase', whiteSpace: 'nowrap',
            }}>{h.status}</div>
          </div>
        ))}
      </div>

      {/* ───── TIMELINE PREVIEW ───── */}
      <div style={{ padding: '22px 0 4px' }}>
        <RowRule>RECENT TIMELINE</RowRule>
      </div>
      <div style={{ padding: '14px 22px 12px' }}>
        {v.timeline.slice(0, 3).map((e, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '70px 1fr',
            gap: 14, padding: '12px 0',
            borderBottom: `1px solid ${P.graphite}`,
            alignItems: 'flex-start',
          }}>
            <div>
              <div style={{
                fontFamily: T.mono, fontSize: 9, color: P.mute,
                letterSpacing: '0.1em', textTransform: 'uppercase',
              }}>{e.date}</div>
              <div style={{
                fontFamily: T.mono, fontSize: 9, color: P.gold,
                letterSpacing: '0.1em', textTransform: 'uppercase', marginTop: 2,
              }}>{e.type.toUpperCase()}</div>
            </div>
            <div>
              <div style={{
                fontFamily: T.display, fontSize: 14, fontWeight: 600,
                color: P.paper, letterSpacing: '-0.005em',
              }}>{e.title}</div>
              <div style={{
                fontFamily: T.body, fontSize: 11, color: P.mute, marginTop: 3,
                lineHeight: 1.45,
              }}>{e.vendor}</div>
            </div>
          </div>
        ))}
        <button style={{
          width: '100%', marginTop: 14, 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',
        }}>VIEW FULL TIMELINE · 47 EVENTS</button>
      </div>

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

Object.assign(window, { ScreenOverview });