// products.jsx — Holographic, Sticker Sheets, Glitter, Clear Vinyl, Kiss-Cut, Bulk

// ── SEO schemas ────────────────────────────────────────────────────────────────
const mkProductSchema = (name, desc, image, lowPrice, highPrice, reviews=1820) => ({
  '@context':'https://schema.org','@type':'Product',
  name, description:desc, image:'https://kingkongstickers.com.au/'+image,
  brand:{'@type':'Brand',name:'King Kong Stickers'},
  offers:{'@type':'AggregateOffer',priceCurrency:'AUD',lowPrice,highPrice,availability:'https://schema.org/InStock',seller:{'@type':'Organization',name:'King Kong Stickers'}},
});

const HOLO_SEO   = { title:'Holographic Stickers Australia — Rainbow, Gold & Chrome', description:'Eye-catching holographic stickers in rainbow, gold, chrome and silver. Printed in Sydney with white ink for vibrant colours. Free proof in 2 hrs. From $0.89 each.', schema: mkProductSchema('Custom Holographic Stickers','Holographic vinyl stickers in rainbow, gold, chrome and silver. Prismatic colour-shifting film with CMYK + white ink. 7-year outdoor rated. Printed in Sydney, Australia.','assets/holo-rainbow.jpeg','0.89','4.50') };
const SHEETS_SEO = { title:'Custom Sticker Sheets Australia — A4, A5, A6 Printed in Sydney', description:'Design your own sticker sheets in A4, A5 or A6. Matte, gloss or clear. Great for small business packaging, planners and gifting. From $3.50 per sheet.', schema: mkProductSchema('Custom Sticker Sheets','Custom sticker sheets in A4, A5 and A6 sizes. Matte, gloss or clear vinyl. Perfect for small business packaging, gifting and planners. Printed in Sydney, Australia.','assets/sticker-sheets.jpeg','3.50','8.50') };
const GLITTER_SEO= { title:'Glitter Stickers Australia — Custom Sparkle Vinyl Stickers', description:'Chunky glitter vinyl stickers in 6 bold colours. Die-cut to your shape, printed in Sydney. Perfect for gifts, events and standout branding. From $0.99 each.', schema: mkProductSchema('Custom Glitter Stickers','Chunky glitter vinyl stickers in 6 colours. Die-cut to any shape. Eye-catching for gifting, events and bold branding. Printed in Sydney, Australia.','assets/holo-gold.jpeg','0.99','4.00') };
const CLEAR_SEO  = { title:'Clear Vinyl Stickers Australia — Transparent Custom Stickers', description:'See-through clear vinyl stickers with white ink for hidden background effect. Perfect for windows, bottles, and packaging. Free proof. From $0.59 each.', schema: mkProductSchema('Clear Vinyl Stickers','Transparent clear vinyl stickers with optional white ink. Ideal for windows, bottles and packaging labels. 7-year outdoor rated. Printed in Sydney.','assets/sticker-collection.jpeg','0.59','3.50') };
const KISSCUT_SEO= { title:'Kiss-Cut Sticker Sheets Australia — Peel & Share Custom Stickers', description:'Kiss-cut sticker sheets with individual peel-and-share stickers. White or clear backing. Great for events, markets and merch. From $2.50 per sheet.', schema: mkProductSchema('Kiss-Cut Sticker Sheets','Kiss-cut sticker sheets — individual stickers on a backing sheet. Perfect for events, markets and sticker packs. Printed in Sydney, Australia.','assets/sticker-stack.jpeg','2.50','12.00') };
const BULK_SEO   = { title:'Bulk Stickers Australia — Wholesale Custom Stickers From $0.09', description:'Bulk custom sticker printing at wholesale prices. 500 to 10,000+ stickers, die-cut vinyl. From $0.09 each. Fast Sydney production, ships Australia-wide.', schema: mkProductSchema('Bulk Custom Stickers','Bulk custom sticker printing from 500 to 10,000+. Die-cut vinyl at wholesale prices. Matte, gloss or holographic. Fast production from Sydney.','assets/sticker-stack.jpeg','0.09','0.22',3200) };

// ── Pricing helpers ───────────────────────────────────────────────────────────

const STD_SIZES = ['50mm','75mm','100mm','125mm','150mm'];
const STD_SIZE_MULT = {'50mm':0.7,'75mm':1.0,'100mm':1.4,'125mm':1.8,'150mm':2.4};
const STD_QTY_TIERS = [
  {q:10,p:1.20},{q:25,p:0.80},{q:50,p:0.55},{q:100,p:0.39},
  {q:200,p:0.29},{q:500,p:0.22},{q:1000,p:0.18},{q:2000,p:0.15},
];

const pInterpMult = (mm) => {
  if (mm<=50) return 0.7;
  if (mm>=150) return 2.4+(mm-150)*0.013;
  const b=[{mm:50,m:0.7},{mm:75,m:1.0},{mm:100,m:1.4},{mm:125,m:1.8},{mm:150,m:2.4}];
  for(let i=0;i<b.length-1;i++){
    const a=b[i],c=b[i+1];
    if(mm>=a.mm&&mm<=c.mm) return a.m+(mm-a.mm)/(c.mm-a.mm)*(c.m-a.m);
  }
  return 1.0;
};

const pCalcUnit = (qty, base, sizeMult, finMult=1, surcharge=1, tiers=STD_QTY_TIERS) => {
  const tier=[...tiers].reverse().find(t=>qty>=t.q)||tiers[0];
  return +(tier.p * base * sizeMult * finMult * surcharge).toFixed(2);
};

// ── Shared UI components ──────────────────────────────────────────────────────

const PSection = ({title,children}) => (
  <div style={{marginTop:24}}>
    <div className="display" style={{fontSize:18,marginBottom:10}}>{title}</div>
    {children}
  </div>
);

const PCard = ({active,onClick,children}) => (
  <button onClick={onClick} style={{
    padding:'14px 12px',borderRadius:14,border:'2.5px solid var(--ink)',
    background:active?'var(--yellow)':'#fff',
    boxShadow:active?'4px 4px 0 var(--ink)':'2px 2px 0 var(--ink)',
    display:'flex',flexDirection:'column',alignItems:'flex-start',gap:2,textAlign:'left',
    transform:active?'translate(-1px,-1px)':'none'
  }}>{children}</button>
);

const PShapeIcon = ({kind}) => (
  <svg width="36" height="28" viewBox="0 0 36 28" fill="none" stroke="var(--ink)" strokeWidth="2.4">
    {kind==='die-cut' && <path d="M5 14 Q 6 4 14 4 Q 24 2 28 8 Q 34 12 30 20 Q 26 26 16 25 Q 4 25 5 14Z" fill="var(--orange)"/>}
    {kind==='circle'  && <circle cx="18" cy="14" r="10" fill="var(--orange)"/>}
    {kind==='square'  && <rect x="6" y="4" width="24" height="20" rx="4" fill="var(--orange)"/>}
  </svg>
);

const PShapeSelector = ({shape,setShape}) => (
  <PSection title="01 · Shape">
    <div className="pick-grid" style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:8}}>
      {[{k:'die-cut',l:'Die-cut',s:'Cut to shape'},{k:'circle',l:'Circle',s:'Round'},{k:'square',l:'Square',s:'Rounded corners'}].map(o=>(
        <PCard key={o.k} active={shape===o.k} onClick={()=>setShape(o.k)}>
          <PShapeIcon kind={o.k}/>
          <div style={{fontWeight:800,fontSize:13,marginTop:6}}>{o.l}</div>
          <div style={{fontSize:11,color:'var(--muted)'}}>{o.s}</div>
        </PCard>
      ))}
    </div>
  </PSection>
);

const PSizeSelector = ({size,setSize,isCustom,setIsCustom,customW,setCustomW,customH,setCustomH,label='02 · Size'}) => (
  <PSection title={label}>
    <div style={{display:'flex',gap:8,flexWrap:'wrap'}}>
      {STD_SIZES.map(s=>(
        <button key={s} onClick={()=>{setSize(s);setIsCustom(false);}}
          style={{padding:'12px 18px',borderRadius:12,border:'2.5px solid var(--ink)',background:!isCustom&&size===s?'var(--ink)':'#fff',color:!isCustom&&size===s?'#fff':'var(--ink)',fontWeight:800,fontSize:14,boxShadow:!isCustom&&size===s?'none':'3px 3px 0 var(--ink)'}}>{s}</button>
      ))}
      <button onClick={()=>setIsCustom(true)}
        style={{padding:'12px 18px',borderRadius:12,border:'2.5px dashed var(--ink)',background:isCustom?'var(--yellow)':'transparent',fontWeight:700,fontSize:13,color:'var(--ink)',boxShadow:isCustom?'3px 3px 0 var(--ink)':'none'}}>+ Custom</button>
    </div>
    {isCustom && (
      <div style={{marginTop:12,padding:'16px',background:'var(--cream)',border:'2.5px solid var(--ink)',borderRadius:14,display:'flex',gap:12,alignItems:'center',flexWrap:'wrap'}}>
        <div style={{display:'flex',alignItems:'center',gap:8}}>
          <label style={{fontWeight:700,fontSize:13}}>W</label>
          <input type="number" min="10" max="600" placeholder="120" value={customW} onChange={e=>setCustomW(e.target.value)}
            style={{width:90,padding:'10px 12px',border:'2.5px solid var(--ink)',borderRadius:10,fontFamily:'inherit',fontWeight:800,fontSize:14,background:'#fff'}}/>
          <span style={{fontWeight:600,fontSize:13,color:'var(--muted)'}}>mm</span>
        </div>
        <span style={{fontWeight:800,fontSize:18,color:'var(--muted)'}}>×</span>
        <div style={{display:'flex',alignItems:'center',gap:8}}>
          <label style={{fontWeight:700,fontSize:13}}>H</label>
          <input type="number" min="10" max="600" placeholder="80" value={customH} onChange={e=>setCustomH(e.target.value)}
            style={{width:90,padding:'10px 12px',border:'2.5px solid var(--ink)',borderRadius:10,fontFamily:'inherit',fontWeight:800,fontSize:14,background:'#fff'}}/>
          <span style={{fontWeight:600,fontSize:13,color:'var(--muted)'}}>mm</span>
        </div>
        <span className="chip" style={{background:'var(--orange)',color:'#fff',border:'2px solid var(--ink)'}}>+10% custom</span>
      </div>
    )}
    <div className="mono" style={{fontSize:12,color:'var(--muted)',marginTop:8}}>Measured longest edge · larger = better detail</div>
  </PSection>
);

const PQtySelector = ({qty,setQty,tiers=STD_QTY_TIERS,label}) => (
  <PSection title={label||`05 · Quantity — ${qty}`}>
    <div style={{display:'flex',gap:6,flexWrap:'wrap',marginBottom:14}}>
      {tiers.map(t=>(
        <button key={t.q} onClick={()=>setQty(t.q)} style={{
          padding:'10px 14px',borderRadius:10,border:'2px solid var(--ink)',
          background:qty===t.q?'var(--orange)':'#fff',color:qty===t.q?'#fff':'var(--ink)',
          fontWeight:800,fontSize:13
        }}>
          {t.q}
          <span style={{display:'block',fontSize:10,fontWeight:600,opacity:0.75}}>${t.p.toFixed(2)}</span>
        </button>
      ))}
    </div>
    <div style={{display:'flex',alignItems:'center',gap:14,background:'var(--cream)',border:'2px solid var(--ink)',borderRadius:12,padding:'10px 14px'}}>
      <input type="range" min={tiers[0].q} max={tiers[tiers.length-1].q} step="5" value={Math.min(qty,tiers[tiers.length-1].q)} onChange={e=>setQty(+e.target.value)} style={{flex:1,accentColor:'var(--orange)'}}/>
      <input type="number" value={qty} onChange={e=>setQty(+e.target.value||tiers[0].q)} style={{width:80,padding:'8px 10px',borderRadius:8,border:'2px solid var(--ink)',fontWeight:800,fontSize:14,fontFamily:'inherit'}}/>
    </div>
  </PSection>
);

