// pages-shop.jsx — Hero variants, Home, Shop (search), product card, sticker decorations

function StickerDecor({ variant }) {
  if (variant === 'home') {
    return (
      <>
        <span className="deco-sticker ember" style={{ top: 70, right: 80, transform: 'rotate(8deg)' }}>★ NEW ★</span>
        <span className="deco-sticker bone" style={{ top: 30, left: 200, transform: 'rotate(-6deg)', fontSize: 12 }}>NO MARKUP</span>
      </>);

  }
  return null;
}

/* ---- Hero variants ---- */
function HeroPoster({ onShop }) {
  return (
    <section className="hero-poster-tiles">
      <div className="hp-left bg-grain">
        <span className="eyebrow">Native blend · Tyendinaga · Anon ship</span>
        <h1 style={{ fontSize: "65px" }}>Cheap<br />Cartons.<br />No B.S.<br />No markup.</h1>
        <p className="lead">Real native tobacco. Shipped plain-packed from on-reserve. At your door in 2–4 business days. No ID at delivery.</p>
        <div className="cta-row">
          <button className="btn btn-primary btn-lg" onClick={onShop}>Shop cartons</button>
          <button className="btn btn-ink btn-lg" onClick={onShop}>How it works</button>
        </div>
      </div>
      <div className="hp-right-stack">
        <div className="hp-tv">
          <span className="tv-tape hp-tv-tape">★ AS SEEN ON TV ★</span>
          <div className="tv-screen tv-screen-mini">
            <div className="tv-noise"></div>
            <div className="tv-scanlines"></div>
            <button className="tv-play" aria-label="Play commercial">
              <svg viewBox="0 0 24 24" width="32" height="32" fill="currentColor"><path d="M8 5v14l11-7z" /></svg>
            </button>
            <div className="tv-chrome">
              <span className="tv-rec">● REC</span>
              <span className="tv-time">00:00:30</span>
            </div>
            <div className="tv-caption">"PUT THAT CORNER STORE OUT OF BUSINESS"</div>
            <div className="tv-bottom">
              <span>CH 04 · MAD SMOKES TV</span>
              <span>NTSC · TYE-NDG</span>
            </div>
          </div>
        </div>
        <div className="hp-skull bg-grain hp-comic">
          <img className="hp-comic-img" src="assets/hero-skull-king.png" alt="" />
        </div>
      </div>
    </section>);

}

function HeroFlat({ onShop }) {
  return (
    <section className="hero-flat">
      <div className="left">
        <span className="t-eyebrow">Native blend · Tyendinaga</span>
        <h1 style={{ marginTop: 14 }}>Cartons.<br />Pouches.<br />No markup.</h1>
        <p style={{ maxWidth: 420, marginTop: 16, fontSize: 15, lineHeight: 1.55, color: 'var(--smoke-500)' }}>
          Real native tobacco shipped from on-reserve. Plain-packed, anonymous, 2–4 business days.
        </p>
        <div style={{ display: 'flex', gap: 12, marginTop: 24 }}>
          <button className="btn btn-primary btn-lg" onClick={onShop}>Shop cartons</button>
          <button className="btn" style={{ background: 'var(--ink)', color: 'var(--bone)', borderColor: 'var(--ink)' }} onClick={onShop}>FAQ</button>
        </div>
      </div>
      <div className="right">
        <div className="stack-img">
          <div className="product-tile"><img src="assets/skull-icon.png" alt="" /></div>
          <div className="product-tile" style={{ background: 'var(--acid)' }}><img src="assets/skull-icon.png" alt="" /></div>
          <div className="product-tile" style={{ background: 'var(--ink)' }}><img src="assets/skull-icon.png" alt="" style={{ filter: 'invert(1)' }} /></div>
          <div className="product-tile"><img src="assets/skull-icon.png" alt="" /></div>
        </div>
      </div>
    </section>);

}

function HeroMascot({ onShop }) {
  return (
    <section className="hero-mascot bg-grain">
      <div style={{ paddingBottom: 56 }}>
        <span className="t-eyebrow">Native blend · Tyendinaga</span>
        <h1 style={{ marginTop: 16 }}>Mad<br />Smokes.</h1>
        <p className="lead">No markup. No middleman. Real native tobacco at on-reserve prices, shipped plain-packed straight to you.</p>
        <div style={{ display: 'flex', gap: 12 }}>
          <button className="btn btn-primary btn-lg" onClick={onShop}>Shop cartons</button>
          <button className="btn btn-acid-outline btn-lg" onClick={onShop}>Read the FAQ</button>
        </div>
      </div>
      <img src="assets/skull-icon.png" alt="" className="skull-big wiggle" style={{ animation: 'smokeWiggle 5s ease-in-out infinite' }} />
    </section>);

}

