// Product page — Die-cut Sticker configurator

const DIECUT_SCHEMA = {
  '@context':'https://schema.org','@type':'Product',
  name:'Custom Die-Cut Stickers',
  description:'Premium custom die-cut vinyl stickers printed in Sydney, Australia. Any shape, any size. 7-year outdoor-rated vinyl with UV-blocking laminate. Free proof in 2 hours.',
  image:'https://kingkongstickers.com.au/assets/laptop-sticker.jpeg',
  brand:{'@type':'Brand',name:'King Kong Stickers'},
  offers:{'@type':'AggregateOffer',priceCurrency:'AUD',lowPrice:'0.39',highPrice:'3.00',availability:'https://schema.org/InStock',seller:{'@type':'Organization',name:'King Kong Stickers'}},
  additionalProperty:[
    {'@type':'PropertyValue',name:'Material',value:'7-year outdoor vinyl'},
    {'@type':'PropertyValue',name:'Laminate',value:'UV-blocking matte or gloss'},
    {'@type':'PropertyValue',name:'Turnaround',value:'4 business days'},
    {'@type':'PropertyValue',name:'Minimum order',value:'10 stickers'},
  ]
};

const DIECUT_FAQ_SCHEMA = {
  '@context':'https://schema.org','@type':'FAQPage',
  mainEntity:[
    {'@type':'Question',name:'What file format do I need for die-cut stickers?',acceptedAnswer:{'@type':'Answer',text:'PNG, JPG, SVG, PDF, or AI. Transparent background (PNG/SVG) gives the cleanest cut line. Minimum 300dpi at print size. We check every file before printing.'}},
    {'@type':'Question',name:'What is the minimum order for die-cut stickers?',acceptedAnswer:{'@type':'Answer',text:'10 stickers minimum. Pricing decreases significantly with quantity — bulk pricing starts at 100 stickers.'}},
    {'@type':'Question',name:'Are die-cut stickers waterproof?',acceptedAnswer:{'@type':'Answer',text:'Yes. Printed on 7-year outdoor-rated vinyl with a UV-blocking laminate. Waterproof, dishwasher safe, and resistant to sun and scratching.'}},
    {'@type':'Question',name:'How long does it take to get die-cut stickers?',acceptedAnswer:{'@type':'Answer',text:'Standard turnaround is 4 business days from proof approval to dispatch. Express 2-day production is available at checkout.'}},
    {'@type':'Question',name:'Can I get a custom shape for my stickers?',acceptedAnswer:{'@type':'Answer',text:'Yes — all die-cut stickers are cut to the exact outline of your artwork. Upload any shape and we cut around it. You can also choose from circle, square, oval, or rounded rectangle.'}},
  ]
};

