// Home page

const HOME_FAQ_SCHEMA = {
  '@context':'https://schema.org','@type':'FAQPage',
  mainEntity:[
    {  '@type':'Question', name:'How fast can you ship stickers?',
       acceptedAnswer:{ '@type':'Answer', text:'Standard turnaround is 4 business days from artwork approval to dispatch. Express 2-day turnaround is available at checkout.' }},
    {  '@type':'Question', name:'Are your stickers waterproof?',
       acceptedAnswer:{ '@type':'Answer', text:'Yes — all stickers are printed on 7-year outdoor-rated vinyl with a UV-blocking laminate. Waterproof, sun safe and scratch resistant.' }},
    {  '@type':'Question', name:'What is the minimum order quantity?',
       acceptedAnswer:{ '@type':'Answer', text:'10 stickers for die-cut. No minimum on sticker sheets. Bulk pricing starts at 100 stickers.' }},
    {  '@type':'Question', name:'Do you check my artwork before printing?',
       acceptedAnswer:{ '@type':'Answer', text:'Yes. Every order gets a free designer check within 2 hours. We fix cut lines, flag low-resolution files, and send a digital proof for your approval before printing.' }},
    {  '@type':'Question', name:'Do you offer trade or wholesale pricing?',
       acceptedAnswer:{ '@type':'Answer', text:'Yes — 15–35% off retail pricing at 500+ qty. Sign up to the Banana Club for ongoing trade discounts.' }},
  ]
};

const Home = ({ go, tweaks }) => {
  useSEO({
    title: 'Custom Stickers Australia — Die-Cut, Holographic & Sheets',
    description: 'Premium custom stickers printed in Sydney. Die-cut, holographic, glitter, clear vinyl & sticker sheets. Free proof in 2 hrs, ships in 4 days. From $0.39 each.',
    schema: HOME_FAQ_SCHEMA,
  });
  return (
    <main data-screen-label="Home">
      <Header go={go} cart={0}/>
      <Hero go={go} tweaks={tweaks}/>
      <TrustStrip/>
      <Categories go={go}/>
      <BestSellers go={go}/>
      <HowItWorks go={go}/>
      <BigCTA go={go}/>
      <CustomerWall/>
      <FAQTease/>
      <Footer go={go}/>
    </main>
  );
};