/* ---- Product card ---- */
function ProductCard({ p, onAdd, onOpen, dense }) {
  const handleAdd = (e) => {
    e.stopPropagation();
    if (p.stock === 'out') { onOpen(p); return; }
    const rect = e.currentTarget.getBoundingClientRect();
    if (window.smokePuff) window.smokePuff(rect.left + rect.width / 2, rect.top + rect.height / 2);
    onAdd(p);
  };
  return (
    <div className={"card card-link product"} onClick={() => onOpen(p)}>
      <div className="img">
        {p.tag && <span className={`tag tag-${p.tag}`}>{p.tagLabel}</span>}
        <img
          src={p.image_url || 'assets/skull-icon.png'}
          alt={p.name}
          loading="lazy"
          decoding="async"
          style={p.image_url ? {width:'92%', height:'92%', objectFit:'contain', opacity:1} : undefined}
        />
      </div>
      <div className="name">{p.name}</div>
      <div className="meta">{p.brand} · {p.blend} · {p.size}</div>
      <div className="strength">
        STR
        <span className="bars">
          {[1, 2, 3, 4, 5].map((i) => <span key={i} className={i <= p.strength ? 'on' : ''} />)}
        </span>
        <span style={{ marginLeft: 8 }}>TAR {p.tar}</span>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 12 }}>
        <div>
          <div className="price">
            ${p.price.toFixed(2)} <span className="ccy">CAD</span>
            {p.oldPrice && p.oldPrice > p.price && (
              <span style={{fontSize:13,color:'var(--smoke-400)',textDecoration:'line-through',marginLeft:8,fontWeight:400}}>
                ${p.oldPrice.toFixed(2)}
              </span>
            )}
          </div>
          <div className="pack-info">${p.packPrice.toFixed(2)}/pack · {p.packs} packs</div>
        </div>
        <button className="btn btn-primary" style={{ padding: '8px 14px', fontSize: 11 }}
        onClick={handleAdd}>{p.stock === 'out' ? 'Notify' : 'Add'}</button>
      </div>
    </div>);

}

function ProductRow({ p, onAdd, onOpen }) {
  const handleAdd = (e) => {
    e.stopPropagation();
    const rect = e.currentTarget.getBoundingClientRect();
    if (window.smokePuff) window.smokePuff(rect.left + rect.width / 2, rect.top + rect.height / 2);
    onAdd(p);
  };
  return (
    <div className="product card-link" onClick={() => onOpen(p)}>
      <div className="img">
        <img
          src={p.image_url || 'assets/skull-icon.png'}
          alt={p.name}
          loading="lazy"
          decoding="async"
          style={p.image_url ? {width:'92%', height:'92%', objectFit:'contain', opacity:1} : undefined}
        />
      </div>
      <div>
        <div className="name">{p.name}</div>
        <div className="meta">{p.brand} · {p.blend} · {p.tar} tar · {p.nicotine} nic</div>
        <div className="strength">
          STR <span className="bars">{[1, 2, 3, 4, 5].map((i) => <span key={i} className={i <= p.strength ? 'on' : ''} />)}</span>
        </div>
      </div>
      <div style={{ textAlign: 'right' }}>
        <div className="price">${p.price.toFixed(2)} CAD</div>
        <div className="pack-info">${p.packPrice.toFixed(2)}/pack</div>
      </div>
      <button className="btn btn-primary" disabled={p.stock === 'out'} onClick={handleAdd}>
        {p.stock === 'out' ? 'Notify' : 'Add to cart'}
      </button>
    </div>);

}