const Product = ({ go, tweaks }) => {
  useSEO({
    title: 'Custom Die-Cut Stickers Australia — From $0.39 Each',
    description: 'Custom die-cut vinyl stickers printed in Sydney. Any shape, any size. 7-year outdoor vinyl, free proof in 2 hrs. Order from just 10 stickers. Ships in 4 days.',
    schema: [DIECUT_SCHEMA, DIECUT_FAQ_SCHEMA],
  });
  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(55);
  const [material, setMaterial] = React.useState('vinyl');
  const [finish, setFinish] = React.useState('matte');
  const [tab, setTab] = React.useState('description');
  const [activeImg, setActiveImg] = React.useState(0);
  const [file, setFile] = React.useState(null);
  const [upState, setUpState] = React.useState('idle'); // idle|uploading|done|error
  const [saved, setSaved] = React.useState(()=>localStorage.getItem('kk_saved_9878')==='1');
  const toggleSave = () => { const n=!saved; setSaved(n); n ? localStorage.setItem('kk_saved_9878','1') : localStorage.removeItem('kk_saved_9878'); };

  // interpolate size multiplier from longest edge (mm)
  const sizeBreaks = [{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}];
  const interpMult = (mm) => {
    if (mm <= 50) return 0.7;
    if (mm >= 150) return 2.4 + (mm - 150) * 0.013;
    for (let i = 0; i < sizeBreaks.length - 1; i++) {
      const a = sizeBreaks[i], b = sizeBreaks[i+1];
      if (mm >= a.mm && mm <= b.mm) return a.m + (mm - a.mm) / (b.mm - a.mm) * (b.m - a.m);
    }
    return 1.0;
  };

  // pricing model — match stickermule-ish per-unit decay
  const basePerUnit = { vinyl: 1.0, holo: 1.6, glitter: 1.7, clear: 1.2 }[material];
  const standardSizeMap = {'50mm':0.7,'75mm':1.0,'100mm':1.4,'125mm':1.8,'150mm':2.4};
  const customLongest = Math.max(parseFloat(customW) || 75, parseFloat(customH) || 75);
  const sizeMult = isCustom ? interpMult(customLongest) : (standardSizeMap[size] || 1.0);
  const customSurcharge = isCustom ? 1.10 : 1.0;
  const finishMult = { matte:1.0, gloss:1.0, laminate:1.15 }[finish];
  const qtyTiers = [
    { 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 },
  ];
  // tier lookup
  const tier = [...qtyTiers].reverse().find(t => qty >= t.q) || qtyTiers[0];
  const unit = +(tier.p * basePerUnit * sizeMult * finishMult * customSurcharge).toFixed(2);
  const total = +(unit * qty).toFixed(2);
  const m = useIsMobile();
  const addToCart = () => {
    const productId = { vinyl:9878, holo:9908, glitter:10197, clear:9938 }[material] || 9878;
    const token = localStorage.getItem('kk_art_token');
    const params = new URLSearchParams({'add-to-cart': productId, quantity:1});
    if (material !== 'glitter') {
      const qT=[50,100,250,500,1000,2000], sT=[50,75,100,125,150,200];
      const snap=(v,ts)=>ts.reduce((b,t)=>Math.abs(t-v)<Math.abs(b-v)?t:b);
      const mm=isCustom ? Math.max(parseInt(customW)||75,parseInt(customH)||75) : parseInt(size)||75;
      params.set('attribute_size', snap(mm,sT)+'mm');
      params.set('attribute_quantity', snap(qty,qT));
    }
    params.set('kk_price', total.toFixed(2));
    params.set('kk_qty', qty);
    params.set('kk_size', isCustom ? `${customW||75}×${customH||75}mm` : size);
    params.set('kk_material', material);
    params.set('kk_finish', finish);
    if (token) params.set('kk_art', token);
    window.location.href = '/cart/?' + params.toString();
  };

  const images = [
    'assets/mascot.jpeg',
    'assets/laptop-sticker.jpeg',
    'assets/water-bottle.jpeg',
    'assets/sticker-stack.jpeg',
    'assets/bedroom-mural.jpeg',
  ];

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

      {/* breadcrumb */}
      <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>
          <span>Die-Cut Stickers</span> <span style={{margin:'0 8px',opacity:0.5}}>/</span>
          <strong style={{color:'var(--ink)'}}>Custom Die-Cut Vinyl Sticker</strong>
        </div>
      </div>

      <section style={{padding:'36px 0'}}>
        <div className="wrap prod-layout" style={{display:'grid',gridTemplateColumns:'1.05fr 0.95fr',gap:48,alignItems:'start'}}>
          {/* LEFT — gallery */}
          <div>
            <div className="sticker" style={{aspectRatio:'1/1',padding:0,background:'var(--cream)',position:'relative',overflow:'hidden'}}>
              {/* checkered transparency bg */}
              <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 die-cut stickers — King Kong Stickers Australia" style={{position:'relative',width:'100%',height:'100%',objectFit:'cover'}} fetchpriority="high"/>
              <div style={{position:'absolute',top:16,left:16,display:'flex',gap:8}}>
                <span className="chip" style={{background:'var(--orange)',color:'#fff'}}>Best seller</span>
                <span className="chip" style={{background:'var(--yellow)'}}>🇦🇺 Made in Sydney</span>
              </div>
              <button aria-label="Wishlist" onClick={toggleSave} style={{position:'absolute',top:16,right:16,width:42,height:42,borderRadius:'50%',background: saved ? 'var(--yellow)' : '#fff',border:'2.5px solid var(--ink)',display:'grid',placeItems:'center'}}>
                <Icon.Heart size={18} fill={saved ? 'var(--ink)' : 'none'}/>
              </button>
            </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 die-cut sticker product gallery" loading="lazy" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
                </button>
              ))}
            </div>

            {/* features under gallery */}
            <div style={{marginTop:24,display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:12}}>
              {[
                { i:<Icon.Aus size={18}/>, h:'Printed in Sydney' },
                { i:<Icon.Sparkle size={16}/>, h:'7-year outdoor vinyl' },
                { i:<Icon.Truck size={18}/>, h:'Free shipping on $25+' },
                { i:<Icon.Check size={16}/>, h:'UV + weather resistant' },
              ].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>
          </div>

          {/* RIGHT — configurator */}
          <div>
            <div className="mono" style={{fontSize:12,letterSpacing:'0.16em',textTransform:'uppercase',color:'var(--orange)'}}>// PRODUCT — DIE001</div>
            <h1 className="display" style={{fontSize:'clamp(36px,4vw,56px)',margin:'8px 0 0',lineHeight:0.95}}>Custom Die-Cut<br/>Vinyl Stickers</h1>
            <p style={{fontSize:16,color:'var(--ink-soft)',marginTop:14,lineHeight:1.5,maxWidth:520}}>
              Heavy-duty vinyl, cut to any shape you want. Our most popular product — laminated, kiss-cut to a clean white border, and built to survive whatever you stick it to.
            </p>

            {/* shape */}
            <Section title="01 · Shape">
              <div className="pick-grid" style={{display:'grid',gridTemplateColumns:'repeat(4,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' },
                  { k:'sheet',   l:'Sheet',   s:'Multi on page' },
                ].map(o=>(
                  <PickerCard key={o.k} active={shape===o.k} onClick={()=>setShape(o.k)}>
                    <ShapeIcon kind={o.k}/>
                    <div style={{fontWeight:800,fontSize:13,marginTop:6}}>{o.l}</div>
                    <div style={{fontSize:11,color:'var(--muted)'}}>{o.s}</div>
                  </PickerCard>
                ))}
              </div>
            </Section>

            {/* size */}
            <Section title="02 · Size">
              <div style={{display:'flex',gap:8,flexWrap:'wrap'}}>
                {['50mm','75mm','100mm','125mm','150mm'].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="e.g. 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>
                  <div style={{fontWeight:800,fontSize:18,color:'var(--muted)'}}>×</div>
                  <div style={{display:'flex',alignItems:'center',gap:8}}>
                    <label style={{fontWeight:700,fontSize:13}}>H</label>
                    <input type="number" min="10" max="600" placeholder="e.g. 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 sizes = better detail</div>
            </Section>

            {/* material */}
            <Section title="03 · 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:'Holographic', p:'+ $0.50',    sw:'linear-gradient(135deg,#FF6A1A,#FFCE00,#2BB04A,#3D7AFE,#A23BFF)' },
                  { k:'glitter', l:'Glitter',     p:'+ $0.60',    sw:'radial-gradient(#FFD400 1px, transparent 1.5px) #FF9D2A', bgSize:'4px 4px' },
                  { k:'clear',   l:'Clear',       p:'+ $0.20',    sw:'repeating-linear-gradient(45deg,#fff,#fff 6px,#EFEFEF 6px,#EFEFEF 12px)' },
                ].map(m=>(
                  <PickerCard 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||'auto',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>
                  </PickerCard>
                ))}
              </div>
            </Section>

            {/* finish */}
            <Section title="04 · Finish">
              <div style={{display:'flex',gap:8}}>
                {[
                  { k:'matte', l:'Matte', s:'No glare' },
                  { k:'gloss', l:'Gloss', s:'Shiny pop' },
                  { k:'laminate', l:'Heavy laminate', s:'+ $0.15 · tough' },
                ].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,display:'flex',justifyContent:'space-between',alignItems:'center'}}>
                      {o.l}
                      {finish===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>
            </Section>

            {/* quantity */}
            <Section title={`05 · Quantity — ${qty}`}>
              <div style={{display:'flex',gap:6,flexWrap:'wrap',marginBottom:14}}>
                {qtyTiers.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,position:'relative'
                  }}>
                    {t.q}
                    <span style={{display:'block',fontSize:10,fontWeight:600,opacity:0.75}}>${t.p.toFixed(2)} ea</span>
                  </button>
                ))}
                <button style={{padding:'10px 14px',borderRadius:10,border:'2px dashed var(--ink)',fontWeight:700,fontSize:12,color:'var(--ink-soft)'}}>+ Custom</button>
              </div>
              {/* slider for custom */}
              <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="10" max="2000" step="5" value={qty} onChange={e=>setQty(+e.target.value)} style={{flex:1,accentColor:'var(--orange)'}}/>
                <input type="number" value={qty} onChange={e=>setQty(+e.target.value||10)} style={{width:80,padding:'8px 10px',borderRadius:8,border:'2px solid var(--ink)',fontWeight:800,fontSize:14,fontFamily:'inherit'}}/>
              </div>
            </Section>

            {/* artwork */}
            <Section title="06 · Artwork">
              <label style={{display:'block',cursor:'pointer'}}>
                <input type="file" accept="image/*,.pdf,.ai,.eps,.svg" style={{display:'none'}} onChange={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'); }
                }}/>
                <div style={{display:'flex',gap:14,alignItems:'center',padding:'18px 18px',background:file?'var(--yellow)':'var(--cream)',border:'2.5px dashed var(--ink)',borderRadius:14}}>
                  {file ? (
                    <>
                      <img src={file.url} alt="Uploaded 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)'}}>
                          {upState==='uploading' ? '⏫ Uploading…' : upState==='done' ? '✓ Uploaded · designer reviews in ~2 hrs' : upState==='error' ? '⚠ Upload failed — email to artwork@kingkongstickers.com.au' : 'Ready for proof · our designer will review in ~2 hrs'}
                        </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>
              </label>
              <div style={{display:'flex',gap:8,marginTop:10,fontSize:12,color:'var(--muted)'}}>
                <span>No art? Try our</span><a onClick={()=>go('templates')} style={{color:'var(--orange)',fontWeight:800,textDecoration:'underline',cursor:'pointer'}}>free templates</a>
                <span>or</span><a onClick={()=>go('contact')} style={{color:'var(--orange)',fontWeight:800,textDecoration:'underline',cursor:'pointer'}}>hire a designer ($35)</a>
              </div>
              {!file && (
                <div style={{marginTop:10,padding:'10px 14px',background:'var(--cream)',border:'1.5px solid var(--ink)',borderRadius:10,fontSize:12,color:'var(--ink-soft)'}}>
                  No art yet? No problem — complete your order and email artwork to <strong>artwork@kingkongstickers.com.au</strong>. We'll send your proof before printing anything.
                </div>
              )}
            </Section>

            {/* price + cta */}
            <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} stickers</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 sticker · free shipping{isCustom?' · incl. 10% custom size fee':''}</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>
                  {(()=>{ const next=qtyTiers.find(t=>t.q>qty); if(!next) return null; const nu=+(next.p*basePerUnit*sizeMult*finishMult*customSurcharge).toFixed(2); const save=Math.round((1-nu/unit)*100); if(save<=0) return null; return <button onClick={()=>setQty(next.q)} style={{display:'block',width:'100%',textAlign:'left',marginTop:10,padding:'8px 10px',background:'var(--cream-deep)',border:'2px solid var(--ink)',borderRadius:10,fontWeight:700,fontSize:12.5,cursor:'pointer'}}>💡 Order {next.q} → just ${nu.toFixed(2)}/ea (save {save}%)</button>; })()}
                </div>
                <div style={{textAlign:'right',fontSize:12}}>
                  <div style={{fontWeight:800}}>⚡ Free proof in 2 hrs</div>
                  <div style={{color:'var(--muted)'}}>Dispatch in 4 business days</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}>
                  Order now <Icon.Arrow/>
                </button>
                <button className="btn ghost" style={{padding:'18px 18px'}} onClick={()=>{window.location.hash='sample'}}>Try a $1 sample</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>
            </div>
          </div>
        </div>
      </section>

      {/* TABS */}
      <section style={{background:'#fff',borderTop:'3px solid var(--ink)',borderBottom:'3px solid var(--ink)'}}>
        <div className="wrap" style={{padding:'0'}}>
          <div className="tab-row noscroll" style={{display:'flex',gap:0,borderBottom:'2px solid var(--ink)'}}>
            {[
              ['description','Description'],
              ['specs','Specs + materials'],
              ['reviews','Reviews'],
              ['faq','FAQ'],
            ].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}}>
            {tab==='description' && <DescriptionPanel/>}
            {tab==='specs' && <SpecsPanel/>}
            {tab==='reviews' && <ReviewsPanel/>}
            {tab==='faq' && <FAQPanel/>}
          </div>
        </div>
      </section>

      {/* related */}
      <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}}>
            {[
              { n:'Holographic Vinyl', img:'assets/holo-rainbow.jpeg', p:4.50, page:'holo' },
              { n:'Sticker Sheets', img:'assets/sticker-sheets.jpeg', p:6.80, page:'sheets' },
              { n:'Glitter Stickers', img:'assets/holo-gold.jpeg', p:4.90, page:'glitter' },
              { n:'Kiss-Cut', img:'assets/sticker-stack.jpeg', p:3.50, page:'kiss-cut' },
            ].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 Australia'} 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.toFixed(2)}</strong></div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {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} stickers · ${unit.toFixed(2)}/ea</div>
          </div>
          <button className="btn primary" onClick={addToCart} style={{padding:'13px 20px',fontSize:15}}>Order now <Icon.Arrow/></button>
        </div>
      )}
      <Footer go={go}/>
    </main>
  );
};

