/* global React, Icon, ProductArt, ProductCard, Stars, fmtMXN, TrustRow */
// Pages: Home, Shop (PLP), Product (PDP)

const { useState, useEffect, useMemo } = React;

// ============ HOME ============
function PageHome({ navigate, ctx, onAddToCart, onToggleFav, onQuickView, favs, density, cardVariant, hero, dark, accent }) {
  const data = window.BK_DATA;
  const featured = data.PRODUCTS.filter((p) => p.badge === 'top' || p.badge === 'new').slice(0, 8);
  const sale = data.PRODUCTS.filter((p) => p.badge === 'sale').slice(0, 4);

  // Hero variants
  const renderHero = () => {
    if (hero === 'split') return <HeroSplit navigate={navigate} dark={dark} />;
    if (hero === 'flat') return <HeroFlat navigate={navigate} dark={dark} />;
    return <HeroEditorial navigate={navigate} dark={dark} />;
  };

  return (
    <>
      {renderHero()}

      <div className="wrap">
        <TrustRow />
      </div>

      {/* CATEGORIES */}
      <section className="section">
        <div className="wrap">
          <div className="section-head">
            <div>
              <div className="eyebrow">Catálogo · 7 categorías</div>
              <h2>Equípate</h2>
            </div>
            <p className="lead">De casco a llanta. Marcas oficiales, garantía real y atención de mecánicos que ruedan.</p>
          </div>
          <div className="cats">
            {data.CATEGORIES.map((c, i) =>
            <a key={c.slug} className="cat" onClick={() => navigate('shop', { cat: c.slug })} style={{ cursor: 'pointer' }}>
                <CatArt cat={c} large={i === 0} accent={accent} />
                <div className="cat-label">
                  <h3>{c.name}</h3>
                  <span className="cat-num">0{i + 1} / 0{data.CATEGORIES.length}</span>
                </div>
              </a>
            )}
          </div>
        </div>
      </section>

      {/* FEATURED — destacados */}
      <section className="section tight" style={{ background: 'var(--bg-2)' }}>
        <div className="wrap">
          <div className="section-head">
            <div>
              <div className="eyebrow">Selección del taller</div>
              <h2>Destacados</h2>
            </div>
            <a className="btn ghost" onClick={() => navigate('shop')}>Ver toda la tienda →</a>
          </div>
          <div className="card-grid" style={{ '--cols': density }}>
            {featured.slice(0, density * 2).map((p) =>
            <ProductCard key={p.id} product={p} variant={cardVariant} dark={dark} accent={accent}
            isFav={favs.has(p.id)}
            onAddToCart={onAddToCart}
            onToggleFav={onToggleFav}
            onQuickView={onQuickView} />

            )}
          </div>
        </div>
      </section>

      {/* SALE STRIPE */}
      <section className="section">
        <div className="wrap">
          <div className="sale-banner">
            <div className="sale-banner-bg">
              {Array.from({ length: 14 }).map((_, i) =>
              <span key={i} className="sale-banner-tick">OFERTAS · BLACK WEEK · −35%</span>
              )}
            </div>
            <div className="sale-banner-inner">
              <div>
                <div className="eyebrow" style={{ color: '#ffffff90' }}>Black week · termina en 3d 14h</div>
                <h2 className="display" style={{ fontSize: 'clamp(48px, 6vw, 88px)', lineHeight: .9, margin: '10px 0 0', color: 'var(--bone)' }}>
                  OFERTAS <span style={{ color: 'var(--blood)' }}>EN VIVO</span>
                </h2>
              </div>
              <div className="sale-banner-meta">
                <p style={{ color: '#ffffffb0', maxWidth: 380, margin: 0 }}>Equipo, refacciones y movilidad eléctrica con hasta <strong style={{ color: 'var(--bone)' }}>−35%</strong>. Solo esta semana.</p>
                <button className="btn primary lg" onClick={() => navigate('shop', { sale: 1 })}>Ver ofertas →</button>
              </div>
            </div>
          </div>
          <div className="card-grid divided" style={{ '--cols': 4, marginTop: 24 }}>
            {sale.slice(0, 4).map((p) =>
            <ProductCard key={p.id} product={p} variant={cardVariant} dark={dark} accent={accent}
            isFav={favs.has(p.id)}
            onAddToCart={onAddToCart}
            onToggleFav={onToggleFav}
            onQuickView={onQuickView} />

            )}
          </div>
        </div>
      </section>

      {/* BRAND STRIP */}
      <div className="wrap">
        <div className="brand-strip">
          {window.BK_DATA.BRANDS.slice(0, 6).map((b) => <div key={b}>{b}</div>)}
        </div>
      </div>

      {/* EDITORIAL */}
      <section className="section">
        <div className="wrap">
          <div className="section-head">
            <div><div className="eyebrow">Bitácora</div><h2>Lecturas de rodada</h2></div>
            <a className="btn ghost" onClick={() => navigate('blog')}>Ir al blog →</a>
          </div>
          <div className="grid-3">
            {window.BK_DATA.BLOG.slice(0, 3).map((post) =>
            <article key={post.id} style={{ cursor: 'pointer' }} onClick={() => navigate('blog')}>
                <div style={{ aspectRatio: '16/10', background: 'var(--surface)', border: '1px solid var(--line)', position: 'relative', overflow: 'hidden' }}>
                  <BlogArt seed={post.id} accent={accent} image={post.image} />
                  <span className="pcard-badge blood" style={{ position: 'absolute', top: 12, left: 12 }}>{post.cat}</span>
                </div>
                <div className="mt-16">
                  <div className="eyebrow">{post.date} · {post.read}</div>
                  <h3 className="display" style={{ fontSize: 24, lineHeight: 1, margin: '8px 0', textTransform: 'none', letterSpacing: '-0.005em' }}>{post.title}</h3>
                  <p style={{ color: 'var(--text-muted)', fontSize: 14 }}>{post.excerpt}</p>
                </div>
              </article>
            )}
          </div>
        </div>
      </section>

      {/* NEWSLETTER */}
      <section style={{ background: 'var(--ink)', color: 'var(--bone)', padding: '80px 0' }}>
        <div className="wrap split-2" style={{ gap: 60, alignItems: 'center' }}>
          <div>
            <div className="eyebrow" style={{ color: '#ffffff80' }}>BK PIT NEWS</div>
            <h2 className="display" style={{ fontSize: 48, lineHeight: .95, margin: '12px 0', color: 'var(--bone)' }}>Estrenos, drops<br />y descuentos<br /><span style={{ color: 'var(--blood)' }}>antes que nadie.</span></h2>
            <p style={{ color: '#ffffffa0', maxWidth: 360 }}>Una vez al mes. Cero spam. Cancelas cuando quieras.</p>
          </div>
          <form onSubmit={(e) => e.preventDefault()} style={{ display: 'flex', gap: 0, alignItems: 'stretch' }}>
            <input className="field" placeholder="tu@email.com" style={{ flex: 1, background: 'transparent', borderColor: '#ffffff30', color: 'var(--bone)', borderRadius: 0, padding: '18px 16px' }} />
            <button className="btn primary lg" style={{ borderRadius: 0 }}>Suscribirme</button>
          </form>
        </div>
      </section>
    </>);

}

