// Tobeads — pixel arcade pages: /quick-start, /presets, /gallery

const { useState: useStatePages } = React;

function PageHead({ tag, title, sub }) {
  return (
    <div className="page-head" style={{ textAlign: 'center', maxWidth: 680, margin: '0 auto', paddingTop: 110 }}>
      <div className="px" style={{ fontSize: 10, color: 'var(--v)', letterSpacing: '0.06em' }}>{tag}</div>
      <h1 className="px" style={{ fontSize: 'clamp(20px, 4vw, 38px)', marginTop: 22, lineHeight: 1.5, color: 'var(--ink)' }}>{title}</h1>
      <p className="aw-disp page-head-sub" style={{ fontSize: 17, color: 'var(--ink2)', marginTop: 18, lineHeight: 1.5 }}>{sub}</p>
    </div>
  );
}

// light "game cartridge" card used across subpages
function KitCard({ acc = 'var(--v)', topBadge, badgeRight, title, price, sub, seed, gridSize = 12, ratio = '4/3', children }) {
  return (
    <div className="lt-card" style={{ overflow: 'hidden' }}>
      <div className="cart-scan" style={{ aspectRatio: ratio, position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#05050F', borderBottom: '3px solid var(--ink)' }}>
        <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(60% 60% at 50% 45%, ${acc}2E, transparent 70%)` }}/>
        <div style={{ width: ratio === '1/1' ? '58%' : '50%', position: 'relative' }}><window.PixelArt seed={seed} size={gridSize}/></div>
        {topBadge && <span className="px" style={{ position: 'absolute', top: 10, left: 10, fontSize: 7, color: acc, border: `2px solid ${acc}`, padding: '4px 6px' }}>{topBadge}</span>}
        {badgeRight && <span className="px" style={{ position: 'absolute', top: 10, right: 10, fontSize: 7, color: 'var(--gray)' }}>{badgeRight}</span>}
      </div>
      <div style={{ padding: 18 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <h3 className="px" style={{ fontSize: 10, color: 'var(--ink)' }}>{title}</h3>
          <span className="px" style={{ fontSize: 11, color: 'var(--v)' }}>${price}</span>
        </div>
        {sub && <div className="px" style={{ fontSize: 7, color: 'var(--ink2)', marginTop: 8 }}>{sub}</div>}
        {children}
      </div>
    </div>
  );
}

// ---------- /quick-start ----------
function QuickStartPage({ onNavigate, addToCart }) {
  const kits = [
    { id: 'qs-heart', title: 'PIXEL HEART',   time: 15, beads: 320, price: 12, seed: 'refill',      acc: 'var(--pnk)' },
    { id: 'qs-cat',   title: 'TINY CAT',      time: 25, beads: 540, price: 16, seed: 'starter-48',  acc: 'var(--ylw)' },
    { id: 'qs-cloud', title: 'CLOUD + STAR',  time: 20, beads: 410, price: 14, seed: 'creator-96',  acc: 'var(--cyn)' },
    { id: 'qs-mush',  title: 'POWER BLOCK',   time: 30, beads: 680, price: 18, seed: 'premium-120', acc: 'var(--v)' },
  ];
  return (
    <div data-screen-label="Quick Start" className="aw-stage" style={{ minHeight: '100vh' }}>
      <div className="wrap">
        <PageHead tag="MODE 01 · QUICK START" title="30-MINUTE BUILDS" sub="Fast bead kits for first builds and weekend play. Open the box, follow the bead map, finish today."/>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginTop: 52, paddingBottom: 64 }} className="aw-qs-grid">
          {kits.map(k => (
            <KitCard key={k.id} acc={k.acc} title={k.title} price={k.price} sub={`${k.beads} BEADS`} seed={k.seed} ratio="1/1" topBadge={`~${k.time}MIN`}>
              <button onClick={() => { window.AudioManager && window.AudioManager.playSelect(); addToCart({ id: k.id, title: k.title, estimatedPrice: k.price }); }} className="pbtn pbtn-ylw pbtn-sm" style={{ marginTop: 14, width: '100%' }}>ADD</button>
            </KitCard>
          ))}
        </div>
      </div>
      <window.ArcadeFooter onNavigate={onNavigate}/>
      <style>{`@media (max-width: 900px){ .aw-qs-grid { grid-template-columns: repeat(2,1fr) !important; gap: 12px !important; } }`}</style>
    </div>
  );
}
window.QuickStartPage = QuickStartPage;

// ---------- /presets ----------
function PresetsPage({ onNavigate, addToCart }) {
  const [cat, setCat] = useStatePages('all');
  const cats = ['all', 'pets', 'retro', 'people', 'decor'];
  const presets = [
    { id: 'p1', title: 'MOCHI CAT',     cat: 'pets',   grid: '50×50', price: 34, seed: 'starter-48',  acc: 'var(--ylw)' },
    { id: 'p2', title: 'ARCADE SPRITE', cat: 'retro',  grid: '30×30', price: 22, seed: 'ultimate-221', acc: 'var(--pnk)' },
    { id: 'p3', title: 'COUPLE MAP',    cat: 'people', grid: '80×80', price: 48, seed: 'creator-96',   acc: 'var(--cyn)' },
    { id: 'p4', title: 'COASTAL SET',   cat: 'decor',  grid: '50×50', price: 36, seed: 'premium-120',  acc: 'var(--v)' },
    { id: 'p5', title: 'PUP PORTRAIT',  cat: 'pets',   grid: '50×50', price: 34, seed: 'refill',       acc: 'var(--pnk)' },
    { id: 'p6', title: 'SKYLINE',       cat: 'decor',  grid: '80×80', price: 52, seed: 'tools',        acc: 'var(--cyn)' },
  ];
  const shown = cat === 'all' ? presets : presets.filter(p => p.cat === cat);
  return (
    <div data-screen-label="Preset World" className="aw-stage" style={{ minHeight: '100vh' }}>
      <div className="wrap">
        <PageHead tag="MODE 02 · PRESET WORLD" title="READY-MADE LEVELS" sub="Pick a curated bead map. We pack the colors and tools into one box."/>
        <div style={{ display: 'flex', gap: 8, justifyContent: 'center', flexWrap: 'wrap', marginTop: 40 }}>
          {cats.map(c => (
            <button key={c} onClick={() => { window.AudioManager && window.AudioManager.playHover(); setCat(c); }} className="pbtn pbtn-sm" style={{ background: cat === c ? 'var(--v)' : 'var(--lt2)', borderColor: cat === c ? 'var(--ink)' : 'var(--ink)', color: cat === c ? 'var(--wh)' : 'var(--ink)', boxShadow: cat === c ? '3px 3px 0 var(--ink)' : '3px 3px 0 var(--lt3)' }}>{c.toUpperCase()}</button>
          ))}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18, marginTop: 34, paddingBottom: 64 }} className="aw-preset-grid">
          {shown.map(p => (
            <KitCard key={p.id} acc={p.acc} title={p.title} price={p.price} seed={p.seed} ratio="4/3" badgeRight={p.grid}>
              <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
                <button onClick={() => { window.AudioManager && window.AudioManager.playSelect(); addToCart({ id: p.id, title: p.title, estimatedPrice: p.price }); }} className="pbtn pbtn-ylw pbtn-sm" style={{ flex: 1 }}>ADD</button>
                <button onClick={() => onNavigate('create')} className="pbtn pbtn-sm" style={{ background: 'var(--lt2)', color: 'var(--ink)', borderColor: 'var(--ink)', boxShadow: '3px 3px 0 var(--ink)' }}>EDIT</button>
              </div>
            </KitCard>
          ))}
        </div>
      </div>
      <window.ArcadeFooter onNavigate={onNavigate}/>
      <style>{`@media (max-width: 860px){ .aw-preset-grid { grid-template-columns: repeat(2,1fr) !important; gap: 12px !important; } }`}</style>
    </div>
  );
}
window.PresetsPage = PresetsPage;

// ---------- /gallery ----------
function GalleryPage({ onNavigate }) {
  const builds = [...window.GALLERY, ...window.GALLERY.map(g => ({ ...g, id: g.id + '-b' }))];
  const accs = ['var(--v)','var(--cyn)','var(--pnk)','var(--ylw)'];
  return (
    <div data-screen-label="Gallery" className="aw-stage" style={{ minHeight: '100vh' }}>
      <div className="wrap">
        <PageHead tag="HIGH SCORES" title="BUILT BY PLAYERS" sub="Real bead builds from the Tobeads community. Tag #tobeads to hit the leaderboard."/>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginTop: 52, paddingBottom: 64 }} className="aw-gal-grid">
          {builds.map((g, i) => (
            <div key={g.id + i} className="lt-card" style={{ overflow: 'hidden' }}>
              <div className="cart-scan" style={{ aspectRatio: '1/1', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#05050F', borderBottom: '3px solid var(--ink)' }}>
                <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(60% 60% at 50% 45%, ${accs[i % accs.length]}26, transparent 72%)` }}/>
                <div style={{ width: '60%' }}><window.PixelArt seed={g.id.replace('-b','')} size={14}/></div>
              </div>
              <div style={{ padding: '12px 14px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div>
                  <div className="px" style={{ fontSize: 8, color: 'var(--ink)' }}>{g.project.toUpperCase()}</div>
                  <div className="px" style={{ fontSize: 7, color: 'var(--ink2)', marginTop: 6 }}>{g.author}</div>
                </div>
                <div className="px" style={{ fontSize: 7, color: 'var(--v)', textAlign: 'right' }}>{g.beads.toLocaleString()}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <window.ArcadeFooter onNavigate={onNavigate}/>
      <style>{`@media (max-width: 900px){ .aw-gal-grid { grid-template-columns: repeat(2,1fr) !important; } }`}</style>
    </div>
  );
}
window.GalleryPage = GalleryPage;