/* ---- Home page ---- */
function Home({ heroVariant, onShop, onOpen, onAdd, onOpenPost, density }) {
  const HeroComp = heroVariant === 'flat' ? HeroFlat : heroVariant === 'mascot' ? HeroMascot : HeroPoster;
  const all = window.PRODUCTS;
  const cols = density === 3 ? 3 : 4;
  const top = all.slice(0, cols);
  const more = all.slice(cols, cols + 4);
  const lights = all.filter((p) => p.blend === 'Light' || p.blend === 'Menthol').slice(0, 4);
  const fullFlavor = all.filter((p) => p.blend === 'Full Flavor').slice(0, 4);
  const deal = all.find((p) => p.price <= 32) || all[0];
  return (
    <>
      <HeroComp onShop={onShop} />

      <div className="poster-band ember">
        <div className="marquee">
          <span>★ FREE SHIP OVER $200</span><span>★ ANON DELIVERY</span><span>★ NO ID NEEDED</span><span>★ TYENDINAGA → YOUR DOOR</span><span>★ 2–4 BIZ DAYS</span>
          <span>★ FREE SHIP OVER $200</span><span>★ ANON DELIVERY</span><span>★ NO ID NEEDED</span><span>★ TYENDINAGA → YOUR DOOR</span><span>★ 2–4 BIZ DAYS</span>
        </div>
      </div>

      <div className="section-head" style={{ position: 'relative' }}>
        <div>
          <span className="sticker-tag">★ Top Sellers</span>
          <h2>Cartons<br />that move.</h2>
        </div>
        <a className="link" onClick={onShop}>See all {window.PRODUCTS.length} →</a>
      </div>
      <div className={density === 3 ? "grid-3" : "grid-4"}>
        {top.map((p) => <ProductCard key={p.sku} p={p} onAdd={onAdd} onOpen={onOpen} />)}
      </div>

      {/* Deal of the week — single big sticker card */}
      <div className="deal-strip">
        <div className="deal-left">
          <span className="sticker-tag" style={{ background: 'var(--ember)', color: 'var(--bone)', alignSelf: 'flex-start' }}>★ Deal of the week</span>
          <div className="deal-pricerow">
            <h2 className="deal-headline">${deal.price.toFixed(0)}<span>/carton</span></h2>
            <span className="deal-was">Corner store: $80</span>
          </div>
          <p className="deal-blurb">
            <strong>{deal.name}.</strong>
            {deal.blurb}
          </p>
          <div className="deal-meta">
            <span><i data-lucide="package"></i> {deal.count} sticks</span>
            <span><i data-lucide="leaf"></i> {deal.blend}</span>
            <span><i data-lucide="map-pin"></i> Tyendinaga</span>
          </div>
          <div style={{ marginTop: 14, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            <button className="btn btn-primary" onClick={() => onAdd(deal)}>Add carton — ${deal.price.toFixed(2)}</button>
            <button className="btn btn-ghost-bone" onClick={() => onOpen(deal)}>Details</button>
          </div>
        </div>
        <div className="deal-right">
          <div className="deal-stamp">★ THIS<br />WEEK<br />ONLY ★</div>
          <img src="assets/skull-icon.png" alt="" className="deal-skull" />
        </div>
      </div>

      {/* More cartons */}
      {more.length > 0 &&
      <>
          <div className="section-head">
            <div>
              <span className="sticker-tag" style={{ background: 'var(--ink)', color: 'var(--acid)', borderColor: 'var(--acid)' }}>★ More to load up</span>
              <h2>Stock the<br />drawer.</h2>
            </div>
            <a className="link" onClick={onShop}>Browse all →</a>
          </div>
          <div className={density === 3 ? "grid-3" : "grid-4"}>
            {more.map((p) => <ProductCard key={p.sku} p={p} onAdd={onAdd} onOpen={onOpen} />)}
          </div>
        </>
      }

      <div className="comic-strip-section">
        <div className="comic-strip-head">
          <span className="sticker-tag" style={{ background: 'var(--ember)', color: 'var(--bone)' }}>★ Issue #04</span>
          <h2 className="comic-strip-title">From rez<br/>to your door.</h2>
          <p className="comic-strip-blurb">
            Four panels. No filler. Here's exactly what happens between you hitting <em>Add to cart</em> and a plain box landing on your porch.
          </p>
          <div className="comic-strip-meta">
            <span><strong>01.</strong> Stocked</span>
            <span><strong>02.</strong> Packed</span>
            <span><strong>03.</strong> Shipped</span>
            <span><strong>04.</strong> Delivered</span>
          </div>
        </div>
        <div className="comic-strip-frame">
          <span className="comic-strip-stamp">★ NO ID ★ NO NAME ★ NO B.S. ★</span>
          <span className="comic-strip-corner">PG-MAD</span>
          <img src="assets/comic-strip.png" alt="Mad Smokes comic strip — stocked, packed, shipped, delivered" />
          <div className="comic-strip-tape comic-strip-tape-tl"></div>
          <div className="comic-strip-tape comic-strip-tape-br"></div>
        </div>
      </div>

      <div className="wordmark-strip">
        <div className="row">
          <span>MAD</span><span className="star">✱</span><span>SMOKES</span><span className="star">★</span>
          <span>MAD</span><span className="star">✱</span><span>SMOKES</span><span className="star">★</span>
          <span>MAD</span><span className="star">✱</span><span>SMOKES</span><span className="star">★</span>
          <span>MAD</span><span className="star">✱</span><span>SMOKES</span><span className="star">★</span>
        </div>
      </div>

      {/* Lights & Menthols */}
      {lights.length > 0 &&
      <>
          <div className="section-head">
            <div>
              <span className="sticker-tag" style={{ background: 'var(--bone)', color: 'var(--ink)' }}>★ Cool side</span>
              <h2>Lights<br />&amp; menthols.</h2>
            </div>
            <a className="link" onClick={onShop}>Filter shop →</a>
          </div>
          <div className={density === 3 ? "grid-3" : "grid-4"}>
            {lights.map((p) => <ProductCard key={p.sku} p={p} onAdd={onAdd} onOpen={onOpen} />)}
          </div>
        </>
      }

      <div className="section-head">
        <div>
          <span className="sticker-tag" style={{ background: 'var(--ember)', color: 'var(--bone)' }}>★ Pillars</span>
          <h2>Why we're<br />cheaper.</h2>
        </div>
      </div>
      <div className="pillars">
        <div className="pillar">
          <span className="num">01</span>
          <h3>On reserve.</h3>
          <p>We ship out of Tyendinaga Mohawk Territory under indigenous tax exemptions. That's where the savings come from. Not a discount — the actual price.</p>
        </div>
        <div className="pillar">
          <span className="num">02</span>
          <h3>No middleman.</h3>
          <p>You order from us, we ship. Nobody else takes a cut. The carton you'd pay $80 for at a corner store costs $30 here.</p>
        </div>
        <div className="pillar">
          <span className="num">03</span>
          <h3>Anonymous ship.</h3>
          <p>Plain box, no markings, no signature, no ID. Canada Post tracking emailed within 24h. Easy.</p>
        </div>
      </div>

      <div className="poster-band bone">
        <div className="marquee">
          <span>★ DK</span><span>★ PUTTERS</span><span>★ SAGO</span><span>★ NATIVE</span><span>★ SWEET CAP</span>
          <span>★ DK</span><span>★ PUTTERS</span><span>★ SAGO</span><span>★ NATIVE</span><span>★ SWEET CAP</span>
        </div>
      </div>

      <div className="section-head">
        <div>
          <span className="sticker-tag">★ The lineup</span>
          <h2>Shop<br />by brand.</h2>
        </div>
        <a className="link" onClick={onShop}>All brands →</a>
      </div>
      <div className="brand-strip">
        {['DK', 'Putters', 'Sago', 'Native', 'Sweet Caporal', '+'].map((b) =>
        <div key={b} className="brand-card" onClick={onShop}>
            {b}
            {b !== '+' && <span className="count">{window.PRODUCTS.filter((p) => p.brand === b).length || '—'} skus</span>}
            {b === '+' && <span className="count">more soon</span>}
          </div>
        )}
      </div>

      {/* Full flavor lineup */}
      {fullFlavor.length > 0 &&
      <>
          <div className="section-head">
            <div>
              <span className="sticker-tag">★ Heavy side</span>
              <h2>Full flavor<br />lineup.</h2>
            </div>
            <a className="link" onClick={onShop}>See the rack →</a>
          </div>
          <div className={density === 3 ? "grid-3" : "grid-4"}>
            {fullFlavor.map((p) => <ProductCard key={p.sku} p={p} onAdd={onAdd} onOpen={onOpen} />)}
          </div>
        </>
      }

      <div className="promo-strip">
        <div>
          <h3>★ Free ship over $200.</h3>
          <p>Get 6 cartons or more and we cover Canada Post Expedited.</p>
        </div>
        <button className="btn btn-primary btn-lg" onClick={onShop}>Stock up</button>
      </div>

      {/* TV Commercial section */}
      <div className="tv-section">
        <div className="tv-left">
          <div className="tv-screen">
            <div className="tv-noise"></div>
            <div className="tv-scanlines"></div>
            <button className="tv-play" aria-label="Play commercial">
              <svg viewBox="0 0 24 24" width="42" height="42" fill="currentColor"><path d="M8 5v14l11-7z" /></svg>
            </button>
            <div className="tv-chrome">
              <span className="tv-rec">● REC</span>
              <span className="tv-time">00:00:30</span>
            </div>
            <div className="tv-caption">"PUT THAT CORNER STORE OUT OF BUSINESS"</div>
            <div className="tv-bottom">
              <span>CH 04 · MAD SMOKES TV</span>
              <span>NTSC · TYE-NDG</span>
            </div>
          </div>
          <span className="tv-tape">★ AS SEEN ON TV ★</span>
        </div>
        <div className="tv-right">
          <span className="sticker-tag" style={{ background: 'var(--ember)', color: 'var(--bone)', alignSelf: 'flex-start' }}>★ New spot · 30 sec</span>
          <h2 className="tv-headline">Watch our<br />latest TV<br />commercial.</h2>
          <p className="tv-blurb">
            We rolled a 30-second spot in a basement in Belleville. No agency. No focus group. Just a skull, a carton, and a guy yelling about how much you're getting fleeced at the gas station. It rips.
          </p>
          <ul className="tv-bullets">
            <li><span>★</span> Filmed in one take, two cigarettes</li>
            <li><span>★</span> Banned by three regional networks</li>
            <li><span>★</span> Approved by every customer who's seen it</li>
          </ul>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 22 }}>
            <button className="btn btn-primary btn-lg">▶ Play the spot</button>
            <button className="btn btn-ink btn-lg">Behind the scenes</button>
          </div>
        </div>
      </div>

      {/* Blog section */}
      <div className="section-head">
        <div>
          <span className="sticker-tag" style={{ background: 'var(--bone)', color: 'var(--ink)' }}>★ The dispatch</span>
          <h2>Stories from<br />the rez.</h2>
        </div>
        <a className="link" onClick={onShop}>Read all posts →</a>
      </div>
      <div className="blog-grid">
        {(window.BLOG_POSTS || []).slice(0, 3).map((post, idx) => {
          const tcls = post.thumbKind === 'quote' ? '2' : post.thumbKind === 'stack' ? '3' : '1';
          const catStyle = post.catColor === 'blood' ? { background: 'var(--blood)', color: 'var(--bone)' }
            : post.catColor === 'ink' ? { background: 'var(--ink)', color: 'var(--acid)' }
            : {};
          return (
            <article
              key={post.slug}
              className={`blog-card ${idx === 0 ? 'blog-feature' : ''} blog-card-clickable`}
              onClick={() => onOpenPost && onOpenPost(post)}
            >
              <div className={`blog-thumb blog-thumb-${tcls}`}>
                <span className="blog-date">{post.date}</span>
                <span className="blog-cat" style={catStyle}>★ {post.cat}</span>
                {post.thumbKind === 'price' && (
                  <div className="blog-graphic">
                    <span className="blog-num">$72</span>
                    <span className="blog-arrow">→</span>
                    <span className="blog-num blog-num-acid">$30</span>
                  </div>
                )}
                {post.thumbKind === 'quote' && (
                  <div className="blog-quote">"Plain box.<br />No name."</div>
                )}
                {post.thumbKind === 'stack' && (
                  <div className="blog-stack"><span>DK</span><span>SAGO</span><span>PUTTERS</span></div>
                )}
              </div>
              <div className="blog-body">
                <span className="blog-readtime">{post.readTime}</span>
                <h3 className="blog-title">{post.title}</h3>
                {idx === 0 && <p>{post.deck}</p>}
                {idx === 0 && <span className="blog-author">— {post.author}</span>}
              </div>
            </article>
          );
        })}
      </div>

      {/* Newsletter signup */}
      <NewsletterBlock />
    </>);

}

