// v3 Categories — scatter-in cards with warm tones
const categories = [
  { id:'nuts',     name:'Nuts',         meta:'Almonds · Cashews · Pistachios',  count:42, img:'assets/categories/nuts.webp',   pos:'50% 70%', tone:'#1F3370' },
  { id:'dates',    name:'Dates',        meta:'Medjool · Ajwa · Khudri',         count:19, img:'assets/categories/dates.webp',    pos:'88% 75%', tone:'#0A1638' },
  { id:'dryfruits',name:'Dry Fruits',   meta:'Apricots · Raisins · Figs',       count:28, img:'assets/categories/dryfruits.webp', pos:'85% 70%', tone:'#25407E' },
  { id:'spices',   name:'Spices',       meta:'Saffron · Cardamom · Whole',      count:34, img:'assets/categories/spices.webp',  pos:'25% 60%', tone:'#1E3268' },
  { id:'mixes',    name:'Snack Mixes',  meta:'Trail · Energy · Roasted',        count:16, img:'assets/categories/snacks.webp',        pos:'50% 75%', tone:'#182B5E' },
  { id:'choco',    name:'Chocolates',   meta:'Pistachio Kunafa · Truffles',     count:12, img:'assets/categories/chocolates.webp',  pos:'72% 80%', tone:'#0A1638' },
];

function Categories() {
  return (
    <section id="categories" className="section bg-pattern-cream" style={{position:'relative'}} data-screen-label="Categories">
      <NutBgParticles density={6} opacity={0.18}/>
      <div className="wrap" style={{position:'relative'}}>
        <div style={{display:'grid', gridTemplateColumns:'1fr auto 1fr', gap:32, alignItems:'end', marginBottom:56}}>
          <Reveal>
            <Eyebrow>The Collection</Eyebrow>
            <h2 className="serif" style={{fontSize:'clamp(36px,4.4vw,92px)', lineHeight:1.05, marginTop:18,
              fontWeight:500, color:'var(--ink)', letterSpacing:'-0.005em', marginBottom:0}}>
              The full pantry,<br/>
              <span style={{fontStyle:'italic', color:'var(--gold-deep)'}}>thoughtfully arranged.</span>
            </h2>
          </Reveal>
          <div style={{width:1, height:60, background:'rgba(7,15,42,0.18)', justifySelf:'center'}} className="cat-divider"/>
          <Reveal delay={120} style={{maxWidth:420}}>
            <p style={{color:'var(--ink-soft)', fontSize:16, lineHeight:1.6, margin:'0 0 8px'}}>
              Shop by category, by need, or by occasion — every aisle is curated for clean
              flavor, reliable quality, and easy everyday use.
            </p>
            <a href="#" onClick={(e) => { e.preventDefault(); window.navigateTo('maintenance'); }} style={{display:'inline-flex', alignItems:'center', gap:8, color:'var(--ink)',
              fontSize:13, fontWeight:600, letterSpacing:'0.08em', textTransform:'uppercase', textDecoration:'none', marginTop:8}}>
              <span className="u-draw" onClick={() => window.navigateTo('maintenance')}>View All Products</span> <Icon.ArrowUR/>
            </a>
          </Reveal>
        </div>

        <div className="cat-grid">
          {categories.map((c, i)=>{
            const r = (i % 2 === 0 ? -2 : 2);
            return (
              <Reveal key={c.id} delay={i*70} variant="scatter" style={{['--r']: `${r}deg`}}>
                <CategoryCard cat={c} index={i}/>
              </Reveal>
            );
          })}
        </div>
      </div>
      <style>{`
        .cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
        @media (max-width:1024px){ .cat-grid{ grid-template-columns:repeat(2,1fr); } .cat-divider{ display:none; } }
        @media (max-width:640px){ .cat-grid{ grid-template-columns:1fr; gap:16px; } }
      `}</style>
    </section>
  );
}

function CategoryCard({cat, index}) {
  return (
    <a href="#" onClick={(e) => { e.preventDefault(); window.navigateTo('maintenance'); }} style={{textDecoration:'none', color:'inherit', display:'block', cursor:'pointer'}}>
      <div className="cat-card" style={{
        position:'relative', borderRadius:'var(--r-lg)', overflow:'hidden',
        background:cat.tone, aspectRatio:'4/5',
        boxShadow:'0 22px 50px -28px rgba(11,22,56,0.4)',
        transition:'transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s'
      }}>
        <div className="cat-img" style={{position:'absolute', inset:0, transition:'transform .8s cubic-bezier(.2,.7,.2,1)'}}>
          <img src={cat.img} alt="" style={{width:'100%', height:'100%', objectFit:'cover', objectPosition: cat.pos||'center'}}/>
          <div style={{position:'absolute', inset:0, background:'linear-gradient(180deg, rgba(7,14,36,0.0) 30%, rgba(7,14,36,0.85) 100%)'}}/>
        </div>
        <div style={{position:'absolute', top:18, left:18, right:18, display:'flex', justifyContent:'space-between', alignItems:'start', color:'var(--cream)'}}>
          <span style={{fontFamily:"'Cormorant Garamond',serif", fontStyle:'italic', color:'var(--gold-3)', fontSize:18}}>{String(index+1).padStart(2,'0')}</span>
          <span style={{fontSize:10.5, letterSpacing:'0.18em', textTransform:'uppercase', fontWeight:600,
            color:'var(--gold-3)', padding:'5px 10px',
            border:'1px solid rgba(233,207,149,0.4)', borderRadius:99,
            background:'rgba(7,14,36,0.4)', backdropFilter:'blur(6px)'}}>{cat.count} items</span>
        </div>
        <div style={{position:'absolute', left:0, right:0, bottom:0, padding:24, color:'var(--cream)'}}>
          <div style={{fontFamily:"'Cormorant Garamond',serif", fontSize:36, lineHeight:1, marginBottom:8, letterSpacing:'-0.005em'}}>{cat.name}</div>
          <div style={{fontSize:13, color:'rgba(244,236,220,0.75)', marginBottom:18}}>{cat.meta}</div>
          <div style={{display:'flex', alignItems:'center', justifyContent:'space-between',
            paddingTop:14, borderTop:'1px solid rgba(233,207,149,0.32)'}}>
            <span style={{fontSize:12, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--gold-3)', fontWeight:600}}>
              Shop {cat.name}
            </span>
            <span className="cat-arrow" style={{
              width:36, height:36, borderRadius:99, background:'var(--saffron)',
              color:'var(--ink)', display:'grid', placeItems:'center',
              transition:'transform .35s cubic-bezier(.2,.7,.2,1)'
            }}><Icon.ArrowUR/></span>
          </div>
        </div>
      </div>
      <style>{`
        a:hover .cat-card{ transform: translateY(-6px) rotate(-0.5deg); box-shadow: 0 36px 80px -24px rgba(212,162,74,0.35), 0 0 0 1px rgba(212,162,74,0.25); }
        a:hover .cat-img{ transform: scale(1.06); }
        a:hover .cat-arrow{ transform: rotate(-45deg); }
      `}</style>
    </a>
  );
}

Object.assign(window, { Categories });