// ---- Hero variants
function HeroEditorial({ navigate, dark }) {
  return (
    <section className="hero">
      <div className="hero-art">
        <svg width="100%" height="100%" viewBox="0 0 1440 700" preserveAspectRatio="xMidYMid slice">
          <defs>
            <pattern id="hgrid" width="80" height="80" patternUnits="userSpaceOnUse">
              <path d="M80 0H0V80" fill="none" stroke="#ffffff" strokeOpacity=".05" strokeWidth="1" />
            </pattern>
          </defs>
          <rect width="1440" height="700" fill="url(#hgrid)" />
          {/* big enso */}
          <circle cx="1180" cy="350" r="240" fill="none" stroke="#E60023" strokeWidth="18" strokeDasharray="800 60" transform="rotate(-25 1180 350)" opacity=".85" />
          <circle cx="1180" cy="350" r="200" fill="none" stroke="#E60023" strokeWidth="3" strokeDasharray="20 8" transform="rotate(35 1180 350)" opacity=".4" />
          {/* speed lines */}
          <g stroke="#ffffff" strokeOpacity=".08" strokeWidth="1">
            {[100, 160, 220, 280, 340, 400, 460, 520, 580, 640].map((y) => <line key={y} x1="0" y1={y} x2="600" y2={y} />)}
          </g>
        </svg>
      </div>
      <div className="wrap hero-content">
        <div className="hero-tag">● BK MOTO · TEMPORADA 26</div>
        <h1>
          ROAD<br />
          <span className="blood">READY.</span><br />
          <span className="stroke">RACE TUNED.</span>
        </h1>
        <p className="hero-sub">Cascos, equipo y refacciones para quienes no piden permiso. Tu garage, nuestro turno.</p>
        <div className="hero-cta">
          <button className="btn primary lg" onClick={() => navigate('shop')}>Comprar ahora</button>
          <button className="btn ghost lg" style={{ borderColor: '#ffffff40', color: 'var(--bone)' }} onClick={() => navigate('shop', { cat: 'cascos' })}>Cascos →</button>
        </div>
        <div className="hero-stats">
          <div><div className="s-num">+12K</div><div className="s-lab">Riders activos</div></div>
          <div><div className="s-num">14</div><div className="s-lab">Marcas oficiales</div></div>
          <div><div className="s-num">2014</div><div className="s-lab">Desde</div></div>
          <div><div className="s-num">98%</div><div className="s-lab">Rating servicio</div></div>
        </div>
      </div>
      <div className="hero-side hero-rider">
        <img src="assets/hero-rider.png" alt="Rider con casco Shoei GT-Pro" />
        <div className="hero-rider-label">
          <div className="hero-rider-tag">● HERO PIECE</div>
          <div className="hero-rider-name">SHOEI <span style={{ color: 'var(--blood)' }}>GT-PRO</span></div>
          <div className="hero-rider-price">$26,500 MXN</div>
        </div>
      </div>
      <div className="hero-spec">
        MODEL · BKM-26 / GT-PRO<br />
        REF · /collection/2026<br />
        IN STOCK · 47 UNITS
      </div>
    </section>);

}

