// PRODUCT DETAIL — selected item, full description + sticky cart rail.
function ProductDetail({ products, active, onActive, lines, onQty, onRemove, onAdd, onCheckout }) {
  const { Badge, Button, QtyStepper } = window.ShoyuzukeDesignSystem_1a4266;
  const Icon = window.Icon;
  const p = products[active];
  const [qty, setQty] = React.useState(1);
  React.useEffect(() => setQty(1), [active]);

  return (
    <section id="detail" className="section">
      <div className="container container-wide">
        <span className="t-eyebrow" style={{ color: 'var(--shoyu-orange)' }}>The selected flavour</span>
        <div className="sz-detail-grid" style={{ display: 'grid', gridTemplateColumns: '1.55fr 1fr', gap: 'var(--space-7)', marginTop: 'var(--space-5)', alignItems: 'start' }}>
          {/* LEFT — product */}
          <div>
            <div className="sz-detail-top" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-6)', alignItems: 'start' }}>
              <div className="spotlight" style={{ borderRadius: 'var(--radius-xl)', overflow: 'hidden', aspectRatio: '4/5' }}>
                <img key={p.id} src={p.image} alt={p.full} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
              <div>
                {/* flavour switcher */}
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 18 }}>
                  {products.map((it, i) => (
                    <button key={it.id} onClick={() => onActive(i)} style={{
                      padding: '7px 13px', cursor: 'pointer', fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 12.5,
                      borderRadius: 'var(--radius-pill)', transition: 'all var(--dur-base) var(--ease-out)',
                      background: i === active ? 'var(--shoyu-orange)' : 'transparent',
                      color: i === active ? 'var(--on-primary)' : 'var(--text-muted)',
                      border: `1.5px solid ${i === active ? 'transparent' : 'var(--border)'}`,
                    }}>{it.name}</button>
                  ))}
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <h2 className="t-h2" style={{ fontSize: 'var(--text-xl)', color: 'var(--text-strong)' }}>{p.full}</h2>
                </div>
                <p className="t-body" style={{ color: 'var(--text-muted)', marginTop: 12 }}>{p.desc}</p>

                <h4 style={infoHead}>Taste profile</h4>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>{p.profile.map((t) => <Badge key={t} tone="salmon">{t}</Badge>)}</div>

                <h4 style={infoHead}>Serving suggestion</h4>
                <p className="t-body" style={{ color: 'var(--text-muted)' }}>Spoon over hot rice with the marinade, top with sesame and scallion, or wrap in toasted nori. Add Mayak Eggs for a rice bowl.</p>
              </div>
            </div>

            {/* ingredients + storage strip */}
            <div className="sz-detail-strip" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-4)', marginTop: 'var(--space-6)' }}>
              <div style={infoBox}>
                <h4 style={{ ...infoHead, marginTop: 0 }}>Ingredients</h4>
                <p className="t-body" style={{ color: 'var(--text-muted)', fontSize: 14 }}>Salmon, shoyu, mirin, cooking sake, ginger, garlic, bonito flakes, sesame seeds, chili peppers. {p.protein} protein per {p.size}.</p>
              </div>
              <div style={infoBox}>
                <h4 style={{ ...infoHead, marginTop: 0, display: 'flex', alignItems: 'center', gap: 7 }}><Icon name="Snowflake" size={16} style={{ color: 'var(--salmon-300)' }} /> Storage & delivery</h4>
                <p className="t-body" style={{ color: 'var(--text-muted)', fontSize: 14 }}>Arrives chilled. Refrigerate immediately; once opened, enjoy within 2 days. Keep ≤ 4°C, or freeze ≤ −12°C for up to 7 days.</p>
              </div>
            </div>

            {/* size / price / qty / add */}
            <div className="sz-buybar" style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 'var(--space-5)', marginTop: 'var(--space-6)', padding: 'var(--space-5)', background: 'rgba(28,23,20,0.50)', backdropFilter: 'blur(18px)', WebkitBackdropFilter: 'blur(18px)', border: '1px solid rgba(251,244,234,0.11)', borderRadius: 'var(--radius-lg)', boxShadow: '0 2px 0 rgba(251,244,234,0.05) inset, 0 8px 28px rgba(0,0,0,0.4)' }}>
              <div>
                <div className="t-meta" style={{ fontSize: 12.5 }}>{p.size} · {p.protein} protein</div>
                <div className="t-price" style={{ fontSize: 38, color: 'var(--text-strong)' }}>₱{p.price}</div>
              </div>
              <QtyStepper value={qty} onChange={setQty} />
              <Button variant="primary" size="lg" style={{ marginLeft: 'auto' }} iconRight={<Icon name="ShoppingBag" size={18} />} onClick={() => onAdd(p.id, qty)}>Add {qty} · ₱{p.price * qty}</Button>
            </div>
          </div>

          {/* RIGHT — cart rail */}
          <div className="sz-cart-rail">
            <CartSummary lines={lines} onQty={onQty} onRemove={onRemove} onCheckout={onCheckout} sticky />
          </div>
        </div>
      </div>
    </section>
  );
}
const infoHead = { fontFamily: 'var(--font-head)', fontWeight: 800, fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text-faint)', margin: '20px 0 10px' };
const infoBox = { background: 'rgba(28,23,20,0.50)', backdropFilter: 'blur(18px)', WebkitBackdropFilter: 'blur(18px)', border: '1px solid rgba(251,244,234,0.09)', borderRadius: 'var(--radius-md)', padding: 'var(--space-4)', boxShadow: '0 2px 0 rgba(251,244,234,0.04) inset' };
window.ProductDetail = ProductDetail;