// Home.jsx — landing: hero + featured drops + line teasers + guide/manifesto previews
const Home = ({ onShop, onProduct, onRoute }) => {
  const [products, setProducts] = React.useState([]);

  React.useEffect(() => { window.OBC_API.getAllProducts().then(setProducts); }, []);

  const lines = React.useMemo(() => window.OBC_GET_LINES(products), [products]);

  const featured = ['zero-day', 'exploit', 'social-engineer', 'wireless'].map((id) => products.find((p) => p.id === id)).filter(Boolean);

  return (
    <>
      <window.Hero onShop={onShop} onManifesto={() => onRoute('manifesto')} />

      {/* ============================== FEATURED DROPS ============================== */}
      <section style={{ padding: '64px 24px 32px', maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 22 }}>
          <h2 style={{ fontSize: 28, letterSpacing: '0.04em', textTransform: 'uppercase', fontWeight: 800, color: '#FFF', margin: 0 }}>{'>'} featured drops</h2>
          <span style={{ fontSize: 11, color: '#BFBFBF', letterSpacing: '0.2em' }}>// staff picks</span>
          <button onClick={onShop} style={{ marginLeft: 'auto', background: 'transparent', border: '1px solid #00FF41', color: '#00FF41', padding: '8px 14px', fontFamily: 'inherit', fontSize: 11, letterSpacing: '0.18em', cursor: 'pointer', borderRadius: 2 }}>
            ./view-all →
          </button>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(310px, 1fr))', gap: 16 }}>
          {featured.map((p) => (<window.ProductCard key={p.id} p={p} onOpen={onProduct} />))}
        </div>
      </section>

      {/* ============================== LINE TEASERS ============================== */}
      <section style={{ padding: '48px 24px', maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 22 }}>
          <h2 style={{ fontSize: 28, letterSpacing: '0.04em', textTransform: 'uppercase', fontWeight: 800, color: '#FFF', margin: 0 }}>{'>'} ls -la /lines</h2>
          <span style={{ fontSize: 11, color: '#BFBFBF', letterSpacing: '0.2em' }}>// {lines.length} directories, {products.length} files</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 16 }}>
          {lines.map((line) => {
            const count = products.filter((p) => p.line === line.id).length;
            return (
              <div key={line.id} onClick={onShop} style={{
                background: '#000', border: `1px solid ${line.color}55`,
                padding: 22, cursor: 'pointer',
                transition: 'border-color 120ms, box-shadow 120ms, transform 120ms',
              }}
              onMouseEnter={(e) => { e.currentTarget.style.borderColor = line.color; e.currentTarget.style.boxShadow = `0 0 24px ${line.color}33`; e.currentTarget.style.transform = 'translateY(-2px)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.borderColor = `${line.color}55`; e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.transform = 'translateY(0)'; }}
              >
                <div style={{ fontSize: 10, color: '#BFBFBF', letterSpacing: '0.22em' }}>drwxr-xr-x · {String(count).padStart(2,'0')} items</div>
                <div style={{ fontSize: 22, fontWeight: 800, color: line.color, letterSpacing: '0.04em', marginTop: 10, textTransform: 'uppercase' }}>{line.label}</div>
                <div style={{ fontSize: 11, color: '#E0E0E0', letterSpacing: '0.22em', marginTop: 8, fontWeight: 600 }}>// {line.sub}</div>
                <div style={{ marginTop: 18, fontSize: 11, color: line.color, letterSpacing: '0.18em' }}>cd ./{line.id} →</div>
              </div>
            );
          })}
        </div>
      </section>

      {/* ============================== MERCH TEASER ============================== */}
      {window.OBC_FLAGS && window.OBC_FLAGS.merch_enabled && (
        <section style={{ padding: '48px 24px', borderTop: '1px solid rgba(255,255,255,0.15)' }}>
          <div style={{ maxWidth: 1200, margin: '0 auto', textAlign: 'center' }}>
            <div style={{ fontSize: 13, letterSpacing: '0.3em', color: '#BFBFBF', marginBottom: 12 }}>// NEW SECTION</div>
            <h2 style={{ fontSize: 36, fontWeight: 800, letterSpacing: '0.06em', color: '#FFF', margin: '0 0 12px' }}>{'>'} MERCH</h2>
            <p style={{ color: '#BFBFBF', fontSize: 15, maxWidth: 600, margin: '0 auto 28px', lineHeight: 1.6 }}>
              gear for operators. rank patches, tier-gated exclusives, and apparel that survives reboots.
            </p>
            <button onClick={() => onRoute('merch')} style={{
              background: 'transparent', border: '1px solid #00FF41', color: '#00FF41',
              padding: '14px 32px', fontSize: 14, fontWeight: 700, letterSpacing: '0.2em',
              fontFamily: 'inherit', cursor: 'pointer',
            }}>
              [ BROWSE MERCH ]
            </button>
          </div>
        </section>
      )}

      {/* ============================== GUIDE + MANIFESTO PREVIEWS ============================== */}
      <section style={{ padding: '48px 24px 80px', maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
          <PreviewCard
            label="// /manifesto"
            title="WHY OPERATOR BREWING"
            body="we don't write tasting notes. we write compromise reports. we don't brew for adventurers. we brew for the people who stay wired in. coffee is the payload. you are the operator."
            cta="./read-manifesto"
            color="#00FF41"
            onClick={() => onRoute('manifesto')}
          />
          <PreviewCard
            label="// /brew-guide"
            title="BREW LIKE AN OPERATOR"
            body="grind, ratio, time, temp. for every method we ship: espresso, pourover, french press, aeropress, cold brew. runbook-style. no fluff."
            cta="./read-guide"
            color="#FF8C42"
            onClick={() => onRoute('guide')}
          />
        </div>
      </section>
    </>
  );
};

const PreviewCard = ({ label, title, body, cta, color, onClick }) => (
  <div onClick={onClick} style={{
    background: '#000', border: `1px solid ${color}55`, padding: 28, cursor: 'pointer',
    transition: 'border-color 120ms, box-shadow 120ms, transform 120ms',
  }}
  onMouseEnter={(e) => { e.currentTarget.style.borderColor = color; e.currentTarget.style.boxShadow = `0 0 32px ${color}33`; e.currentTarget.style.transform = 'translateY(-2px)'; }}
  onMouseLeave={(e) => { e.currentTarget.style.borderColor = `${color}55`; e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.transform = 'translateY(0)'; }}
  >
    <div style={{ fontSize: 11, color: '#BFBFBF', letterSpacing: '0.22em' }}>{label}</div>
    <div style={{ fontSize: 26, fontWeight: 800, color: color, letterSpacing: '0.02em', marginTop: 10, textTransform: 'uppercase' }}>{title}</div>
    <div style={{ marginTop: 14, fontSize: 14, color: '#E0E0E0', lineHeight: 1.7 }}>{body}</div>
    <div style={{ marginTop: 18, fontSize: 12, color: color, letterSpacing: '0.18em' }}>{'>'} {cta}</div>
  </div>
);

window.Home = Home;