// chrome.jsx — masthead, top nav, browser frame, footer, status bar.

function BrowserShell({ children, url }) {
  return (
    <div className="browser-shell">
      <div className="browser-titlebar">
        <span style={{display: 'inline-block', width: 12, height: 12, background: 'linear-gradient(135deg,#1084D0,#000080)'}}></span>
        <span>DirtySouthDistrict — Microsoft Internet Explorer 4.0</span>
        <span className="grow"></span>
        <span className="tb-btn">_</span>
        <span className="tb-btn">□</span>
        <span className="tb-btn">×</span>
      </div>
      <div className="browser-menubar">
        <span><span className="u">F</span>ile</span>
        <span><span className="u">E</span>dit</span>
        <span><span className="u">V</span>iew</span>
        <span>F<span className="u">a</span>vorites</span>
        <span><span className="u">T</span>ools</span>
        <span><span className="u">H</span>elp</span>
      </div>
      <div className="browser-toolbar">
        <span className="tool-btn">◄ Back</span>
        <span className="tool-btn disabled">Forward ►</span>
        <span className="tool-btn">■ Stop</span>
        <span className="tool-btn">↻ Refresh</span>
        <span className="tool-btn">⌂ Home</span>
        <span style={{width: 1, height: 22, background: '#818181', margin: '0 4px'}}></span>
        <span className="tool-btn">★ Favorites</span>
        <span className="tool-btn">⊕ Print</span>
        <span className="address-bar">
          <span style={{fontSize: 10}}>Address</span>
          <span className="url"><span>{url || 'http://www.dirtysouthdistrict.com/'}</span></span>
          <span className="tool-btn">Go</span>
        </span>
      </div>
      {children}
    </div>
  );
}

function Masthead() {
  const today = new Date();
  const fakeDate = '14.OCT.1998';
  return (
    <div className="masthead">
      <div className="masthead-row">
        <div>
          <h1 className="wordmark">
            <i>DirtySouthDistrict</i><span className="dot">.com</span>
          </h1>
          <div className="tagline">— oficial // SJS // Suicidjegos // clanul mistic din sudul jegos —</div>
        </div>
        <div className="masthead-meta">
          <div>SJS<b>·</b>1996<b>—</b>1998</div>
          <div>actualizat: <b>{fakeDate}</b></div>
          <div>vizitatori azi: <b>1,287</b></div>
          <div>versiune sit: <b>v3.2</b></div>
        </div>
      </div>
      <div className="masthead-stripe">
        <div></div><div></div><div></div><div></div><div></div><div></div>
      </div>
    </div>
  );
}

function TopNav({ page, onPage, cartCount }) {
  const tabs = [
    { id: 'home',     label: 'Acasă' },
    { id: 'catalog',  label: 'Catalog' },
    { id: 'releases', label: 'Discografie' },
    { id: 'news',     label: 'Știri' },
    { id: 'media',    label: 'Audio/Video' },
    { id: 'clan',     label: 'Clanul Mistic' },
    { id: 'about',    label: 'Despre' },
  ];
  return (
    <div className="topnav">
      {tabs.map((t) => (
        <a
          key={t.id}
          className={'tab' + (page === t.id ? ' active' : '')}
          onClick={(e) => { e.preventDefault(); onPage(t.id); }}
          href={'#' + t.id}
        >{t.label}</a>
      ))}
      <span className="tab-spacer"></span>
      <span className="pill">SJS · ONLINE</span>
      <a className={'tab' + (page === 'cart' ? ' active' : '')}
         onClick={(e) => { e.preventDefault(); onPage('cart'); }}
         href="#cart"
         style={{background: page === 'cart' ? undefined : 'var(--dsd-hazard)'}}>
        ▌ COȘ ({cartCount})
      </a>
    </div>
  );
}

function Announcer() {
  return (
    <div className="announcer">
      <div className="announcer-track">
        <span>►► STOC LIMITAT.</span><span className="sep">//</span>
        <span>HANORAC MUD — EPUIZAT, RE-STOC NOIEMBRIE.</span><span className="sep">//</span>
        <span>CLANUL MISTIC LP — PRIMUL TIRAJ ACUM ONLINE.</span><span className="sep">//</span>
        <span>ÎNREGISTREAZĂ-TE — PRIMEȘTI MIXTAPE PE CD-ROM GRATIS.</span><span className="sep">//</span>
        <span>CONCERT TIMIȘOARA 28.OCT — BILETE ÎN PRE-VÂNZARE.</span><span className="sep">//</span>
        <span>SJS · 1996 · DIRTY · SOUTH · DISTRICT.</span><span className="sep">//</span>
        <span>►► STOC LIMITAT.</span><span className="sep">//</span>
        <span>HANORAC MUD — EPUIZAT.</span><span className="sep">//</span>
        <span>CLANUL MISTIC LP — DISPONIBIL.</span><span className="sep">//</span>
      </div>
    </div>
  );
}

function StatusBar({ url, secure }) {
  return (
    <div className="statusbar">
      <div className="sb-cell"><span className="dot"></span><b>Done</b></div>
      <div className="sb-cell grow" style={{fontFamily: 'var(--font-mono)'}}>
        {url || 'http://www.dirtysouthdistrict.com/index.html'}
      </div>
      <div className="sb-cell">28.8 kbps</div>
      <div className="sb-cell">{secure ? '🔒' : '🔓'}<span style={{fontFamily: 'var(--font-system)'}}>Internet zone</span></div>
      <div className="sb-cell">RO</div>
    </div>
  );
}

function Footer() {
  return (
    <div className="foot">
      <div className="row">
        <span>©1996—1998 DirtySouthDistrict / SJS Records SRL · Timișoara, RO</span>
        <span>·</span>
        <a href="#">contact@dirtysouthdistrict.com</a>
        <span>·</span>
        <a href="#">webmaster</a>
        <span>·</span>
        <a href="#">termeni și condiții</a>
      </div>
      <div className="row" style={{marginTop: 8, fontSize: 10, color: '#888'}}>
        Site optimizat pentru Netscape Navigator 4.0 / Internet Explorer 4.0 la 800×600. Necesită JavaScript activat.
      </div>
      <div className="made-with">
        <span className="badge88 netscape"><span><b>Netscape</b><br/>NOW!</span></span>
        <span className="badge88 ie"><span><b>Get</b><br/>IE 4.0</span></span>
        <span className="badge88 realaudio"><span style={{fontStyle:'italic'}}><b>Real</b><br/>Audio</span></span>
        <span className="badge88 html32"><span><b>HTML</b><br/>3.2</span></span>
        <span className="badge88 notepad"><span>Made with<br/><b>NOTEPAD</b></span></span>
        <span className="badge88 geocities"><span><b>SoHo</b><br/>district</span></span>
        <span className="badge88 webring"><span><b>RO Rap</b><br/>WebRing</span></span>
        <span className="badge88 dsd"><span><b>SJS</b><br/>v3.2</span></span>
      </div>
    </div>
  );
}

Object.assign(window, { BrowserShell, Masthead, TopNav, Announcer, StatusBar, Footer });