(() => {
const { Tag, Select, ProductCard } = window.AscendFaithDesignSystem_9749b4;
const { WordsPullUp, FloatingIcons, Tilt, useParallax } = window.AF_MOTION;
function ShopPage({ openProduct }) {
  const D = window.AF_DATA;
  const [cat, setCat] = React.useState('All');
  const list = D.products.filter(p => cat === 'All' || p.category === cat);
  const ref = React.useRef(null);
  useParallax(ref, []);
  return (
    <div ref={ref}>
      <section className="shop-band" data-no-rv>
        <img data-speed="1" src={D.img('imagery/scenes/walking-road-hd.jpg')} alt="Jesus walking an ancient road with His disciples" style={{ objectPosition: 'center 40%' }} />
        <div className="afm-noise" style={{ opacity: 0.45, zIndex: 2 }} />
        <FloatingIcons items={[{ fig: 'peak', x: '88%', y: '20%', size: 34, o: 0.5 }, { fig: 'sparkle', x: '70%', y: '64%', size: 16, o: 0.6 }]} />
        <div style={{ position: 'absolute', left: 48, bottom: 44, zIndex: 4, display: 'flex', flexDirection: 'column', gap: 12, color: '#f7f7f3' }}>
          <span className="af-eyebrow" style={{ color: '#ffd052' }}>Ascend I — The Way Up</span>
          <h1 className="af-headline-l" style={{ margin: 0, color: '#f7f7f3' }}><WordsPullUp text="Collection 001" /></h1>
        </div>
      </section>
      <main className="wrap" style={{ padding: '48px var(--gutter) 120px' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24, paddingBottom: 24, marginBottom: 40, borderBottom: '1px solid var(--border-default)' }}>
          <div style={{ display: 'flex', gap: 8 }}>{['All', 'Tees', 'Hats', 'Outerwear'].map(c => <Tag key={c} selected={c === cat} onClick={() => setCat(c)}>{c}</Tag>)}</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}><span className="af-caption">{list.length} pieces</span><Select size="sm" options={['Featured', 'Newest', 'Price: low to high', 'Price: high to low']} style={{ width: 200 }} /></div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: '48px 24px' }}>{list.map(p => <Tilt key={p.id} max={6}><ProductCard {...p} image={D.img(p.image)} onClick={undefined} aria-disabled="true" /></Tilt>)}</div>
      </main>
    </div>
  );
}
window.ShopPage = ShopPage;
})();