// helpers --------------------------------------------------------

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

const PickerCard = ({ 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 ShapeIcon = ({ kind }) => {
  const stroke = 'var(--ink)';
  return (
    <svg width="36" height="28" viewBox="0 0 36 28" fill="none" stroke={stroke} 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)"/>}
      {kind==='sheet' && (<g fill="var(--orange)">
        <circle cx="9" cy="8" r="3"/><circle cx="18" cy="8" r="3"/><circle cx="27" cy="8" r="3"/>
        <circle cx="9" cy="18" r="3"/><circle cx="18" cy="18" r="3"/><circle cx="27" cy="18" r="3"/>
      </g>)}
    </svg>
  );
};

const DescriptionPanel = () => (
  <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)'}}>
        Our die-cut sticker is the OG. We print on 7-year outdoor vinyl, laminate it for scratch + UV protection, and contour-cut the shape to within 0.4mm of your artwork. The remaining border is a clean 2mm kiss-cut frame that keeps it readable from across a room.
      </p>
      <p style={{fontSize:17,lineHeight:1.6,color:'var(--ink-soft)',marginTop:14}}>
        Each batch goes through a 12-point check before it leaves Sydney — registration, colour, cut accuracy, lamination bubbles, edge whitening, the lot. If a single sticker isn't right, we reprint the whole order. No questions, no fees.
      </p>
      <ul style={{listStyle:'none',padding:0,margin:'20px 0 0',display:'grid',gridTemplateColumns:'1fr 1fr',gap:8}}>
        {['Waterproof + weatherproof','UV + weather resistant','Removes cleanly','Won\'t fade in 7 years','Hand-finished','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/explosion-orange.jpeg" alt="Custom sticker printing artwork guidelines" loading="lazy" style={{width:'100%',aspectRatio:'4/3',objectFit:'cover'}}/>
      <div style={{padding:18}}>
        <div className="display" style={{fontSize:22}}>Made by humans, for humans.</div>
        <p style={{fontSize:14,color:'var(--ink-soft)',marginTop:6,lineHeight:1.5}}>Every order is touched by a real designer + a real printer. We're a 9-person studio in Sydney — not a faceless factory.</p>
      </div>
    </div>
  </div>
);

const SpecsPanel = () => (
  <div className="two-col" style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:40}}>
    {[
      { h:'Material',  rows:[['Body','Premium polymeric vinyl, 80μm'],['Adhesive','Permanent acrylic'],['Laminate','UV-blocking PVC, 25μm'],['Backing','80gsm silicone paper']] },
      { h:'Print',     rows:[['Press','HP Indigo 6900 digital'],['Resolution','812 dpi at 175 lpi'],['Colour gamut','7-colour CMYK + OGV'],['White ink','Yes — for clear/holo']] },
      { 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'],['Bleed','3mm'],['Safe zone','5mm inside cut line']] },
    ].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 ReviewsPanel = () => {
  const rev = [
    { n:'Maya R.', d:'2 weeks ago', t:'These came out PERFECT. I sent in a hand-drawn sketch and they cleaned it up before printing. Print is sharp, vinyl is thick, packaging was lovely. Will reorder.', s:5, img:'assets/laptop-sticker.jpeg' },
    { n:'Tom V.',  d:'1 month ago', t:'Holo finish is unreal in person — way better than the website preview. Stuck them on guitars, helmets, surfboards. No peeling 6 months in.', s:5, img:'assets/holo-rainbow.jpeg' },
    { n:'Sienna K.', d:'3 months ago', t:'Customer service was the highlight. Their designer caught a hairline gap in my cut path that I would\'ve missed. Saved me an entire reorder.', s:5 },
  ];
  return (
    <div className="rev-grid" style={{display:'grid',gridTemplateColumns:'320px 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('/?p=9878#tab-reviews','_blank')}>Write a review</button>
      </div>
      <div style={{display:'flex',flexDirection:'column',gap:14}}>
        {rev.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 + ' 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 buyer</span>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

const FAQPanel = () => {
  const qa = [
    ['How long does printing take?','3 business days for proof approval to dispatch. Express knocks it down to 1.'],
    ['Can I order just 1?','For die-cut, minimum is 10. For sticker sheets, minimum is 1.'],
    ['Do you ship internationally?','Yes — flat $15 to NZ, $25 to the rest of the world. Free over $200.'],
    ['What file types do you accept?','PNG, JPG, SVG, PDF, AI, EPS. Vector preferred. We\'ll convert raster for you if needed.'],
    ['Will my colours match my screen?','Within ~5%. We\'ll send a proof so you can see exact production colours before we print.'],
  ];
  return (
    <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>
  );
};

window.Product = Product;
