// pages.jsx — Home, Catalog, ProductDetail, Releases, News, Media, Clan, About, Cart, Checkout

function Swatch({ color }) {
  // Decide whether the swatch reads as light or dark
  const isLight = color === '#E8E2D0' || color === '#DCC02E' || color === '#C72A8E';
  return (
    <div className="pc-photo">
      <div
        className={'swatch ' + (isLight ? 'light' : 'dark')}
        style={{background: color}}
      >
        SJS
      </div>
    </div>
  );
}

function ProductCard({ product, onOpen }) {
  const tagClass = product.tag === 'EPUIZAT' ? 'epuizat' : product.tag === 'NOU' ? 'nou' : product.tag === 'POPULAR' ? 'popular' : '';
  return (
    <div className="prod-card" onClick={() => onOpen && onOpen(product)}>
      <div className="pc-tb">
        <span>{product.sku}</span>
        <span>{window.DSD_KIND_LABEL[product.kind]}</span>
      </div>
      <div className="pc-photo" style={{background: product.color}}>
        {product.img
          ? <img src={product.img} alt={product.name} loading="lazy"
                 style={{position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover'}} />
          : <div className="swatch dark" style={{background: product.color}}>SJS</div>}
        <div className="stamp">{product.edition ? 'ED. ' + product.edition : 'SJS'}</div>
        {product.tag ? <div className={'tag ' + tagClass}>{product.tag}</div> : null}
      </div>
      <div className="pc-info">
        <span className="nm">{product.name}</span>
        <span className="pr">{product.price} RON</span>
        <span className="meta">
          {product.sku} · stoc {product.stock}
        </span>
      </div>
    </div>
  );
}

function HeroBanner({ onOpenAlbum }) {
  const hero = window.DSD_HERO;
  return (
    <div className="hero-banner">
      <div className="hero-banner-tb">
        <span>★ FEATURE — SJS Records {new Date().getFullYear()}</span>
        <span>SJS-EP-03</span>
      </div>
      <div className="hero-banner-body">
        <div>
          <div style={{fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--dsd-blood)', fontWeight: 700, letterSpacing: '0.06em', marginBottom: 6}}>
            {hero.tagline}
          </div>
          <div className="hero-emboss-text">
            <span className="red">Clanul</span><br/>
            Mistic <span style={{fontFamily: 'var(--font-mono)', fontSize: 14, fontStyle: 'normal', color: '#000'}}>// EP w/ SUDOKKU</span>
            <span className="small">10 piese · pachet vinyl + tricou disponibil acum.</span>
          </div>
          <div className="row" style={{marginTop: 10, gap: 6, flexWrap: 'wrap'}}>
            <button className="btn primary" onClick={onOpenAlbum}>► COMANDĂ ACUM</button>
            <button className="btn">▶ ASCULTĂ EXTRAS</button>
            <button className="btn">▼ TRACKLIST</button>
          </div>
        </div>
        <div className="hero-art">
          <img src={hero.art} alt="Clanul Mistic artwork" loading="eager" />
        </div>
      </div>
    </div>
  );
}

function HomePage({ onPage, onOpenProduct, country, setCountry }) {
  const newest = window.DSD_CATALOG.filter((p) => p.tag === 'NOU' || p.tag === 'POPULAR').slice(0, 3);
  const newestSkus = new Set(newest.map((p) => p.sku));
  const featured = window.DSD_CATALOG.filter((p) => (p.kind === 'tricou' || p.kind === 'hanorac') && !newestSkus.has(p.sku)).slice(0, 3);
  const album = window.DSD_CATALOG.find((p) => p.sku === 'SJS-MEGA') || window.DSD_CATALOG[0];
  return (
    <>
      <div style={{marginBottom: 4}}>
        <div className="section-h1"><span className="red">Bun venit</span> la DirtySouthDistrict.</div>
        <div className="section-sub">
          ♪ Casa SJS / Suicidjegos online — discuri, haine, fanzine, audio. Sudul jegos, livrat acasă.
        </div>
      </div>
      <HeroBanner onOpenAlbum={() => onOpenProduct(album)} />

      <div className="subhead">
        <span>►► ULTIMELE ȘTIRI</span>
        <span className="more" onClick={() => onPage('news')}>arhiva completă →</span>
      </div>
      <div className="news-list">
        {window.DSD_NEWS.slice(0, 3).map((n, i) => (
          <div key={i} className="news-item">
            <div>
              <div className="date">{n.date}</div>
              <div className="kind">{n.kind}</div>
            </div>
            <div>
              <h4>{n.title}</h4>
              <p>{n.body}</p>
              <div style={{marginTop: 6, fontSize: 10}}><a>citește în continuare ►</a></div>
            </div>
          </div>
        ))}
      </div>

      <div className="subhead">
        <span>►► PRODUSE NOI</span>
        <span className="more" onClick={() => onPage('catalog')}>tot catalogul →</span>
      </div>
      <div className="prod-grid">
        {[...newest, ...featured].slice(0, 6).map((p) => (
          <ProductCard key={p.sku} product={p} onOpen={onOpenProduct} />
        ))}
      </div>

      <div className="subhead" style={{marginTop: 16}}>
        <span>►► OFERTE — STOC LIMITAT</span>
        <span style={{fontFamily: 'var(--font-mono)', fontSize: 10}}>expiră 31.OCT.1998</span>
      </div>
      <div style={{
        background: 'var(--os-silver)',
        boxShadow: 'var(--bevel-out)',
        padding: 0,
      }}>
        <div style={{
          background: 'linear-gradient(90deg, var(--dsd-blood) 0%, #6F1A12 100%)',
          color: '#fff', padding: '4px 8px', fontFamily: 'var(--font-system)',
          fontWeight: 700, fontSize: 12, display: 'flex', justifyContent: 'space-between',
        }}>
          <span>★ COMBO PACHET — TRICOU + LP</span>
          <span style={{fontFamily: 'var(--font-mono)'}}>289 RON (în loc de 338)</span>
        </div>
        <div style={{padding: 12, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, alignItems: 'center'}}>
          <div style={{textAlign: 'center'}}>
            <div style={{height: 80, background: '#0A0A0A', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--dsd-paper)', fontFamily: 'var(--font-poster)', fontSize: 14, border: '1px solid #000'}}>SJS TEE</div>
            <div style={{fontSize: 10, marginTop: 4}}>TRICOU NEGRU SJS<br/><b>169 RON</b></div>
          </div>
          <div style={{textAlign: 'center', fontFamily: 'var(--font-poster)', fontSize: 32, color: 'var(--dsd-blood)'}}>+</div>
          <div style={{textAlign: 'center'}}>
            <div style={{height: 80, background: 'var(--dsd-blood)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#000', fontFamily: 'var(--font-poster)', fontSize: 22, border: '1px solid #000'}}>◉</div>
            <div style={{fontSize: 10, marginTop: 4}}>LP CLANUL MISTIC<br/><b>189 RON</b></div>
          </div>
        </div>
        <div style={{padding: '8px 12px 12px', borderTop: '1px solid var(--os-shadow)', display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
          <div style={{fontSize: 10}}>
            Economisești <b style={{color: 'var(--dsd-blood)'}}>49 RON</b>. Disponibil până la 31.OCT.1998 sau la epuizare.
          </div>
          <button className="btn primary">► IA COMBO</button>
        </div>
      </div>
    </>
  );
}

function CatalogPage({ category, search, setCategory, onOpenProduct }) {
  let items = window.DSD_CATALOG;
  if (category && category !== 'all') items = items.filter((p) => p.kind === category);
  if (search) {
    const q = search.toLowerCase();
    items = items.filter((p) => p.name.toLowerCase().includes(q) || p.sku.toLowerCase().includes(q));
  }
  return (
    <>
      <div className="section-h1"><span className="red">Catalog</span> SJS</div>
      <div className="section-sub">
        {items.length} produse · pagina 1 / 1 · sortare: <a>nou ▾</a> · vizualizare: <a>grilă</a> | <a>listă</a>
      </div>

      <div style={{
        background: 'var(--os-silver)', boxShadow: 'var(--bevel-thin-out)',
        padding: '6px 8px', marginBottom: 12, display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap',
      }}>
        <span style={{fontSize: 11, fontWeight: 700}}>FILTRE:</span>
        {['all', 'tricou', 'hanorac', 'sapca', 'lp', 'cd', 'accesoriu'].map((k) => (
          <button key={k} className={'btn' + (category === k ? ' primary' : '')}
                  style={{minHeight: 18, padding: '2px 8px', fontSize: 10}}
                  onClick={() => setCategory(k)}>
            {k === 'all' ? 'TOATE' : (window.DSD_KIND_LABEL[k] || k).toUpperCase()}
          </button>
        ))}
        <span style={{flex: 1}}></span>
        <span style={{fontSize: 10}}>preț:</span>
        <select className="field" style={{width: 110}}><option>orice preț</option><option>sub 100 RON</option><option>100—200 RON</option><option>peste 200 RON</option></select>
        <label style={{fontSize: 10}}><input type="checkbox" /> doar în stoc</label>
      </div>

      <div className="prod-grid">
        {items.map((p) => <ProductCard key={p.sku} product={p} onOpen={onOpenProduct} />)}
      </div>

      <div style={{marginTop: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 11}}>
        <span>Pagina <b>1</b> / 1 · {items.length} produse afișate</span>
        <div className="row" style={{gap: 4}}>
          <button className="btn disabled" style={{minHeight: 18, padding: '2px 8px', fontSize: 10}}>◄ Anterior</button>
          <button className="btn primary" style={{minHeight: 18, padding: '2px 8px', fontSize: 10}}>1</button>
          <button className="btn disabled" style={{minHeight: 18, padding: '2px 8px', fontSize: 10}}>Următor ►</button>
        </div>
      </div>
    </>
  );
}

function ProductDetailPage({ product, onAdd, onBack }) {
  const [size, setSize] = React.useState('M');
  const [qty, setQty] = React.useState(1);
  const isApparel = product.kind === 'tricou' || product.kind === 'hanorac' || product.kind === 'sapca';
  const isLight = product.color === '#E8E2D0' || product.color === '#DCC02E' || product.color === '#C72A8E';

  return (
    <>
      <div style={{fontSize: 11, marginBottom: 6}}>
        <a onClick={onBack}>◄ Înapoi la catalog</a> · acasă / catalog / <b>{product.sku}</b>
      </div>
      <div className="section-h1">{product.name}</div>
      <div className="section-sub">
        Cod produs: <b>{product.sku}</b> · {window.DSD_KIND_LABEL[product.kind]} · {product.edition ? 'ediție ' + product.edition : 'open run'}
      </div>

      <div className="prod-detail-grid">
        {/* Photo column */}
        <div>
          <div style={{
            background: 'var(--os-silver)', boxShadow: 'var(--bevel-out)', padding: 4,
          }}>
            <div style={{
              height: 240, background: product.color,
              border: '1px solid #000',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'var(--font-poster)',
              fontSize: 36, letterSpacing: '0.05em',
              color: isLight ? 'rgba(0,0,0,0.3)' : 'rgba(255,255,255,0.5)',
              position: 'relative',
              overflow: 'hidden',
            }}>
              {product.img
                ? <img src={product.img} alt={product.name} style={{position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover'}} />
                : 'SJS'}
              <div style={{position: 'absolute', bottom: 6, right: 6, fontFamily: 'var(--font-mono)', fontSize: 10, background: 'rgba(0,0,0,0.7)', color: '#fff', padding: '1px 4px', zIndex: 2}}>{product.sku}</div>
            </div>
          </div>
          <div className="row" style={{gap: 4, marginTop: 6}}>
            <div style={{flex: 1, height: 60, background: product.color, border: '1px solid #000', boxShadow: 'var(--bevel-thin-in)'}}></div>
            <div style={{flex: 1, height: 60, background: '#0A0A0A', border: '1px solid #000', boxShadow: 'var(--bevel-thin-in)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--dsd-paper)', fontSize: 10}}>spate</div>
            <div style={{flex: 1, height: 60, background: 'var(--dsd-paper)', border: '1px solid #000', boxShadow: 'var(--bevel-thin-in)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10}}>detaliu</div>
          </div>
          <div style={{fontSize: 10, color: '#666', marginTop: 6, textAlign: 'center'}}>
            click pe imagine pentru zoom (pop-up)
          </div>
        </div>

        {/* Detail column */}
        <div>
          <div style={{
            background: 'var(--dsd-paper)', border: '1px solid #000', padding: 12,
          }}>
            <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderBottom: '1px dashed #000', paddingBottom: 8, marginBottom: 8}}>
              <div>
                <div style={{fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-2)'}}>preț:</div>
                <div style={{fontFamily: 'var(--font-poster)', fontSize: 28, color: 'var(--dsd-blood)'}}>{product.price} <span style={{fontSize: 14}}>RON</span></div>
              </div>
              <div style={{textAlign: 'right'}}>
                <div style={{fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-2)'}}>stoc:</div>
                <div style={{fontWeight: 700, color: product.stock === 0 ? 'var(--dsd-blood)' : product.stock < 20 ? 'var(--dsd-clay)' : 'var(--sem-success)'}}>
                  {product.stock === 0 ? 'EPUIZAT' : product.stock + ' bucăți'}
                </div>
              </div>
            </div>

            <p style={{margin: '0 0 12px', fontSize: 12}}>{product.desc}</p>

            {isApparel ? (
              <div style={{marginBottom: 10}}>
                <div style={{fontSize: 11, fontWeight: 700, marginBottom: 4}}>Mărime:</div>
                <div className="row" style={{gap: 3}}>
                  {['XS','S','M','L','XL','XXL'].map((s) => (
                    <button key={s} className={'btn' + (size === s ? ' primary' : '')}
                            style={{minHeight: 22, minWidth: 32, padding: '2px 6px'}}
                            onClick={() => setSize(s)}>{s}</button>
                  ))}
                </div>
                <div style={{fontSize: 10, marginTop: 4}}><a>tabel mărimi</a> · croială boxy, ia o mărime în plus</div>
              </div>
            ) : null}

            <div className="row" style={{gap: 6, marginBottom: 10, alignItems: 'center'}}>
              <span style={{fontSize: 11, fontWeight: 700}}>Cantitate:</span>
              <button className="btn" style={{minWidth: 22, minHeight: 22}} onClick={() => setQty(Math.max(1, qty - 1))}>−</button>
              <input className="field" style={{width: 40, textAlign: 'center'}} value={qty} onChange={() => {}} />
              <button className="btn" style={{minWidth: 22, minHeight: 22}} onClick={() => setQty(qty + 1)}>+</button>
            </div>

            <div className="row" style={{gap: 6}}>
              <button className="btn primary" style={{flex: 1, minHeight: 30, fontSize: 12}}
                      disabled={product.stock === 0}
                      onClick={() => product.stock > 0 && onAdd(product, qty, size)}>
                ► ADAUGĂ ÎN COȘ
              </button>
              <button className="btn" style={{minHeight: 30}}>♥</button>
              <button className="btn" style={{minHeight: 30}}>📧</button>
            </div>
          </div>

          <div style={{
            background: 'var(--os-silver)', boxShadow: 'var(--bevel-thin-out)',
            marginTop: 12, padding: 10,
          }}>
            <div style={{fontSize: 11, fontWeight: 700, marginBottom: 6}}>► SPECIFICAȚII</div>
            <table style={{width: '100%', fontSize: 11, borderCollapse: 'collapse'}}>
              <tbody>
                <tr><td style={{padding: '2px 0', color: '#444'}}>Cod (SKU)</td><td style={{fontFamily: 'var(--font-mono)'}}>{product.sku}</td></tr>
                <tr><td style={{padding: '2px 0', color: '#444'}}>Categorie</td><td>{window.DSD_KIND_LABEL[product.kind]}</td></tr>
                <tr><td style={{padding: '2px 0', color: '#444'}}>Producție</td><td>{product.edition ? product.edition + ' bucăți' : 'tirag deschis'}</td></tr>
                <tr><td style={{padding: '2px 0', color: '#444'}}>Greutate expediere</td><td>{isApparel ? '0.5 kg' : product.kind === 'lp' ? '0.7 kg' : '0.2 kg'}</td></tr>
                <tr><td style={{padding: '2px 0', color: '#444'}}>Origine</td><td>Timișoara, RO</td></tr>
                <tr><td style={{padding: '2px 0', color: '#444'}}>Garanție</td><td>30 zile retur</td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </>
  );
}

function ReleasesPage() {
  return (
    <>
      <div className="section-h1"><span className="red">Discografie</span> SJS</div>
      <div className="section-sub">Toate lansările Suicidjegos / DirtySouthDistrict din 1996 până azi.</div>

      <table style={{width: '100%', borderCollapse: 'collapse', background: 'var(--os-silver)', boxShadow: 'var(--bevel-thin-out)', marginBottom: 16}}>
        <thead>
          <tr style={{background: 'var(--dsd-ink)', color: 'var(--dsd-hazard)', textAlign: 'left'}}>
            <th style={{padding: '4px 8px', fontFamily: 'var(--font-system)', fontSize: 11, fontWeight: 700, letterSpacing: '0.06em'}}>CAT</th>
            <th style={{padding: '4px 8px', fontFamily: 'var(--font-system)', fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', width: 60}}>AN</th>
            <th style={{padding: '4px 8px', fontFamily: 'var(--font-system)', fontSize: 11, fontWeight: 700, letterSpacing: '0.06em'}}>TITLU</th>
            <th style={{padding: '4px 8px', fontFamily: 'var(--font-system)', fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', width: 100}}>FORMAT</th>
            <th style={{padding: '4px 8px', fontFamily: 'var(--font-system)', fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', width: 100}}>STARE</th>
            <th style={{width: 80}}></th>
          </tr>
        </thead>
        <tbody>
          {window.DSD_RELEASES.map((r, i) => (
            <tr key={r.cat} style={{background: i % 2 ? 'var(--dsd-paper-2)' : 'var(--dsd-paper)', borderBottom: '1px solid var(--os-shadow)'}}>
              <td style={{padding: '6px 8px', fontFamily: 'var(--font-mono)', fontSize: 11}}>{r.cat}</td>
              <td style={{padding: '6px 8px', fontFamily: 'var(--font-mono)', fontSize: 11}}>{r.year}</td>
              <td style={{padding: '6px 8px', fontSize: 12}}>
                <div style={{display: 'flex', alignItems: 'center', gap: 8}}>
                  <div style={{width: 24, height: 24, background: r.color, border: '1px solid #000', flexShrink: 0}}></div>
                  <b>{r.title}</b>
                </div>
              </td>
              <td style={{padding: '6px 8px', fontSize: 11}}>{r.format}</td>
              <td style={{padding: '6px 8px', fontSize: 11, fontWeight: 700, color: r.status === 'Epuizat' ? 'var(--dsd-blood)' : r.status === 'Stoc mic' ? 'var(--dsd-clay)' : 'var(--sem-success)'}}>{r.status}</td>
              <td style={{padding: '6px 8px'}}>
                <button className="btn" style={{minHeight: 18, padding: '2px 8px', fontSize: 10}}>VEZI →</button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>

      <div className="subhead">►► TRACKLIST CURENT — CLANUL MISTIC LP</div>
      <div style={{background: '#0A0A0A', color: 'var(--dsd-paper)', padding: 12, fontFamily: 'var(--font-mono)', fontSize: 12}}>
        {window.DSD_TRACKS.map((t) => (
          <div key={t.n} style={{display: 'grid', gridTemplateColumns: '24px 1fr 60px', padding: '3px 0', borderBottom: '1px dotted #333'}}>
            <span style={{color: 'var(--dsd-hazard)'}}>{t.n}</span>
            <span>{t.title}</span>
            <span style={{textAlign: 'right', color: 'var(--dsd-cd-cyan)'}}>{t.len}</span>
          </div>
        ))}
        <div style={{marginTop: 8, fontSize: 11, color: 'var(--dsd-cd-cyan)'}}>
          ► total: 24:31 · masterizat la Berlin · publicat 14.OCT.1998 · SJS-LP-014
        </div>
      </div>
    </>
  );
}

function NewsPage() {
  return (
    <>
      <div className="section-h1"><span className="red">Știri</span> & actualizări</div>
      <div className="section-sub">Arhivă completă · sortare cronologic descendent · ultimele 90 zile</div>
      <div className="news-list">
        {window.DSD_NEWS.map((n, i) => (
          <div key={i} className="news-item">
            <div>
              <div className="date">{n.date}</div>
              <div className="kind">{n.kind}</div>
            </div>
            <div>
              <h4>{n.title}</h4>
              <p>{n.body}</p>
              <div style={{marginTop: 6, fontSize: 10, display: 'flex', justifyContent: 'space-between'}}>
                <span><a>citește în continuare ►</a> · <a>0 comentarii</a></span>
                <span style={{color: '#666'}}>postat de webmaster@dsd</span>
              </div>
            </div>
          </div>
        ))}
      </div>
      <div style={{marginTop: 16, padding: 12, background: 'var(--os-silver)', boxShadow: 'var(--bevel-thin-out)'}}>
        <div style={{fontSize: 11, fontWeight: 700, marginBottom: 6}}>► RSS / NOTIFICĂRI</div>
        <div style={{fontSize: 11}}>Anunțurile vechi (1996—1997) sunt în <a>arhiva text</a> (.txt, 47kb). Pentru notificări automate prin email, completează formularul din bara dreaptă.</div>
      </div>
    </>
  );
}

function MediaPage() {
  return (
    <>
      <div className="section-h1"><span className="red">Audio</span> + <span style={{color: 'var(--dsd-cd-cyan)'}}>Video</span></div>
      <div className="section-sub">Stream RealAudio, descărcări MP3, clipuri QuickTime, screensavere</div>

      <ConstructionBox />

      <div className="subhead" style={{marginTop: 16}}>►► STREAM AUDIO (RealAudio 5.0)</div>
      <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10}}>
        {window.DSD_TRACKS.slice(0, 6).map((t) => (
          <div key={t.n} style={{background: 'var(--dsd-paper)', border: '1px solid #000', padding: 8, display: 'flex', alignItems: 'center', gap: 8}}>
            <button className="btn primary" style={{minWidth: 24, minHeight: 24, fontSize: 11}}>▶</button>
            <div style={{flex: 1, minWidth: 0}}>
              <div style={{fontWeight: 700, fontSize: 12}}>{t.title}</div>
              <div style={{fontSize: 10, color: '#666', fontFamily: 'var(--font-mono)'}}>{t.album} · {t.len} · 28.8k</div>
            </div>
            <a style={{fontSize: 10}}>.ra ↓</a>
          </div>
        ))}
      </div>

      <div className="subhead" style={{marginTop: 16}}>►► CLIPURI QuickTime</div>
      <div style={{display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10}}>
        {[
          { t: 'CLANUL MISTIC — clip oficial', size: '4.2 MB', dim: '320×240' },
          { t: 'Behind the scenes — studio', size: '6.8 MB', dim: '320×240' },
          { t: 'Concert Cluj 1998', size: '12.4 MB', dim: '240×180' },
        ].map((v, i) => (
          <div key={i} style={{background: 'var(--os-silver)', boxShadow: 'var(--bevel-out)', padding: 4}}>
            <div style={{height: 110, background: '#000', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1px solid #000'}}>
              <div style={{width: 36, height: 36, background: 'var(--dsd-paper)', border: '1px solid #000', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, color: '#000'}}>▶</div>
              <div style={{position: 'absolute', top: 4, left: 4, fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--dsd-cd-cyan)'}}>QT 3.0</div>
              <div style={{position: 'absolute', bottom: 4, right: 4, fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--dsd-cd-cyan)'}}>{v.dim}</div>
            </div>
            <div style={{padding: 6, fontSize: 11, fontWeight: 700}}>{v.t}</div>
            <div style={{padding: '0 6px 6px', fontSize: 10, color: '#666', fontFamily: 'var(--font-mono)'}}>QuickTime 3.0 · {v.size}</div>
          </div>
        ))}
      </div>

      <div className="subhead" style={{marginTop: 16}}>►► SCREENSAVERE & WALLPAPERS</div>
      <table style={{width: '100%', borderCollapse: 'collapse', fontSize: 11, background: 'var(--dsd-paper)', border: '1px solid #000'}}>
        <thead>
          <tr style={{background: 'var(--dsd-ink)', color: 'var(--dsd-hazard)', textAlign: 'left'}}>
            <th style={{padding: '3px 8px'}}>FIȘIER</th>
            <th style={{padding: '3px 8px', width: 80}}>TIP</th>
            <th style={{padding: '3px 8px', width: 80}}>OS</th>
            <th style={{padding: '3px 8px', width: 80}}>MĂRIME</th>
            <th style={{padding: '3px 8px', width: 70}}></th>
          </tr>
        </thead>
        <tbody style={{fontFamily: 'var(--font-mono)'}}>
          <tr><td style={{padding: '4px 8px', borderBottom: '1px dotted #888'}}>SJS_CLAN_640.JPG</td><td>wallpaper</td><td>Win9x</td><td>87 KB</td><td><a>↓ download</a></td></tr>
          <tr><td style={{padding: '4px 8px', borderBottom: '1px dotted #888'}}>SJS_CLAN_800.JPG</td><td>wallpaper</td><td>Win9x</td><td>112 KB</td><td><a>↓ download</a></td></tr>
          <tr><td style={{padding: '4px 8px', borderBottom: '1px dotted #888'}}>SJS_LOGO.GIF</td><td>animated</td><td>oricare</td><td>14 KB</td><td><a>↓ download</a></td></tr>
          <tr><td style={{padding: '4px 8px', borderBottom: '1px dotted #888'}}>SJS_SCRSV.SCR</td><td>screensaver</td><td>Win95/98</td><td>248 KB</td><td><a>↓ download</a></td></tr>
          <tr><td style={{padding: '4px 8px'}}>SJS_ICONS.ZIP</td><td>iconițe</td><td>Win9x</td><td>34 KB</td><td><a>↓ download</a></td></tr>
        </tbody>
      </table>
    </>
  );
}

function ClanPage() {
  return (
    <>
      <div className="section-h1"><span className="red">Clanul</span> Mistic</div>
      <div className="section-sub">Programul de membri SJS · acces, reduceri, lansări înainte de stoc public</div>

      <div style={{
        background: 'var(--dsd-ink)', color: 'var(--dsd-paper)', padding: 16, marginBottom: 12,
        boxShadow: '4px 4px 0 var(--dsd-blood)',
      }}>
        <div style={{fontFamily: 'var(--font-poster)', fontSize: 28, color: 'var(--dsd-hazard)', letterSpacing: '0.05em'}}>TU FACI PARTE DIN CLAN.</div>
        <p style={{fontSize: 12, color: 'var(--dsd-paper)', margin: '8px 0 0', maxWidth: 540}}>
          Clanul Mistic e cercul închis SJS — fani, cumpărători, distribuitori, prieteni de drum lung. Înregistrarea e gratuită. Cei dinăuntru primesc lansările înainte de a fi puse public, prețuri reduse, și un CD-ROM editat anual cu materiale inedite.
        </p>
      </div>

      <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, marginBottom: 16}}>
        {[
          { t: 'PRIMUL ACCES', d: 'Lansările sunt deschise pentru membri 48h înainte de stocul public. Fără excepție.' },
          { t: '−15% PE TOT', d: 'Reducere automată pe toate produsele din magazin. Cumulabilă cu pachete combo.' },
          { t: 'CD-ROM ANUAL', d: 'Compilație inedită + clipuri + fanzine .txt + screensaver. Prin poștă, gratuit.' },
        ].map((b, i) => (
          <div key={i} style={{background: 'var(--os-silver)', boxShadow: 'var(--bevel-out)', padding: 10}}>
            <div style={{fontFamily: 'var(--font-poster)', fontSize: 16, color: 'var(--dsd-blood)'}}>0{i+1}. {b.t}</div>
            <p style={{fontSize: 11, margin: '4px 0 0'}}>{b.d}</p>
          </div>
        ))}
      </div>

      <div className="subhead">►► ÎNREGISTRARE NOI MEMBRI</div>
      <form style={{background: 'var(--os-silver)', boxShadow: 'var(--bevel-thin-out)', padding: 12, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8}}>
        <label style={{display: 'block'}}><div style={{fontSize: 11, fontWeight: 700, marginBottom: 2}}>Utilizator (4—16 caractere)</div><input className="field" placeholder="ex: jegos97" /></label>
        <label style={{display: 'block'}}><div style={{fontSize: 11, fontWeight: 700, marginBottom: 2}}>Email</div><input className="field" placeholder="email@ex.ro" /></label>
        <label style={{display: 'block'}}><div style={{fontSize: 11, fontWeight: 700, marginBottom: 2}}>Parolă (min. 6)</div><input className="field" type="password" /></label>
        <label style={{display: 'block'}}><div style={{fontSize: 11, fontWeight: 700, marginBottom: 2}}>Confirmă parola</div><input className="field" type="password" /></label>
        <label style={{display: 'block', gridColumn: '1 / -1'}}><div style={{fontSize: 11, fontWeight: 700, marginBottom: 2}}>Adresă livrare (opțional, pentru CD-ROM anual)</div><textarea className="field" rows="3" placeholder="str. ... nr. ... bl. ... loc. ... cod poștal ..."></textarea></label>
        <label style={{gridColumn: '1 / -1', fontSize: 11}}><input type="checkbox" /> Sunt de acord cu <a>termenii și condițiile</a> și politica de confidențialitate.</label>
        <label style={{gridColumn: '1 / -1', fontSize: 11}}><input type="checkbox" defaultChecked /> Trimite-mi newsletter-ul SJS (1/lună).</label>
        <div style={{gridColumn: '1 / -1', display: 'flex', gap: 6, justifyContent: 'flex-end'}}>
          <button className="btn">Resetează formular</button>
          <button className="btn primary" type="button">► ÎNREGISTREAZĂ-MĂ</button>
        </div>
      </form>
    </>
  );
}

function AboutPage() {
  return (
    <>
      <div className="section-h1"><span className="red">Despre</span> SJS / DSD</div>
      <div className="section-sub">Clanul Mistic din sudul jegos · 1996—1998 · Timișoara — București — Craiova</div>

      <div style={{display: 'grid', gridTemplateColumns: '1fr 240px', gap: 16, alignItems: 'start'}}>
        <div>
          <p>SJS / Suicidjegos / DirtySouthDistrict este un colectiv rap înființat în 1996 la Timișoara, cu rădăcini și rezidențe în Banat, Oltenia și sudul Bucureștiului. Lucrăm în tradiția <i>dirty south</i> americană — beat-uri grele, încărcate cu samples de pe casete VHS și casete audio uzate, mixate pe Akai S2000 și Atari ST.</p>
          <p>Etichetă de muzică, dar și mărfuri (haine, haine xeroxate cu print, accesorii). Toate produsele sunt fabricate în România, în tiraje mici și numerotate. Nu retipărim ediții — ce s-a vândut, s-a vândut.</p>

          <div className="subhead" style={{marginTop: 16}}>►► MEMBRII CLANULUI</div>
          <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8}}>
            {[
              { n: 'JEGOS PRIME', r: 'MC, producție, label-head' },
              { n: 'DJ PLUMB',    r: 'producător, mixaj' },
              { n: 'MISTICUL',    r: 'MC, versuri' },
              { n: 'XEROX',       r: 'design, fanzine, photo' },
            ].map((m, i) => (
              <div key={i} style={{background: 'var(--dsd-paper)', border: '1px solid #000', padding: 8, display: 'flex', gap: 8, alignItems: 'center'}}>
                <div style={{width: 36, height: 36, background: '#0A0A0A', color: 'var(--dsd-paper)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-poster)', fontSize: 14, border: '1px solid #000'}}>{i+1}</div>
                <div>
                  <div style={{fontWeight: 700, fontSize: 12}}>{m.n}</div>
                  <div style={{fontSize: 10, color: '#666'}}>{m.r}</div>
                </div>
              </div>
            ))}
          </div>

          <div className="subhead" style={{marginTop: 16}}>►► CRONOLOGIE</div>
          <div style={{background: 'var(--os-silver)', boxShadow: 'var(--bevel-thin-out)', padding: 10, fontFamily: 'var(--font-mono)', fontSize: 11}}>
            <div style={{display: 'grid', gridTemplateColumns: '60px 1fr', rowGap: 4}}>
              <b>1996</b><span>Format colectivul. Demo tape JEGOS V.1 (50 casete).</span>
              <b>1997</b><span>Primul EP — PODUL DE PLUMB (12"/MC). Tur 6 orașe.</span>
              <b>1997</b><span>EP DEASUPRA JEGULUI (CD/MC). Articol în <i>CHIP</i>.</span>
              <b>1998</b><span>LP FLOAREA ÎNGHEȚATĂ. Lansare radio Pro FM.</span>
              <b>1998</b><span>LP DIN ADÂNCURILE SUDULUI. Magazin online deschis.</span>
              <b>1998</b><span>LP CLANUL MISTIC. Tur național 12 orașe.</span>
            </div>
          </div>
        </div>

        <div>
          <Widget title="CONTACT">
            <div style={{fontFamily: 'var(--font-mono)', fontSize: 11, lineHeight: 1.6}}>
              <b>SJS Records SRL</b><br/>
              Str. Filantropia nr. 14<br/>
              300108 Timișoara, RO<br/>
              <br/>
              tel: <b>+40-256-203-887</b><br/>
              fax: <b>+40-256-203-888</b><br/>
              email: <a>sjs@dsd.ro</a><br/>
              ICQ: <b>47823901</b><br/>
              IRC: <b>#sjs @ ircnet</b>
            </div>
          </Widget>
          <Widget title="ÎN PRESĂ">
            <div style={{fontSize: 11, lineHeight: 1.5}}>
              <b>CHIP magazin</b> 11/98 — interviu<br/>
              <b>Pro FM</b> — premieră radio 12.OCT<br/>
              <b>Antena 1</b> — clip rotație medie<br/>
              <b>Eveniment Zilei</b> — recenzie LP
            </div>
          </Widget>
        </div>
      </div>
    </>
  );
}

function CartPage({ cart, onRemove, onCheckout, onPage, country }) {
  const total = cart.reduce((s, it) => s + it.product.price * it.qty, 0);
  const shipping = country === 'România' ? 25 : country === 'Republica Moldova' ? 45 : 80;
  const discount = cart.length >= 2 ? Math.round(total * 0.05) : 0;

  if (cart.length === 0) {
    return (
      <>
        <div className="section-h1"><span className="red">Coșul</span> tău</div>
        <div className="section-sub">0 produse · 0 RON</div>
        <div style={{background: 'var(--os-silver)', boxShadow: 'var(--bevel-out)', padding: 32, textAlign: 'center'}}>
          <div style={{fontFamily: 'var(--font-poster)', fontSize: 28, color: 'var(--dsd-mud)', marginBottom: 8}}>COȘ GOL.</div>
          <p style={{fontSize: 12, margin: '0 0 16px'}}>N-ai adăugat încă nimic. Începe cu un hanorac sau un LP.</p>
          <button className="btn primary" onClick={() => onPage('catalog')}>► VEZI CATALOGUL</button>
        </div>
      </>
    );
  }

  return (
    <>
      <div className="section-h1"><span className="red">Coșul</span> tău</div>
      <div className="section-sub">{cart.length} {cart.length === 1 ? 'produs' : 'produse'} · {total} RON · livrare către <b>{country}</b></div>

      <table style={{width: '100%', borderCollapse: 'collapse', background: 'var(--dsd-paper)', border: '1px solid #000', marginBottom: 12}}>
        <thead>
          <tr style={{background: 'var(--dsd-ink)', color: 'var(--dsd-hazard)', textAlign: 'left'}}>
            <th style={{padding: '4px 8px', fontSize: 11, width: 60}}></th>
            <th style={{padding: '4px 8px', fontSize: 11}}>PRODUS</th>
            <th style={{padding: '4px 8px', fontSize: 11, width: 80}}>MĂRIME</th>
            <th style={{padding: '4px 8px', fontSize: 11, width: 60, textAlign: 'right'}}>CANT</th>
            <th style={{padding: '4px 8px', fontSize: 11, width: 80, textAlign: 'right'}}>PREȚ</th>
            <th style={{padding: '4px 8px', fontSize: 11, width: 90, textAlign: 'right'}}>SUBTOTAL</th>
            <th style={{padding: '4px 8px', width: 30}}></th>
          </tr>
        </thead>
        <tbody>
          {cart.map((it, i) => (
            <tr key={i} style={{borderBottom: '1px solid var(--os-shadow)'}}>
              <td style={{padding: 4}}>
                <div style={{width: 40, height: 40, background: it.product.color, border: '1px solid #000'}}></div>
              </td>
              <td style={{padding: 4}}>
                <div style={{fontWeight: 700, fontSize: 12}}>{it.product.name}</div>
                <div style={{fontSize: 10, color: '#666', fontFamily: 'var(--font-mono)'}}>{it.product.sku}</div>
              </td>
              <td style={{padding: 4, fontSize: 11}}>{it.size || '—'}</td>
              <td style={{padding: 4, fontSize: 11, textAlign: 'right'}}>{it.qty}</td>
              <td style={{padding: 4, fontSize: 11, textAlign: 'right', fontFamily: 'var(--font-mono)'}}>{it.product.price}</td>
              <td style={{padding: 4, fontSize: 12, textAlign: 'right', fontFamily: 'var(--font-mono)', fontWeight: 700, color: 'var(--dsd-blood)'}}>{it.product.price * it.qty}</td>
              <td style={{padding: 4}}>
                <button className="btn" style={{minHeight: 18, minWidth: 22, fontSize: 10, padding: '0 4px'}} onClick={() => onRemove(i)}>×</button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>

      <div style={{display: 'grid', gridTemplateColumns: '1fr 280px', gap: 12}}>
        <div>
          <div style={{background: 'var(--os-silver)', boxShadow: 'var(--bevel-thin-out)', padding: 10}}>
            <div style={{fontSize: 11, fontWeight: 700, marginBottom: 6}}>► COD PROMOȚIONAL</div>
            <div className="row" style={{gap: 4}}>
              <input className="field" placeholder="ex. CLAN98" style={{flex: 1}} />
              <button className="btn">Aplică</button>
            </div>
          </div>
          <div style={{background: 'var(--os-silver)', boxShadow: 'var(--bevel-thin-out)', padding: 10, marginTop: 8}}>
            <div style={{fontSize: 11, fontWeight: 700, marginBottom: 6}}>► METODĂ LIVRARE</div>
            <div className="col" style={{gap: 4, fontSize: 11}}>
              <label><input type="radio" name="ship" defaultChecked /> Poșta Română (5—9 zile) — {shipping} RON</label>
              <label><input type="radio" name="ship" /> DHL Express (1—3 zile) — {shipping + 25} RON</label>
              <label><input type="radio" name="ship" /> Ridicare personală (Timișoara, gratuit)</label>
            </div>
          </div>
        </div>
        <div style={{background: 'var(--os-silver)', boxShadow: 'var(--bevel-out)', padding: 12}}>
          <div style={{fontSize: 11, fontWeight: 700, marginBottom: 8, padding: '3px 6px', background: 'var(--dsd-ink)', color: 'var(--dsd-hazard)'}}>► TOTAL COMANDĂ</div>
          <table style={{width: '100%', fontSize: 11, fontFamily: 'var(--font-mono)'}}>
            <tbody>
              <tr><td>Subtotal</td><td style={{textAlign: 'right'}}>{total} RON</td></tr>
              {discount ? <tr><td>Reducere clan (5%)</td><td style={{textAlign: 'right', color: 'var(--sem-success)'}}>−{discount} RON</td></tr> : null}
              <tr><td>Livrare</td><td style={{textAlign: 'right'}}>{shipping} RON</td></tr>
              <tr><td>TVA (19%, inclus)</td><td style={{textAlign: 'right', color: '#666'}}>{Math.round((total - discount + shipping) * 0.19 / 1.19)} RON</td></tr>
              <tr style={{borderTop: '1px solid #000'}}><td style={{paddingTop: 4, fontWeight: 700, fontSize: 12}}>TOTAL DE PLATĂ</td>
                <td style={{textAlign: 'right', fontWeight: 700, color: 'var(--dsd-blood)', fontSize: 14, paddingTop: 4}}>
                  {total - discount + shipping} RON
                </td></tr>
            </tbody>
          </table>
          <button className="btn primary full" style={{marginTop: 10, minHeight: 28, fontSize: 12}} onClick={onCheckout}>
            ► FINALIZEAZĂ COMANDA
          </button>
          <div style={{fontSize: 9, marginTop: 4, color: '#666', textAlign: 'center'}}>
            🔒 Conexiune SSL 128-bit · plată ramburs sau OTP
          </div>
        </div>
      </div>
    </>
  );
}

function CheckoutModal({ cart, country, onClose, onPlace }) {
  const total = cart.reduce((s, it) => s + it.product.price * it.qty, 0) + (country === 'România' ? 25 : 80);
  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()} style={{minWidth: 460}}>
        <div className="tb">
          <span>Finalizează comanda — Pasul 1 / 1</span>
          <span style={{display: 'flex', gap: 2}}>
            <span style={{width: 14, height: 12, background: 'var(--os-silver)', boxShadow: 'var(--bevel-out)', color: '#000', textAlign: 'center', fontSize: 9, fontWeight: 700}} onClick={onClose}>×</span>
          </span>
        </div>
        <div className="body">
          <p style={{margin: '0 0 10px'}}>Te rugăm completează datele de livrare:</p>
          <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6}}>
            <input className="field" placeholder="Nume" />
            <input className="field" placeholder="Prenume" />
            <input className="field" placeholder="Telefon" style={{gridColumn: '1 / -1'}} />
            <input className="field" placeholder="Adresa (str., nr., bl.)" style={{gridColumn: '1 / -1'}} />
            <input className="field" placeholder="Localitate" />
            <input className="field" placeholder="Cod poștal" />
          </div>
          <div style={{marginTop: 10, fontSize: 11, fontWeight: 700}}>Plată:</div>
          <div className="col" style={{gap: 3, fontSize: 11, marginTop: 4}}>
            <label><input type="radio" name="pay" defaultChecked /> Ramburs la livrare</label>
            <label><input type="radio" name="pay" /> Ordin de plată / OTP banking</label>
            <label><input type="radio" name="pay" /> Card credit (necesită SET 1.0)</label>
          </div>
          <div style={{marginTop: 10, padding: 8, background: 'var(--dsd-ink)', color: 'var(--dsd-hazard)', fontFamily: 'var(--font-mono)', fontSize: 11, display: 'flex', justifyContent: 'space-between'}}>
            <span>►► TOTAL DE PLATĂ:</span>
            <b>{total} RON</b>
          </div>
        </div>
        <div className="actions">
          <button className="btn" onClick={onClose}>Anulează</button>
          <button className="btn primary" onClick={onPlace}>► TRIMITE COMANDA</button>
        </div>
      </div>
    </div>
  );
}

function OrderSuccessModal({ onClose }) {
  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="tb">
          <span>Comandă plasată — DirtySouthDistrict</span>
          <span style={{display: 'flex', gap: 2}}>
            <span style={{width: 14, height: 12, background: 'var(--os-silver)', boxShadow: 'var(--bevel-out)', color: '#000', textAlign: 'center', fontSize: 9, fontWeight: 700}} onClick={onClose}>×</span>
          </span>
        </div>
        <div className="body" style={{textAlign: 'center', padding: 20}}>
          <div style={{fontFamily: 'var(--font-poster)', fontSize: 22, color: 'var(--sem-success)', marginBottom: 8}}>✓ COMANDA E ÎN SISTEM.</div>
          <p style={{margin: '0 0 8px'}}>Numărul tău de comandă: <b style={{fontFamily: 'var(--font-mono)'}}>SJS-98-014782</b></p>
          <p style={{fontSize: 11, color: '#444', margin: 0}}>Vei primi o confirmare prin email în maxim 24h. Coletul pleacă luni.</p>
          <p style={{fontSize: 11, marginTop: 12, padding: 8, background: 'var(--dsd-paper)', border: '1px dashed #000'}}>
            ► <b>BONUS:</b> ai primit acces la zona <i>Clanul Mistic</i> pentru 90 zile. Verifică email-ul.
          </p>
        </div>
        <div className="actions" style={{justifyContent: 'center'}}>
          <button className="btn primary" onClick={onClose}>OK</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  ProductCard, HeroBanner, HomePage, CatalogPage, ProductDetailPage,
  ReleasesPage, NewsPage, MediaPage, ClanPage, AboutPage, CartPage,
  CheckoutModal, OrderSuccessModal,
});