const Shop = ({ onOpen }) => {
  var products = window.IBA_PRODUCTS || [];
  var categories = window.IBA_CATEGORIES || {};
  const [filter, setFilter] = React.useState('all');

  var filtered = filter === 'all' ? products : products.filter((p) => p.category === filter);

  var tabStyle = (active) => ({
    fontFamily: 'var(--font-mono)', fontSize: '14px', letterSpacing: '0.08em',
    textTransform: 'uppercase', cursor: 'pointer', padding: '8px 0',
    color: active ? 'var(--amber)' : 'var(--text-muted)',
    borderBottom: active ? '2px solid var(--amber)' : '2px solid transparent',
    transition: 'color .15s',
  });

  return (
    <div style={{ maxWidth: '1280px', margin: '0 auto', padding: '0 28px' }}>
      {/* Hero */}
      <section style={{ display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: '44px', padding: '64px 0 48px' }}>
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: '11px', letterSpacing: '0.18em', color: 'var(--amber-dim)', textTransform: 'uppercase', marginBottom: '12px' }}>// SHOP · IT'S BROKEN AI</div>
          <h1 style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: '56px', lineHeight: 1.05, letterSpacing: '-0.015em', color: 'var(--text)', margin: 0, display: 'flex', flexDirection: 'column' }}>
            <span>We break things.</span>
            <span style={{ color: 'var(--amber)' }}>You buy things.<span className="ib-caret-lg"></span></span>
          </h1>
          <p style={{ fontSize: '16px', lineHeight: 1.6, color: 'var(--text-2)', maxWidth: '540px', margin: '22px 0 0' }}>
            <span style={{ color: 'var(--amber)', fontFamily: 'var(--font-mono)' }}>&gt;</span> Merch for people who build with AI and break it on purpose. Every piece made to order. No warehouse, no waste, no excuses.
          </p>
          <div style={{ display: 'flex', gap: '12px', marginTop: '28px', fontFamily: 'var(--font-mono)', fontSize: '12px', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
            <a href="#products" style={{ background: 'var(--amber)', color: 'var(--bg)', padding: '12px 20px', fontWeight: 700, borderRadius: '2px', transition: 'background .2s', textDecoration: 'none' }}
              onMouseEnter={(e) => e.target.style.background = 'var(--deep-amber)'}
              onMouseLeave={(e) => e.target.style.background = 'var(--amber)'}>$ ./browse</a>
            <a href="/blog" style={{ border: '1px solid var(--amber-dim)', color: 'var(--amber)', padding: '11px 20px', borderRadius: '2px', transition: 'border-color .2s', textDecoration: 'none' }}
              onMouseEnter={(e) => e.target.style.borderColor = 'var(--amber)'}
              onMouseLeave={(e) => e.target.style.borderColor = 'var(--amber-dim)'}>$ cat /blog</a>
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '18px' }}>
          <div style={{ display: 'flex', justifyContent: 'center', padding: '24px', border: '1px solid var(--border)', background: 'var(--bg-2)' }}>
            <img src="assets/images/taribai-logo.png" alt="It's Broken AI" width="220" height="220" style={{ imageRendering: 'pixelated' }} />
          </div>
        </div>
      </section>

      {/* Product section eyebrow */}
      <div id="products" style={{ fontFamily: 'var(--font-mono)', fontSize: '12px', letterSpacing: '0.16em', color: 'var(--amber)', textTransform: 'uppercase', marginBottom: '22px' }}>
        THE CURRENT BUILDS <span style={{ color: 'var(--text-muted)', marginLeft: '12px' }}>// $ ls -lah ./shop</span>
      </div>

      {/* Category tabs */}
      <div style={{ display: 'flex', gap: '28px', padding: '20px 0', borderBottom: '1px solid var(--border)' }}>
        <span style={tabStyle(filter === 'all')} onClick={() => setFilter('all')}>All ({products.length})</span>
        {(window.IBA_CATEGORY_ORDER || []).map((catId) => {
          var count = products.filter(p => p.category === catId).length;
          return (
            <span key={catId} style={tabStyle(filter === catId)} onClick={() => setFilter(catId)}>
              {categories[catId]?.label || catId} ({count})
            </span>
          );
        })}
      </div>

      {/* Grid */}
      <div style={{ padding: '32px 0', display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: '20px' }}>
        {filtered.map((p) => <window.ProductCard key={p.id} product={p} onOpen={onOpen} />)}
      </div>

      {/* Subscribe CTA */}
      {window.Subscribe && <window.Subscribe />}
    </div>
  );
};

window.Shop = Shop;