/* ============================================================
   PRODUCT DETAIL — fabric page with pricing and add-to-bag
   ============================================================ */
function ProductPage({ params }) {
  const { nav, addToCart, fmt } = useStore();
  const p = BB.products.find(x => x.id === params.id) || BB.products[0];
  const [img, setImg] = useState(0);
  const [qty, setQty] = useState(1);
  useEffect(() => { setImg(0); setQty(1); }, [params.id]);

  const cat = BB.catOf(p);
  const specs = BB.specSheet(p);
  const related = BB.products.filter(x => x.cat === p.cat && x.id !== p.id).slice(0, 4);
  const thumbs = IMG.gallery(p.id);

  return (
    <div style={{ background: 'var(--cream)' }}>
      <div className="container wide pdp-grid" style={{ padding: 'clamp(32px,4vw,52px) var(--gutter) clamp(56px,8vw,90px)' }}>
        <div className="pdp-gallery">
          <Ph src={thumbs[img]} label={p.name} style={{ aspectRatio: '1/1', borderRadius: 'var(--r-lg)', boxShadow: 'var(--shadow-sm)' }} />
        </div>

        <div className="pdp-info">
          <span className="cat-tag" style={{ fontSize: 12 }}>{cat?.name}</span>
          <h1 style={{ fontSize: 'clamp(32px,4vw,50px)', lineHeight: 1.04, marginTop: 10 }}>{p.name}</h1>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginTop: 14, flexWrap: 'wrap' }}>
            <strong style={{ fontFamily: 'var(--serif)', fontSize: 34, lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>{fmt(p.price)}</strong>
            <span style={{ fontSize: 14.5, color: 'var(--ink-soft)' }}>per {p.unit}</span>
          </div>
          <p style={{ fontSize: 13, color: p.stock <= 8 ? 'var(--accent-deep)' : 'var(--sage)', fontWeight: 600, marginTop: 8 }}>
            {p.stock <= 8 ? `Only ${p.stock} ${p.unit}${p.stock !== 1 ? 's' : ''} left` : 'In stock'}
          </p>
          <p style={{ fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.7, marginTop: 16 }}>{p.desc}</p>

          {specs.length > 0 && (
            <div style={{ marginTop: 26 }}>
              <p className="eyebrow" style={{ marginBottom: 10 }}>Fabric details</p>
              <dl className="spec-sheet">
                {specs.map(([label, val]) => (
                  <div className="spec-row" key={label}><dt>{label}</dt><dd>{val}</dd></div>
                ))}
              </dl>
            </div>
          )}

          <div style={{ marginTop: 26, background: 'var(--accent-soft)', border: '1px solid var(--line)', borderRadius: 'var(--r-md)', padding: '14px 18px', display: 'flex', gap: 11, alignItems: 'flex-start', fontSize: 13.5, lineHeight: 1.55 }}>
            <I.doc width={20} height={20} style={{ color: 'var(--accent-deep)', flexShrink: 0, marginTop: 2 }} />
            <span>Cut to order from the bolt. Exact shade can vary slightly between deliveries — message us before ordering if you need to match an existing piece.</span>
          </div>

          <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginTop: 22, flexWrap: 'wrap' }}>
            <QtyStepper value={qty} max={p.stock} unit={p.unit} onChange={setQty} />
            <button className="btn btn-accent btn-lg" style={{ flex: '1 1 200px' }} onClick={() => addToCart(p, qty)}>Add to bag · {fmt(p.price * qty)}</button>
          </div>
          <button className="btn btn-outline btn-block btn-lg" style={{ marginTop: 10 }} onClick={() => { addToCart(p, qty); nav('checkout'); }}>Buy now</button>

          <div style={{ display: 'flex', gap: 20, marginTop: 26, paddingTop: 24, borderTop: '1px solid var(--line)', flexWrap: 'wrap' }}>
            {[[I.truck, 'Delivery via Shipbubble · free in Nigeria over ' + fmt(BB.BRAND.shipping.free)], [I.pin, 'Free pickup from either Lagos location']].map(([Ic, t], i) => (
              <span key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--ink-soft)' }}>{Ic({ width: 18, height: 18, style: { color: 'var(--accent-deep)' } })} {t}</span>
            ))}
          </div>
        </div>
      </div>

      {related.length > 0 && (
        <section style={{ background: 'var(--cream-deep)', borderTop: '1px solid var(--line)' }}>
          <div className="container wide" style={{ padding: 'clamp(56px,8vw,100px) var(--gutter)' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', flexWrap: 'wrap', gap: 12, marginBottom: 36 }}>
              <h2 style={{ fontSize: 'clamp(30px,4.5vw,50px)' }}>More in {cat?.name}</h2>
              <button className="link-u" style={{ fontSize: 14, fontWeight: 600 }} onClick={() => nav('shop', { cat: p.cat })}>View all →</button>
            </div>
            <div className="prod-grid">
              {related.map((r, i) => <ProductCard key={r.id} p={r} delay={(i % 4) + 1} />)}
            </div>
          </div>
        </section>
      )}
    </div>
  );
}

Object.assign(window, { ProductPage });