// RIFTR storefront — catalogue: product grid + product detail page.
(() => {
const { Card, Badge, Label, Button, Tabs, QtyStepper, SpecTable } = window.RIFTRDesignSystem_b64b32;

function Grid({ cat, onProduct }) {
  const RM = window.RIFTR_RM;
  const list = cat === 'All' ? window.RIFTR_PRODUCTS : window.RIFTR_PRODUCTS.filter((p) => p.tag === cat);
  return (
    <section className="section-pad" style={{ maxWidth: 1200, margin: '0 auto', padding: '10px 28px 72px' }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', borderTop: '1px solid var(--border-strong)', paddingTop: 18, marginBottom: 24 }}>
        <h2 style={{ fontFamily: 'var(--font-display)', margin: 0, fontSize: 22, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.02em' }}>
          {cat === 'All' ? 'The full kit' : cat}
        </h2>
        <Label>{list.length} products</Label>
      </div>
      <div className="product-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 20 }}>
        {list.map((p) => (
          <Card key={p.id} lift onClick={() => onProduct(p)}>
            <div style={{ position: 'relative', aspectRatio: '1/1', background: 'var(--surface-inset)' }}>
              {p.img ? <img src={p.img} alt={p.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : <window.Placeholder label="Product shot" />}
              {p.badge && <Badge style={{ position: 'absolute', top: 10, left: 10 }}>{p.badge}</Badge>}
            </div>
            <div style={{ padding: '14px 16px 16px' }}>
              <Label style={{ marginBottom: 6 }}>{p.tag}</Label>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.01em' }}>{p.name}</div>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 12 }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: 15 }}>{RM(p.price)}</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--accent)', letterSpacing: '.08em', textTransform: 'uppercase' }}>View →</span>
              </div>
            </div>
          </Card>
        ))}
      </div>
    </section>
  );
}

function ProductPage({ p, onBack, onAdd }) {
  const RM = window.RIFTR_RM;
  const Ic = window.Ic;
  const [tab, setTab] = React.useState('Overview');
  const [qty, setQty] = React.useState(1);
  return (
    <section className="product-page-pad" style={{ maxWidth: 1200, margin: '0 auto', padding: '24px 28px 80px' }}>
      <Button variant="ghost" onClick={onBack} iconLeft={<Ic n="arrow-left" />} style={{ padding: '8px 0', marginBottom: 18 }}>Back</Button>
      <div className="product-page-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 44 }}>
        <div className="ticks" style={{ position: 'relative', borderRadius: 'var(--radius-lg)', overflow: 'hidden', border: '1px solid var(--border-hairline)', aspectRatio: '1/1', background: 'var(--surface-card)' }}>
          {p.img ? <img src={p.img} alt={p.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : <window.Placeholder label="Product shot" />}
        </div>
        <div>
          <Label>{p.tag} · {p.specs[0][1]}</Label>
          <h1 style={{ fontFamily: 'var(--font-display)', margin: '10px 0 0', fontSize: 38, lineHeight: 1.02, fontWeight: 700, textTransform: 'uppercase' }}>{p.name}</h1>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 22, fontWeight: 700, marginTop: 14 }}>{RM(p.price)}</div>
          <p style={{ fontSize: 15, lineHeight: 1.65, color: 'var(--text-secondary)', marginTop: 16, maxWidth: 460 }}>{p.blurb}</p>

          <div style={{ display: 'flex', gap: 14, alignItems: 'center', marginTop: 24 }}>
            <QtyStepper value={qty} onChange={setQty} />
            <Button variant="primary" style={{ flex: 1 }} onClick={() => onAdd(p, qty)} iconLeft={<Ic n="shopping-bag" />}>
              Add to cart — {RM(p.price * qty)}
            </Button>
          </div>

          <div style={{ marginTop: 34 }}>
            <Tabs tabs={['Overview', 'Specs', 'In the box']} value={tab} onChange={setTab} />
            <div style={{ padding: '20px 2px' }}>
              {tab === 'Overview' &&
                <p style={{ margin: 0, fontSize: 14, lineHeight: 1.7, color: 'var(--text-secondary)' }}>{p.blurb} Designed and printed small-batch in Malaysia — practical hardware for the table, nothing you don't need.</p>}
              {tab === 'Specs' && <SpecTable rows={p.specs} />}
              {tab === 'In the box' &&
                <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {p.box.map((b, i) => (
                    <li key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: 'var(--text-secondary)' }}>
                      <span style={{ color: 'var(--accent)', display: 'inline-flex' }}><Ic n="check" /></span>{b}
                    </li>
                  ))}
                </ul>}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Grid, ProductPage });
})();