function NewsletterBlock() {
  const [email, setEmail] = React.useState('');
  const [status, setStatus] = React.useState('idle'); // idle | sending | success | error
  const [message, setMessage] = React.useState('');

  const submit = async (e) => {
    e.preventDefault();
    if (!email.trim()) return;
    setStatus('sending'); setMessage('');
    try {
      await window.api.post('/newsletter/subscribe', { email: email.trim() });
      setStatus('success');
      setMessage('★ You\'re on the list. Watch for restock alerts.');
      setEmail('');
    } catch (err) {
      setStatus('error');
      setMessage(err.message || 'Failed to subscribe. Try again.');
    }
  };

  return (
    <div className="newsletter">
      <div className="news-stripes"></div>
      <div className="news-inner">
        <div className="news-stamp">★ JOIN THE LIST ★</div>
        <h2 className="news-headline">Get the<br />good mail.</h2>
        <p className="news-sub">
          Restock alerts, secret coupon codes, and one (1) bad joke per week.<br />
          No spam. No ID. Unsubscribe with a single click.
        </p>
        <form className="news-form" onSubmit={submit}>
          <input
            type="email"
            required
            placeholder="your@email.ca"
            aria-label="Email address"
            value={email}
            onChange={(e)=>setEmail(e.target.value)}
            disabled={status === 'sending' || status === 'success'}
          />
          <button type="submit" className="btn btn-primary btn-lg" disabled={status === 'sending' || status === 'success'}>
            {status === 'sending' ? 'Signing up…' : status === 'success' ? '✓ Done' : 'Sign me up →'}
          </button>
        </form>
        {message && (
          <p style={{
            fontSize: 12, marginTop: 12, fontFamily: 'var(--font-mono)', fontWeight: 700,
            color: status === 'success' ? 'var(--acid)' : 'var(--ember)'
          }}>{message}</p>
        )}
        <div className="news-meta">
          <span>★ Weekly drops</span>
          <span>★ 1 email / week</span>
          <span>★ No corporate BS</span>
        </div>
        <img src="assets/skull-icon.png" alt="" className="news-skull-l" />
        <img src="assets/skull-icon.png" alt="" className="news-skull-r" />
      </div>
    </div>
  );
}

