// Top-level app. Holds page state + cart, wires up navigation.
function App() {
  const [page, setPage] = React.useState('home');
  const [filter, setFilter] = React.useState(null);
  const [selected, setSelected] = React.useState(null);
  const [cart, setCart] = React.useState([]);
  const [cartOpen, setCartOpen] = React.useState(false);

  const navigate = (p, opts = {}) => {
    setPage(p);
    if (opts.filter) setFilter(opts.filter);
    else if (p === 'shop' && !opts.filter) setFilter('All');
    window.scrollTo(0, 0);
  };

  const selectProduct = (product) => {
    setSelected(product);
    setPage('product');
    window.scrollTo(0, 0);
  };

  const addToCart = (item) => {
    setCart(prev => [...prev, item]);
    setCartOpen(true);
  };

  const removeItem = (idx) => setCart(prev => prev.filter((_, i) => i !== idx));

  return (
    <div data-screen-label="BlkSqrl Website" style={{ background: 'var(--wht)', minHeight: '100vh' }}>
      <Nav page={page} navigate={navigate} cartCount={cart.length} openCart={() => setCartOpen(true)} />

      {page === 'home' && (
        <>
          <Hero navigate={navigate} />
          <FeaturedRow products={window.BS_PRODUCTS.slice(0, 4)} onSelect={selectProduct} />
          <DcStripe />
        </>
      )}

      {page === 'shop' && (
        <ProductGrid
          products={window.BS_PRODUCTS}
          filter={filter}
          setFilter={setFilter}
          onSelect={selectProduct}
        />
      )}

      {page === 'product' && selected && (
        <ProductDetail product={selected} addToCart={addToCart} navigate={navigate} />
      )}

      {page === 'about' && <About />}

      <Footer />

      <CartDrawer
        open={cartOpen}
        items={cart}
        close={() => setCartOpen(false)}
        removeItem={removeItem}
        navigate={navigate}
      />
    </div>
  );
}

// Small home-page featured row — declared inline since it's only used here
function FeaturedRow({ products, onSelect }) {
  return (
    <section style={{ padding: '64px 48px', background: 'var(--wht)' }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 24 }}>
        <div>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--fg-3)', marginBottom: 6 }}>NEW THIS WEEK</div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 56, margin: 0, textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 0.95 }}>Fresh off the press.</h2>
        </div>
        <div style={{ fontSize: 13, color: 'var(--fg-3)', letterSpacing: '0.06em', textTransform: 'uppercase', cursor: 'pointer', borderBottom: '1.5px solid var(--blk)', color: 'var(--blk)', fontWeight: 700, paddingBottom: 2 }}>Shop all →</div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
        {products.map(p => <ProductCard key={p.id} product={p} onClick={() => onSelect(p)} />)}
      </div>
    </section>
  );
}

// Brand stripe between sections — cream block with a quote and a sticker
function DcStripe() {
  return (
    <section style={{
      background: 'var(--cream)', borderTop: '1px solid var(--blk)', borderBottom: '1px solid var(--blk)',
      padding: '72px 48px', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 56, alignItems: 'center',
    }}>
      <div>
        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--fg-3)', marginBottom: 18 }}>WHY BLACK SQUIRRELS?</div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 64, textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 0.95 }}>"DC's other<br/>native species."</div>
        <p style={{ marginTop: 18, maxWidth: 540, fontSize: 16, lineHeight: 1.55, color: 'var(--fg-2)' }}>
          The Smithsonian let a handful loose in the 1890s. They didn't leave. We named the brand after them — local, stubborn, and look good in black.
        </p>
      </div>
      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
        <img src="../../assets/logo-sticker.png" alt="" style={{ width: 240, transform: 'rotate(-6deg)', filter: 'drop-shadow(0 12px 24px rgba(0,0,0,0.18))' }} />
      </div>
    </section>
  );
}

window.App = App;