/* Products — browse every rated product with category filters + sort. */
(function () {
  const D = window.WeedReviewDesignSystem_dcaedb;
  const { ProductCard, Tag, Select, FanLeaf, LeafFall } = D;
  const WR = window.WR_DATA;
  const { useState } = React;

  const Wrap = ({ children, style }) => (
    <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--space-7)', ...style }}>{children}</div>
  );
  const CHIPS = ['All', 'Flower', 'Pre-Rolls', 'Vapes', 'Edibles', 'Beverages', 'Concentrates', 'Topicals'];
  const match = (p, chip) => chip === 'All'
    || (chip === 'Flower' && p.category === 'Flower')
    || (chip === 'Pre-Rolls' && p.category === 'Pre-Roll')
    || (chip === 'Vapes' && p.category === 'Vape')
    || (chip === 'Edibles' && p.category === 'Edible')
    || (chip === 'Beverages' && p.category === 'Beverage')
    || (chip === 'Concentrates' && p.category === 'Concentrate')
    || (chip === 'Topicals' && (p.category === 'Topical' || p.category === 'Tincture'));

  function ProductsPage({ navigate }) {
    const [chip, setChip] = useState('All');
    let items = WR.order.products.map((id) => WR.products[id]).filter((p) => match(p, chip));
    items.sort((a, b) => a.name.localeCompare(b.name));

    return (
      <div style={{ paddingBottom: 80 }}>
        <section style={{ position: 'relative', background: 'radial-gradient(120% 140% at 85% 0%, #24503F 0%, #1B3B2F 60%, #14301F 100%)', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', right: -50, top: -50, opacity: 0.08 }}><FanLeaf size={300} filledColor="#EDE7D8" /></div>
          <LeafFall travel={320} count={13} />
          <Wrap style={{ position: 'relative', zIndex: 1, padding: '44px var(--space-7)' }}>
            <div className="u-label" style={{ color: 'var(--leaf-400)', marginBottom: 10 }}>Browse</div>
            <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-4xl)', fontWeight: 600, color: '#F3EEE2', letterSpacing: '-0.02em' }}>Products</h1>
            <p style={{ color: 'var(--text-on-forest-muted)', fontSize: 15, marginTop: 10 }}>Real products from real brands, across all categories. Reviews open the ratings.</p>
          </Wrap>
        </section>

        <Wrap style={{ paddingTop: 24 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap', marginBottom: 20 }}>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {CHIPS.map((c) => <Tag key={c} interactive active={chip === c} onClick={() => setChip(c)}>{c}</Tag>)}
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <span className="u-tnum" style={{ fontSize: 13, color: 'var(--text-faint)' }}>{items.length} products · A–Z</span>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))', gap: 'var(--space-6)' }}>
            {items.map((p) => (
              <ProductCard key={p.id} name={p.name} brand={WR.brandName(p.brand)} category={p.category}
                rating={null} reviewCount={null} thc={p.thc}
                tone={p.tone} icon={p.icon} onClick={() => navigate('product', p.id)} />
            ))}
          </div>
        </Wrap>
      </div>
    );
  }
  window.ProductsPage = ProductsPage;
})();