/* Brands — directory of all brands with sort. */
(function () {
  const D = window.WeedReviewDesignSystem_dcaedb;
  const { BrandRankRow, Card, Divider, Select, FanLeaf, LeafFall } = D;
  const WR = window.WR_DATA;

  const Wrap = ({ children, style }) => (
    <div style={{ maxWidth: 'var(--container-narrow)', margin: '0 auto', padding: '0 var(--space-7)', ...style }}>{children}</div>
  );

  function BrandsPage({ navigate }) {
    const rows = WR.order.topBrands.map((id) => WR.brands[id]).slice().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' }}>
          <LeafFall travel={340} count={13} />
          <Wrap style={{ position: 'relative', zIndex: 1, padding: '44px var(--space-7)' }}>
            <div className="u-label" style={{ color: 'var(--leaf-400)', marginBottom: 10 }}>Directory</div>
            <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-4xl)', fontWeight: 600, color: '#F3EEE2', letterSpacing: '-0.02em' }}>Brands</h1>
            <p style={{ color: 'var(--text-on-forest-muted)', fontSize: 15, marginTop: 10 }}>Every brand on WeedReview — cultivators, extract houses, beverage makers, and more.</p>
          </Wrap>
        </section>

        <Wrap style={{ paddingTop: 24 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap', marginBottom: 16 }}>
            <span className="u-tnum" style={{ fontSize: 13, color: 'var(--text-faint)' }}>{rows.length} brands · A–Z</span>
          </div>
          <Card padding="sm" elevation="sm">
            {rows.map((b, i) => (
              <React.Fragment key={b.id}>
                {i > 0 && <Divider />}
                <BrandRankRow rank={i + 1} name={b.name} category={b.category} location={b.location} blurb={b.bio}
                  rating={null} reviewCount={null} tone={b.tone} monogram={b.name[0]}
                  onClick={() => navigate('brand', b.id)} />
              </React.Fragment>
            ))}
          </Card>
        </Wrap>
      </div>
    );
  }
  window.BrandsPage = BrandsPage;
})();