function HeroSplit({ navigate, dark }) {
  return (
    <section className="hero split">
      <div className="hero-art">
        <svg width="100%" height="100%" viewBox="0 0 1440 560" preserveAspectRatio="xMidYMid slice">
          <rect width="1440" height="560" fill="#0A0A0A" />
          <g stroke="#ffffff" strokeOpacity=".05">
            {[60, 120, 180, 240, 300, 360, 420, 480, 540].map((y) => <line key={y} x1="0" y1={y} x2="1440" y2={y} />)}
          </g>
          {/* diagonal blood slash */}
          <path d="M0 380 L1440 80 L1440 140 L0 440 Z" fill="#E60023" />
        </svg>
      </div>
      <div className="wrap hero-content">
        <div className="hero-tag">● COLECCIÓN 2026</div>
        <h1>SOLO PARA<br />LOS QUE<br /><span className="blood">RUEDAN.</span></h1>
        <p className="hero-sub">Garage abierto. Equipo oficial. Mecánica honesta. BK MOTO es la tienda en la que confía la calle.</p>
        <div className="hero-cta">
          <button className="btn primary lg" onClick={() => navigate('shop')}>Explorar →</button>
        </div>
      </div>
      <div className="hero-side">
        <svg viewBox="0 0 300 300">
          <g transform="translate(30 30)">
            {/* jacket icon big */}
            <g fill="none" stroke="#F4F1EA" strokeWidth="4">
              <path d="M70 50 L100 40 L120 55 L140 40 L170 50 L185 80 L175 90 L175 195 L65 195 L65 90 L55 80 Z" fill="#181818" />
              <path d="M120 55 L120 195" />
              <rect x="76" y="120" width="22" height="35" />
              <rect x="142" y="120" width="22" height="35" />
            </g>
            <circle cx="220" cy="60" r="30" fill="none" stroke="#E60023" strokeWidth="4" strokeDasharray="100 12" transform="rotate(-30 220 60)" />
          </g>
        </svg>
      </div>
    </section>);

}

function HeroFlat({ navigate, dark }) {
  return (
    <section className="hero flat" style={{ minHeight: 520 }}>
      <div className="wrap hero-content">
        <div className="hero-tag" style={{ color: 'var(--blood)' }}>● TEMPORADA 26</div>
        <h1>HELMETS<br /><span className="stroke">AND</span><br /><span className="blood">PARTS.</span></h1>
        <p className="hero-sub">Equipo, refacciones y movilidad eléctrica. Las marcas que ya conoces — al precio que esperabas.</p>
        <div className="hero-cta">
          <button className="btn primary lg" onClick={() => navigate('shop')}>Comprar ahora</button>
          <button className="btn ghost lg" onClick={() => navigate('about')}>Sobre BK Moto</button>
        </div>
      </div>
      <div className="hero-side" style={{ border: '1px solid var(--line)', background: 'var(--surface)' }}>
        <svg viewBox="0 0 400 400">
          <g transform="translate(80 60)">
            <path d="M40 200 Q40 60 200 60 Q360 60 360 200 L360 270 L40 270 Z" fill="var(--bg-2)" stroke="var(--text)" strokeWidth="3" />
            <path d="M70 200 Q70 90 200 90 Q330 90 330 200 L330 260 L70 260 Z" fill="var(--bg)" stroke="var(--text)" strokeWidth="2" />
            <path d="M90 220 Q90 130 200 130 Q310 130 310 220 L310 240 L90 240 Z" fill="var(--blood)" />
          </g>
        </svg>
      </div>
    </section>);

}

// Category card art
function CatArt({ cat, large, accent }) {
  const Glyph = window.PROD_GLYPHS?.[cat.icon];
  if (cat.image) {
    return (
      <>
        <img src={cat.image} alt={cat.name}
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
        
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.05) 55%, rgba(0,0,0,.7) 100%)',
          pointerEvents: 'none'
        }} />
        <svg viewBox="0 0 100 100" style={{ position: 'absolute', top: 14, right: 14, width: large ? 56 : 44, height: large ? 56 : 44, pointerEvents: 'none' }}>
          <circle cx="50" cy="50" r="42" fill="none" stroke={accent || '#E60023'} strokeWidth="6" strokeDasharray="160 20" transform="rotate(-30 50 50)" />
        </svg>
      </>);

  }
  return (
    <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice" className="cat-art">
      <rect width="400" height="300" fill="var(--surface)" />
      <g stroke="var(--text)" strokeOpacity=".06">
        {[60, 120, 180, 240].map((y) => <line key={y} x1="0" y1={y} x2="400" y2={y} />)}
        {[80, 160, 240, 320].map((x) => <line key={x} y1="0" x1={x} y2="300" x2={x} />)}
      </g>
      <circle cx="320" cy="60" r="24" fill="none" stroke={accent || '#E60023'} strokeWidth="3" strokeDasharray="80 10" />
      {Glyph && <g transform={`translate(${large ? 70 : 60} ${large ? 30 : 30}) scale(${large ? 1.0 : 0.85})`} style={{ color: 'var(--text)' }}>{Glyph('var(--text)')}</g>}
    </svg>);

}

function BlogArt({ seed, accent, image }) {
  if (image) {
    return (
      <>
        <img src={image} alt=""
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
        
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.45) 100%)',
          pointerEvents: 'none'
        }} />
      </>);

  }
  const k = seed.charCodeAt(1) || 3;
  return (
    <svg viewBox="0 0 400 250" preserveAspectRatio="xMidYMid slice" width="100%" height="100%">
      <rect width="400" height="250" fill="var(--bg-2)" />
      <g stroke="var(--text)" strokeOpacity=".08" strokeWidth="1">
        {[50, 100, 150, 200].map((y) => <line key={y} x1="0" y1={y} x2="400" y2={y} />)}
      </g>
      <circle cx={80 + k * 20} cy={130} r={70 + k * 5} fill="none" stroke={accent || '#E60023'} strokeWidth="4" strokeDasharray={`${120 + k * 6} ${10 + k}`} transform={`rotate(${k * 30} ${80 + k * 20} 130)`} />
      <rect x={220} y={60 + k * 4} width={120} height={90 + k * 4} fill="var(--text)" opacity=".06" />
      <text x="20" y="232" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="var(--text)" opacity=".5" letterSpacing="2">REF · BLG-{seed.toUpperCase()}</text>
    </svg>);

}

