// MobileHome.jsx — mobile landing: compact hero, featured strip, line cards, stats
const MobileHome = ({ 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', 'rootkit']
    .map((id) => products.find((p) => p.id === id))
    .filter(Boolean);

  return (
    <div style={{ minHeight: '100vh', background: '#000', fontFamily: "'JetBrains Mono', monospace" }}>

      {/* ============================== COMPACT HERO ============================== */}
      <section style={{ padding: '48px 16px 36px', borderBottom: '1px solid rgba(255,255,255,0.1)' }}>
        <div style={{ fontSize: 10, color: '#00FF41', letterSpacing: '0.25em', marginBottom: 12 }}>
          $ whoami
        </div>
        <h1 style={{
          fontSize: 32, lineHeight: 0.95, letterSpacing: '0.02em',
          textTransform: 'uppercase', fontWeight: 800, color: '#FFF', margin: 0,
        }}>
          OPERATOR<br/>BREWING CO.
        </h1>
        <div style={{
          marginTop: 16, fontSize: 18, fontWeight: 800, letterSpacing: '0.06em',
          color: '#00FF41', textTransform: 'uppercase',
        }}>
          BREW. EXECUTE. DOMINATE.
        </div>
        <p style={{ marginTop: 14, color: '#B8B8B8', fontSize: 13, lineHeight: 1.6, maxWidth: 360 }}>
          coffee for operators. high quality beans. ethically sourced. carefully roasted.
        </p>
        <button
          onClick={() => onShop()}
          style={{
            marginTop: 20, width: '100%', background: '#00FF41', color: '#000',
            border: '1px solid #00FF41', padding: '16px', fontFamily: 'inherit',
            fontSize: 14, fontWeight: 800, letterSpacing: '0.2em', cursor: 'pointer',
            borderRadius: 2, minHeight: 52,
          }}
        >
          {'>'} ./shop
        </button>
      </section>

      {/* ============================== FEATURED DROPS — HORIZONTAL SCROLL ============================== */}
      <section style={{ padding: '28px 16px' }}>
        <div style={{
          display: 'flex', alignItems: 'baseline', gap: 10,
          marginBottom: 14,
        }}>
          <h2 style={{
            fontSize: 16, letterSpacing: '0.04em', textTransform: 'uppercase',
            fontWeight: 800, color: '#FFF', margin: 0,
          }}>
            {'>'} featured drops
          </h2>
          <span style={{ fontSize: 10, color: '#6E6E6E', letterSpacing: '0.2em' }}>// staff picks</span>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10,
        }}>
          {featured.map((p) => (
            <div
              key={p.id}
              onClick={() => onProduct(p)}
              style={{
                background: '#0A0A0A', border: `1px solid ${p.accent}55`,
                padding: 14, cursor: 'pointer',
                display: 'flex', flexDirection: 'column',
              }}
            >
              <div style={{
                width: 30, height: 30, border: `1px solid ${p.accent}`,
                color: p.accent, display: 'grid', placeItems: 'center',
                fontSize: 14, fontWeight: 800, marginBottom: 8,
              }}>
                {p.glyph}
              </div>
              <div style={{
                fontSize: 15, fontWeight: 800, color: p.accent,
                letterSpacing: '0.02em', textTransform: 'uppercase',
              }}>
                {p.name}
              </div>
              <div style={{
                fontSize: 9, color: '#B8B8B8', letterSpacing: '0.15em',
                marginTop: 5, textTransform: 'uppercase',
              }}>
                {p.roast}
              </div>
              <div style={{ flex: 1 }}></div>
              <div style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
                marginTop: 12, paddingTop: 8, borderTop: '1px dashed rgba(255,255,255,0.2)',
              }}>
                <span style={{ fontSize: 18, fontWeight: 800, color: '#FFF' }}>
                  ${p.price}
                </span>
                <span style={{
                  fontSize: 9, color: p.accent, letterSpacing: '0.12em', fontWeight: 700,
                }}>
                  {'>'} ./view
                </span>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ============================== PRODUCT LINES ============================== */}
      <section style={{ padding: '12px 16px 28px' }}>
        <div style={{
          display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 14,
        }}>
          <h2 style={{
            fontSize: 16, letterSpacing: '0.04em', textTransform: 'uppercase',
            fontWeight: 800, color: '#FFF', margin: 0,
          }}>
            {'>'} ls /lines
          </h2>
          <span style={{ fontSize: 10, color: '#6E6E6E', letterSpacing: '0.2em' }}>// 4 directories</span>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {lines.map((line) => {
            const count = products.filter((p) => p.line === line.id).length;
            return (
              <div
                key={line.id}
                onClick={() => onShop(line.id)}
                style={{
                  background: '#0A0A0A', border: `1px solid ${line.color}44`,
                  padding: '16px', cursor: 'pointer', minHeight: 44,
                  display: 'flex', alignItems: 'center', gap: 14,
                }}
              >
                <div style={{
                  width: 6, height: 40, background: line.color, borderRadius: 1, flexShrink: 0,
                }}></div>
                <div style={{ flex: 1 }}>
                  <div style={{
                    fontSize: 14, fontWeight: 800, color: line.color,
                    letterSpacing: '0.04em', textTransform: 'uppercase',
                  }}>
                    {line.label}
                  </div>
                  <div style={{
                    fontSize: 10, color: '#B8B8B8', letterSpacing: '0.18em', marginTop: 4,
                  }}>
                    // {line.sub} · {String(count).padStart(2, '0')} items
                  </div>
                </div>
                <div style={{
                  fontSize: 11, color: line.color, letterSpacing: '0.12em', flexShrink: 0,
                }}>
                  cd ./
                </div>
              </div>
            );
          })}
        </div>
      </section>

      {/* ============================== QUICK STATS ============================== */}
      <section style={{
        margin: '0 16px 28px', padding: 0,
        display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 1,
        background: 'rgba(255,255,255,0.1)', border: '1px solid rgba(255,255,255,0.1)',
      }}>
        {[
          { k: 'ROASTED FOR', v: 'OPERATORS' },
          { k: 'BEANS', v: 'ARABICA' },
          { k: 'BATCH', v: 'SMALL' },
        ].map((x) => (
          <div key={x.k} style={{ background: '#000', padding: '14px 10px', textAlign: 'center' }}>
            <div style={{ fontSize: 8, letterSpacing: '0.22em', color: '#6E6E6E' }}>// {x.k}</div>
            <div style={{
              marginTop: 6, fontSize: 12, letterSpacing: '0.08em',
              color: '#00FF41', fontWeight: 700,
            }}>
              {x.v}
            </div>
          </div>
        ))}
      </section>

      {/* ============================== GUIDE + MANIFESTO LINKS ============================== */}
      <section style={{ padding: '0 16px 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        <div
          onClick={() => onRoute('manifesto')}
          style={{
            background: '#0A0A0A', border: '1px solid #00FF4144',
            padding: '16px', cursor: 'pointer', minHeight: 44,
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          }}
        >
          <div>
            <div style={{ fontSize: 13, fontWeight: 800, color: '#00FF41', letterSpacing: '0.04em' }}>WHY OPERATOR BREWING</div>
            <div style={{ fontSize: 10, color: '#6E6E6E', letterSpacing: '0.18em', marginTop: 4 }}>// /manifesto</div>
          </div>
          <span style={{ color: '#00FF41', fontSize: 12 }}>{'>'}</span>
        </div>
        <div
          onClick={() => onRoute('guide')}
          style={{
            background: '#0A0A0A', border: '1px solid #FF8C4244',
            padding: '16px', cursor: 'pointer', minHeight: 44,
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          }}
        >
          <div>
            <div style={{ fontSize: 13, fontWeight: 800, color: '#FF8C42', letterSpacing: '0.04em' }}>BREW LIKE AN OPERATOR</div>
            <div style={{ fontSize: 10, color: '#6E6E6E', letterSpacing: '0.18em', marginTop: 4 }}>// /brew-guide</div>
          </div>
          <span style={{ color: '#FF8C42', fontSize: 12 }}>{'>'}</span>
        </div>
      </section>
    </div>
  );
};

window.MobileHome = MobileHome;