const Hero = ({ go, tweaks }) => {
  const m = useIsMobile();
  return (
    <section style={{position:'relative',background:'var(--cream)',borderBottom:'3px solid var(--ink)',overflow:'hidden'}}>
      <svg viewBox="0 0 1400 700" preserveAspectRatio="none" style={{position:'absolute',inset:0,width:'100%',height:'100%',opacity:0.06,pointerEvents:'none'}}>
        <path d="M0 100 Q 200 0 400 100 T 800 100 T 1200 100 T 1600 100" stroke="var(--ink)" strokeWidth="3" fill="none"/>
        <path d="M0 300 Q 200 200 400 300 T 800 300 T 1200 300 T 1600 300" stroke="var(--ink)" strokeWidth="3" fill="none"/>
        <path d="M0 500 Q 200 400 400 500 T 800 500 T 1200 500 T 1600 500" stroke="var(--ink)" strokeWidth="3" fill="none"/>
      </svg>

      <div className="wrap" style={{padding: m ? '36px 20px 48px' : '60px 28px 80px',position:'relative',display:'grid',gridTemplateColumns: m ? '1fr' : '1.05fr 1fr',gap:50,alignItems:'center'}}>
        <div>
          <div style={{display:'flex',gap:8,alignItems:'center',marginBottom:20,flexWrap:'wrap'}}>
            <span className="chip" style={{background:'var(--yellow)'}}>⚡ Free proof in 2 hrs</span>
            <span className="chip">🚚 Ships in 4 days</span>
            <span className="chip">From $0.39 ea</span>
          </div>
          <h1 className="display" style={{fontSize: m ? 'clamp(52px,14vw,80px)' : 'clamp(58px,7.5vw,118px)',margin:0}}>
            {tweaks?.t?.headline1 || 'STICK IT'}<br/>
            <span style={{color:'var(--orange)',WebkitTextStroke:'2px var(--ink)'}}>{tweaks?.t?.headline2 || "TO 'EM."}</span>
          </h1>
          <p style={{fontSize: m ? 16 : 19,maxWidth:520,marginTop:20,lineHeight:1.5,color:'var(--ink-soft)'}}>
            {tweaks?.t?.subhead || "Premium die-cut vinyl stickers, holographic, glitter & sheets — printed in Australia and ready to wreck your laptop."}{' '}
            Upload your art, get a free proof, get them in your hands in 4 days.
          </p>
          <div style={{display:'flex',gap:12,marginTop:26,flexWrap:'wrap',alignItems:'center'}}>
            <button className="btn primary" onClick={()=>go('die-cut')} style={m ? {width:'100%',justifyContent:'center'} : {}}>
              Start designing <Icon.Arrow/>
            </button>
            <button onClick={()=>go('sample')} style={{background:'none',border:'none',color:'var(--ink)',fontWeight:700,fontSize:14,textDecoration:'underline',cursor:'pointer',padding:'6px 4px'}}>
              or try a $1 sample pack →
            </button>
          </div>
          <div style={{display:'flex',gap:20,marginTop:30,alignItems:'center'}}>
            <div style={{display:'flex'}}>
              {['assets/mascot.jpeg','assets/holo-gold.jpeg','assets/water-bottle.jpeg','assets/laptop-sticker.jpeg','assets/sticker-sheets.jpeg'].map((src,i)=>(
                <img key={i} src={src} alt="King Kong Stickers customer" style={{width:36,height:36,borderRadius:'50%',border:'2px solid var(--ink)',marginLeft:i?-10:0,background:'#fff',objectFit:'cover'}}/>
              ))}
            </div>
            <div>
              <div style={{display:'flex',gap:2,color:'var(--orange)'}}>{[0,1,2,3,4].map(i=><Icon.Star key={i} fill="currentColor"/>)}</div>
              <div style={{fontSize:13,fontWeight:700}}>Trusted by Aussie creators & brands</div>
            </div>
          </div>
        </div>

        {/* Right: sticker collage — desktop only */}
        {!m && (
          <div style={{position:'relative',aspectRatio:'1/1',maxWidth:560,marginLeft:'auto'}}>
            <div style={{position:'absolute',inset:'10% 8% 8% 10%',background:'radial-gradient(circle at 50% 45%, #FFD400 0%, #FF6A1A 55%, #E5550A 100%)',borderRadius:'50%',border:'4px solid var(--ink)',boxShadow:'10px 10px 0 var(--ink)',overflow:'hidden'}}>
              <img src="assets/mascot.jpeg" alt="King Kong Stickers — custom sticker printing Sydney" style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}} fetchpriority="high"/>
            </div>
            <div style={{position:'absolute',inset:0,pointerEvents:'none'}}>
              <svg viewBox="0 0 100 100" style={{width:'100%',height:'100%'}}>
                {Array.from({length:14}).map((_,i)=>{
                  const a = (i/14)*Math.PI*2;
                  const x1 = 50 + Math.cos(a)*52, y1 = 50 + Math.sin(a)*52;
                  const x2 = 50 + Math.cos(a)*64, y2 = 50 + Math.sin(a)*64;
                  return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="var(--ink)" strokeWidth="0.8" strokeLinecap="round"/>;
                })}
              </svg>
            </div>
            {[
              { src:'assets/holo-rainbow.jpeg', t:'-8%', l:'-2%', r:-12, s:120 },
              { src:'assets/shipping-2.jpeg', t:'62%', l:'-6%', r:-8, s:140 },
              { src:'assets/upload-artwork.jpeg', t:'-4%', l:'72%', r:10, s:130 },
              { src:'assets/holo-gold.jpeg', t:'70%', l:'78%', r:14, s:130 },
            ].map((p,i)=>(
              <div key={i} style={{position:'absolute',top:p.t,left:p.l,width:p.s,height:p.s,borderRadius:18,border:'3px solid var(--ink)',overflow:'hidden',transform:`rotate(${p.r}deg)`,boxShadow:'5px 5px 0 var(--ink)',background:'#fff'}}>
                <img src={p.src} alt="Custom stickers by King Kong Stickers" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
              </div>
            ))}
            <div className="display" style={{position:'absolute',top:'46%',left:'46%',transform:'translate(-50%,-50%) rotate(-8deg)',background:'var(--yellow)',color:'var(--ink)',padding:'10px 18px',border:'3px solid var(--ink)',borderRadius:14,fontSize:22,boxShadow:'4px 4px 0 var(--ink)',pointerEvents:'none'}}>
              AS LOW AS<br/><span style={{color:'var(--orange-deep)'}}>$0.39 EA</span>
            </div>
          </div>
        )}
      </div>
    </section>
  );
};

