// RIFTR storefront — chrome sections: Header, Hero, Footer, Placeholder.
(() => {
const { IconButton, Button, Label, Badge } = window.RIFTRDesignSystem_b64b32;
const RM = window.RIFTR_RM;
const Ic = ({ n, s }) => <i data-lucide={n} style={{ fontSize: (s || 16) + 'px' }}></i>;

function Placeholder({ label }) {
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: 'repeating-linear-gradient(45deg,var(--graphite-100) 0 11px,var(--graphite-075) 11px 22px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{label}</span>
    </div>
  );
}

function Header({ cart, cat, setCat, onCart, onHome }) {
  const count = cart.reduce((a, b) => a + b.qty, 0);
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 40, background: 'rgba(244,244,243,.86)',
      backdropFilter: 'blur(10px)', borderBottom: '1px solid var(--border-hairline)',
    }}>
      <div className="header-inner" style={{ maxWidth: 1200, margin: '0 auto', padding: '0 28px', height: 66, display: 'flex', alignItems: 'center', gap: 28 }}>
        <img src="../../assets/wordmark-black.png" alt="RIFTR" onClick={onHome} style={{ height: 20, cursor: 'pointer' }} />
        <nav className="header-nav" style={{ display: 'flex', gap: 4, marginLeft: 8 }}>
          {window.RIFTR_CATS.map((c) => (
            <button key={c} onClick={() => { setCat(c); onHome(); }}
              style={{
                background: 'none', border: 'none', cursor: 'pointer', padding: '8px 12px',
                fontFamily: 'var(--font-display)', fontSize: 13, fontWeight: 600,
                textTransform: 'uppercase', letterSpacing: '.05em',
                color: cat === c ? 'var(--accent)' : 'var(--text-secondary)',
              }}>{c}</button>
          ))}
        </nav>
        <div className="header-icons" style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 4 }}>
          <IconButton ariaLabel="Search"><Ic n="search" /></IconButton>
          <IconButton ariaLabel="Cart" badge={count > 0 ? count : null} onClick={onCart}><Ic n="shopping-bag" /></IconButton>
        </div>
      </div>
    </header>
  );
}

function Hero({ onShop, onProduct, product }) {
  return (
    <section className="hero-grid" style={{ maxWidth: 1200, margin: '0 auto', padding: '56px 28px 40px', display: 'grid', gridTemplateColumns: '1.05fr .95fr', gap: 40, alignItems: 'center' }}>
      <div>
        <Label tick style={{ marginBottom: 22 }}>Small-batch · Made in Malaysia</Label>
        <h1 className="hero-title" style={{ fontFamily: 'var(--font-display)', margin: 0, fontSize: 62, lineHeight: .98, fontWeight: 700, letterSpacing: '-.01em', textTransform: 'uppercase' }}>
          Precision<br />for the <span style={{ color: 'var(--accent)' }}>table</span>
        </h1>
        <p style={{ maxWidth: 430, marginTop: 20, fontSize: 16, lineHeight: 1.6, color: 'var(--text-secondary)' }}>
          3D-printed cases, playmats and tokens engineered for Riftbound: League of Legends TCG. Built like hardware, not merch.
        </p>
        <div className="hero-actions" style={{ display: 'flex', gap: 12, marginTop: 28 }}>
          <Button variant="primary" onClick={onShop} iconRight={<Ic n="arrow-right" />}>Shop the kit</Button>
          <Button variant="secondary" onClick={() => onProduct(product)}>See the RB-01</Button>
        </div>
        <div className="hero-stats" style={{ display: 'flex', gap: 34, marginTop: 38 }}>
          {[['56', 'tokens housed'], ['3', 'colourways'], ['10cm', 'pocket-sized']].map(([n, l]) => (
            <div key={l}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 700, color: 'var(--text-primary)' }}>{n}</div>
              <Label style={{ marginTop: 2 }}>{l}</Label>
            </div>
          ))}
        </div>
      </div>
      <div className="hero-image" style={{ position: 'relative' }}>
        <div className="ticks" style={{ position: 'relative', borderRadius: 'var(--radius-lg)', overflow: 'hidden', border: '1px solid var(--border-hairline)', boxShadow: 'var(--shadow-md)', aspectRatio: '4/5', background: 'var(--surface-card)' }}>
          <img src="../../assets/product-rb01-case.jpg" alt="RB-01 case" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          <span style={{ fontFamily: 'var(--font-mono)', position: 'absolute', left: 14, bottom: 13, background: 'rgba(14,15,16,.7)', color: '#fff', fontSize: 10, letterSpacing: '.14em', padding: '5px 9px', borderRadius: 3 }}>RB-01 · ORANGE</span>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{ borderTop: '1px solid var(--border-hairline)', background: 'var(--graphite-100)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '32px 28px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20, flexWrap: 'wrap' }}>
        <img src="../../assets/wordmark-black.png" alt="RIFTR" style={{ height: 16, opacity: .85 }} />
        <a href="/track/" style={{ fontFamily: 'var(--font-display)', fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.05em', color: 'var(--text-secondary)' }}>Track order</a>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-muted)', letterSpacing: '.1em' }}>© 2026 RIFTR · MADE IN MALAYSIA · NOT AFFILIATED WITH RIOT GAMES</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Ic, Placeholder, Header, Hero, Footer });
})();