(() => {
const { Badge, Tag, SizeSelector, QuantityStepper, Button, ScriptureCard, Divider, Icon, ProductCard } = window.AscendFaithDesignSystem_9749b4;
const { Tilt, FloatingIcons } = window.AF_MOTION;
const zoomAt = e => { const el = e.currentTarget, r = el.getBoundingClientRect(); el.style.setProperty('--zx', ((e.clientX - r.left) / r.width) * 100 + '%'); el.style.setProperty('--zy', ((e.clientY - r.top) / r.height) * 100 + '%'); };
function ProductPage({ p, nav, addToBag, openProduct }) {
  const D = window.AF_DATA;
  const [size, setSize] = React.useState(null);
  const [qty, setQty] = React.useState(1);
  const [img, setImg] = React.useState(p.image);
  const [openRow, setOpenRow] = React.useState('Details');
  React.useEffect(() => { setImg(p.image); setSize(null); setQty(1); }, [p.id]);
  const rows = { Details: 'Heavyweight 8 oz cotton. Screen-printed graphics, embroidered chest mark, woven neck label.', Fit: 'Oversized with a dropped shoulder. Size down for a standard fit.', 'Shipping & returns': 'Ships in 3–5 business days. Free returns within 30 days on unworn pieces.' };
  const thumbs = [p.image, p.detail].filter(Boolean);
  return (
    <main>
      <div className="wrap" style={{ padding: '24px var(--gutter)' }}><span className="af-ui-s" style={{ color: 'var(--fg-3)' }}><a href="#" onClick={e => { e.preventDefault(); nav('shop'); }} className="footlink">Shop</a> &nbsp;/&nbsp; {p.category} &nbsp;/&nbsp; <span style={{ color: 'var(--fg-1)' }}>{p.name}</span></span></div>
      <div className="wrap" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1.3fr) minmax(0,1fr)', gap: 72, paddingBottom: 96 }}>
        <div style={{ display: 'flex', gap: 12 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>{thumbs.map(t => <button key={t} onClick={() => setImg(t)} className="linkreset" style={{ width: 72, height: 72, border: '1px solid ' + (t === img ? 'var(--ink-100)' : 'var(--border-default)'), padding: 0, overflow: 'hidden' }}><img src={D.img(t)} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} /></button>)}</div>
          <div className="pd-zoom" onPointerMove={zoomAt} style={{ flex: 1, minWidth: 0, background: 'var(--surface-300)', aspectRatio: '5/4' }}><img key={img} className="pd-fade" src={D.img(img)} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', transformOrigin: 'var(--zx,50%) var(--zy,50%)' }} /></div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          {p.badge && <Badge variant={p.badgeVariant || 'solid'} style={{ alignSelf: 'flex-start' }}>{p.badge}</Badge>}
          <h1 className="af-headline-m" style={{ margin: 0 }}>{p.name}</h1>
          <span className="af-ui-l" style={{ fontSize: 18 }}>{p.price}</span>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>{p.specs.map(s => <Tag key={s}>{s}</Tag>)}</div>
          <Divider />
          <div style={{ display: 'flex', justifyContent: 'space-between' }}><span className="af-eyebrow">Size</span><a href="#" className="af-ui-s" onClick={e => e.preventDefault()}>Size guide</a></div>
          <SizeSelector value={size} onChange={setSize} unavailable={['XXL']} />
          <div style={{ display: 'flex', gap: 12 }}><QuantityStepper value={qty} onChange={setQty} /><Button variant="secondary" size="md" block disabled={!size} onClick={() => addToBag(p, size, qty)} style={{ flex: 1 }}>{size ? 'Add to bag' : 'Select a size'}</Button></div>
          <span className="af-caption" style={{ display: 'flex', alignItems: 'center', gap: 6 }}><Icon name="truck" size={16} />Free shipping over $100</span>
          <div className="pd-verse" style={{ marginTop: 12 }}><FloatingIcons parallax={false} items={[{ fig: 'sparkle', x: '92%', y: '10%', size: 14, o: 0.7 }, { fig: 'cross', x: '86%', y: '64%', size: 18, o: 0.35 }]} /><ScriptureCard text={p.verse.text} reference={p.verse.reference} /></div>
          <div style={{ borderTop: '1px solid var(--border-default)' }}>
            {Object.entries(rows).map(([k, v]) => (
              <div key={k} style={{ borderBottom: '1px solid var(--border-default)' }}>
                <button className="linkreset acc" onClick={() => setOpenRow(openRow === k ? null : k)}><span className="af-ui-m">{k}</span><Icon name={openRow === k ? 'minus' : 'plus'} size={16} /></button>
                {openRow === k && <p className="af-body-s" style={{ margin: '0 0 18px', color: 'var(--fg-2)' }}>{v}</p>}
              </div>
            ))}
          </div>
        </div>
      </div>
      <section className="wrap" style={{ paddingBottom: 96 }}>
        <h2 className="af-headline-s" style={{ margin: '0 0 32px' }}>Complete the fit</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 24 }}>{D.products.filter(x => x.id !== p.id).slice(0, 4).map(x => <Tilt key={x.id} max={6}><ProductCard {...x} image={D.img(x.image)} onClick={undefined} aria-disabled="true" /></Tilt>)}</div>
      </section>
    </main>
  );
}
window.ProductPage = ProductPage;
})();