const Categories = ({ go }) => {
  const m = useIsMobile();
  const cats = [
    { name:'Die-Cut Stickers',  from:'$0.39', img:'assets/laptop-sticker.jpeg',    tag:'Most popular', page:'die-cut' },
    { name:'Sticker Sheets',    from:'$2.20', img:'assets/sticker-sheets.jpeg',    tag:'Clean + easy', page:'sheets'  },
    { name:'Holographic',       from:'$0.89', img:'assets/holo-rainbow.jpeg',      tag:'Eye-catching', page:'holo'    },
    { name:'Glitter',           from:'$0.99', img:'assets/holo-gold.jpeg',         tag:'Sparkle',      page:'glitter' },
    { name:'Wall Murals',       from:'$149',  img:'assets/bedroom-mural.jpeg',     tag:'New',          page:'mural'   },
    { name:'Bulk Stickers',     from:'$0.09', img:'assets/sticker-stack.jpeg',     tag:'Best value',   page:'bulk'    },
  ];
  return (
    <section style={{padding: m ? '48px 0 28px' : '80px 0 40px'}}>
      <div className="wrap" style={{padding: m ? '0 20px' : undefined}}>
        <div style={{display:'flex',alignItems: m ? 'flex-start' : 'end',flexDirection: m ? 'column' : 'row',justifyContent:'space-between',gap:12,marginBottom: m ? 20 : 32}}>
          <div>
            <div className="mono" style={{fontSize:13,letterSpacing:'0.18em',textTransform:'uppercase',color:'var(--orange)'}}>// SHOP THE JUNGLE</div>
            <h2 className="display" style={{fontSize:'clamp(32px,5vw,72px)',margin:'6px 0 0'}}>Pick your <span className="squiggle">poison</span></h2>
          </div>
          {!m && <button className="btn ghost" onClick={()=>go('shop')}>See all products <Icon.Arrow/></button>}
        </div>
        <div style={{display:'grid',gridTemplateColumns: m ? 'repeat(2,1fr)' : 'repeat(3,1fr)',gap: m ? 14 : 24}}>
          {cats.map((c)=>(
            <button key={c.name} onClick={()=>go(c.page)} className="sticker lift" style={{textAlign:'left',padding:0,display:'block'}}>
              <div style={{position:'relative',background:'var(--cream-deep)',aspectRatio:'5/4',overflow:'hidden'}}>
                <img src={c.img} alt={c.name + ' — custom stickers Australia'} style={{width:'100%',height:'100%',objectFit:'cover'}}/>
                <span className="chip" style={{position:'absolute',top:10,left:10,background:'var(--yellow)',fontSize: m ? 10 : 12}}>{c.tag}</span>
              </div>
              <div style={{padding: m ? '12px 14px' : '18px 20px',display:'flex',justifyContent:'space-between',alignItems:'center',borderTop:'3px solid var(--ink)'}}>
                <div>
                  <div className="display" style={{fontSize: m ? 16 : 24}}>{c.name}</div>
                  <div style={{fontSize:12,color:'var(--muted)',marginTop:2}}>From <strong style={{color:'var(--ink)'}}>{c.from}</strong></div>
                </div>
                <div style={{width: m ? 34 : 42,height: m ? 34 : 42,display:'grid',placeItems:'center',background:'var(--orange)',color:'#fff',borderRadius:10,border:'2px solid var(--ink)',flexShrink:0}}>
                  <Icon.Arrow size={m ? 14 : 18}/>
                </div>
              </div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
};

const BestSellers = ({ go }) => {
  const m = useIsMobile();
  const [activeFilter, setActiveFilter] = React.useState('all');
  const allItems = [
    { n:'OG Kong Face',         img:'assets/mascot.jpeg',          price:3.20, tag:'Bestseller', page:'die-cut', f:'die-cut' },
    { n:'Holo King',            img:'assets/holo-gold.jpeg',        price:4.50, tag:'Holo',       page:'holo',    f:'holo'    },
    { n:'Custom Wall Mural',    img:'assets/bedroom-mural.jpeg',    price:149.00,tag:'New',        page:'mural',   f:'mural'   },
    { n:'Sticker Sheet — Boss', img:'assets/sticker-sheets.jpeg',   price:6.80, tag:'Sheet',      page:'sheets',  f:'sheets'  },
    { n:'Rainbow Holo',         img:'assets/holo-rainbow.jpeg',     price:4.90, tag:'Holo',       page:'holo',    f:'holo'    },
    { n:'Bottle Slap',          img:'assets/water-bottle.jpeg',     price:3.50, tag:null,         page:'die-cut', f:'die-cut' },
    { n:'Chrome Holo',          img:'assets/holo-chrome.jpeg',      price:4.90, tag:null,         page:'holo',    f:'holo'    },
    { n:'Hand-drawn Pack',      img:'assets/sticker-collection.jpeg',price:12.00,tag:'Pack',      page:'sheets',  f:'packs'   },
  ];
  const filters = ['all','die-cut','sheets','holo','packs','mural'];
  const items = activeFilter === 'all' ? allItems : allItems.filter(it => it.f === activeFilter);
  return (
    <section style={{padding: m ? '32px 0' : '48px 0'}}>
      <div className="wrap" style={{padding: m ? '0 20px' : undefined}}>
        <div style={{display:'flex',alignItems: m ? 'flex-start' : 'end',flexDirection: m ? 'column' : 'row',justifyContent:'space-between',gap:12,marginBottom: m ? 16 : 24}}>
          <div>
            <div className="mono" style={{fontSize:13,letterSpacing:'0.18em',textTransform:'uppercase',color:'var(--orange)'}}>// CROWD FAVOURITES</div>
            <h2 className="display" style={{fontSize:'clamp(32px,5vw,72px)',margin:'6px 0 0'}}>Best sellers</h2>
          </div>
          {!m && (
            <div style={{display:'flex',gap:8}}>
              {filters.map(f=>(
                <button key={f} className="pill" onClick={()=>setActiveFilter(f)}
                  style={{background: activeFilter===f ? 'var(--ink)' : '#fff', color: activeFilter===f ? '#fff' : 'var(--ink)', cursor:'pointer', transition:'background .15s'}}>
                  {f === 'all' ? 'All' : f.charAt(0).toUpperCase() + f.slice(1).replace('-',' ')}
                </button>
              ))}
            </div>
          )}
        </div>
        <div style={{display:'grid',gridTemplateColumns: m ? 'repeat(2,1fr)' : 'repeat(4,1fr)',gap: m ? 12 : 20}}>
          {items.map(it=>(
            <div key={it.n} onClick={()=>go(it.page)} className="sticker lift" style={{textAlign:'left',padding:0,cursor:'pointer'}}>
              <div style={{position:'relative',aspectRatio:'1/1',background:'var(--cream-deep)',overflow:'hidden'}}>
                <img src={it.img} alt={it.n + ' — King Kong Stickers'} style={{width:'100%',height:'100%',objectFit:'cover'}}/>
                {it.tag && <span className="chip" style={{position:'absolute',top:8,left:8,background:'var(--orange)',color:'#fff',fontSize:10}}>{it.tag}</span>}
                <div role="button" onClick={e=>e.stopPropagation()} style={{position:'absolute',top:8,right:8,width:30,height:30,borderRadius:'50%',background:'#fff',border:'2px solid var(--ink)',display:'grid',placeItems:'center',cursor:'pointer'}}>
                  <Icon.Heart size={14}/>
                </div>
              </div>
              <div style={{padding: m ? '10px 12px' : '12px 14px',borderTop:'3px solid var(--ink)',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
                <div>
                  <div style={{fontWeight:800,fontSize: m ? 12 : 14}}>{it.n}</div>
                  <div style={{fontSize:11,color:'var(--muted)'}}>from <strong style={{color:'var(--ink)'}}>${it.price.toFixed(2)}</strong></div>
                </div>
                {!m && <button className="btn" onClick={e=>{e.stopPropagation();go(it.page);}} style={{padding:'8px 12px',fontSize:12,boxShadow:'2px 2px 0 var(--ink)'}}>Customise</button>}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const HowItWorks = ({ go }) => {
  const m = useIsMobile();
  const steps = [
    { img:'assets/upload-artwork.jpeg', n:'01', h:'Upload artwork', s:'PNG, JPG, SVG, PDF, AI. Anything with a transparent background. No art? Use our free template gallery.' },
    { img:'assets/quick-proofs.jpeg', n:'02', h:'Free proof', s:'A real human checks your file, fixes cut lines, and sends a digital proof. Approve in one click.' },
    { img:'assets/shipping-2.jpeg', n:'03', h:'Made + shipped fast', s:'Printed in Sydney on 7-year vinyl, laminated, kiss-cut. On your doorstep in 4 days.' },
  ];
  return (
    <section style={{padding: m ? '56px 0' : '80px 0',background:'var(--ink)',color:'#fff',position:'relative',overflow:'hidden'}}>
      <div style={{position:'absolute',inset:0,opacity:0.06,backgroundImage:'radial-gradient(#fff 1.4px, transparent 1.6px)',backgroundSize:'14px 14px'}}/>
      <div className="wrap" style={{position:'relative',padding: m ? '0 20px' : undefined}}>
        <div style={{textAlign:'center',marginBottom: m ? 32 : 48}}>
          <div className="mono" style={{fontSize:13,letterSpacing:'0.18em',textTransform:'uppercase',color:'var(--yellow)'}}>// THREE STEPS, ZERO STRESS</div>
          <h2 className="display" style={{fontSize:'clamp(36px,6vw,86px)',margin:'8px 0 12px',color:'#fff'}}>How it works</h2>
          <p style={{maxWidth:560,margin:'0 auto',opacity:0.75,fontSize: m ? 15 : 17}}>We make custom sticker ordering ridiculously simple — and we don't charge for the things other printers nickel-and-dime you on.</p>
        </div>
        <div style={{display:'grid',gridTemplateColumns: m ? '1fr' : 'repeat(3,1fr)',gap: m ? 16 : 28,position:'relative'}}>
          {steps.map((s,i)=>(
            <div key={i} style={{background:'#fff',color:'var(--ink)',borderRadius:22,border:'3px solid #fff',padding: m ? 20 : 24,position:'relative'}}>
              <div style={{aspectRatio:'1/1',background:'var(--cream)',borderRadius:14,overflow:'hidden',border:'2px solid var(--ink)'}}>
                <img src={s.img} alt={s.h + ' — how to order custom stickers'} style={{width:'100%',height:'100%',objectFit:'cover'}}/>
              </div>
              <div className="display" style={{position:'absolute',top:-14,right:-8,fontSize:38,color:'var(--orange)',WebkitTextStroke:'2px var(--ink)',background:'#fff',padding:'2px 10px',borderRadius:10}}>{s.n}</div>
              <div className="display" style={{fontSize: m ? 22 : 26,marginTop:18}}>{s.h}</div>
              <p style={{fontSize:14,lineHeight:1.55,color:'var(--ink-soft)',marginTop:8}}>{s.s}</p>
            </div>
          ))}
        </div>
        <div style={{display:'flex',justifyContent:'center',marginTop:36}}>
          <button className="btn primary" onClick={()=>go('die-cut')}>Start your order <Icon.Arrow/></button>
        </div>
      </div>
    </section>
  );
};

const BigCTA = ({ go }) => {
  const m = useIsMobile();
  return (
    <section style={{padding: m ? '48px 0' : '80px 0'}}>
      <div className="wrap" style={{padding: m ? '0 20px' : undefined}}>
        <div style={{position:'relative',borderRadius: m ? 20 : 32,overflow:'hidden',border:'3px solid var(--ink)',boxShadow: m ? '6px 6px 0 var(--ink)' : '10px 10px 0 var(--ink)'}}>
          <img src="assets/brick-lifestyle.jpeg" alt="Custom sticker sample pack — try before you order" style={{width:'100%',height: m ? 380 : 640,objectFit:'cover'}}/>
          <div style={{position:'absolute',inset:0,background:'linear-gradient(90deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0) 100%)'}}/>
          <div style={{position:'absolute',inset:0,display:'flex',alignItems:'center',padding: m ? '0 28px' : '0 56px'}}>
            <div style={{color:'#fff',maxWidth: m ? '100%' : 520}}>
              <span className="chip" style={{background:'var(--yellow)',color:'var(--ink)'}}>$1 SAMPLE PACK</span>
              <h2 className="display" style={{fontSize: m ? 'clamp(32px,9vw,54px)' : 'clamp(40px,5.5vw,80px)',margin:'14px 0',color:'#fff',lineHeight:0.95}}>FEEL THEM<br/>BEFORE YOU<br/>ORDER THEM.</h2>
              <p style={{fontSize: m ? 14 : 17,opacity:0.9,maxWidth:420}}>13 of our best stickers across every material we print. Posted free. Costs less than a coffee.</p>
              <div style={{display:'flex',gap:10,marginTop:20,flexWrap:'wrap'}}>
                <button className="btn primary" onClick={()=>go('sample')}>Send me a pack</button>
                {!m && <button className="btn ghost" onClick={()=>go('sample')}>Compare materials</button>}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const CustomerWall = () => {
  const m = useIsMobile();
  const reviews = [
    { n:'Maya R.', l:'Sydney', t:'Ordered 500 die-cuts for our coffee shop. Proof was back in 40 min. They literally improved my logo.', s:'OG Kong Face · 500qty', img:'assets/laptop-sticker.jpeg' },
    { n:'Tom V.', l:'Melbourne', t:"Holographic ones are unreal in person. Photos don't do them justice.", s:'Holo · 100qty', img:'assets/holo-rainbow.jpeg' },
    { n:'Sienna K.', l:'Perth', t:'Stuck one on my hydroflask 8 months ago. Left it outside all summer. Still perfect.', s:'Die-cut · 50qty', img:'assets/water-bottle.jpeg' },
    { n:'Owen P.', l:'Sydney', t:'Cheapest bulk price I found in AU and the print quality is way ahead of overseas printers.', s:'Bulk · 2000qty', img:'assets/sticker-stack.jpeg' },
  ];
  return (
    <section style={{padding: m ? '32px 0 0' : '40px 0 0'}}>
      <div className="wrap" style={{padding: m ? '0 20px' : undefined}}>
        <div style={{display:'flex',alignItems: m ? 'flex-start' : 'end',flexDirection: m ? 'column' : 'row',justifyContent:'space-between',gap:12,marginBottom: m ? 16 : 24}}>
          <div>
            <div className="mono" style={{fontSize:13,letterSpacing:'0.18em',textTransform:'uppercase',color:'var(--orange)'}}>// FROM THE TROOP</div>
            <h2 className="display" style={{fontSize:'clamp(32px,5vw,72px)',margin:'6px 0 0'}}>What the<br/>stickerheads say</h2>
          </div>
          <div style={{display:'flex',alignItems:'center',gap:14}}>
            <div style={{display:'flex',gap:2,color:'var(--orange)'}}>{[0,1,2,3,4].map(i=><Icon.Star key={i} fill="currentColor" size={m?16:22}/>)}</div>
            <div><div style={{fontWeight:800,fontSize: m ? 15 : 18}}>Loved by our customers</div><div style={{fontSize:12,color:'var(--muted)'}}>Honest reviews from Aussie buyers</div></div>
          </div>
        </div>
        <div style={{display:'grid',gridTemplateColumns: m ? 'repeat(2,1fr)' : 'repeat(4,1fr)',gap: m ? 12 : 18}}>
          {reviews.map((r,i)=>(
            <div key={i} className="sticker" style={{padding:0,background:i%2?'var(--yellow)':'#fff'}}>
              <div style={{aspectRatio:'5/4',overflow:'hidden',borderBottom:'3px solid var(--ink)'}}>
                <img src={r.img} alt={r.n + ' — King Kong Stickers customer review'} style={{width:'100%',height:'100%',objectFit:'cover'}}/>
              </div>
              <div style={{padding: m ? 12 : 16}}>
                <div style={{display:'flex',gap:2,color:'var(--orange)',marginBottom:6}}>{[0,1,2,3,4].map(j=><Icon.Star key={j} fill="currentColor" size={12}/>)}</div>
                <p style={{fontSize: m ? 12 : 14,fontWeight:500,lineHeight:1.45,margin:0}}>"{r.t}"</p>
                <div style={{marginTop:12,fontWeight:800,fontSize: m ? 11 : 13}}>{r.n} · <span style={{color:'var(--muted)',fontWeight:600}}>{r.l}</span></div>
                <div className="mono" style={{fontSize:10,marginTop:3,opacity:0.6}}>{r.s}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const FAQTease = () => {
  const m = useIsMobile();
  const qa = [
    { q:'How fast can you ship?', a:'Standard turnaround is 4 business days from artwork approval. Express knocks it down to 2.' },
    { q:'Are the stickers waterproof?', a:'Yes — printed on 7-year outdoor vinyl with a UV-blocking laminate. Waterproof + sun safe.' },
    { q:'What\'s the minimum order?', a:'10 stickers for die-cut. No minimum on sticker sheets. Bulk pricing kicks in at 100.' },
    { q:'Can you fix my artwork?', a:'Our designers do free file checks on every order. We\'ll redraw blurry logos, fix cut lines, and re-export at print res.' },
    { q:'Do you do trade pricing?', a:'Yep — 15–35% off retail at 500+ qty. Sign up to the Banana Club for ongoing discounts.' },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{padding: m ? '56px 0' : '80px 0'}}>
      <div className="wrap" style={{padding: m ? '0 20px' : undefined,display:'grid',gridTemplateColumns: m ? '1fr' : '1fr 1.4fr',gap: m ? 32 : 60,alignItems:'start'}}>
        <div>
          <div className="mono" style={{fontSize:13,letterSpacing:'0.18em',textTransform:'uppercase',color:'var(--orange)'}}>// FAQ</div>
          <h2 className="display" style={{fontSize:'clamp(32px,5vw,72px)',margin:'6px 0 18px'}}>Things you<br/>might ask.</h2>
          <p style={{fontSize:16,color:'var(--ink-soft)',maxWidth:340,lineHeight:1.5}}>Still stuck? Email a real Sydney human at hello@kingkongstickers.com.au — we reply within 2 hours on weekdays.</p>
          <button className="btn ghost" style={{marginTop:22}} onClick={()=>go('contact')}>Contact us</button>
        </div>
        <div>
          {qa.map((it,i)=>(
            <div key={i} className="sticker" style={{marginBottom:12,padding:0,background:open===i?'var(--yellow)':'#fff',boxShadow: open===i?'8px 8px 0 var(--ink)':'4px 4px 0 var(--ink)'}}>
              <button onClick={()=>setOpen(open===i?-1:i)} style={{display:'flex',width:'100%',justifyContent:'space-between',alignItems:'center',padding: m ? '16px 18px' : '20px 22px',textAlign:'left',cursor:'pointer',background:'none',border:'none',color:'inherit'}}>
                <span className="display" style={{fontSize: m ? 18 : 22}}>{it.q}</span>
                <span style={{width:32,height:32,display:'grid',placeItems:'center',background:'var(--ink)',color:'#fff',borderRadius:'50%',transform: open===i?'rotate(45deg)':'none',transition:'transform .15s',flexShrink:0}}><Icon.Plus size={14}/></span>
              </button>
              {open===i && <div style={{padding: m ? '0 18px 16px' : '0 22px 20px',fontSize:15,lineHeight:1.55,color:'var(--ink-soft)'}}>{it.a}</div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Home = Home;