const PGallery = ({images,activeImg,setActiveImg,badge='Premium'}) => (
  <div>
    <div className="sticker" style={{aspectRatio:'1/1',padding:0,background:'var(--cream)',position:'relative',overflow:'hidden'}}>
      <div style={{position:'absolute',inset:0,backgroundImage:'linear-gradient(45deg,#ECE3D0 25%,transparent 25%),linear-gradient(-45deg,#ECE3D0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ECE3D0 75%),linear-gradient(-45deg,transparent 75%,#ECE3D0 75%)',backgroundSize:'24px 24px',backgroundPosition:'0 0,0 12px,12px -12px,-12px 0',opacity:0.4}}/>
      <img src={images[activeImg]} alt="Custom stickers product image — King Kong Stickers Australia" fetchpriority="high" style={{position:'relative',width:'100%',height:'100%',objectFit:'cover'}}/>
      <div style={{position:'absolute',top:16,left:16,display:'flex',gap:8}}>
        <span className="chip" style={{background:'var(--orange)',color:'#fff'}}>{badge}</span>
        <span className="chip" style={{background:'var(--yellow)'}}>🇦🇺 Made in Sydney</span>
      </div>
    </div>
    <div style={{display:'grid',gridTemplateColumns:'repeat(5,1fr)',gap:10,marginTop:12}}>
      {images.map((src,i)=>(
        <button key={i} onClick={()=>setActiveImg(i)} className="sticker" style={{aspectRatio:'1/1',padding:0,overflow:'hidden',boxShadow:activeImg===i?'4px 4px 0 var(--ink)':'2px 2px 0 var(--ink)',transform:activeImg===i?'translate(-1px,-1px)':'none',outline:activeImg===i?'2px solid var(--orange)':'none',outlineOffset:2}}>
          <img src={src} alt="Custom sticker gallery photo" loading="lazy" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
        </button>
      ))}
    </div>
  </div>
);

const PFeatures = ({features}) => (
  <div style={{marginTop:24,display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:12}}>
    {features.map((f,i)=>(
      <div key={i} style={{display:'flex',gap:10,alignItems:'center',padding:'10px 14px',background:'#fff',border:'2px solid var(--ink)',borderRadius:12}}>
        <div style={{width:32,height:32,display:'grid',placeItems:'center',background:'var(--yellow)',border:'2px solid var(--ink)',borderRadius:8}}>{f.i}</div>
        <div style={{fontWeight:700,fontSize:13}}>{f.h}</div>
      </div>
    ))}
  </div>
);

const PFileUpload = ({file, setFile}) => {
  const [upState, setUpState] = React.useState('idle'); // idle|uploading|done|error
  const handleChange = async (e) => {
    const f = e.target.files?.[0];
    if (!f) return;
    setFile({name: f.name, url: URL.createObjectURL(f)});
    setUpState('uploading');
    const fd = new FormData();
    fd.append('file', f);
    try {
      const res = await fetch('/wp-json/kk/v1/artwork', {method:'POST', body:fd});
      if (!res.ok) { setUpState('error'); return; }
      const data = await res.json();
      if (data.success) {
        localStorage.setItem('kk_art_token', data.token);
        setUpState('done');
      } else {
        setUpState('error');
      }
    } catch {
      setUpState('error');
    }
  };
  const statusLabel = upState === 'uploading' ? '⏫ Uploading…'
    : upState === 'done'      ? '✓ Uploaded · designer reviews in ~2 hrs'
    : upState === 'error'     ? '⚠ Upload failed — email to hello@kingkongstickers.com.au'
    : 'Ready · designer reviews in ~2 hrs';
  return (
    <label style={{display:'block',cursor:'pointer'}}>
      <input type="file" accept="image/*,.pdf,.ai" style={{display:'none'}} onChange={handleChange}/>
      <div style={{display:'flex',gap:14,alignItems:'center',padding:'18px',background:file?'var(--yellow)':'var(--cream)',border:'2.5px dashed var(--ink)',borderRadius:14}}>
        {file ? (
          <>
            <img src={file.url} alt="Uploaded sticker artwork preview" style={{width:56,height:56,objectFit:'cover',borderRadius:10,border:'2px solid var(--ink)',background:'#fff'}}/>
            <div style={{flex:1}}>
              <div style={{fontWeight:800,fontSize:14}}>{file.name}</div>
              <div style={{fontSize:12,color: upState==='error' ? 'var(--red)' : 'var(--ink-soft)'}}>{statusLabel}</div>
            </div>
            <button onClick={(e)=>{e.preventDefault();setFile(null);setUpState('idle');localStorage.removeItem('kk_art_token');}} className="pill" style={{background:'#fff'}}>Replace</button>
          </>
        ) : (
          <>
            <div style={{width:56,height:56,display:'grid',placeItems:'center',background:'var(--orange)',color:'#fff',borderRadius:12,border:'2px solid var(--ink)'}}><Icon.Upload/></div>
            <div style={{flex:1}}>
              <div style={{fontWeight:800,fontSize:15}}>Drop your art or browse</div>
              <div style={{fontSize:12,color:'var(--ink-soft)'}}>PNG · JPG · SVG · PDF · AI — up to 50MB</div>
            </div>
            <span className="btn" style={{padding:'10px 14px',fontSize:13}}>Browse</span>
          </>
        )}
      </div>
      <div style={{display:'flex',gap:8,marginTop:8,fontSize:12,color:'var(--muted)'}}>
        <span>No art?</span><a href="#templates" style={{color:'var(--orange)',fontWeight:800,textDecoration:'underline'}}>Free templates</a>
        <span>or</span><a href="#contact" style={{color:'var(--orange)',fontWeight:800,textDecoration:'underline'}}>hire a designer ($35)</a>
      </div>
      {!file && (
        <div style={{marginTop:8,padding:'10px 14px',background:'var(--cream)',border:'1.5px solid var(--ink)',borderRadius:10,fontSize:12,color:'var(--ink-soft)'}}>
          No art yet? Complete your order and email artwork to <strong>hello@kingkongstickers.com.au</strong> — we proof before printing.
        </div>
      )}
    </label>
  );
};

const SIMPLE_PRODUCTS = [10197, 9968]; // glitter + sheets — no variations
const QTY_TIERS = [50,100,250,500,1000,2000];
const SIZE_TIERS = [50,75,100,125,150,200];
const snapTier = (v, ts) => ts.reduce((b,t) => Math.abs(t-v)<Math.abs(b-v) ? t : b);

const PPriceCTA = ({qty,unit,total,wcId,label='Order now',unit_label='sticker',sizeStr='75mm'}) => {
  const savedKey = `kk_saved_${wcId}`;
  const [saved, setSaved] = React.useState(()=>localStorage.getItem(savedKey)==='1');
  const toggleSave = () => {
    const next = !saved;
    setSaved(next);
    next ? localStorage.setItem(savedKey,'1') : localStorage.removeItem(savedKey);
  };
  const m = useIsMobile();
  const addToCart = () => {
    const token=localStorage.getItem('kk_art_token');
    const p=new URLSearchParams({'add-to-cart':wcId, quantity:1});
    if(!SIMPLE_PRODUCTS.includes(wcId)){
      const mm=parseInt(sizeStr)||75;
      p.set('attribute_size',snapTier(mm,SIZE_TIERS)+'mm');
      p.set('attribute_quantity',snapTier(qty,QTY_TIERS));
    }
    p.set('kk_price', total.toFixed(2));
    p.set('kk_qty', qty);
    p.set('kk_size', sizeStr);
    if(token) p.set('kk_art',token);
    window.location.href='/cart/?'+p.toString();
  };
  return (
    <div style={{marginTop:28,background:'#fff',border:'3px solid var(--ink)',borderRadius:18,padding:20,boxShadow:'6px 6px 0 var(--ink)'}}>
      <div style={{display:'flex',alignItems:'end',justifyContent:'space-between',gap:18}}>
        <div>
          <div className="mono" style={{fontSize:12,color:'var(--muted)',textTransform:'uppercase',letterSpacing:'0.1em'}}>Total — {qty} {unit_label}s</div>
          <div style={{display:'flex',alignItems:'baseline',gap:12,marginTop:4}}>
            <div className="display" style={{fontSize:54,lineHeight:1}}>${total.toFixed(2)}</div>
          </div>
          <div style={{fontSize:13,marginTop:4,color:'var(--ink-soft)'}}>${unit.toFixed(2)} per {unit_label} · free shipping</div>
          <div style={{fontSize:12.5,marginTop:6,color:'var(--ink-soft)'}}>or 4 interest-free payments of ${(total/4).toFixed(2)} with <strong>Afterpay</strong></div>
        </div>
      </div>
      <div style={{display:'flex',gap:10,marginTop:18}}>
        <button className="btn primary" style={{flex:1,justifyContent:'center',fontSize:16,padding:'18px 20px'}} onClick={addToCart}>
          {label} <Icon.Arrow/>
        </button>
        <button className="btn ghost" style={{padding:'18px 18px',background: saved ? 'var(--yellow)' : '#fff'}} onClick={toggleSave}>
          {saved ? '♥ Saved' : '♡ Save'}
        </button>
      </div>
      <div style={{display:'flex',justifyContent:'space-between',marginTop:14,fontSize:11.5,color:'var(--muted)',gap:14,flexWrap:'wrap'}}>
        <span>🔒 Secure checkout</span>
        <span>✓ 100% reprint guarantee</span>
      </div>
      <div style={{display:'flex',gap:6,marginTop:10,flexWrap:'wrap'}}>
        {['VISA','MASTERCARD','AMEX','PAYPAL','AFTERPAY','APPLE PAY'].map(p=>(
          <span key={p} style={{fontSize:9.5,fontWeight:800,letterSpacing:'0.02em',padding:'3px 7px',border:'1.5px solid var(--ink)',borderRadius:6,background:'#fff',color:'var(--ink)'}}>{p}</span>
        ))}
      </div>
      {m && (
        <div style={{position:'fixed',left:0,right:0,bottom:0,zIndex:90,background:'#fff',borderTop:'3px solid var(--ink)',padding:'10px 16px',display:'flex',alignItems:'center',gap:12}}>
          <div style={{flex:1}}>
            <div className="display" style={{fontSize:22,lineHeight:1}}>${total.toFixed(2)}</div>
            <div style={{fontSize:11,color:'var(--muted)'}}>{qty} {unit_label}s · ${unit.toFixed(2)}/ea</div>
          </div>
          <button className="btn primary" onClick={addToCart} style={{padding:'13px 20px',fontSize:15}}>{label} <Icon.Arrow/></button>
        </div>
      )}
    </div>
  );
};

