function Collections(){
  const params=new URLSearchParams(location.search);
  const initialWeave=params.get('weave');
  const [weave,setWeave]=React.useState(initialWeave||'All');
  const [sort,setSort]=React.useState('featured');
  const collectionSlug=params.get('collection');
  const gender=params.get('gender');
  const collection=collectionSlug?COLLECTIONS.find(c=>c.slug===collectionSlug):null;
  const isCompact=!!gender||!!collectionSlug||!!initialWeave;
  const weaves=['All',...Array.from(new Set(PRODUCTS.map(filterLabel)))];
  let list=PRODUCTS.filter(p=>(gender?p.gender===gender:true)&&(!collection||p.collection===collection.slug)&&(weave==='All'||filterLabel(p)===weave));
  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);
  const title=gender==='men'?'Men':gender==='women'?'Women':(collection?collection.name:(initialWeave||'Shop All'));
  const compactDesc=gender==='men'?'Tailored essentials, made to last.':(collection?collection.desc:'Curated creations crafted for modern elegance.');
  const PAGE_SIZE=6;
  const [page,setPage]=React.useState(1);
  React.useEffect(()=>{setPage(1);},[weave,sort,collectionSlug]);
  const totalPages=Math.max(1,Math.ceil(list.length/PAGE_SIZE));
  const paged=list.slice((page-1)*PAGE_SIZE,page*PAGE_SIZE);
  React.useEffect(()=>{
    document.title=`${title} — Bold Bee`;
    const schema={
      "@context":"https://schema.org",
      "@graph":[
        {"@type":"BreadcrumbList","itemListElement":[
          {"@type":"ListItem",position:1,name:"Home",item:"index.html"},
          {"@type":"ListItem",position:2,name:"Shop",item:"Collections.html"},
          ...(collection?[{"@type":"ListItem",position:3,name:collection.name}]:[])
        ]},
        {"@type":"CollectionPage",name:title,description:collection?collection.desc:'Handwoven silk sarees and signature essentials.',url:location.href}
      ]
    };
    let el=document.getElementById('bb-schema');
    if(!el){el=document.createElement('script');el.type='application/ld+json';el.id='bb-schema';document.head.appendChild(el);}
    el.textContent=JSON.stringify(schema);
  },[title]);
  return (
    <div>
      <Breadcrumbs trail={[{label:'Home',href:'index.html'},{label:'Shop',href:'Collections.html'},...(collection?[{label:collection.name}]:isCompact?[{label:title}]:[])]}/>
      {isCompact?(
        <section style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'20px var(--container-pad) 0'}}>
          <H2 as="h1" style={{fontSize:26,marginBottom:6}}>{title}</H2>
          <p style={{fontSize:14,color:'var(--text-secondary)',margin:0}}>{compactDesc}</p>
        </section>
      ):(
      <React.Fragment>
      <section style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'var(--space-6) var(--container-pad) 0',textAlign:'center'}}>
        <Eyebrow>Shop the Collection</Eyebrow>
        <H2 as="h1">{title}</H2>
      </section>
      <div style={{maxWidth:760,margin:'0 auto',padding:'var(--space-7) var(--container-pad) 0',textAlign:'center'}}>
        <p style={{fontSize:16,lineHeight:1.8,color:'var(--text-secondary)'}}>{'Handwoven sarees and signature essentials — cloth and craft made slowly, for a lifetime of wear.'}</p>
      </div>
      </React.Fragment>
      )}
      {gender==='men'&&list.length===0?(
        <div style={{maxWidth:560,margin:'0 auto',padding:'var(--space-section) var(--container-pad)',textAlign:'center'}}>
          <Eyebrow>Coming Soon</Eyebrow>
          <H2 style={{marginBottom:16}}>New Arrivals for Men</H2>
          <p style={{fontSize:15,lineHeight:1.8,color:'var(--text-secondary)'}}>Our menswear collection is being woven. In the meantime, explore our Jewellery and Fragrances.</p>
        </div>
      ):(<React.Fragment>
      <div style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:(isCompact?'20px':'var(--space-7)')+' var(--container-pad) 0',display:'flex',justifyContent:'space-between',alignItems:'center',flexWrap:'wrap',gap:16,borderBottom:'1px solid var(--border-soft)',paddingBottom:20}}>
        <div style={{display:'flex',gap:10,flexWrap:'wrap'}}>
          {weaves.map(w=>(<button key={w} onClick={()=>setWeave(w)} style={{border:'1px solid '+(weave===w?'var(--charcoal)':'var(--border-default)'),background:weave===w?'var(--charcoal)':'transparent',color:weave===w?'var(--ivory)':'var(--text-primary)',borderRadius:'var(--radius-pill)',padding:'8px 18px',fontSize:12,letterSpacing:'var(--tracking-wide)',cursor:'pointer'}}>{w}</button>))}
        </div>
        <select value={sort} onChange={e=>setSort(e.target.value)} aria-label="Sort products" style={{border:'1px solid var(--border-default)',borderRadius:'var(--radius-md)',padding:'10px 14px',fontSize:13,background:'var(--white)',color:'var(--text-primary)'}}>
          <option value="featured">Sort: Featured</option>
          <option value="price-asc">Price: Low to High</option>
          <option value="price-desc">Price: High to Low</option>
        </select>
      </div>
      <div style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'var(--space-7) var(--container-pad) 0',display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:32}}>
        {paged.map(p=>(<ProductTile key={p.id} p={p}/>))}
      </div>
      {totalPages>1&&(
        <nav aria-label="Pagination" style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'40px var(--container-pad) var(--space-section)',display:'flex',justifyContent:'center',gap:10}}>
          {Array.from({length:totalPages},(_,i)=>i+1).map(n=>(
            <button key={n} onClick={()=>setPage(n)} aria-current={page===n?'page':undefined} style={{width:38,height:38,borderRadius:'50%',border:'1px solid '+(page===n?'var(--charcoal)':'var(--border-default)'),background:page===n?'var(--charcoal)':'transparent',color:page===n?'var(--ivory)':'var(--text-primary)',cursor:'pointer',fontSize:13}}>{n}</button>
          ))}
        </nav>
      )}
      {!collection&&(
        <div style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'0 var(--container-pad) var(--space-section)'}}>
          <Eyebrow>Related Collections</Eyebrow>
          <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:24,marginTop:16}}>
            {COLLECTIONS.map((c,i)=>(<a key={c.slug} href={`Collections.html?collection=${c.slug}`} style={{textDecoration:'none',position:'relative',aspectRatio:'16/10',borderRadius:'var(--radius-lg)',overflow:'hidden',display:'block'}}>
              <img src={photo(c.hero)} style={{width:'100%',height:'100%',objectFit:'cover'}} alt={c.name}/>
              <div style={{position:'absolute',inset:0,background:'rgba(31,31,31,0.3)'}}></div>
              <div style={{position:'absolute',left:16,bottom:14,color:'var(--ivory)',fontFamily:'var(--font-serif)',fontSize:18}}>{c.name}</div>
            </a>))}
          </div>
        </div>
      )}
      </React.Fragment>)}
    </div>
  );
}
window.Collections=Collections;