/* ---- Shop ---- */
function Shop({ onAdd, onOpen, density }) {
  const [q, setQ] = React.useState('');
  const list = window.PRODUCTS.filter((p) =>
  !q.trim() || (p.name + ' ' + p.brand + ' ' + p.blend + ' ' + p.tagLabel).toLowerCase().includes(q.toLowerCase())
  );
  const isList = density === 'list';
  return (
    <>
      <h1 className="page-title" style={{ marginTop: 36 }}>All <em>cartons</em>.</h1>
      <p className="page-sub">Search live by name, brand, or blend. {window.PRODUCTS.length} SKUs in stock.</p>

      <div className="shop-toolbar">
        <div className="search-bar">
          <i data-lucide="search" style={{ color: 'var(--smoke-400)' }}></i>
          <input autoFocus placeholder="Search 'menthol', 'putters', 'lights'…" value={q} onChange={(e) => setQ(e.target.value)} />
          {q && <button className="icon-btn" onClick={() => setQ('')} style={{ color: 'var(--smoke-400)' }}><i data-lucide="x"></i></button>}
          <span className="key">⌘K</span>
        </div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-3)' }}>
          {list.length} of {window.PRODUCTS.length}
        </div>
      </div>

      {list.length === 0 &&
      <div style={{ textAlign: 'center', padding: 80, opacity: .7 }}>
          <img src="assets/skull-icon.png" alt="" style={{ height: 120, opacity: .4, transform: 'rotate(20deg)' }} />
          <p style={{ marginTop: 16 }}>No matches. Try "putters" or "menthol".</p>
        </div>
      }

      {!isList && list.length > 0 &&
      <div className={density === 3 ? "grid-3" : "grid-4"}>
          {list.map((p) => <ProductCard key={p.sku} p={p} onAdd={onAdd} onOpen={onOpen} />)}
        </div>
      }
      {isList && list.length > 0 &&
      <div className="shop-list">
          {list.map((p) => <ProductRow key={p.sku} p={p} onAdd={onAdd} onOpen={onOpen} />)}
        </div>
      }
    </>);

}

window.Home = Home;
window.Shop = Shop;
window.ProductCard = ProductCard;
window.HeroPoster = HeroPoster;
window.HeroFlat = HeroFlat;
window.HeroMascot = HeroMascot;