const PReviews = ({reviews, wcId}) => (
  <div className="rev-grid" style={{display:'grid',gridTemplateColumns:'300px 1fr',gap:40}}>
    <div>
      <div className="display" style={{fontSize:40,lineHeight:1.05}}>What customers say</div>
      <div style={{display:'flex',gap:2,color:'var(--orange)',margin:'6px 0'}}>{[0,1,2,3,4].map(i=><Icon.Star key={i} fill="currentColor" size={20}/>)}</div>
      <div style={{fontSize:14,color:'var(--muted)'}}>Reviews from real King Kong customers</div>
      <div style={{marginTop:20}}>
        {[5,4,3,2,1].map(s=>{
          const pct={5:91,4:7,3:1.5,2:0.3,1:0.2}[s];
          return (<div key={s} style={{display:'flex',alignItems:'center',gap:10,marginBottom:6,fontSize:13}}>
            <span style={{width:24}}>{s}★</span>
            <div style={{flex:1,height:8,background:'#00000010',borderRadius:4,overflow:'hidden'}}>
              <div style={{width:`${pct}%`,height:'100%',background:'var(--orange)'}}/>
            </div>
            <span style={{width:42,textAlign:'right',color:'var(--muted)'}}>{pct}%</span>
          </div>);
        })}
      </div>
      <button className="btn" style={{marginTop:18}} onClick={()=>window.open(wcId ? `/?p=${wcId}#tab-reviews` : '/#reviews','_blank')}>Write a review</button>
    </div>
    <div style={{display:'flex',flexDirection:'column',gap:14}}>
      {reviews.map((r,i)=>(
        <div key={i} className="sticker" style={{padding:18,boxShadow:'4px 4px 0 var(--ink)'}}>
          <div style={{display:'flex',gap:14,alignItems:'flex-start'}}>
            {r.img && <img src={r.img} alt={r.n + ' — sticker customer review photo'} loading="lazy" style={{width:64,height:64,borderRadius:10,border:'2px solid var(--ink)',objectFit:'cover'}}/>}
            <div style={{flex:1}}>
              <div style={{display:'flex',gap:2,color:'var(--orange)'}}>{[0,1,2,3,4].map(j=><Icon.Star key={j} fill="currentColor" size={14}/>)}</div>
              <p style={{fontSize:15,lineHeight:1.5,margin:'6px 0 8px'}}>"{r.t}"</p>
              <div style={{display:'flex',gap:10,fontSize:12,color:'var(--muted)'}}>
                <strong style={{color:'var(--ink)'}}>{r.n}</strong>· {r.d} · <span style={{color:'var(--green)',fontWeight:700}}>✓ Verified</span>
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  </div>
);

const PFAQ = ({qa}) => (
  <div style={{display:'flex',flexDirection:'column',gap:8}}>
    {qa.map(([q,a],i)=>(
      <details key={i} className="sticker" style={{padding:'16px 20px',cursor:'pointer'}}>
        <summary style={{listStyle:'none',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
          <span className="display" style={{fontSize:18}}>{q}</span>
          <Icon.Plus/>
        </summary>
        <p style={{marginTop:10,fontSize:14,color:'var(--ink-soft)',lineHeight:1.55}}>{a}</p>
      </details>
    ))}
  </div>
);

const PRelated = ({go, items}) => (
  <section style={{padding:'60px 0'}}>
    <div className="wrap">
      <div className="mono" style={{fontSize:13,letterSpacing:'0.18em',textTransform:'uppercase',color:'var(--orange)'}}>// MORE IN THE JUNGLE</div>
      <h2 className="display" style={{fontSize:'clamp(32px,4vw,52px)',margin:'6px 0 24px'}}>Pair it with</h2>
      <div className="rel-grid" style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:18}}>
        {items.map(p=>(
          <div key={p.n} className="sticker lift" style={{cursor:'pointer'}} onClick={()=>go(p.page)}>
            <div style={{aspectRatio:'1/1',overflow:'hidden',borderBottom:'3px solid var(--ink)'}}>
              <img src={p.img} alt={p.n + ' — custom stickers'} loading="lazy" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
            </div>
            <div style={{padding:'12px 14px'}}>
              <div style={{fontWeight:800,fontSize:14}}>{p.n}</div>
              <div style={{fontSize:12,color:'var(--muted)'}}>from <strong style={{color:'var(--ink)'}}>${p.p}</strong></div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const PBreadcrumb = ({go, name}) => (
  <div style={{borderBottom:'1px solid #00000015',background:'#fff'}}>
    <div className="wrap" style={{padding:'14px 28px',fontSize:13,color:'var(--muted)'}}>
      <a onClick={()=>go('home')} style={{cursor:'pointer'}}>Home</a>
      <span style={{margin:'0 8px',opacity:0.5}}>/</span>
      <span>Shop</span>
      <span style={{margin:'0 8px',opacity:0.5}}>/</span>
      <strong style={{color:'var(--ink)'}}>{name}</strong>
    </div>
  </div>
);

const PSpecTable = ({groups}) => (
  <div className="two-col" style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:40}}>
    {groups.map((g,i)=>(
      <div key={i}>
        <div className="display" style={{fontSize:22,marginBottom:10}}>{g.h}</div>
        <table style={{width:'100%',borderCollapse:'collapse'}}>
          <tbody>
            {g.rows.map(([k,v])=>(
              <tr key={k} style={{borderBottom:'1.5px dashed #00000020'}}>
                <td style={{padding:'10px 0',fontSize:13,color:'var(--muted)',fontWeight:600}}>{k}</td>
                <td style={{padding:'10px 0',fontSize:14,fontWeight:700,textAlign:'right'}}>{v}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    ))}
  </div>
);

const PTabs = ({tab,setTab,content,labels=[['description','Description'],['specs','Specs + materials'],['reviews','Reviews'],['faq','FAQ']]}) => (
  <section style={{background:'#fff',borderTop:'3px solid var(--ink)',borderBottom:'3px solid var(--ink)'}}>
    <div className="wrap">
      <div className="tab-row noscroll" style={{display:'flex',gap:0,borderBottom:'2px solid var(--ink)'}}>
        {labels.map(([k,l])=>(
          <button key={k} onClick={()=>setTab(k)} style={{
            padding:'18px 22px',fontWeight:800,fontSize:14,textTransform:'uppercase',letterSpacing:'0.04em',
            background:tab===k?'var(--yellow)':'transparent',
            borderRight:'2px solid var(--ink)',borderBottom:tab===k?'3px solid var(--orange)':'none'
          }}>{l}</button>
        ))}
      </div>
      <div style={{padding:'36px 28px',minHeight:280}}>
        {content[tab]}
      </div>
    </div>
  </section>
);

// ═══════════════════════════════════════════════════════════════════════════════
// 1. HOLOGRAPHIC STICKERS
// ═══════════════════════════════════════════════════════════════════════════════

const HoloProduct = ({go}) => {
  useSEO(HOLO_SEO);
  const [shape,setShape]=React.useState('die-cut');
  const [size,setSize]=React.useState('75mm');
  const [isCustom,setIsCustom]=React.useState(false);
  const [customW,setCustomW]=React.useState('');
  const [customH,setCustomH]=React.useState('');
  const [qty,setQty]=React.useState(50);
  const [holoType,setHoloType]=React.useState('rainbow');
  const [laminate,setLaminate]=React.useState('standard');
  const [tab,setTab]=React.useState('description');
  const [activeImg,setActiveImg]=React.useState(0);
  const [file,setFile]=React.useState(null);

  const holoBase={rainbow:1.6,gold:1.65,chrome:1.7,silver:1.65}[holoType];
  const customLongest=Math.max(parseFloat(customW)||75,parseFloat(customH)||75);
  const sizeMult=isCustom?pInterpMult(customLongest):(STD_SIZE_MULT[size]||1.0);
  const finMult=laminate==='heavy'?1.15:1.0;
  const surcharge=isCustom?1.1:1.0;
  const unit=pCalcUnit(qty,holoBase,sizeMult,finMult,surcharge);
  const total=+(unit*qty).toFixed(2);

  const images=['assets/holo-rainbow.jpeg','assets/holo-gold.jpeg','assets/holo-chrome.jpeg','assets/laptop-sticker.jpeg','assets/sticker-stack.jpeg'];

  const tabContent = {
    description: (
      <div className="two-col" style={{display:'grid',gridTemplateColumns:'1.4fr 1fr',gap:48}}>
        <div>
          <p style={{fontSize:17,lineHeight:1.6,color:'var(--ink-soft)'}}>Holographic vinyl reflects every colour in the spectrum as the viewing angle shifts. It's the same prismatic film used in premium cosmetics, security labels, and luxury packaging — now cut to your exact shape. We print CMYK over white ink so your artwork stays vivid regardless of which holo base you choose.</p>
          <p style={{fontSize:17,lineHeight:1.6,color:'var(--ink-soft)',marginTop:14}}>All four holo types share the same 7-year outdoor durability rating. The holo is in the substrate — not a surface coating — so it won't scratch off or lose its shift over time.</p>
          <ul style={{listStyle:'none',padding:0,margin:'20px 0 0',display:'grid',gridTemplateColumns:'1fr 1fr',gap:8}}>
            {['Prismatic colour shift','Photography magnet','White ink standard','7-year outdoor rating','UV + waterproof','Ships in 4 days'].map(s=>(
              <li key={s} style={{display:'flex',gap:8,alignItems:'center',fontSize:14}}>
                <span style={{width:22,height:22,borderRadius:'50%',background:'var(--green)',color:'#fff',display:'grid',placeItems:'center'}}><Icon.Check size={12}/></span>{s}
              </li>
            ))}
          </ul>
        </div>
        <div className="sticker" style={{padding:0,overflow:'hidden'}}>
          <img src="assets/holo-rainbow.jpeg" alt="Holographic rainbow custom stickers — colour-shifting vinyl" loading="lazy" style={{width:'100%',aspectRatio:'4/3',objectFit:'cover'}}/>
          <div style={{padding:18}}>
            <div className="display" style={{fontSize:22}}>One sticker, a thousand colours.</div>
            <p style={{fontSize:14,color:'var(--ink-soft)',marginTop:6,lineHeight:1.5}}>The light angle dictates the colour. Rainbow shifts through every spectrum hue. Gold glows warm. Chrome mirrors the room. Silver stays cool.</p>
          </div>
        </div>
      </div>
    ),
    specs: <PSpecTable groups={[
      {h:'Material',rows:[['Base','Holographic prismatic vinyl, 80μm'],['Adhesive','Permanent acrylic'],['Laminate','UV-blocking PVC clear, 25μm'],['Ink system','CMYK + white (all variants)']]},
      {h:'Print',rows:[['Press','HP Indigo 6900 digital'],['Resolution','812 dpi'],['White ink','Yes — included on all holo'],['Colour gamut','7-colour CMYK + OGV']]},
      {h:'Durability',rows:[['Outdoor life','7 years'],['UV resistance','Excellent'],['Water resistance','Waterproof'],['Holo layer','In substrate — won\'t peel']]},
      {h:'Sizes',rows:[['Min','38mm'],['Max','380mm × 380mm'],['Safe zone','5mm inside cut'],['Tolerance','±0.4mm']]},
    ]}/>,
    reviews: <PReviews reviews={[
      {n:'Maya R.',  d:'2 weeks ago', img:'assets/holo-rainbow.jpeg', t:'The rainbow holo ones stopped traffic at our market stall. People were photographing the table just for the stickers. Unreal product.'},
      {n:'Tom V.',  d:'1 month ago',  img:'assets/holo-gold.jpeg',    t:'Gold holo on a black artwork looks like a luxury product. Way above expectations for the price point.'},
      {n:'Kira M.', d:'3 months ago',                                 t:'Was worried colours would wash out on holo. With white ink underneath they\'re completely vibrant. Very impressed.'},
    ]}/>,
    faq: <PFAQ qa={[
      ['What\'s the difference between rainbow, gold, chrome and silver?','Rainbow shifts through the full visible spectrum — every colour depending on angle. Gold is warm metallic (think jewellery). Chrome is mirror-silver, reflective like polished steel. Silver is cooler and softer than chrome.'],
      ['Do I need to design specifically for holo?','No — send your normal artwork. We add white ink underneath automatically so colours stay true. Transparent areas will show the raw holo base for a stained-glass effect. Just note that in your order.'],
      ['Can I get transparent windows in the holo?','Yes. Tell us which areas should stay clear and we\'ll omit the white ink there. The holo shines through.'],
      ['How long does printing take?','3 business days from artwork approval to dispatch. Express 1-day turnaround available at checkout.'],
      ['What\'s the minimum order?','10 stickers for all holo types and shapes.'],
    ]}/>,
  };

  return (
    <main data-screen-label="Holographic Stickers">
      <Header go={go} cart={0}/>
      <PBreadcrumb go={go} name="Holographic Stickers"/>
      <section style={{padding:'36px 0'}}>
        <div className="wrap prod-layout" style={{display:'grid',gridTemplateColumns:'1.05fr 0.95fr',gap:48,alignItems:'start'}}>
          <div>
            <PGallery images={images} activeImg={activeImg} setActiveImg={setActiveImg} badge="Best seller"/>
            <PFeatures features={[
              {i:<Icon.Sparkle size={16}/>, h:'Prismatic colour shift'},
              {i:<Icon.Aus size={18}/>,     h:'Printed in Sydney'},
              {i:<Icon.Truck size={18}/>,   h:'Free shipping on $25+'},
              {i:<Icon.Check size={16}/>,   h:'White ink included'},
            ]}/>
          </div>
          <div>
            <div className="mono" style={{fontSize:12,letterSpacing:'0.16em',textTransform:'uppercase',color:'var(--orange)'}}>// PRODUCT — HOLO001</div>
            <h1 className="display" style={{fontSize:'clamp(36px,4vw,56px)',margin:'8px 0 0',lineHeight:0.95}}>Custom<br/>Holographic<br/>Stickers</h1>
            <p style={{fontSize:16,color:'var(--ink-soft)',marginTop:14,lineHeight:1.5,maxWidth:520}}>Prismatic light-shifting vinyl cut to any shape you want. Rainbow, gold, chrome or silver — all die-cut, white-inked, and laminated for years outdoors.</p>

            {/* holo type */}
            <PSection title="01 · Holographic Type">
              <div className="pick-grid" style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:8}}>
                {[
                  {k:'rainbow',l:'Rainbow', p:'+ $0.60', sw:'linear-gradient(135deg,#FF6A1A,#FFCE00,#2BB04A,#3D7AFE,#A23BFF)'},
                  {k:'gold',   l:'Gold',    p:'+ $0.65', sw:'linear-gradient(135deg,#BF953F,#FCF6BA,#B38728,#FBF5B7)'},
                  {k:'chrome', l:'Chrome',  p:'+ $0.70', sw:'linear-gradient(135deg,#bdc3c7,#fff,#95a5a6,#fff)'},
                  {k:'silver', l:'Silver',  p:'+ $0.65', sw:'linear-gradient(135deg,#C0C0C0,#E8E8E8,#A8A8A8,#D8D8D8)'},
                ].map(m=>(
                  <PCard key={m.k} active={holoType===m.k} onClick={()=>setHoloType(m.k)}>
                    <div style={{width:'100%',aspectRatio:'1.6/1',background:m.sw,borderRadius:8,border:'2px solid var(--ink)'}}/>
                    <div style={{fontWeight:800,fontSize:13,marginTop:8}}>{m.l}</div>
                    <div style={{fontSize:11,color:'var(--muted)'}}>{m.p}</div>
                  </PCard>
                ))}
              </div>
            </PSection>

            <PShapeSelector shape={shape} setShape={setShape}/>
            <PSizeSelector size={size} setSize={setSize} isCustom={isCustom} setIsCustom={setIsCustom} customW={customW} setCustomW={setCustomW} customH={customH} setCustomH={setCustomH} label="03 · Size"/>

            <PSection title="04 · Laminate">
              <div style={{display:'flex',gap:8}}>
                {[{k:'standard',l:'Standard gloss',s:'Built-in holo shine — looks stunning'},{k:'heavy',l:'Heavy laminate',s:'+15% · extreme scratch resistance'}].map(o=>(
                  <button key={o.k} onClick={()=>setLaminate(o.k)} style={{flex:1,textAlign:'left',padding:'14px 16px',borderRadius:12,border:'2.5px solid var(--ink)',background:laminate===o.k?'var(--yellow)':'#fff',boxShadow:laminate===o.k?'4px 4px 0 var(--ink)':'2px 2px 0 var(--ink)'}}>
                    <div style={{fontWeight:800,fontSize:14,display:'flex',justifyContent:'space-between',alignItems:'center'}}>{o.l}{laminate===o.k&&<span style={{width:20,height:20,borderRadius:'50%',background:'var(--ink)',color:'#fff',display:'grid',placeItems:'center'}}><Icon.Check size={12}/></span>}</div>
                    <div style={{fontSize:12,color:'var(--muted)'}}>{o.s}</div>
                  </button>
                ))}
              </div>
            </PSection>

            <PQtySelector qty={qty} setQty={setQty} label={`05 · Quantity — ${qty}`}/>
            <PSection title="06 · Artwork"><PFileUpload file={file} setFile={setFile}/></PSection>
            <PPriceCTA qty={qty} unit={unit} total={total} wcId={9908} sizeStr={isCustom?(Math.max(parseInt(customW)||75,parseInt(customH)||75)+'mm'):size}/>
          </div>
        </div>
      </section>
      <PTabs tab={tab} setTab={setTab} content={tabContent}/>
      <PRelated go={go} items={[
        {n:'Die-Cut Vinyl',    img:'assets/laptop-sticker.jpeg',  p:'0.39', page:'die-cut'},
        {n:'Glitter Stickers', img:'assets/holo-gold.jpeg',       p:'0.55', page:'glitter'},
        {n:'Sticker Sheets',   img:'assets/sticker-sheets.jpeg',  p:'3.50', page:'sheets'},
        {n:'Sample Pack',      img:'assets/sticker-collection.jpeg',p:'1.00',page:'sample'},
      ]}/>
      <Footer go={go}/>
    </main>
  );
};
window.HoloProduct = HoloProduct;

// ═══════════════════════════════════════════════════════════════════════════════
// 2. STICKER SHEETS
// ═══════════════════════════════════════════════════════════════════════════════

const SHEET_BASE = {a6:3.50,a5:5.50,a4:8.50};
const SHEET_TIERS = [{q:5,p:1.0},{q:10,p:0.85},{q:25,p:0.70},{q:50,p:0.58},{q:100,p:0.48},{q:250,p:0.38},{q:500,p:0.30}];
const SHEET_MAT_MULT = {matte:1.0,gloss:1.05,clear:1.2};

const SheetsProduct = ({go}) => {
  useSEO(SHEETS_SEO);
  const [format,setFormat]=React.useState('a6');
  const [material,setMaterial]=React.useState('matte');
  const [qty,setQty]=React.useState(25);
  const [tab,setTab]=React.useState('description');
  const [activeImg,setActiveImg]=React.useState(0);
  const [file,setFile]=React.useState(null);

  const unit=pCalcUnit(qty,SHEET_BASE[format],1.0,SHEET_MAT_MULT[material],1.0,SHEET_TIERS);
  const total=+(unit*qty).toFixed(2);

  const images=['assets/sticker-sheets.jpeg','assets/sticker-collection.jpeg','assets/sticker-stack.jpeg','assets/laptop-sticker.jpeg','assets/water-bottle.jpeg'];

  const tabContent = {
    description: (
      <div className="two-col" style={{display:'grid',gridTemplateColumns:'1.4fr 1fr',gap:48}}>
        <div>
          <p style={{fontSize:17,lineHeight:1.6,color:'var(--ink-soft)'}}>Sticker sheets pack multiple designs onto a single backing — perfect for variety packs, event giveaways, market products, or anything where your audience wants a collection. Every sticker is kiss-cut through the vinyl layer so each design peels away cleanly, leaving a crisp white or clear backing behind.</p>
          <p style={{fontSize:17,lineHeight:1.6,color:'var(--ink-soft)',marginTop:14}}>You control the layout — send individual artwork files and we'll arrange them on the sheet, or send a pre-built layout. A6 sheets fit comfortably in a postcard envelope, A5 in a standard envelope, and A4 is the maximum sheet size we run.</p>
          <ul style={{listStyle:'none',padding:0,margin:'20px 0 0',display:'grid',gridTemplateColumns:'1fr 1fr',gap:8}}>
            {['Mix designs on one sheet','Kiss-cut for easy peel','Postcard-size (A6) fits in envelopes','Matte, gloss or clear base','Waterproof vinyl throughout','Ships in 4 days'].map(s=>(
              <li key={s} style={{display:'flex',gap:8,alignItems:'center',fontSize:14}}>
                <span style={{width:22,height:22,borderRadius:'50%',background:'var(--green)',color:'#fff',display:'grid',placeItems:'center'}}><Icon.Check size={12}/></span>{s}
              </li>
            ))}
          </ul>
        </div>
        <div className="sticker" style={{padding:0,overflow:'hidden'}}>
          <img src="assets/sticker-sheets.jpeg" alt="Custom sticker sheets A4 A5 A6 — printed in Sydney Australia" loading="lazy" style={{width:'100%',aspectRatio:'4/3',objectFit:'cover'}}/>
          <div style={{padding:18}}>
            <div className="display" style={{fontSize:22}}>More designs, one sheet.</div>
            <p style={{fontSize:14,color:'var(--ink-soft)',marginTop:6,lineHeight:1.5}}>Markets, gift boxes, subscription packs, brand collabs — sticker sheets are the format that does it all.</p>
          </div>
        </div>
      </div>
    ),
    specs: <PSpecTable groups={[
      {h:'Sheet sizes',rows:[['A6','105 × 148mm (postcard)'],['A5','148 × 210mm'],['A4','210 × 297mm'],['Bleed','3mm all sides']]},
      {h:'Material',rows:[['Vinyl body','Premium polymeric vinyl, 80μm'],['Matte finish','Low-glare matte laminate'],['Gloss finish','High-shine gloss laminate'],['Clear','See-through base, white ink printing']]},
      {h:'Print',rows:[['Press','HP Indigo 6900 digital'],['Resolution','812 dpi'],['Cut type','Kiss-cut (each sticker peels off)'],['Backing','White or clear silicone paper']]},
      {h:'Durability',rows:[['Outdoor life','5 years (7 with heavy laminate)'],['Water resistance','Waterproof'],['Peel','Clean — no adhesive residue'],['Min sticker size','15mm on shortest edge']]},
    ]}/>,
    reviews: <PReviews reviews={[
      {n:'Jess T.',   d:'1 week ago',   img:'assets/sticker-sheets.jpeg', t:'I put these in all my Etsy orders. Customers absolutely love getting a whole sheet of designs. Presentation is 10/10.'},
      {n:'Luke B.',   d:'3 weeks ago',                                     t:'Used them as event giveaways. A6 sheets slid straight into our thank-you envelopes. Peeled perfectly and the print quality is immaculate.'},
      {n:'Priya M.', d:'2 months ago',                                     t:'Ordered clear sheets with white ink for a transparent effect. The result is beautiful — floating designs on any surface.'},
    ]}/>,
    faq: <PFAQ qa={[
      ['How many designs can fit on one sheet?','It depends on sticker size. A6 typically fits 6–12 small stickers, A5 fits 10–20, A4 can fit 20–40. We\'ll advise on layout once you submit artwork.'],
      ['Can each sticker on the sheet be a different design?','Yes — that\'s exactly what sheets are for. Submit each design as a separate file and we\'ll arrange them.'],
      ['Do stickers peel off individually?','Yes. Each sticker is kiss-cut through the vinyl layer. The sheet backing stays intact and each sticker peels off cleanly.'],
      ['What\'s the minimum sheet order?','5 sheets minimum for all formats.'],
      ['Can I mix sheet sizes in one order?','Yes — just add each size as a separate line item at checkout.'],
    ]}/>,
  };

  return (
    <main data-screen-label="Sticker Sheets">
      <Header go={go} cart={0}/>
      <PBreadcrumb go={go} name="Sticker Sheets"/>
      <section style={{padding:'36px 0'}}>
        <div className="wrap prod-layout" style={{display:'grid',gridTemplateColumns:'1.05fr 0.95fr',gap:48,alignItems:'start'}}>
          <div>
            <PGallery images={images} activeImg={activeImg} setActiveImg={setActiveImg} badge="Popular"/>
            <PFeatures features={[
              {i:<Icon.Sparkle size={16}/>, h:'Mix designs on one sheet'},
              {i:<Icon.Aus size={18}/>,     h:'Printed in Sydney'},
              {i:<Icon.Truck size={18}/>,   h:'Free shipping on $25+'},
              {i:<Icon.Check size={16}/>,   h:'Kiss-cut, easy peel'},
            ]}/>
          </div>
          <div>
            <div className="mono" style={{fontSize:12,letterSpacing:'0.16em',textTransform:'uppercase',color:'var(--orange)'}}>// PRODUCT — SHEET001</div>
            <h1 className="display" style={{fontSize:'clamp(36px,4vw,56px)',margin:'8px 0 0',lineHeight:0.95}}>Custom<br/>Sticker<br/>Sheets</h1>
            <p style={{fontSize:16,color:'var(--ink-soft)',marginTop:14,lineHeight:1.5,maxWidth:520}}>Multiple designs on a single sheet, kiss-cut for easy peel. Perfect for variety packs, gift boxes, events, and Etsy orders. A6, A5 or A4.</p>

            <PSection title="01 · Sheet Format">
              <div className="pick-grid" style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:8}}>
                {[
                  {k:'a6',l:'A6',s:'105 × 148mm',note:'Postcard size — fits in an envelope'},
                  {k:'a5',l:'A5',s:'148 × 210mm',note:'Half-A4 — room for more designs'},
                  {k:'a4',l:'A4',s:'210 × 297mm',note:'Full sheet — maximum variety'},
                ].map(f=>(
                  <PCard key={f.k} active={format===f.k} onClick={()=>setFormat(f.k)}>
                    <div style={{width:'100%',aspectRatio:'0.75',background:'var(--cream)',border:'2px solid var(--ink)',borderRadius:6,display:'flex',alignItems:'center',justifyContent:'center'}}>
                      <span className="display" style={{fontSize:24}}>{f.l}</span>
                    </div>
                    <div style={{fontWeight:800,fontSize:13,marginTop:8}}>{f.l} Sheet</div>
                    <div style={{fontSize:11,color:'var(--muted)'}}>{f.s}</div>
                    <div style={{fontSize:10,color:'var(--ink-soft)',marginTop:2,lineHeight:1.3}}>{f.note}</div>
                  </PCard>
                ))}
              </div>
            </PSection>

            <PSection title="02 · Material">
              <div className="pick-grid" style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:8}}>
                {[
                  {k:'matte', l:'Matte vinyl',  p:'Standard', sw:'linear-gradient(135deg,#fff,#ECE3D0)'},
                  {k:'gloss', l:'Gloss vinyl',  p:'+5%',      sw:'linear-gradient(135deg,#f0f0f0,#fff,#e0e0e0)'},
                  {k:'clear', l:'Clear vinyl',  p:'+20%',     sw:'repeating-linear-gradient(45deg,#fff,#fff 6px,#EFEFEF 6px,#EFEFEF 12px)'},
                ].map(m=>(
                  <PCard key={m.k} active={material===m.k} onClick={()=>setMaterial(m.k)}>
                    <div style={{width:'100%',aspectRatio:'1.6/1',background:m.sw,borderRadius:8,border:'2px solid var(--ink)'}}/>
                    <div style={{fontWeight:800,fontSize:13,marginTop:8}}>{m.l}</div>
                    <div style={{fontSize:11,color:'var(--muted)'}}>{m.p}</div>
                  </PCard>
                ))}
              </div>
            </PSection>

            <PSection title={`03 · Quantity — ${qty} sheets`}>
              <div style={{display:'flex',gap:6,flexWrap:'wrap',marginBottom:14}}>
                {SHEET_TIERS.map(t=>(
                  <button key={t.q} onClick={()=>setQty(t.q)} style={{padding:'10px 14px',borderRadius:10,border:'2px solid var(--ink)',background:qty===t.q?'var(--orange)':'#fff',color:qty===t.q?'#fff':'var(--ink)',fontWeight:800,fontSize:13}}>
                    {t.q}
                    <span style={{display:'block',fontSize:10,fontWeight:600,opacity:0.75}}>${(t.p*SHEET_BASE[format]*SHEET_MAT_MULT[material]).toFixed(2)}</span>
                  </button>
                ))}
              </div>
            </PSection>

            <PSection title="04 · Artwork"><PFileUpload file={file} setFile={setFile}/></PSection>
            <PPriceCTA qty={qty} unit={unit} total={total} wcId={9968} label="Get free proof" unit_label="sheet"/>
          </div>
        </div>
      </section>
      <PTabs tab={tab} setTab={setTab} content={tabContent}/>
      <PRelated go={go} items={[
        {n:'Die-Cut Vinyl',     img:'assets/laptop-sticker.jpeg',   p:'0.39', page:'die-cut'},
        {n:'Kiss-Cut Stickers', img:'assets/sticker-stack.jpeg',    p:'0.45', page:'kiss-cut'},
        {n:'Holographic',       img:'assets/holo-rainbow.jpeg',     p:'0.55', page:'holo'},
        {n:'Sample Pack',       img:'assets/sticker-collection.jpeg',p:'1.00',page:'sample'},
      ]}/>
      <Footer go={go}/>
    </main>
  );
};
window.SheetsProduct = SheetsProduct;

// ═══════════════════════════════════════════════════════════════════════════════
// 3. GLITTER STICKERS
// ═══════════════════════════════════════════════════════════════════════════════

const GlitterProduct = ({go}) => {
  useSEO(GLITTER_SEO);
  const [shape,setShape]=React.useState('die-cut');
  const [size,setSize]=React.useState('75mm');
  const [isCustom,setIsCustom]=React.useState(false);
  const [customW,setCustomW]=React.useState('');
  const [customH,setCustomH]=React.useState('');
  const [qty,setQty]=React.useState(50);
  const [colour,setColour]=React.useState('gold');
  const [tab,setTab]=React.useState('description');
  const [activeImg,setActiveImg]=React.useState(0);
  const [file,setFile]=React.useState(null);

  const glitterBase={gold:1.7,silver:1.7,'rose-gold':1.75,holo:1.8,red:1.7,blue:1.7}[colour];
  const customLongest=Math.max(parseFloat(customW)||75,parseFloat(customH)||75);
  const sizeMult=isCustom?pInterpMult(customLongest):(STD_SIZE_MULT[size]||1.0);
  const surcharge=isCustom?1.1:1.0;
  const unit=pCalcUnit(qty,glitterBase,sizeMult,1.0,surcharge);
  const total=+(unit*qty).toFixed(2);

  const images=['assets/holo-gold.jpeg','assets/holo-rainbow.jpeg','assets/holo-chrome.jpeg','assets/laptop-sticker.jpeg','assets/sticker-collection.jpeg'];

  const glitterColours=[
    {k:'gold',     l:'Gold',      bg:'#FFD700', note:'Warm and bold'},
    {k:'silver',   l:'Silver',    bg:'#C0C0C0', note:'Clean and sharp'},
    {k:'rose-gold',l:'Rose Gold', bg:'#E8A598', note:'Soft metallic blush'},
    {k:'holo',     l:'Holo Glitter',bg:'linear-gradient(135deg,#FF6A1A,#FFCE00,#2BB04A,#A23BFF)', note:'Colour-shifting sparkle'},
    {k:'red',      l:'Red',       bg:'#E5333D', note:'High-energy red'},
    {k:'blue',     l:'Blue',      bg:'#3D7AFE', note:'Electric blue'},
  ];

  const tabContent = {
    description: (
      <div className="two-col" style={{display:'grid',gridTemplateColumns:'1.4fr 1fr',gap:48}}>
        <div>
          <p style={{fontSize:17,lineHeight:1.6,color:'var(--ink-soft)'}}>Glitter stickers use chunky metallic particles embedded in the vinyl base — not a flat print. When light hits them they scatter and sparkle in a way no digital press can fake. They're tactile, unmissable, and photograph brilliantly at any angle.</p>
          <p style={{fontSize:17,lineHeight:1.6,color:'var(--ink-soft)',marginTop:14}}>We print CMYK over white ink on top of the glitter base, so your full artwork stays vivid while the glitter shows through transparent areas. Available in 6 glitter colours from warm gold to electric blue.</p>
          <ul style={{listStyle:'none',padding:0,margin:'20px 0 0',display:'grid',gridTemplateColumns:'1fr 1fr',gap:8}}>
            {['Chunky metallic particles','Tactile sparkle effect','Vivid CMYK over glitter','UV + waterproof','7-year outdoor rating','Ships in 4 days'].map(s=>(
              <li key={s} style={{display:'flex',gap:8,alignItems:'center',fontSize:14}}>
                <span style={{width:22,height:22,borderRadius:'50%',background:'var(--green)',color:'#fff',display:'grid',placeItems:'center'}}><Icon.Check size={12}/></span>{s}
              </li>
            ))}
          </ul>
        </div>
        <div className="sticker" style={{padding:0,overflow:'hidden'}}>
          <img src="assets/holo-gold.jpeg" alt="Gold glitter custom stickers — sparkle vinyl printed in Australia" loading="lazy" style={{width:'100%',aspectRatio:'4/3',objectFit:'cover'}}/>
          <div style={{padding:18}}>
            <div className="display" style={{fontSize:22}}>Not a filter. Real glitter.</div>
            <p style={{fontSize:14,color:'var(--ink-soft)',marginTop:6,lineHeight:1.5}}>The sparkle is physical — chunky particles that scatter light. No amount of screen brightness replicates it in person.</p>
          </div>
        </div>
      </div>
    ),
    specs: <PSpecTable groups={[
      {h:'Material',rows:[['Base','Glitter particle vinyl, 90μm'],['Glitter type','Chunky metallic, hexagonal cut'],['Adhesive','Permanent acrylic'],['Laminate','Clear UV-blocking PVC, 25μm']]},
      {h:'Print',rows:[['Press','HP Indigo 6900 digital'],['Resolution','812 dpi'],['White ink','Yes — applied under artwork'],['Colour gamut','7-colour CMYK + OGV']]},
      {h:'Durability',rows:[['Outdoor life','7 years'],['UV resistance','Excellent'],['Water resistance','Waterproof'],['Glitter layer','In substrate — sealed under laminate']]},
      {h:'Sizes',rows:[['Min','38mm'],['Max','300mm × 300mm'],['Safe zone','5mm inside cut'],['Tolerance','±0.5mm']]},
    ]}/>,
    reviews: <PReviews reviews={[
      {n:'Tara H.',  d:'2 weeks ago', img:'assets/holo-gold.jpeg', t:'The gold glitter ones look genuinely expensive. Not in a tacky way — they have real weight to them. My clients keep asking where I got them.'},
      {n:'Sam K.',  d:'1 month ago',                               t:'Holo glitter is next level. You can\'t photograph it accurately because it shifts depending on angle and lighting. People have to see them in person.'},
      {n:'Remi G.', d:'6 weeks ago',                               t:'Rose gold for my jewellery brand. Perfect match for the aesthetic. Print quality over the glitter is sharp and the sizing is exact.'},
    ]}/>,
    faq: <PFAQ qa={[
      ['How does printing work over glitter?','We apply white ink first, then CMYK on top. This keeps your artwork vivid. Transparent areas in your design will show the raw glitter base — which looks great as a design choice.'],
      ['Are the particles scratch-resistant?','Yes — the glitter particles are sealed under a PVC laminate so they won\'t rub off or scratch away.'],
      ['Can I get a sample before ordering?','Yes — our $1 sample pack includes a glitter sticker so you can feel the real thing first.'],
      ['What\'s the minimum order?','10 stickers minimum for all shapes and colours.'],
      ['Do glitter stickers cost more than regular vinyl?','Yes, about 60-70% more per unit due to the speciality substrate. Check the price calculator above for exact costs.'],
    ]}/>,
  };

  return (
    <main data-screen-label="Glitter Stickers">
      <Header go={go} cart={0}/>
      <PBreadcrumb go={go} name="Glitter Stickers"/>
      <section style={{padding:'36px 0'}}>
        <div className="wrap prod-layout" style={{display:'grid',gridTemplateColumns:'1.05fr 0.95fr',gap:48,alignItems:'start'}}>
          <div>
            <PGallery images={images} activeImg={activeImg} setActiveImg={setActiveImg} badge="Unique"/>
            <PFeatures features={[
              {i:<Icon.Sparkle size={16}/>, h:'Chunky metallic particles'},
              {i:<Icon.Aus size={18}/>,     h:'Printed in Sydney'},
              {i:<Icon.Truck size={18}/>,   h:'Free shipping on $25+'},
              {i:<Icon.Check size={16}/>,   h:'Sealed — won\'t scratch off'},
            ]}/>
          </div>
          <div>
            <div className="mono" style={{fontSize:12,letterSpacing:'0.16em',textTransform:'uppercase',color:'var(--orange)'}}>// PRODUCT — GLIT001</div>
            <h1 className="display" style={{fontSize:'clamp(36px,4vw,56px)',margin:'8px 0 0',lineHeight:0.95}}>Custom<br/>Glitter<br/>Stickers</h1>
            <p style={{fontSize:16,color:'var(--ink-soft)',marginTop:14,lineHeight:1.5,maxWidth:520}}>Real chunky glitter particles embedded in premium vinyl — not a printed effect. 6 colours, any shape, sealed under laminate so the sparkle lasts as long as the sticker.</p>

            <PSection title="01 · Glitter Colour">
              <div className="pick-grid" style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:8}}>
                {glitterColours.map(c=>(
                  <PCard key={c.k} active={colour===c.k} onClick={()=>setColour(c.k)}>
                    <div style={{width:'100%',aspectRatio:'1.6/1',background:c.bg,borderRadius:8,border:'2px solid var(--ink)'}}/>
                    <div style={{fontWeight:800,fontSize:13,marginTop:8}}>{c.l}</div>
                    <div style={{fontSize:11,color:'var(--muted)'}}>{c.note}</div>
                  </PCard>
                ))}
              </div>
            </PSection>

            <PShapeSelector shape={shape} setShape={setShape}/>
            <PSizeSelector size={size} setSize={setSize} isCustom={isCustom} setIsCustom={setIsCustom} customW={customW} setCustomW={setCustomW} customH={customH} setCustomH={setCustomH} label="03 · Size"/>
            <PQtySelector qty={qty} setQty={setQty} label={`04 · Quantity — ${qty}`}/>
            <PSection title="05 · Artwork"><PFileUpload file={file} setFile={setFile}/></PSection>
            <PPriceCTA qty={qty} unit={unit} total={total} wcId={10197}/>
          </div>
        </div>
      </section>
      <PTabs tab={tab} setTab={setTab} content={tabContent}/>
      <PRelated go={go} items={[
        {n:'Holographic',      img:'assets/holo-rainbow.jpeg',    p:'0.55', page:'holo'},
        {n:'Die-Cut Vinyl',    img:'assets/laptop-sticker.jpeg',  p:'0.39', page:'die-cut'},
        {n:'Clear Vinyl',      img:'assets/water-bottle.jpeg',    p:'0.45', page:'clear'},
        {n:'Sample Pack',      img:'assets/sticker-collection.jpeg',p:'1.00',page:'sample'},
      ]}/>
      <Footer go={go}/>
    </main>
  );
};
window.GlitterProduct = GlitterProduct;

