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

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

  const featured = ['exploit', 'zero-day', 'social-engineer'].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' }}>// 4 directories, 18 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>

      {/* ============================== 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;