// Shop — browsable catalogue grid with filters + sort

const SHOP_PRODUCTS = [
  { name:'Die-Cut Stickers',    from:'$0.39', price:0.39, img:'assets/laptop-sticker.jpeg',   page:'die-cut',  type:'Stickers', tag:'Most popular',   use:['Outdoor & durable','Branding'],               desc:'Any shape, cut to your artwork. 7-year outdoor vinyl.' },
  { name:'Holographic Stickers',from:'$0.89', price:0.89, img:'assets/holo-rainbow.jpeg',      page:'holo',     type:'Stickers', tag:'Eye-catching',   use:['Events & merch','Branding'],                  desc:'Rainbow foil finish that shifts colour in the light.' },
  { name:'Glitter Stickers',    from:'$0.99', price:0.99, img:'assets/holo-gold.jpeg',         page:'glitter',  type:'Stickers', tag:'Sparkle',        use:['Events & merch'],                             desc:'Shimmering glitter finish, die-cut to any shape.' },
  { name:'Clear Vinyl Stickers',from:'$0.59', price:0.59, img:'assets/sticker-collection.jpeg',page:'clear',    type:'Stickers', tag:'No-label look',  use:['Packaging & labels'],                         desc:'Transparent film for a seamless, no-label look.' },
  { name:'Sticker Sheets',      from:'$2.20', price:2.20, img:'assets/sticker-sheets.jpeg',    page:'sheets',   type:'Sheets',   tag:'Clean + easy',   use:['Packaging & labels','Events & merch'],        desc:'Multiple designs on one peel-off sheet.' },
  { name:'Kiss-Cut Sheets',     from:'$2.50', price:2.50, img:'assets/sticker-stack.jpeg',     page:'kiss-cut', type:'Sheets',   tag:'Peel & share',   use:['Events & merch'],                             desc:'Easy-peel stickers on a printed backing card.' },
  { name:'Bulk Stickers',       from:'$0.09', price:0.09, img:'assets/sticker-stack.jpeg',     page:'bulk',     type:'Stickers', tag:'Best value',     use:['Bulk & wholesale','Branding'],                desc:'Wholesale pricing from 500 to 10,000+.' },
  { name:'Wall Murals',         from:'$149',  price:149,  img:'assets/bedroom-mural.jpeg',     page:'mural',    type:'Murals',   tag:'Made to measure',use:['Home & office'],                              desc:'Custom printed wallpaper, made to measure.' },
  { name:'Sample Pack',         from:'$1',    price:1,    img:'assets/sticker-collection.jpeg',page:'sample',   type:'Samples',  tag:'Try first',      use:[],                                             desc:'13 premium materials & finishes for just $1.' },
];