// ============ Product list row ============
function ProductRow({ product, isFav, onAddToCart, onToggleFav, onQuickView, navigate, dark, accent }) {
  const off = product.oldPrice ? Math.round((1 - product.price / product.oldPrice) * 100) : 0;
  const goToProduct = () => navigate('product', { id: product.id });
  const hasSize = product.sizes && product.sizes.length > 1 && !['Unica','Universal','Set'].includes(product.sizes[0]);
  const stockLabel = product.stock > 5 ? 'En stock' : product.stock > 0 ? `Sólo queda${product.stock===1?'':'n'} ${product.stock} en stock.` : 'Agotado';
  const stockClass = product.stock > 5 ? 'stock' : product.stock > 0 ? 'low' : 'out';
  const msiAmount = Math.round(product.price / 12);
  const freeShip = product.price >= 2000;

  return (
    <article className="product-row">
      <div className="product-row-thumb" onClick={goToProduct}>
        {product.badge && (
          <div className="pcard-badges">
            {product.badge === 'sale' && <span className="pcard-badge blood">−{off}%</span>}
            {product.badge === 'new' && <span className="pcard-badge">Nuevo</span>}
            {product.badge === 'top' && <span className="pcard-badge blood">Top</span>}
          </div>
        )}
        <ProductArt product={product} dark={dark} accent={accent}/>
        <button className={`product-row-fav ${isFav?'on':''}`} onClick={(e)=>{ e.stopPropagation(); onToggleFav(product.id); }} aria-label={isFav?'Quitar de wishlist':'Agregar a wishlist'}>
          {isFav ? Icon.heartFilled({width:14, height:14}) : Icon.heart({width:14, height:14})}
        </button>
      </div>

      <div className="product-row-body">
        <div className="product-row-main" onClick={goToProduct}>
          <div className="brand">{product.brand} · {product.id.toUpperCase()}</div>
          <h3 className="name">{product.name}</h3>
          <div className="product-row-stars">
            <Stars value={product.rating} reviews={product.reviews}/>
          </div>

          <div className="product-row-price-block">
            <div className="product-row-price">
              <span className="now">{fmtMXN(product.price)}</span>
              {product.oldPrice && <span className="was">{fmtMXN(product.oldPrice)}</span>}
              {off > 0 && <span className="off">−{off}% off</span>}
            </div>
            <div className="product-row-msi mono">{fmtMXN(msiAmount)} x 12 meses sin intereses</div>
          </div>

          <div className="product-row-info">
            {freeShip
              ? <div className="product-row-ship">Entrega <strong>GRATIS</strong> · 2-4 días hábiles</div>
              : <div className="product-row-ship">Envío {fmtMXN(199)} · 2-4 días hábiles</div>
            }
            <div className={`product-row-stock ${stockClass}`}>{product.stock===0 ? 'Agotado' : stockLabel}</div>
          </div>

          <div className="product-row-tags">
            {product.tags.slice(0,3).map(t => <span key={t} className="product-row-tag">{t}</span>)}
          </div>
        </div>

        <div className="product-row-actions">
          <button className="btn primary lg block" onClick={(e)=>onAddToCart(product, e.currentTarget)} disabled={product.stock===0}>
            {Icon.cart()} {product.stock===0 ? 'Sin stock' : 'Agregar al carrito'}
          </button>
          <button className="btn ghost sm block" onClick={()=>onQuickView(product)}>Vista rápida</button>
        </div>
      </div>
    </article>
  );
}

