// pages-routes.jsx — additional SEO-targeted page routes:
//   /brands/:slug     → BrandDetailPage
//   /shop/category/:blend → CategoryPage (filtered Shop)
//   /blog             → BlogIndexPage (list of all posts)

function BrandDetailPage({ slug, onAdd, onOpen, onShop }) {
  const products = (window.PRODUCTS || []).filter(p => {
    const ps = (p.brand_slug || '').toLowerCase();
    const ns = (p.brand || '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
    return ps === slug.toLowerCase() || ns === slug.toLowerCase();
  });

  const brand = products[0]?.brand || slug;

  if (!products.length) {
    return (
      <div style={{textAlign:'center', padding: 80}}>
        <h1 className="page-title">Brand <em>not found</em>.</h1>
        <p style={{color:'var(--smoke-400)', marginTop: 12}}>We don't carry that brand. Check the lineup instead.</p>
        <button className="btn btn-primary btn-lg" style={{marginTop: 24}} onClick={onShop}>All cartons</button>
      </div>
    );
  }

  const fullFlavor = products.filter(p => p.blend === 'Full Flavor');
  const lights    = products.filter(p => p.blend === 'Light' || p.blend === 'Ultra Light');
  const menthols  = products.filter(p => p.blend === 'Menthol');

  return (
    <>
      <nav style={{fontSize:12, fontFamily:'var(--font-mono)', color:'var(--smoke-400)', textTransform:'uppercase', letterSpacing:'.1em', marginTop: 20}}>
        <a href="/" onClick={(e)=>{e.preventDefault(); window.MS_navigate && window.MS_navigate('home');}} style={{color:'var(--smoke-400)'}}>Home</a>
        <span> / </span>
        <a href="/brands" onClick={(e)=>{e.preventDefault(); window.MS_navigate && window.MS_navigate('brands');}} style={{color:'var(--smoke-400)'}}>Brands</a>
        <span> / </span>
        <span style={{color:'var(--bone)'}}>{brand}</span>
      </nav>

      <h1 className="page-title" style={{marginTop: 24}}>{brand}.</h1>
      <p className="page-sub">{products.length} {products.length === 1 ? 'product' : 'products'} · Native blend, plain-packed from Tyendinaga Mohawk Territory.</p>

      <div className="grid-4" style={{marginTop: 32}}>
        {products.map(p => <ProductCard key={p.sku} p={p} onAdd={onAdd} onOpen={onOpen}/>)}
      </div>

      {/* Brand-bucket sections if there's enough variety */}
      {fullFlavor.length > 0 && lights.length > 0 && (
        <>
          {fullFlavor.length > 1 && (
            <>
              <div className="section-head" style={{marginTop: 56}}>
                <div><span className="sticker-tag">★ Heavy side</span><h2>Full flavor.</h2></div>
              </div>
              <div className="grid-4">{fullFlavor.map(p => <ProductCard key={p.sku} p={p} onAdd={onAdd} onOpen={onOpen}/>)}</div>
            </>
          )}
          {lights.length > 1 && (
            <>
              <div className="section-head" style={{marginTop: 56}}>
                <div><span className="sticker-tag" style={{background:'var(--bone)', color:'var(--ink)'}}>★ Easy daily</span><h2>Lights.</h2></div>
              </div>
              <div className="grid-4">{lights.map(p => <ProductCard key={p.sku} p={p} onAdd={onAdd} onOpen={onOpen}/>)}</div>
            </>
          )}
          {menthols.length > 1 && (
            <>
              <div className="section-head" style={{marginTop: 56}}>
                <div><span className="sticker-tag" style={{background:'var(--ember)', color:'var(--bone)'}}>★ Cold side</span><h2>Menthol.</h2></div>
              </div>
              <div className="grid-4">{menthols.map(p => <ProductCard key={p.sku} p={p} onAdd={onAdd} onOpen={onOpen}/>)}</div>
            </>
          )}
        </>
      )}
    </>
  );
}

function CategoryPage({ slug, onAdd, onOpen, onShop }) {
  const CATEGORIES = {
    'full-flavor':  { label: 'Full Flavor',  blend: 'full_flavor',  rawBlend: 'Full Flavor', blurb: 'Heaviest builds. Native tobacco at full delivery.' },
    'light':        { label: 'Light',        blend: 'light',        rawBlend: 'Light',       blurb: 'Lower-build cartons. Same body, easier draw.' },
    'ultra-light':  { label: 'Ultra Light',  blend: 'ultra_light',  rawBlend: 'Ultra Light', blurb: 'Lowest delivery in the lineup.' },
    'menthol':      { label: 'Menthol',      blend: 'menthol',      rawBlend: 'Menthol',     blurb: 'Cool menthol top. Frosted finish.' },
  };
  const meta = CATEGORIES[slug.toLowerCase()];

  if (!meta) {
    return (
      <div style={{textAlign:'center', padding: 80}}>
        <h1 className="page-title">Category <em>not found</em>.</h1>
        <button className="btn btn-primary btn-lg" style={{marginTop: 24}} onClick={onShop}>All cartons</button>
      </div>
    );
  }

  const products = (window.PRODUCTS || []).filter(p => p.blend === meta.rawBlend);

  return (
    <>
      <nav style={{fontSize:12, fontFamily:'var(--font-mono)', color:'var(--smoke-400)', textTransform:'uppercase', letterSpacing:'.1em', marginTop: 20}}>
        <a href="/" onClick={(e)=>{e.preventDefault(); window.MS_navigate && window.MS_navigate('home');}} style={{color:'var(--smoke-400)'}}>Home</a>
        <span> / </span>
        <a href="/shop" onClick={(e)=>{e.preventDefault(); window.MS_navigate && window.MS_navigate('shop');}} style={{color:'var(--smoke-400)'}}>Shop</a>
        <span> / </span>
        <span style={{color:'var(--bone)'}}>{meta.label}</span>
      </nav>

      <h1 className="page-title" style={{marginTop: 24}}>{meta.label} <em>cartons</em>.</h1>
      <p className="page-sub">{products.length} {products.length === 1 ? 'product' : 'products'} · {meta.blurb}</p>

      {products.length === 0 ? (
        <div style={{textAlign:'center', padding: 60, opacity: .7, marginTop: 32}}>
          <p>No {meta.label.toLowerCase()} cartons in stock right now.</p>
          <button className="btn btn-primary" style={{marginTop: 16}} onClick={onShop}>Browse everything</button>
        </div>
      ) : (
        <div className="grid-4" style={{marginTop: 32}}>
          {products.map(p => <ProductCard key={p.sku} p={p} onAdd={onAdd} onOpen={onOpen}/>)}
        </div>
      )}
    </>
  );
}

// Product-type category page (Cigarettes, Nicotine Pouches, Cigars…), driven by
// the DB categories surfaced in window.CATEGORIES. Distinct from CategoryPage
// above, which buckets the cigarette lineup by blend.
function CategoryTypePage({ slug, onAdd, onOpen, onShop }) {
  const key = (slug || '').toLowerCase();
  const cat = (window.CATEGORIES || []).find(c => (c.slug || '').toLowerCase() === key);
  const products = (window.PRODUCTS || []).filter(p => (p.category || '').toLowerCase() === key);
  const label = cat ? cat.name : slug.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());

  if (!cat && products.length === 0) {
    return (
      <div style={{textAlign:'center', padding: 80}}>
        <h1 className="page-title">Category <em>not found</em>.</h1>
        <p style={{color:'var(--smoke-400)', marginTop: 12}}>We don't have that category. Browse the full lineup instead.</p>
        <button className="btn btn-primary btn-lg" style={{marginTop: 24}} onClick={onShop}>All products</button>
      </div>
    );
  }

  return (
    <>
      <nav style={{fontSize:12, fontFamily:'var(--font-mono)', color:'var(--smoke-400)', textTransform:'uppercase', letterSpacing:'.1em', marginTop: 20}}>
        <a href="/" onClick={(e)=>{e.preventDefault(); window.MS_navigate && window.MS_navigate('home');}} style={{color:'var(--smoke-400)'}}>Home</a>
        <span> / </span>
        <a href="/shop" onClick={(e)=>{e.preventDefault(); window.MS_navigate && window.MS_navigate('shop');}} style={{color:'var(--smoke-400)'}}>Shop</a>
        <span> / </span>
        <span style={{color:'var(--bone)'}}>{label}</span>
      </nav>

      <h1 className="page-title" style={{marginTop: 24}}>{label}.</h1>
      <p className="page-sub">{products.length} {products.length === 1 ? 'product' : 'products'}{cat && cat.description ? ' · ' + cat.description : ''}</p>

      {products.length === 0 ? (
        <div style={{textAlign:'center', padding: 60, opacity: .7, marginTop: 32}}>
          <p>Nothing in {label.toLowerCase()} right now.</p>
          <button className="btn btn-primary" style={{marginTop: 16}} onClick={onShop}>Browse everything</button>
        </div>
      ) : (
        <div className="grid-4" style={{marginTop: 32}}>
          {products.map(p => <ProductCard key={p.sku} p={p} onAdd={onAdd} onOpen={onOpen}/>)}
        </div>
      )}
    </>
  );
}

function BlogIndexPage({ onOpenPost }) {
  const posts = window.BLOG_POSTS || [];
  return (
    <>
      <h1 className="page-title" style={{marginTop: 24}}>The <em>dispatch</em>.</h1>
      <p className="page-sub">Field notes, how-tos, and brand drops. From Tyendinaga.</p>

      {posts.length === 0 && (
        <div style={{textAlign:'center', padding: 60, color:'var(--smoke-400)'}}>
          <p>No posts yet.</p>
        </div>
      )}

      <div className="blog-grid" style={{marginTop: 32}}>
        {posts.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(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>
                <p>{post.deck}</p>
                <span className="blog-author">— {post.author}</span>
              </div>
            </article>
          );
        })}
      </div>
    </>
  );
}

window.BrandDetailPage = BrandDetailPage;
window.CategoryPage = CategoryPage;
window.CategoryTypePage = CategoryTypePage;
window.BlogIndexPage = BlogIndexPage;