// ═══════════════════════════════════════════════════════════════════════════════
// 4. CLEAR VINYL STICKERS
// ═══════════════════════════════════════════════════════════════════════════════

const ClearProduct = ({go}) => {
  useSEO(CLEAR_SEO);
  const [shape,setShape]=React.useState('die-cut');
  const [size,setSize]=React.useState('75mm');
  const [isCustom,setIsCustom]=React.useState(false);
  const [customW,setCustomW]=React.useState('');
  const [customH,setCustomH]=React.useState('');
  const [qty,setQty]=React.useState(50);
  const [inkMode,setInkMode]=React.useState('full');
  const [finish,setFinish]=React.useState('gloss');
  const [tab,setTab]=React.useState('description');
  const [activeImg,setActiveImg]=React.useState(0);
  const [file,setFile]=React.useState(null);

  const base=1.2;
  const finMult={gloss:1.0,matte:1.08,laminate:1.18}[finish];
  const customLongest=Math.max(parseFloat(customW)||75,parseFloat(customH)||75);
  const sizeMult=isCustom?pInterpMult(customLongest):(STD_SIZE_MULT[size]||1.0);
  const surcharge=isCustom?1.1:1.0;
  const unit=pCalcUnit(qty,base,sizeMult,finMult,surcharge);
  const total=+(unit*qty).toFixed(2);

  const images=['assets/water-bottle.jpeg','assets/sticker-collection.jpeg','assets/laptop-sticker.jpeg','assets/sticker-stack.jpeg','assets/brick-lifestyle.jpeg'];

  const tabContent = {
    description: (
      <div className="two-col" style={{display:'grid',gridTemplateColumns:'1.4fr 1fr',gap:48}}>
        <div>
          <p style={{fontSize:17,lineHeight:1.6,color:'var(--ink-soft)'}}>Clear vinyl stickers have no background — your artwork floats directly on the surface it's applied to. Perfect for bottles, windows, glass, and anything where you want a "printed-on" look rather than a sticker look. We print white ink first so your colours stay vivid; transparent areas let the surface show through.</p>
          <p style={{fontSize:17,lineHeight:1.6,color:'var(--ink-soft)',marginTop:14}}>Clear stickers look completely different on a white surface versus a dark one — on dark surfaces, only areas with white ink stay opaque. If you want a specific effect, let us know when you upload artwork and our designer will advise.</p>
          <ul style={{listStyle:'none',padding:0,margin:'20px 0 0',display:'grid',gridTemplateColumns:'1fr 1fr',gap:8}}>
            {['Invisible background','Floats on any surface','Printed-on look','White ink included','Waterproof + dishwasher safe','Ships in 4 days'].map(s=>(
              <li key={s} style={{display:'flex',gap:8,alignItems:'center',fontSize:14}}>
                <span style={{width:22,height:22,borderRadius:'50%',background:'var(--green)',color:'#fff',display:'grid',placeItems:'center'}}><Icon.Check size={12}/></span>{s}
              </li>
            ))}
          </ul>
        </div>
        <div className="sticker" style={{padding:0,overflow:'hidden'}}>
          <img src="assets/water-bottle.jpeg" alt="Clear vinyl sticker on water bottle — transparent custom stickers Australia" loading="lazy" style={{width:'100%',aspectRatio:'4/3',objectFit:'cover'}}/>
          <div style={{padding:18}}>
            <div className="display" style={{fontSize:22}}>No background. Pure design.</div>
            <p style={{fontSize:14,color:'var(--ink-soft)',marginTop:6,lineHeight:1.5}}>The sticker disappears. Only your design remains. Bottles, windows, helmets — clear vinyl looks like it belongs there.</p>
          </div>
        </div>
      </div>
    ),
    specs: <PSpecTable groups={[
      {h:'Material',rows:[['Base','Clear polymeric vinyl, 80μm'],['Adhesive','Permanent acrylic (repositionable on request)'],['Laminate','Gloss or matte UV PVC, 25μm'],['Backing','Clear silicone release paper']]},
      {h:'Print',rows:[['Press','HP Indigo 6900 digital'],['Resolution','812 dpi'],['White ink','Yes — printed first under CMYK'],['Transparent areas','No ink = surface shows through']]},
      {h:'Durability',rows:[['Outdoor life','5 years'],['Dishwasher safe','Yes (top rack)'],['Water resistance','Waterproof'],['UV resistance','Good with UV laminate']]},
      {h:'Sizes',rows:[['Min','38mm'],['Max','380mm × 380mm'],['Safe zone','5mm inside cut'],['Note','Test on dark surfaces before bulk order']]},
    ]}/>,
    reviews: <PReviews reviews={[
      {n:'Nat P.',  d:'1 week ago',  img:'assets/water-bottle.jpeg', t:'Put these on Stanley cups for a brand collaboration. Looks completely printed-on. Nobody believed they were stickers until I peeled one off.'},
      {n:'Alex T.', d:'3 weeks ago',                                  t:'Window decals for a cafe. Sun hits them perfectly — looks like a high-end vinyl wrap, not a sticker. Incredibly impressed.'},
      {n:'Cam R.',  d:'2 months ago',                                 t:'Finally found a printer who nails the white ink base. I\'ve ordered from 3 others and the colours always look washed out. King Kong\'s are vivid.'},
    ]}/>,
    faq: <PFAQ qa={[
      ['Will my colours look different on clear vs white vinyl?','They\'ll look identical — because we print white ink under your artwork on clear vinyl. Transparent areas in your design will let the surface show through, which can look amazing or unexpected depending on what you stick it to. The $1 sample pack includes a clear sticker so you can test first.'],
      ['Are clear stickers dishwasher safe?','Yes — our clear vinyl with gloss laminate is dishwasher safe (top rack). For heavy daily use we recommend the heavy laminate option.'],
      ['Can I get clear stickers without white ink?','Yes — this gives a stained-glass or translucent effect. Colours will look transparent and darker surfaces will show through. Just note \'no white ink\' when you upload.'],
      ['What\'s the difference between clear vinyl and transparent?','Same thing — clear vinyl is transparent vinyl. The adhesive and vinyl itself are see-through; only the ink has colour.'],
      ['What\'s the minimum order?','10 stickers.'],
    ]}/>,
  };

  return (
    <main data-screen-label="Clear Vinyl Stickers">
      <Header go={go} cart={0}/>
      <PBreadcrumb go={go} name="Clear Vinyl Stickers"/>
      <section style={{padding:'36px 0'}}>
        <div className="wrap prod-layout" style={{display:'grid',gridTemplateColumns:'1.05fr 0.95fr',gap:48,alignItems:'start'}}>
          <div>
            <PGallery images={images} activeImg={activeImg} setActiveImg={setActiveImg} badge="Popular"/>
            <PFeatures features={[
              {i:<Icon.Sparkle size={16}/>, h:'Invisible background'},
              {i:<Icon.Aus size={18}/>,     h:'Printed in Sydney'},
              {i:<Icon.Truck size={18}/>,   h:'Free shipping on $25+'},
              {i:<Icon.Check size={16}/>,   h:'Dishwasher safe'},
            ]}/>
          </div>
          <div>
            <div className="mono" style={{fontSize:12,letterSpacing:'0.16em',textTransform:'uppercase',color:'var(--orange)'}}>// PRODUCT — CLER001</div>
            <h1 className="display" style={{fontSize:'clamp(36px,4vw,56px)',margin:'8px 0 0',lineHeight:0.95}}>Custom Clear<br/>Vinyl<br/>Stickers</h1>
            <p style={{fontSize:16,color:'var(--ink-soft)',marginTop:14,lineHeight:1.5,maxWidth:520}}>No background, no border — your design floats directly on the surface. Bottles, windows, helmets, glass. Looks printed-on, peels off clean.</p>

            <PShapeSelector shape={shape} setShape={setShape}/>
            <PSizeSelector size={size} setSize={setSize} isCustom={isCustom} setIsCustom={setIsCustom} customW={customW} setCustomW={setCustomW} customH={customH} setCustomH={setCustomH} label="02 · Size"/>

            <PSection title="03 · White Ink">
              <div style={{display:'flex',gap:8}}>
                {[
                  {k:'full',   l:'CMYK + white ink',s:'Standard — colours stay vivid on any surface'},
                  {k:'nowhite',l:'CMYK only',       s:'Translucent effect — colours become see-through'},
                ].map(o=>(
                  <button key={o.k} onClick={()=>setInkMode(o.k)} style={{flex:1,textAlign:'left',padding:'14px 16px',borderRadius:12,border:'2.5px solid var(--ink)',background:inkMode===o.k?'var(--yellow)':'#fff',boxShadow:inkMode===o.k?'4px 4px 0 var(--ink)':'2px 2px 0 var(--ink)'}}>
                    <div style={{fontWeight:800,fontSize:14,display:'flex',justifyContent:'space-between',alignItems:'center'}}>{o.l}{inkMode===o.k&&<span style={{width:20,height:20,borderRadius:'50%',background:'var(--ink)',color:'#fff',display:'grid',placeItems:'center'}}><Icon.Check size={12}/></span>}</div>
                    <div style={{fontSize:12,color:'var(--muted)'}}>{o.s}</div>
                  </button>
                ))}
              </div>
            </PSection>

            <PSection title="04 · Finish">
              <div style={{display:'flex',gap:8}}>
                {[{k:'gloss',l:'Gloss',s:'High-shine — classic clear look'},{k:'matte',l:'Matte',s:'+8% · low-glare, frosted effect'},{k:'laminate',l:'Heavy laminate',s:'+18% · maximum protection'}].map(o=>(
                  <button key={o.k} onClick={()=>setFinish(o.k)} style={{flex:1,textAlign:'left',padding:'14px 16px',borderRadius:12,border:'2.5px solid var(--ink)',background:finish===o.k?'var(--yellow)':'#fff',boxShadow:finish===o.k?'4px 4px 0 var(--ink)':'2px 2px 0 var(--ink)'}}>
                    <div style={{fontWeight:800,fontSize:14}}>{o.l}</div>
                    <div style={{fontSize:12,color:'var(--muted)'}}>{o.s}</div>
                  </button>
                ))}
              </div>
            </PSection>

            <PQtySelector qty={qty} setQty={setQty} label={`05 · Quantity — ${qty}`}/>
            <PSection title="06 · Artwork"><PFileUpload file={file} setFile={setFile}/></PSection>
            <PPriceCTA qty={qty} unit={unit} total={total} wcId={9938} sizeStr={isCustom?(Math.max(parseInt(customW)||75,parseInt(customH)||75)+'mm'):size}/>
          </div>
        </div>
      </section>
      <PTabs tab={tab} setTab={setTab} content={tabContent}/>
      <PRelated go={go} items={[
        {n:'Die-Cut Vinyl',    img:'assets/laptop-sticker.jpeg',   p:'0.39', page:'die-cut'},
        {n:'Kiss-Cut',         img:'assets/sticker-stack.jpeg',    p:'0.45', page:'kiss-cut'},
        {n:'Holographic',      img:'assets/holo-rainbow.jpeg',     p:'0.55', page:'holo'},
        {n:'Sample Pack',      img:'assets/sticker-collection.jpeg',p:'1.00',page:'sample'},
      ]}/>
      <Footer go={go}/>
    </main>
  );
};
window.ClearProduct = ClearProduct;

