// AppShots.jsx — tabbed screenshots section: desktop / mobile / alerts

const { useState } = React;

// Representative thumbnails (gradients stand in for real photos until you drop screenshots in)
const CARS_DESKTOP = [
  { t: '2019 BMW 320d xDrive Touring', m: '95,400 km · diesel', p: '€22,800', ts: '2m',  img: 'linear-gradient(135deg, #1e3a5f, #0f1e2e)' },
  { t: '2021 Audi A4 Avant 40 TDI',     m: '68,100 km · diesel', p: '€28,900', ts: '4m',  img: 'linear-gradient(135deg, #2a2a2a, #0a0a0a)' },
  { t: '2020 Mercedes-Benz C220d T',     m: '71,300 km · diesel', p: '€26,900', ts: '6m',  img: 'linear-gradient(135deg, #2d3d52, #0f1621)' },
  { t: '2022 Tesla Model 3 LR',          m: '38,200 km · electric',p: '€32,400', ts: '8m',  img: 'linear-gradient(135deg, #3a1a1a, #0a0a0a)' },
  { t: '2021 BMW 530d xDrive',           m: '88,500 km · diesel', p: 'CHF 41,200', ts: '9m', img: 'linear-gradient(135deg, #1a2a3a, #0a0a0a)' },
  { t: '2020 Volvo V60 D4',              m: '74,200 km · diesel', p: '€24,300', ts: '11m', img: 'linear-gradient(135deg, #2a3a2a, #0a1a0a)' },
  { t: '2019 Porsche Macan S',           m: '52,000 km · petrol', p: '€48,800', ts: '14m', img: 'linear-gradient(135deg, #3a2a1a, #1a0a0a)' },
  { t: '2021 Skoda Octavia RS',          m: '45,100 km · petrol', p: '€24,100', ts: '17m', img: 'linear-gradient(135deg, #0f4a2e, #042010)' },
  { t: '2020 Audi RS6 Avant',            m: '62,800 km · petrol', p: '€98,400', ts: '22m', img: 'linear-gradient(135deg, #3f3f3f, #1f1f1f)' },
];

const CARS_PHONE = [
  { t: '2019 BMW 320d xDrive', p: '€22,800', img: 'linear-gradient(135deg, #1e3a5f, #0f1e2e)' },
  { t: '2021 Audi A4 Avant',    p: '€28,900', img: 'linear-gradient(135deg, #2a2a2a, #0a0a0a)' },
  { t: '2020 Mercedes C220d',   p: '€26,900', img: 'linear-gradient(135deg, #2d3d52, #0f1621)' },
  { t: '2022 Tesla Model 3',    p: '€32,400', img: 'linear-gradient(135deg, #3a1a1a, #0a0a0a)' },
  { t: '2021 BMW 530d',         p: 'CHF 41k', img: 'linear-gradient(135deg, #1a2a3a, #0a0a0a)' },
  { t: '2020 Volvo V60',        p: '€24,300', img: 'linear-gradient(135deg, #2a3a2a, #0a1a0a)' },
];