// ============ SHOP / PLP ============
function PageShop({ ctx, navigate, onAddToCart, onToggleFav, onQuickView, favs, density, setDensity, cardVariant, dark, accent, route }) {
  const data = window.BK_DATA;
  const allProducts = data.PRODUCTS;
  const initialCat = route.cat || '';
  const initialSale = !!route.sale;

  const [selectedCats, setSelectedCats] = useState(initialCat ? [initialCat] : []);
  const [selectedBrands, setSelectedBrands] = useState([]);
  const [onSale, setOnSale] = useState(initialSale);
  const [inStock, setInStock] = useState(false);
  const [priceMin, setPriceMin] = useState(0);
  const [priceMax, setPriceMax] = useState(50000);
  const [sort, setSort] = useState(route.sort || 'featured');
  const [filtersOpen, setFiltersOpen] = useState(false);
  const activeFilterCount = selectedCats.length + selectedBrands.length + (onSale?1:0) + (inStock?1:0) + ((priceMin>0 || priceMax<50000)?1:0);

  useEffect(() => {
    setSelectedCats(route.cat ? [route.cat] : []);
    setOnSale(!!route.sale);
    setSort(route.sort || 'featured');
  }, [route.cat, route.sale, route.sort]);

  const filtered = useMemo(() => {
    let list = allProducts.filter((p) => {
      if (selectedCats.length && !selectedCats.includes(p.cat)) return false;
      if (selectedBrands.length && !selectedBrands.includes(p.brand)) return false;
      if (onSale && !p.oldPrice) return false;
      if (inStock && p.stock < 1) return false;
      if (p.price < priceMin || p.price > priceMax) return false;
      return true;
    });
    if (sort === 'price-asc') list = [...list].sort((a, b) => a.price - b.price);
    if (sort === 'price-desc') list = [...list].sort((a, b) => b.price - a.price);
    if (sort === 'rating') list = [...list].sort((a, b) => b.rating - a.rating);
    if (sort === 'new') list = [...list].sort((a, b) => (b.badge === 'new' ? 1 : 0) - (a.badge === 'new' ? 1 : 0));
    return list;
  }, [allProducts, selectedCats, selectedBrands, onSale, inStock, priceMin, priceMax, sort]);

  const toggleArr = (set, val, setter) => setter(set.includes(val) ? set.filter((v) => v !== val) : [...set, val]);
  const clearAll = () => {setSelectedCats([]);setSelectedBrands([]);setOnSale(false);setInStock(false);setPriceMin(0);setPriceMax(50000);};

  // Build counts
  const catCounts = useMemo(() => Object.fromEntries(data.CATEGORIES.map((c) => [c.slug, allProducts.filter((p) => p.cat === c.slug).length])), [allProducts]);
  const brandCounts = useMemo(() => Object.fromEntries(data.BRANDS.map((b) => [b, allProducts.filter((p) => p.brand === b).length])), [allProducts]);
  const visibleBrands = data.BRANDS.filter((b) => brandCounts[b] > 0);

  const currentCat = selectedCats.length === 1 ? data.CATEGORIES.find((c) => c.slug === selectedCats[0]) : null;

  return (
    <>
      {/* Hero PLP */}
      <section style={{ borderBottom: '1px solid var(--line)', padding: '48px 0 40px', background: 'var(--bg)' }}>
        <div className="wrap">
          <div className="mono" style={{ color: 'var(--text-muted)', marginBottom: 14 }}>
            <a onClick={() => navigate('home')} style={{ cursor: 'pointer' }}>Inicio</a>
            <span style={{ margin: '0 8px' }}>/</span>
            <a onClick={() => navigate('shop')} style={{ cursor: 'pointer' }}>Tienda</a>
            {currentCat && <><span style={{ margin: '0 8px' }}>/</span><span style={{ color: 'var(--text)' }}>{currentCat.name}</span></>}
            {onSale && !currentCat && <><span style={{ margin: '0 8px' }}>/</span><span style={{ color: 'var(--blood)' }}>Ofertas</span></>}
          </div>
          <div className="between" style={{ alignItems: 'flex-end' }}>
            <div>
              <h1 className="display" style={{ fontSize: 'clamp(48px, 7vw, 96px)', margin: 0, lineHeight: .9 }}>
                {currentCat ? currentCat.name : onSale ? 'OFERTAS' : 'TIENDA COMPLETA'}
              </h1>
              <p className="lead mt-8" style={{ color: 'var(--text-muted)', maxWidth: 520 }}>
                {currentCat ? currentCat.subtitle : 'Equípate. Repara. Rueda. Todo lo que necesitas para sobre dos ruedas.'}
              </p>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div className="display" style={{ fontSize: 48, color: 'var(--blood)' }}>{filtered.length}</div>
              <div className="mono" style={{ color: 'var(--text-muted)', fontSize: 11 }}>productos disponibles</div>
            </div>
          </div>
        </div>
      </section>

      <div className="wrap section" style={{ paddingTop: 32 }}>
        <div className="shop-layout">
          {/* FILTERS */}
          <aside className={`filters ${filtersOpen?'open':''}`}>
            <button className="filters-toggle" onClick={()=>setFiltersOpen(o=>!o)} aria-expanded={filtersOpen}>
              <span className="row" style={{gap:8}}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 5h18M6 12h12M10 19h4"/></svg>
                <span>Filtros</span>
                {activeFilterCount > 0 && <span className="filters-count">{activeFilterCount}</span>}
              </span>
              <span className="filters-chev" aria-hidden="true">{filtersOpen ? '−' : '+'}</span>
            </button>
            <div className="filters-body">
              <div className="between" style={{ marginBottom: 8 }}>
                <h4 className="mono" style={{ margin: 0, fontSize: 11 }}>Filtros</h4>
                <a className="mono" style={{ fontSize: 10, cursor: 'pointer', color: 'var(--blood)' }} onClick={clearAll}>Limpiar</a>
              </div>

            <div className="filter-block">
              <h5>Categoría</h5>
              {data.CATEGORIES.map((c) =>
              <label key={c.slug} className="checkbox">
                  <input type="checkbox" checked={selectedCats.includes(c.slug)} onChange={() => toggleArr(selectedCats, c.slug, setSelectedCats)} />
                  <span>{c.name}</span>
                  <span className="count">{catCounts[c.slug]}</span>
                </label>
              )}
            </div>

            <div className="filter-block">
              <h5>Marca</h5>
              <div style={{ maxHeight: 240, overflow: 'auto' }}>
                {visibleBrands.map((b) =>
                <label key={b} className="checkbox">
                    <input type="checkbox" checked={selectedBrands.includes(b)} onChange={() => toggleArr(selectedBrands, b, setSelectedBrands)} />
                    <span>{b}</span>
                    <span className="count">{brandCounts[b]}</span>
                  </label>
                )}
              </div>
            </div>

            <div className="filter-block">
              <h5>Precio (MXN)</h5>
              <div className="price-range">
                <div className="price-range-inputs">
                  <input className="field" value={priceMin} onChange={(e) => setPriceMin(+e.target.value || 0)} />
                  <span style={{ color: 'var(--text-muted)' }}>–</span>
                  <input className="field" value={priceMax} onChange={(e) => setPriceMax(+e.target.value || 0)} />
                </div>
                <input type="range" min="0" max="50000" step="500" value={priceMax} onChange={(e) => setPriceMax(+e.target.value)} style={{ accentColor: 'var(--blood)' }} />
              </div>
            </div>

            <div className="filter-block">
              <h5>Disponibilidad</h5>
              <label className="checkbox"><input type="checkbox" checked={onSale} onChange={(e) => setOnSale(e.target.checked)} /><span>En oferta</span></label>
              <label className="checkbox"><input type="checkbox" checked={inStock} onChange={(e) => setInStock(e.target.checked)} /><span>En stock</span></label>
            </div>
            </div>
          </aside>

          {/* RESULTS */}
          <div data-comment-anchor="2b7ee4a967-div-530-11">
            <div className="between" style={{ marginBottom: 24, paddingBottom: 16, borderBottom: '1px solid var(--line)' }}>
              <div className="row" style={{ gap: 14, flexWrap: 'wrap' }}>
                {selectedCats.map((c) =>
                <span key={c} className="tg" style={{ padding: '6px 10px', background: 'var(--ink)', color: 'var(--bone)', fontFamily: 'var(--f-mono)', fontSize: 11, letterSpacing: '0.12em' }}>
                    {data.CATEGORIES.find((x) => x.slug === c)?.name} <a onClick={() => toggleArr(selectedCats, c, setSelectedCats)} style={{ cursor: 'pointer', marginLeft: 6 }}>×</a>
                  </span>
                )}
                {selectedBrands.map((b) =>
                <span key={b} className="tg" style={{ padding: '6px 10px', background: 'var(--ink)', color: 'var(--bone)', fontFamily: 'var(--f-mono)', fontSize: 11, letterSpacing: '0.12em' }}>
                    {b} <a onClick={() => toggleArr(selectedBrands, b, setSelectedBrands)} style={{ cursor: 'pointer', marginLeft: 6 }}>×</a>
                  </span>
                )}
              </div>
              <div className="row" style={{ gap: 14 }} data-comment-anchor="53bfe27243-div-544-15">
                <select className="field" style={{ padding: '8px 12px', width: 'auto' }} value={sort} onChange={(e) => setSort(e.target.value)}>
                  <option value="featured">Destacados</option>
                  <option value="new">Nuevos</option>
                  <option value="price-asc">Precio: menor a mayor</option>
                  <option value="price-desc">Precio: mayor a menor</option>
                  <option value="rating">Mejor calificados</option>
                </select>
              </div>
            </div>

            {filtered.length === 0 ?
            <div style={{ padding: '80px 0', textAlign: 'center' }}>
                <h3 className="display" style={{ fontSize: 36 }}>NADA POR AQUÍ</h3>
                <p style={{ color: 'var(--text-muted)' }}>Ajusta los filtros para ver más productos.</p>
                <button className="btn ghost mt-16" onClick={clearAll}>Limpiar filtros</button>
              </div> :
            <div className="product-list">
              {filtered.map((p) =>
                <ProductRow key={p.id} product={p} dark={dark} accent={accent}
                  isFav={favs.has(p.id)}
                  onAddToCart={onAddToCart}
                  onToggleFav={onToggleFav}
                  onQuickView={onQuickView}
                  navigate={navigate} />
              )}
            </div>
            }

            {filtered.length > 0 &&
            <div className="row" style={{ justifyContent: 'center', gap: 8, marginTop: 48 }}>
                {[1, 2, 3, 4].map((n) =>
              <button key={n} style={{ width: 40, height: 40, border: '1px solid var(--line)', fontFamily: 'var(--f-mono)', fontSize: 12, background: n === 1 ? 'var(--ink)' : 'transparent', color: n === 1 ? 'var(--bone)' : 'var(--text)' }}>{n}</button>
              )}
                <button style={{ width: 40, height: 40, border: '1px solid var(--line)' }}>{Icon.chev()}</button>
              </div>
            }
          </div>
        </div>
      </div>
    </>);

}