// ═══════════════════════════════════════════════════════════════════════════════
// 5. KISS-CUT STICKERS
// ═══════════════════════════════════════════════════════════════════════════════

const KissCutProduct = ({go}) => {
  useSEO(KISSCUT_SEO);
  const [shape,setShape]=React.useState('die-cut');
  const [size,setSize]=React.useState('75mm');
  const [isCustom,setIsCustom]=React.useState(false);
  const [customW,setCustomW]=React.useState('');
  const [customH,setCustomH]=React.useState('');
  const [qty,setQty]=React.useState(50);
  const [backing,setBacking]=React.useState('white');
  const [tab,setTab]=React.useState('description');
  const [activeImg,setActiveImg]=React.useState(0);
  const [file,setFile]=React.useState(null);

  const base=0.9;
  const backMult=backing==='clear'?1.12:1.0;
  const customLongest=Math.max(parseFloat(customW)||75,parseFloat(customH)||75);
  const sizeMult=isCustom?pInterpMult(customLongest):(STD_SIZE_MULT[size]||1.0);
  const surcharge=isCustom?1.1:1.0;
  const unit=pCalcUnit(qty,base,sizeMult,backMult,surcharge);
  const total=+(unit*qty).toFixed(2);

  const images=['assets/sticker-stack.jpeg','assets/sticker-sheets.jpeg','assets/laptop-sticker.jpeg','assets/water-bottle.jpeg','assets/sticker-collection.jpeg'];

  const tabContent = {
    description: (
      <div className="two-col" style={{display:'grid',gridTemplateColumns:'1.4fr 1fr',gap:48}}>
        <div>
          <p style={{fontSize:17,lineHeight:1.6,color:'var(--ink-soft)'}}>Kiss-cut stickers are cut through the vinyl layer only — the backing sheet stays intact. This gives you a sticker with a clean white or clear frame around the design that makes it easy to grip, peel, and apply without touching the adhesive. The presentation is crisp and professional.</p>
          <p style={{fontSize:17,lineHeight:1.6,color:'var(--ink-soft)',marginTop:14}}>Perfect for product packaging, corporate giveaways, event packs, or anywhere you want a sticker that applies cleanly and looks considered. White backing is most common; clear gives a more premium finish when the sticker sits on a visible surface.</p>
          <ul style={{listStyle:'none',padding:0,margin:'20px 0 0',display:'grid',gridTemplateColumns:'1fr 1fr',gap:8}}>
            {['Easy grip-and-peel','Clean backing stays intact','White or clear backing','Packaging-ready presentation','Waterproof vinyl','Ships in 4 days'].map(s=>(
              <li key={s} style={{display:'flex',gap:8,alignItems:'center',fontSize:14}}>
                <span style={{width:22,height:22,borderRadius:'50%',background:'var(--green)',color:'#fff',display:'grid',placeItems:'center'}}><Icon.Check size={12}/></span>{s}
              </li>
            ))}
          </ul>
        </div>
        <div className="sticker" style={{padding:0,overflow:'hidden'}}>
          <img src="assets/sticker-stack.jpeg" alt="Kiss-cut sticker sheets — peel and share custom stickers Australia" loading="lazy" style={{width:'100%',aspectRatio:'4/3',objectFit:'cover'}}/>
          <div style={{padding:18}}>
            <div className="display" style={{fontSize:22}}>Peel it clean. Apply it right.</div>
            <p style={{fontSize:14,color:'var(--ink-soft)',marginTop:6,lineHeight:1.5}}>The backing frame makes every application cleaner. No fumbling with edges, no fingerprints on the adhesive.</p>
          </div>
        </div>
      </div>
    ),
    specs: <PSpecTable groups={[
      {h:'Material',rows:[['Vinyl body','Premium polymeric vinyl, 80μm'],['Adhesive','Permanent acrylic'],['Laminate','UV-blocking PVC, 25μm'],['Cut type','Kiss-cut through vinyl only']]},
      {h:'Backing',rows:[['White backing','80gsm silicone paper — clean, opaque'],['Clear backing','Transparent silicone — premium look'],['Border width','2mm standard kiss-cut border'],['Stack-ability','Yes — peels clean from other stickers']]},
      {h:'Durability',rows:[['Outdoor life','7 years'],['UV resistance','Excellent'],['Water resistance','Waterproof'],['Removal','Clean, no residue']]},
      {h:'Sizes',rows:[['Min','38mm'],['Max','380mm × 380mm'],['Safe zone','5mm inside cut'],['Tolerance','±0.4mm']]},
    ]}/>,
    reviews: <PReviews reviews={[
      {n:'Erin M.', d:'2 weeks ago',  img:'assets/sticker-stack.jpeg', t:'We put these in every order as a brand sticker. The white backing makes them look premium straight out of the bag. Customers always comment on them.'},
      {n:'Jake T.', d:'5 weeks ago',                                    t:'I\'ve tried die-cut and kiss-cut. Kiss-cut wins for anything you\'re giving to customers — the border helps people peel without ruining the sticker.'},
      {n:'Mia C.',  d:'3 months ago',                                   t:'Clear backing variant is gorgeous. Put them on Kraft paper bags and you barely notice the sticker — just the design floating on the bag.'},
    ]}/>,
    faq: <PFAQ qa={[
      ['What\'s the difference between die-cut and kiss-cut?','Die-cut is cut all the way through — the sticker comes off the sheet without a border. Kiss-cut is cut through the vinyl only, leaving a clean backing frame around the sticker. Kiss-cut is easier to apply and looks more professional; die-cut shows the sticker shape immediately.'],
      ['Can I put multiple stickers on one backing?','Not with kiss-cut individual stickers — for that, choose Sticker Sheets. Kiss-cut is one sticker per backing sheet.'],
      ['What\'s the white border size?','2mm standard. If you want a thicker or thinner border let us know in the order notes.'],
      ['Do kiss-cut stickers stack without sticking together?','Yes — the backing protects the adhesive so they stack cleanly.'],
      ['What\'s the minimum order?','10 stickers.'],
    ]}/>,
  };

  return (
    <main data-screen-label="Kiss-Cut Stickers">
      <Header go={go} cart={0}/>
      <PBreadcrumb go={go} name="Kiss-Cut Stickers"/>
      <section style={{padding:'36px 0'}}>
        <div className="wrap prod-layout" style={{display:'grid',gridTemplateColumns:'1.05fr 0.95fr',gap:48,alignItems:'start'}}>
          <div>
            <PGallery images={images} activeImg={activeImg} setActiveImg={setActiveImg} badge="Professional"/>
            <PFeatures features={[
              {i:<Icon.Check size={16}/>,  h:'Backing stays intact'},
              {i:<Icon.Aus size={18}/>,    h:'Printed in Sydney'},
              {i:<Icon.Truck size={18}/>,  h:'Free shipping on $25+'},
              {i:<Icon.Sparkle size={16}/>,h:'White or clear backing'},
            ]}/>
          </div>
          <div>
            <div className="mono" style={{fontSize:12,letterSpacing:'0.16em',textTransform:'uppercase',color:'var(--orange)'}}>// PRODUCT — KISS001</div>
            <h1 className="display" style={{fontSize:'clamp(36px,4vw,56px)',margin:'8px 0 0',lineHeight:0.95}}>Custom<br/>Kiss-Cut<br/>Stickers</h1>
            <p style={{fontSize:16,color:'var(--ink-soft)',marginTop:14,lineHeight:1.5,maxWidth:520}}>Cut through the vinyl, not the backing. The clean white or clear frame around your sticker makes it easy to peel and apply — professional presentation, zero fumble.</p>

            <PShapeSelector shape={shape} setShape={setShape}/>
            <PSizeSelector size={size} setSize={setSize} isCustom={isCustom} setIsCustom={setIsCustom} customW={customW} setCustomW={setCustomW} customH={customH} setCustomH={setCustomH} label="02 · Size"/>

            <PSection title="03 · Backing">
              <div style={{display:'flex',gap:8}}>
                {[{k:'white',l:'White backing',s:'Clean white frame — most popular'},{k:'clear',l:'Clear backing',s:'+12% · transparent border, premium look'}].map(o=>(
                  <button key={o.k} onClick={()=>setBacking(o.k)} style={{flex:1,textAlign:'left',padding:'14px 16px',borderRadius:12,border:'2.5px solid var(--ink)',background:backing===o.k?'var(--yellow)':'#fff',boxShadow:backing===o.k?'4px 4px 0 var(--ink)':'2px 2px 0 var(--ink)'}}>
                    <div style={{fontWeight:800,fontSize:14,display:'flex',justifyContent:'space-between',alignItems:'center'}}>{o.l}{backing===o.k&&<span style={{width:20,height:20,borderRadius:'50%',background:'var(--ink)',color:'#fff',display:'grid',placeItems:'center'}}><Icon.Check size={12}/></span>}</div>
                    <div style={{fontSize:12,color:'var(--muted)'}}>{o.s}</div>
                  </button>
                ))}
              </div>
            </PSection>

            <PQtySelector qty={qty} setQty={setQty} label={`04 · Quantity — ${qty}`}/>
            <PSection title="05 · Artwork"><PFileUpload file={file} setFile={setFile}/></PSection>
            <PPriceCTA qty={qty} unit={unit} total={total} wcId={9772} sizeStr={isCustom?(Math.max(parseInt(customW)||75,parseInt(customH)||75)+'mm'):size}/>
          </div>
        </div>
      </section>
      <PTabs tab={tab} setTab={setTab} content={tabContent}/>
      <PRelated go={go} items={[
        {n:'Die-Cut Vinyl',   img:'assets/laptop-sticker.jpeg',   p:'0.39', page:'die-cut'},
        {n:'Sticker Sheets',  img:'assets/sticker-sheets.jpeg',   p:'3.50', page:'sheets'},
        {n:'Clear Vinyl',     img:'assets/water-bottle.jpeg',     p:'0.45', page:'clear'},
        {n:'Sample Pack',     img:'assets/sticker-collection.jpeg',p:'1.00',page:'sample'},
      ]}/>
      <Footer go={go}/>
    </main>
  );
};
window.KissCutProduct = KissCutProduct;