function DesktopMock() {
  return (
    <div className="shot-desktop">
      <div className="shot-desktop__bar">
        <div className="demo-dots"><span /><span /><span /></div>
        <div style={{fontFamily:'var(--font-mono)', fontSize:11, color:'var(--text-mute)', marginLeft: 8}}>
          app.autoviz.pro / BMW Budget
        </div>
        <div style={{marginLeft: 'auto', display:'flex', gap: 6, alignItems:'center', fontFamily:'var(--font-mono)', fontSize: 10, color: 'var(--ok)'}}>
          <span style={{width:6, height:6, borderRadius:'50%', background:'var(--ok)'}} /> LIVE
        </div>
      </div>
      <div className="shot-desktop__body">
        <div className="shot-desktop__sidebar">
          <div style={{fontFamily:'var(--font-mono)', fontSize:9, color:'var(--text-faint)', letterSpacing:'0.1em', padding:'0 10px 4px'}}>SETS</div>
          <div className="shot-desktop__sbitem is-active">
            <span className="d" style={{background:'#7C6CF5'}} /> BMW Budget
            <span style={{marginLeft:'auto', color:'var(--accent)', fontSize: 9, fontWeight: 600}}>3</span>
          </div>
          <div className="shot-desktop__sbitem">
            <span className="d" style={{background:'#f97316'}} /> Audi RS Performance
            <span style={{marginLeft:'auto', fontSize: 9}}>7</span>
          </div>
          <div className="shot-desktop__sbitem">
            <span className="d" style={{background:'#22c55e'}} /> Diesel wagons
          </div>
          <div className="shot-desktop__sbitem">
            <span className="d" style={{background:'#06b6d4'}} /> EV all brands
          </div>
          <div className="shot-desktop__sbitem">
            <span className="d" style={{background:'#ec4899'}} /> Italian city cars
            <span style={{marginLeft:'auto', fontSize: 9}}>1</span>
          </div>
          <div style={{fontFamily:'var(--font-mono)', fontSize:9, color:'var(--text-faint)', letterSpacing:'0.1em', padding:'18px 10px 4px'}}>SOURCES</div>
          <div className="shot-desktop__sbitem" style={{height:22, fontSize:10}}>AutoScout24 · 5</div>
          <div className="shot-desktop__sbitem" style={{height:22, fontSize:10}}>Mobile.de · 3</div>
          <div className="shot-desktop__sbitem" style={{height:22, fontSize:10}}>Willhaben · 2</div>
        </div>
        <div className="shot-desktop__content">
          <div className="shot-desktop__head">
            <span style={{flex: 1}}>LISTING</span>
            <span>MILEAGE</span>
            <span>PRICE</span>
            <span>AGE</span>
          </div>
          {CARS_DESKTOP.map((c, i) => (
            <div key={i} className="shot-listing">
              <div className="shot-listing__img" style={{background: c.img}} />
              <div className="shot-listing__t">{c.t}</div>
              <div className="shot-listing__m">{c.m.split(' · ')[0]}</div>
              <div className="shot-listing__p">{c.p}</div>
              <div className="shot-listing__ts">{c.ts}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function PhoneMock() {
  return (
    <div className="shot-phone">
      <div className="shot-phone__screen">
        <div className="shot-phone__head">Listings</div>
        <div className="shot-phone__tabs">
          <div className="shot-phone__tab is-on">All · 47</div>
          <div className="shot-phone__tab">BMW Budget · 3</div>
          <div className="shot-phone__tab">Audi RS · 7</div>
          <div className="shot-phone__tab">Diesel W…</div>
        </div>
        <div className="shot-phone__list">
          {CARS_PHONE.map((c, i) => (
            <div key={i} className="shot-phone__row">
              <div className="shot-phone__img" style={{background: c.img}} />
              <div className="shot-phone__t">{c.t}</div>
              <div className="shot-phone__p">{c.p}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function AlertsMock() {
  return (
    <div className="shot-alerts">
      <div className="alert-card alert-card--fresh">
        <div className="alert-card__icon">AV</div>
        <div className="alert-card__body">
          <div className="alert-card__head">
            <span>AutoViz · BMW Budget</span>
            <span>now</span>
          </div>
          <div className="alert-card__title">New match: 2019 BMW 320d xDrive — €22,800</div>
          <div className="alert-card__body-meta">
            <span>München · 95k km</span>
            <span>▼ €1,200</span>
          </div>
        </div>
      </div>
      <div className="alert-card">
        <div className="alert-card__icon">AV</div>
        <div className="alert-card__body">
          <div className="alert-card__head">
            <span>AutoViz · Audi RS Performance</span>
            <span>2m ago</span>
          </div>
          <div className="alert-card__title">Price drop: 2021 Audi A4 Avant — €28,900</div>
          <div className="alert-card__body-meta">
            <span>Graz · 68k km</span>
            <span>▼ €2,100</span>
          </div>
        </div>
      </div>
      <div className="alert-card">
        <div className="alert-card__icon">AV</div>
        <div className="alert-card__body">
          <div className="alert-card__head">
            <span>AutoViz · Diesel wagons</span>
            <span>5m ago</span>
          </div>
          <div className="alert-card__title">New match: 2020 Volvo V60 D4 — €24,300</div>
          <div className="alert-card__body-meta">
            <span>Göteborg · 74k km</span>
            <span>fresh</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function AppShots() {
  const [tab, setTab] = useState('desktop');
  return (
    <div className="shots">
      <div className="shots__tabs">
        <button className={`shots__tab ${tab==='desktop'?'is-active':''}`} onClick={() => setTab('desktop')}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
          Desktop
        </button>
        <button className={`shots__tab ${tab==='mobile'?'is-active':''}`} onClick={() => setTab('mobile')}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
          Mobile
        </button>
        <button className={`shots__tab ${tab==='alerts'?'is-active':''}`} onClick={() => setTab('alerts')}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
          Alerts
        </button>
      </div>
      <div className="shots__stage">
        {tab === 'desktop' && <DesktopMock />}
        {tab === 'mobile' && <PhoneMock />}
        {tab === 'alerts' && <AlertsMock />}
        <div className="shots__placeholder-label">preview · replace with real screenshots</div>
      </div>
    </div>
  );
}

Object.assign(window, { AppShots });