// ============ PRODUCT DETAIL ============
function PageProduct({ route, navigate, onAddToCart, onToggleFav, onQuickView, favs, cardVariant, density, dark, accent }) {
  const data = window.BK_DATA;
  const product = data.PRODUCTS.find((p) => p.id === route.id) || data.PRODUCTS[0];
  const [size, setSize] = useState(product.sizes[Math.min(1, product.sizes.length - 1)]);
  const [color, setColor] = useState(product.colors[0]);
  const [qty, setQty] = useState(1);
  const [tab, setTab] = useState('desc');
  const [imgIdx, setImgIdx] = useState(0);
  const related = data.PRODUCTS.filter((p) => p.cat === product.cat && p.id !== product.id).slice(0, 4);

  useEffect(() => {setSize(product.sizes[Math.min(1, product.sizes.length - 1)]);setColor(product.colors[0]);setImgIdx(0);}, [product.id]);
  const isFav = favs.has(product.id);
  const hasSize = product.sizes[0] !== 'Unica' && product.sizes[0] !== 'Universal' && product.sizes[0] !== 'Set';

  return (
    <>
      <div className="wrap">
        <div className="mono" style={{ color: 'var(--text-muted)', padding: '24px 0 0' }}>
          <a onClick={() => navigate('home')} style={{ cursor: 'pointer' }}>Inicio</a>
          <span style={{ margin: '0 8px' }}>/</span>
          <a onClick={() => navigate('shop')} style={{ cursor: 'pointer' }}>Tienda</a>
          <span style={{ margin: '0 8px' }}>/</span>
          <a onClick={() => navigate('shop', { cat: product.cat })} style={{ cursor: 'pointer' }}>{data.CATEGORIES.find((c) => c.slug === product.cat).name}</a>
          <span style={{ margin: '0 8px' }}>/</span>
          <span style={{ color: 'var(--text)' }}>{product.name}</span>
        </div>

        <div className="pdp">
          <div className="pdp-gallery">
            <div className="pdp-main">
              {product.badge &&
              <div className="pcard-badges" style={{ top: 16, left: 16 }}>
                  {product.badge === 'sale' && <span className="pcard-badge blood">−{Math.round((1 - product.price / product.oldPrice) * 100)}%</span>}
                  {product.badge === 'new' && <span className="pcard-badge">Nuevo</span>}
                  {product.badge === 'top' && <span className="pcard-badge blood">Top</span>}
                </div>
              }
              <ProductArt product={product} dark={dark} accent={accent} />
            </div>
            <div className="pdp-thumbs">
              {[0, 1, 2, 3].map((i) =>
              <button key={i} className={`pdp-thumb ${i === imgIdx ? 'on' : ''}`} onClick={() => setImgIdx(i)}>
                  <ProductArt product={product} dark={dark} accent={accent} />
                </button>
              )}
            </div>
          </div>

          <div>
            <div className="eyebrow">{product.brand} · SKU {product.id.toUpperCase()}</div>
            <h1 className="pdp-title">{product.name}</h1>
            <div className="pdp-meta mt-16">
              <Stars value={product.rating} reviews={product.reviews} />
              <span className="mono" style={{ color: 'var(--text-muted)' }}>{product.reviews} reseñas</span>
              <span className="mono" style={{ color: 'var(--ok)' }}>● {product.stock > 5 ? 'En stock' : `Solo ${product.stock} disp.`}</span>
            </div>
            <div className="pdp-price">
              <span className="now">{fmtMXN(product.price)}</span>
              {product.oldPrice && <span className="was">{fmtMXN(product.oldPrice)}</span>}
              {product.oldPrice && <span className="off">−{Math.round((1 - product.price / product.oldPrice) * 100)}% off</span>}
            </div>
            <div className="mono" style={{ color: 'var(--text-muted)', fontSize: 11 }}>{Math.round(product.price / 12)} MXN/mes a 12 MSI</div>

            <div className="divider" />

            <div style={{ display: 'grid', gap: 18 }}>
              <div>
                <div className="field-label">Color · <span style={{ color: 'var(--text)' }}>{['Negro', 'Rojo', 'Blanco', 'Azul', 'Café', 'Otro'][product.colors.indexOf(color)] || 'Negro'}</span></div>
                <div className="swatch-row">
                  {product.colors.map((c) =>
                  <button key={c} className={`swatch ${color === c ? 'on' : ''}`} style={{ background: c }} onClick={() => setColor(c)} />
                  )}
                </div>
              </div>

              {hasSize &&
              <div>
                  <div className="between">
                    <div className="field-label">Talla · <span style={{ color: 'var(--text)' }}>{size}</span></div>
                    <a className="mono" style={{ fontSize: 10, cursor: 'pointer', textDecoration: 'underline' }}>Guía de tallas</a>
                  </div>
                  <div className="chips">
                    {product.sizes.map((s) =>
                  <button key={s} className={`chip ${size === s ? 'on' : ''}`} onClick={() => setSize(s)}>{s}</button>
                  )}
                  </div>
                </div>
              }

              <div>
                <div className="field-label">Cantidad</div>
                <div className="row" style={{ gap: 14 }}>
                  <div className="qty">
                    <button onClick={() => setQty(Math.max(1, qty - 1))}>−</button>
                    <span className="val">{qty}</span>
                    <button onClick={() => setQty(qty + 1)}>+</button>
                  </div>
                  <span className="mono" style={{ color: 'var(--text-muted)', fontSize: 11 }}>Máx. {product.stock} por pedido</span>
                </div>
              </div>
            </div>

            <div className="row mt-32" style={{ gap: 10 }}>
              <button className="btn primary block lg" onClick={(e) => onAddToCart(product, e.currentTarget, { size, color, qty })}>
                {Icon.cart()} Agregar al carrito
              </button>
              <button className={`pcard-fav ${isFav ? 'on' : ''}`} style={{ position: 'static', width: 54, height: 54 }} onClick={() => onToggleFav(product.id)}>
                {isFav ? Icon.heartFilled() : Icon.heart()}
              </button>
            </div>
            <button className="btn ghost block lg mt-8" onClick={() => navigate('checkout')}>Comprar ahora →</button>

            <div className="grid-3 mt-24" style={{ gap: 12, fontSize: 12 }}>
              <div className="row" style={{ gap: 8 }}>{Icon.truck()} <span>Envío 2–4 días</span></div>
              <div className="row" style={{ gap: 8 }}>{Icon.shield()} <span>Garantía 2 años</span></div>
              <div className="row" style={{ gap: 8 }}>{Icon.bolt()} <span>12 MSI</span></div>
            </div>

            <div className="tag-line mt-24">
              {product.tags.map((t) => <span key={t} className="tg">{t}</span>)}
            </div>
          </div>
        </div>

        {/* TABS — desc / specs / reviews */}
        <section className="section tight">
          <div className="tabs">
            <a className={`tab ${tab === 'desc' ? 'on' : ''}`} onClick={() => setTab('desc')}>Descripción</a>
            <a className={`tab ${tab === 'specs' ? 'on' : ''}`} onClick={() => setTab('specs')}>Especificaciones</a>
            <a className={`tab ${tab === 'reviews' ? 'on' : ''}`} onClick={() => setTab('reviews')}>Reseñas ({product.reviews})</a>
            <a className={`tab ${tab === 'shipping' ? 'on' : ''}`} onClick={() => setTab('shipping')}>Envío y devolución</a>
          </div>
          <div style={{ padding: '32px 0', maxWidth: 780 }}>
            {tab === 'desc' && <div>
              <p style={{ fontSize: 16, lineHeight: 1.6 }}>{product.description}</p>
              <p style={{ fontSize: 16, lineHeight: 1.6 }} className="mt-16">Cada unidad pasa por inspección antes de salir del taller. Si algo no embona, te lo cambiamos. Si algo se rompe, hacemos válida la garantía con el fabricante.</p>
              <h3 className="display mt-32" style={{ fontSize: 24, textTransform: 'uppercase' }}>Lo que viene en la caja</h3>
              <ul style={{ paddingLeft: 18, lineHeight: 1.8 }}>
                <li>{product.name} ({color === '#0A0A0A' ? 'Negro' : 'Color seleccionado'}{hasSize ? `, talla ${size}` : ''})</li>
                <li>Manual de uso y mantenimiento</li>
                <li>Certificado de garantía oficial {product.brand}</li>
                {product.cat === 'cascos' && <li>Funda de tela y pinlock anti-empañante</li>}
                {product.cat === 'herramientas' && <li>Maletín rígido de transporte</li>}
              </ul>
            </div>}
            {tab === 'specs' && <table className="spec-table">
              <tbody>{product.specs.map(([k, v]) => <tr key={k}><td>{k}</td><td>{v}</td></tr>)}</tbody>
            </table>}
            {tab === 'reviews' && <div>
              <div className="row" style={{ gap: 40, marginBottom: 32 }}>
                <div>
                  <div className="display" style={{ fontSize: 56, lineHeight: 1, color: 'var(--blood)' }}>{product.rating.toFixed(1)}</div>
                  <Stars value={product.rating} reviews={product.reviews} />
                </div>
                <div style={{ flex: 1, maxWidth: 360 }}>
                  {[5, 4, 3, 2, 1].map((n) =>
                  <div key={n} className="row" style={{ gap: 10, fontSize: 12, marginBottom: 4 }}>
                      <span className="mono" style={{ width: 24 }}>{n}★</span>
                      <div style={{ flex: 1, height: 6, background: 'var(--bg-2)' }}>
                        <div style={{ width: n === 5 ? '72%' : n === 4 ? '18%' : n === 3 ? '5%' : n === 2 ? '3%' : '2%', height: '100%', background: 'var(--blood)' }} />
                      </div>
                      <span className="mono" style={{ width: 40, textAlign: 'right', color: 'var(--text-muted)' }}>{n === 5 ? '72%' : n === 4 ? '18%' : n === 3 ? '5%' : n === 2 ? '3%' : '2%'}</span>
                    </div>
                  )}
                </div>
              </div>
              <div style={{ display: 'grid', gap: 24 }}>
                {data.REVIEWS.map((r, i) =>
                <div key={i} style={{ padding: '20px 0', borderTop: '1px solid var(--line)' }}>
                    <div className="between">
                      <div>
                        <strong>{r.name}</strong>
                        {r.verified && <span className="mono" style={{ marginLeft: 10, fontSize: 10, color: 'var(--ok)' }}>● COMPRA VERIFICADA</span>}
                      </div>
                      <span className="mono" style={{ fontSize: 10, color: 'var(--text-muted)' }}>{r.date}</span>
                    </div>
                    <Stars value={r.rating} reviews={0} showCount={false} />
                    <p style={{ marginTop: 10, fontSize: 14 }}>{r.body}</p>
                  </div>
                )}
              </div>
            </div>}
            {tab === 'shipping' && <div>
              <h3 className="display" style={{ fontSize: 24 }}>Envío</h3>
              <p>Envíos a toda la república mexicana en 2–4 días hábiles vía Estafeta, DHL o Paquetexpress. Gratis en pedidos +$2,000 MXN.</p>
              <h3 className="display mt-24" style={{ fontSize: 24 }}>Devoluciones</h3>
              <p>Tienes 30 días naturales para devolver tu compra sin usar y en su empaque original. El primer envío de devolución corre por nuestra cuenta.</p>
            </div>}
          </div>
        </section>

        {/* RELATED */}
        <section className="section tight">
          <div className="section-head">
            <div><div className="eyebrow">Sigue mirando</div><h2 style={{ fontSize: 40 }}>Relacionados</h2></div>
            <a className="btn ghost" onClick={() => navigate('shop', { cat: product.cat })}>Ver categoría →</a>
          </div>
          <div className="card-grid" style={{ '--cols': 4 }}>
            {related.map((p) =>
            <ProductCard key={p.id} product={p} variant={cardVariant} dark={dark} accent={accent}
            isFav={favs.has(p.id)}
            onAddToCart={onAddToCart}
            onToggleFav={onToggleFav}
            onQuickView={onQuickView} />

            )}
          </div>
        </section>
      </div>
    </>);

}

Object.assign(window, { PageHome, PageShop, PageProduct, HeroEditorial, HeroSplit, HeroFlat, CatArt, BlogArt, ProductRow });