const Shop = ({ go }) => {
  const m = useIsMobile();
  useSEO({
    title: 'Shop Custom Stickers Australia — Die-Cut, Holographic, Glitter & More',
    description: 'Browse King Kong Stickers — custom die-cut, holographic, glitter, clear vinyl, sticker sheets, bulk & wall murals. Printed in Sydney, free proof in 2 hrs. From $0.09 each.',
  });

  const [type, setType]       = React.useState('All');
  const [useCase, setUseCase] = React.useState('All');
  const [sort, setSort]       = React.useState('popular');

  const types    = ['All','Stickers','Sheets','Murals','Samples'];
  const useCases = ['All','Outdoor & durable','Packaging & labels','Events & merch','Bulk & wholesale','Home & office','Branding'];

  let list = SHOP_PRODUCTS.filter(p =>
    (type === 'All' || p.type === type) &&
    (useCase === 'All' || p.use.includes(useCase))
  );
  if (sort === 'low')  list = [...list].sort((a,b)=>a.price-b.price);
  if (sort === 'high') list = [...list].sort((a,b)=>b.price-a.price);

  return (
    <main data-screen-label="Shop">
      <Header go={go} cart={0}/>

      <section style={{padding: m ? '32px 0 12px' : '56px 0 20px'}}>
        <div className="wrap" style={{padding: m ? '0 20px' : undefined}}>
          <div className="mono" style={{fontSize:13,letterSpacing:'0.18em',textTransform:'uppercase',color:'var(--orange)'}}>// SHOP THE JUNGLE</div>
          <h1 className="display" style={{fontSize:'clamp(36px,6vw,84px)',margin:'6px 0 0'}}>Shop custom<br/>stickers</h1>
          <p style={{fontSize: m?15:18,color:'var(--ink-soft)',maxWidth:560,marginTop:14,lineHeight:1.5}}>Every sticker printed in Sydney on premium vinyl. Free digital proof in 2 hours, dispatch in 4 business days. From $0.09 each.</p>
        </div>
      </section>

      {/* Filter bar */}
      <section style={{padding: m ? '10px 0' : '12px 0',position:'sticky',top:0,zIndex:40,background:'var(--cream)',borderTop:'2px solid var(--ink)',borderBottom:'2px solid var(--ink)'}}>
        <div className="wrap" style={{padding: m?'0 20px':undefined,display:'flex',gap:10,flexWrap:'wrap',alignItems:'center'}}>
          <div style={{display:'flex',gap:6,flexWrap:'wrap'}}>
            {types.map(t=>(
              <button key={t} onClick={()=>setType(t)} style={{padding:'8px 14px',borderRadius:999,border:'2px solid var(--ink)',fontWeight:800,fontSize:13,cursor:'pointer',background: type===t?'var(--ink)':'#fff',color: type===t?'#fff':'var(--ink)'}}>{t}</button>
            ))}
          </div>
          <div style={{marginLeft: m?0:'auto',display:'flex',gap:8,alignItems:'center',flexWrap:'wrap'}}>
            <select value={useCase} onChange={e=>setUseCase(e.target.value)} style={{padding:'9px 10px',borderRadius:10,border:'2px solid var(--ink)',fontWeight:700,fontSize:13,fontFamily:'inherit',background:'#fff',cursor:'pointer'}}>
              {useCases.map(u=><option key={u} value={u}>{u==='All'?'All use cases':u}</option>)}
            </select>
            <select value={sort} onChange={e=>setSort(e.target.value)} style={{padding:'9px 10px',borderRadius:10,border:'2px solid var(--ink)',fontWeight:700,fontSize:13,fontFamily:'inherit',background:'#fff',cursor:'pointer'}}>
              <option value="popular">Sort: Popular</option>
              <option value="low">Price: Low to High</option>
              <option value="high">Price: High to Low</option>
            </select>
          </div>
        </div>
      </section>

      {/* Grid */}
      <section style={{padding: m ? '20px 0 40px' : '32px 0 80px'}}>
        <div className="wrap" style={{padding: m?'0 20px':undefined}}>
          <div style={{fontSize:13,color:'var(--muted)',marginBottom:16}}>{list.length} product{list.length!==1?'s':''}{type!=='All'?` in ${type}`:''}</div>
          {list.length === 0 ? (
            <div style={{padding:'60px 0',textAlign:'center',color:'var(--muted)'}}>
              No products match those filters — <button onClick={()=>{setType('All');setUseCase('All');}} style={{background:'none',border:'none',color:'var(--orange)',fontWeight:800,cursor:'pointer',textDecoration:'underline'}}>clear filters</button>
            </div>
          ) : (
            <div style={{display:'grid',gridTemplateColumns: m ? 'repeat(2,1fr)' : 'repeat(3,1fr)',gap: m ? 14 : 24}}>
              {list.map(c=>(
                <button key={c.name} onClick={()=>go(c.page)} className="sticker lift" style={{textAlign:'left',padding:0,display:'block'}}>
                  <div style={{position:'relative',background:'var(--cream-deep)',aspectRatio:'5/4',overflow:'hidden'}}>
                    <img src={c.img} alt={c.name + ' — custom stickers Australia'} loading="lazy" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
                    <span className="chip" style={{position:'absolute',top:10,left:10,background:'var(--yellow)',fontSize: m?10:12}}>{c.tag}</span>
                  </div>
                  <div style={{padding: m?'12px 14px':'18px 20px',borderTop:'3px solid var(--ink)'}}>
                    <div className="display" style={{fontSize: m?16:22}}>{c.name}</div>
                    {!m && <div style={{fontSize:12.5,color:'var(--muted)',marginTop:4,lineHeight:1.4}}>{c.desc}</div>}
                    <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginTop:10}}>
                      <div style={{fontSize:12,color:'var(--muted)'}}>From <strong style={{color:'var(--ink)'}}>{c.from}</strong></div>
                      <div style={{width: m?32:38,height: m?32:38,display:'grid',placeItems:'center',background:'var(--orange)',color:'#fff',borderRadius:10,border:'2px solid var(--ink)'}}><Icon.Arrow size={m?14:16}/></div>
                    </div>
                  </div>
                </button>
              ))}
            </div>
          )}
        </div>
      </section>

      <Footer go={go}/>
    </main>
  );
};

window.Shop = Shop;