/* Smoke Clubs — monthly cannabis subscription boxes, reviewed & ranked. */
(function () {
  const D = window.WeedReviewDesignSystem_dcaedb;
  const { Card, LeafRating, Badge, Tag, Button, Divider, Select, Icon, 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>
  );

  function ClubCard({ club, rank, navigate }) {
    return (
      <Card interactive padding="md" onClick={() => navigate('submit')}>
        <div style={{ display: 'flex', gap: 'var(--space-6)', flexWrap: 'wrap' }}>
          <div style={{ flex: 'none', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-2xl)', color: rank <= 3 ? 'var(--brand-amber)' : 'var(--text-faint)', lineHeight: 1 }}>{rank}</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 64, height: 64, borderRadius: 'var(--radius-lg)', background: 'var(--surface-leaf-soft)' }}>
              <Icon name="package-open" size={30} strokeWidth={1.7} color="var(--sage-600)" />
            </span>
          </div>
          <div style={{ flex: '1 1 300px', minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
              <h3 style={{ fontFamily: 'var(--font-serif)', fontSize: 'var(--text-xl)', fontWeight: 600, color: 'var(--text-heading)', letterSpacing: '-0.01em' }}>{club.name}</h3>
              {club.noTHC && <Tag size="sm">Gear only — no THC</Tag>}
            </div>
            <p style={{ fontSize: 15, color: 'var(--text-body)', lineHeight: 1.55, margin: '6px 0 12px', maxWidth: 560 }}>{club.tagline}</p>
            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 12 }}>
              {club.contents.map((c) => <Tag key={c} tone="sage" size="sm" iconLeft="check">{c}</Tag>)}
            </div>
            <div style={{ display: 'flex', gap: 'var(--space-6)', flexWrap: 'wrap', fontSize: 13, color: 'var(--text-muted)' }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}><Icon name="truck" size={14} /> Ships: {club.ships}</span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}><Icon name="heart" size={14} /> Best for: {club.bestFor}</span>
            </div>
          </div>
          <div style={{ flex: 'none', display: 'flex', flexDirection: 'column', alignItems: 'flex-end', justifyContent: 'space-between', gap: 10, marginLeft: 'auto' }}>
            <span className="u-mono" style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-2xl)', color: 'var(--text-heading)', lineHeight: 1 }}>{club.price}</span>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 2 }}>
              <LeafRating value={null} size={26} />
            </div>
            <Button size="sm" variant="secondary" iconLeft="pen-line" onClick={(e) => { e.stopPropagation(); navigate('submit'); }}>Review this club</Button>
          </div>
        </div>
      </Card>
    );
  }

  function SmokeClubsPage({ navigate }) {
    const [sort, setSort] = useState('A–Z');
    const rows = WR.smokeClubs.slice().sort((a, b) =>
      sort === 'Cheapest' ? parseFloat(a.price.replace(/[^0-9.]/g, '')) - parseFloat(b.price.replace(/[^0-9.]/g, '')) :
      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 }}>Subscriptions</div>
            <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-4xl)', fontWeight: 600, color: '#F3EEE2', letterSpacing: '-0.02em' }}>Subscription Boxes</h1>
            <p style={{ color: 'var(--text-on-forest-muted)', fontSize: 15, marginTop: 10, maxWidth: 620 }}>
              Real monthly boxes for smokers. Since THC can't ship across state lines, these ship glass, papers, and gear — community reviews tell you which are worth it.
            </p>
          </Wrap>
        </section>

        <Wrap style={{ paddingTop: 28 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap', marginBottom: 18 }}>
            <span className="u-tnum" style={{ fontSize: 13, color: 'var(--text-faint)' }}>{rows.length} boxes listed</span>
            <div style={{ width: 190 }}><Select icon="arrow-up-down" options={['A–Z', 'Cheapest']} value={sort} onChange={(e) => setSort(e.target.value)} /></div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
            {rows.map((c, i) => <ClubCard key={c.id} club={c} rank={i + 1} navigate={navigate} />)}
          </div>
          <p style={{ fontSize: 13, color: 'var(--text-faint)', marginTop: 20, textAlign: 'center' }}>
            Subscribed to a box we don't list? <a href="#" onClick={(e) => { e.preventDefault(); navigate('submit'); }} style={{ fontWeight: 600 }}>Review it</a> and we'll add it to the rankings.
          </p>
        </Wrap>
      </div>
    );
  }
  window.SmokeClubsPage = SmokeClubsPage;
})();