// ═══════════════════════════════════════════════════════════════════════════════
// 6. BULK STICKER PRINTING
// ═══════════════════════════════════════════════════════════════════════════════

const BULK_TIERS = [{q:500,p:0.22},{q:1000,p:0.18},{q:2000,p:0.15},{q:5000,p:0.12},{q:10000,p:0.09}];

const BulkProduct = ({go}) => {
  useSEO(BULK_SEO);
  const [shape,setShape]=React.useState('die-cut');
  const [size,setSize]=React.useState('75mm');
  const [isCustom,setIsCustom]=React.useState(false);
  const [customW,setCustomW]=React.useState('');
  const [customH,setCustomH]=React.useState('');
  const [qty,setQty]=React.useState(1000);
  const [material,setMaterial]=React.useState('vinyl');
  const [tab,setTab]=React.useState('description');
  const [activeImg,setActiveImg]=React.useState(0);
  const [file,setFile]=React.useState(null);

  const base={vinyl:1.0,holo:1.6,glitter:1.7,clear:1.2}[material];
  const customLongest=Math.max(parseFloat(customW)||75,parseFloat(customH)||75);
  const sizeMult=isCustom?pInterpMult(customLongest):(STD_SIZE_MULT[size]||1.0);
  const surcharge=isCustom?1.1:1.0;
  const unit=pCalcUnit(qty,base,sizeMult,1.0,surcharge,BULK_TIERS);
  const total=+(unit*qty).toFixed(2);

  const images=['assets/sticker-stack.jpeg','assets/bedroom-mural.jpeg','assets/brick-lifestyle.jpeg','assets/laptop-sticker.jpeg','assets/sticker-collection.jpeg'];

  const tabContent = {
    description: (
      <div className="two-col" style={{display:'grid',gridTemplateColumns:'1.4fr 1fr',gap:48}}>
        <div>
          <p style={{fontSize:17,lineHeight:1.6,color:'var(--ink-soft)'}}>Same premium vinyl, same HP Indigo press, same 12-point quality check — just in quantities that make your per-unit cost genuinely competitive. At 1,000 stickers you're paying $0.18 per unit; at 5,000 it's $0.12. That's for production-grade waterproof vinyl, not cheap paper alternatives.</p>
          <p style={{fontSize:17,lineHeight:1.6,color:'var(--ink-soft)',marginTop:14}}>Bulk orders include a dedicated account contact who manages your job from file to dispatch. Large runs also qualify for our Banana Club — a loyalty tier with reorder discounts and priority queue status.</p>
          <ul style={{listStyle:'none',padding:0,margin:'20px 0 0',display:'grid',gridTemplateColumns:'1fr 1fr',gap:8}}>
            {['From 500 units','$0.09/ea at 10,000','All materials available','Dedicated account contact','Banana Club loyalty tier','Priority queue dispatch'].map(s=>(
              <li key={s} style={{display:'flex',gap:8,alignItems:'center',fontSize:14}}>
                <span style={{width:22,height:22,borderRadius:'50%',background:'var(--green)',color:'#fff',display:'grid',placeItems:'center'}}><Icon.Check size={12}/></span>{s}
              </li>
            ))}
          </ul>
        </div>
        <div className="sticker" style={{padding:0,overflow:'hidden'}}>
          <img src="assets/sticker-stack.jpeg" alt="Bulk custom sticker printing Australia — wholesale prices from $0.09" loading="lazy" style={{width:'100%',aspectRatio:'4/3',objectFit:'cover'}}/>
          <div style={{padding:18}}>
            <div className="display" style={{fontSize:22}}>The more you print, the less you pay.</div>
            <p style={{fontSize:14,color:'var(--ink-soft)',marginTop:6,lineHeight:1.5}}>Our pricing tiers are genuinely aggressive at volume. 10,000 stickers at $0.09ea is hard to beat in Australia — and the quality doesn't drop.</p>
          </div>
        </div>
      </div>
    ),
    specs: <PSpecTable groups={[
      {h:'Volume tiers',rows:[['500',  '$0.22/ea + material mult'],['1,000','$0.18/ea + material mult'],['2,000','$0.15/ea + material mult'],['5,000','$0.12/ea + material mult'],['10,000+','$0.09/ea + material mult']]},
      {h:'Material',rows:[['Vinyl','Standard — 1× base price'],['Clear vinyl','1.2× base price'],['Holographic','1.6× base price'],['Glitter','1.7× base price']]},
      {h:'Print + finish',rows:[['Press','HP Indigo 6900 (all sizes)'],['Resolution','812 dpi'],['Laminate','UV gloss included'],['Finish options','Matte, heavy laminate on request']]},
      {h:'Logistics',rows:[['Dispatch','4 business days from approval'],['Express','1-day turnaround on request'],['Packaging','Flat-packed or rolled (specify on order)'],['10,000+','Contact us for freight quote']]},
    ]}/>,
    reviews: <PReviews reviews={[
      {n:'Marcus B.', d:'3 weeks ago', img:'assets/sticker-stack.jpeg', t:'Ordered 5,000 for a product launch. Price per unit was the best I found in Australia by a wide margin. Quality matched what I\'d expect from a print house twice the price.'},
      {n:'Leah H.',   d:'2 months ago',                                  t:'Reorder #4 of 2,000 stickers. Every batch is consistent. The vinyl colour accuracy from run to run is remarkable — critical for brand work.'},
      {n:'Chris V.',  d:'4 months ago',                                  t:'Did 10k for a national retail launch. Had a dedicated contact from proof to delivery. Not one sticker in the batch was off spec.'},
    ]}/>,
    faq: <PFAQ qa={[
      ['Is the print quality the same as small orders?','Yes — same HP Indigo press, same vinyl, same 12-point quality check. Volume only affects price.'],
      ['Can I order multiple designs in one bulk run?','Yes — split quantities across designs in the same order. Minimum 100 per design within a bulk order.'],
      ['What happens above 10,000?','Same pricing tier ($0.09/ea) with a freight quote depending on your location. Contact us directly for 25,000+ runs.'],
      ['Can I get a sample of my specific design before the full run?','Yes — we strongly recommend it for bulk orders. A proof print of your artwork is available for $25 + postage.'],
      ['How fast can you turn around 5,000 stickers?','4 business days from proof approval on standard turnaround. Express is available — contact us for lead time on your specific qty.'],
    ]}/>,
  };

  return (
    <main data-screen-label="Bulk Sticker Printing">
      <Header go={go} cart={0}/>
      <PBreadcrumb go={go} name="Bulk + Wholesale"/>
      <section style={{padding:'36px 0'}}>
        <div className="wrap prod-layout" style={{display:'grid',gridTemplateColumns:'1.05fr 0.95fr',gap:48,alignItems:'start'}}>
          <div>
            <PGallery images={images} activeImg={activeImg} setActiveImg={setActiveImg} badge="Best value"/>
            <PFeatures features={[
              {i:<Icon.Sparkle size={16}/>, h:'$0.09/ea at 10,000'},
              {i:<Icon.Aus size={18}/>,     h:'Printed in Sydney'},
              {i:<Icon.Truck size={18}/>,   h:'Freight included to 2,000'},
              {i:<Icon.Check size={16}/>,   h:'Same quality, any volume'},
            ]}/>
          </div>
          <div>
            <div className="mono" style={{fontSize:12,letterSpacing:'0.16em',textTransform:'uppercase',color:'var(--orange)'}}>// PRODUCT — BULK001</div>
            <h1 className="display" style={{fontSize:'clamp(36px,4vw,56px)',margin:'8px 0 0',lineHeight:0.95}}>Bulk Sticker<br/>Printing</h1>
            <p style={{fontSize:16,color:'var(--ink-soft)',marginTop:14,lineHeight:1.5,maxWidth:520}}>The same premium vinyl you've come to expect — at scale. 500 to 10,000+ stickers, all materials, deep volume pricing. Your per-unit cost drops every tier.</p>

            {/* volume pricing callout */}
            <div className="tier-grid" style={{marginTop:20,display:'grid',gridTemplateColumns:'repeat(5,1fr)',gap:8}}>
              {BULK_TIERS.map(t=>(
                <div key={t.q} onClick={()=>setQty(t.q)} style={{padding:'12px 10px',borderRadius:12,border:`2.5px solid var(--ink)`,background:qty===t.q?'var(--ink)':'#fff',color:qty===t.q?'#fff':'var(--ink)',textAlign:'center',cursor:'pointer',boxShadow:qty===t.q?'none':'3px 3px 0 var(--ink)',transition:'all .1s'}}>
                  <div style={{fontWeight:800,fontSize:13}}>{t.q>=1000?`${t.q/1000}k`:t.q}</div>
                  <div style={{fontSize:11,opacity:0.75,marginTop:2}}>${t.p}/ea</div>
                </div>
              ))}
            </div>

            <PSection title="02 · Material">
              <div className="pick-grid" style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:8}}>
                {[
                  {k:'vinyl',   l:'Vinyl',       p:'Standard',  sw:'linear-gradient(135deg,#fff,#ECE3D0)'},
                  {k:'holo',    l:'Holo',         p:'× 1.6',     sw:'linear-gradient(135deg,#FF6A1A,#FFCE00,#2BB04A,#3D7AFE,#A23BFF)'},
                  {k:'glitter', l:'Glitter',      p:'× 1.7',     sw:'radial-gradient(#FFD400 1px,transparent 1.5px) #FF9D2A',bgSize:'4px 4px'},
                  {k:'clear',   l:'Clear',        p:'× 1.2',     sw:'repeating-linear-gradient(45deg,#fff,#fff 6px,#EFEFEF 6px,#EFEFEF 12px)'},
                ].map(m=>(
                  <PCard key={m.k} active={material===m.k} onClick={()=>setMaterial(m.k)}>
                    <div style={{width:'100%',aspectRatio:'1.6/1',background:m.sw,backgroundSize:m.bgSize,borderRadius:8,border:'2px solid var(--ink)'}}/>
                    <div style={{fontWeight:800,fontSize:13,marginTop:8}}>{m.l}</div>
                    <div style={{fontSize:11,color:'var(--muted)'}}>{m.p}</div>
                  </PCard>
                ))}
              </div>
            </PSection>

            <PShapeSelector shape={shape} setShape={setShape}/>
            <PSizeSelector size={size} setSize={setSize} isCustom={isCustom} setIsCustom={setIsCustom} customW={customW} setCustomW={setCustomW} customH={customH} setCustomH={setCustomH} label="04 · Size"/>

            <PSection title={`05 · Quantity — ${qty.toLocaleString()}`}>
              <div style={{display:'flex',alignItems:'center',gap:14,background:'var(--cream)',border:'2px solid var(--ink)',borderRadius:12,padding:'10px 14px'}}>
                <input type="range" min="500" max="10000" step="100" value={qty} onChange={e=>setQty(+e.target.value)} style={{flex:1,accentColor:'var(--orange)'}}/>
                <input type="number" value={qty} onChange={e=>setQty(Math.max(500,+e.target.value||500))} style={{width:100,padding:'8px 10px',borderRadius:8,border:'2px solid var(--ink)',fontWeight:800,fontSize:14,fontFamily:'inherit'}}/>
              </div>
              <div className="mono" style={{fontSize:12,color:'var(--muted)',marginTop:8}}>Minimum 500 · contact us for 10,000+ custom quote</div>
            </PSection>

            <PSection title="06 · Artwork"><PFileUpload file={file} setFile={setFile}/></PSection>
            <PPriceCTA qty={qty} unit={unit} total={total} wcId={9878} label="Get bulk quote" sizeStr={isCustom?(Math.max(parseInt(customW)||75,parseInt(customH)||75)+'mm'):size}/>
          </div>
        </div>
      </section>
      <PTabs tab={tab} setTab={setTab} content={tabContent}/>
      <PRelated go={go} items={[
        {n:'Die-Cut Vinyl',    img:'assets/laptop-sticker.jpeg',   p:'0.39', page:'die-cut'},
        {n:'Holographic',      img:'assets/holo-rainbow.jpeg',     p:'0.55', page:'holo'},
        {n:'Sticker Sheets',   img:'assets/sticker-sheets.jpeg',   p:'3.50', page:'sheets'},
        {n:'Sample Pack',      img:'assets/sticker-collection.jpeg',p:'1.00',page:'sample'},
      ]}/>
      <Footer go={go}/>
    </main>
  );
};
window.BulkProduct = BulkProduct;
