// Support pages — Contact, Help Center, Order Tracking, Returns, Shipping

const SupportHero = ({ go, page, tag, title, sub }) => (
  <>
    <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>
        <a onClick={()=>go('help-center')} style={{cursor:'pointer'}}>Support</a>
        <span style={{margin:'0 8px',opacity:0.5}}>/</span>
        <strong style={{color:'var(--ink)'}}>{page}</strong>
      </div>
    </div>
    <section style={{background:'var(--ink)',color:'#fff',borderBottom:'3px solid var(--ink)',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={{padding:'56px 28px 64px',position:'relative'}}>
        <div className="mono" style={{fontSize:13,letterSpacing:'0.18em',textTransform:'uppercase',color:'var(--yellow)',marginBottom:12}}>{tag}</div>
        <h1 className="display" style={{fontSize:'clamp(44px,7vw,88px)',margin:'0 0 16px',color:'#fff',lineHeight:0.92}}>{title}</h1>
        {sub && <p style={{fontSize:18,opacity:0.8,maxWidth:600,lineHeight:1.55,margin:0}}>{sub}</p>}
      </div>
    </section>
  </>
);

// ── Contact ──────────────────────────────────────────────────────────────────
const CF7_ID = 10196;
const Contact = ({ go }) => {
  const [form, setForm] = React.useState({ name:'', email:'', order:'', topic:'General enquiry', message:'' });
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [err, setErr] = React.useState('');
  const set = (k,v) => setForm(f=>({...f,[k]:v}));
  const topics = ['General enquiry','Order issue','Artwork help','Reprint request','Wholesale / bulk','Press & media'];

  const handleSubmit = async (e) => {
    e.preventDefault();
    setSending(true); setErr('');
    try {
      const fd = new FormData();
      fd.append('_wpcf7', CF7_ID);
      fd.append('_wpcf7_version', '5.8');
      fd.append('_wpcf7_locale', 'en_AU');
      fd.append('_wpcf7_unit_tag', `wpcf7-f${CF7_ID}-p1-o1`);
      fd.append('your-name', form.name);
      fd.append('your-email', form.email);
      fd.append('your-order', form.order);
      fd.append('your-topic', form.topic);
      fd.append('your-message', form.message);
      const res = await fetch(`/wp-json/contact-form-7/v1/contact-forms/${CF7_ID}/feedback`, { method:'POST', body:fd });
      const data = await res.json();
      if (data.status === 'mail_sent') { setSent(true); }
      else { setErr(data.message || 'Something went wrong — email hello@kingkongstickers.com.au directly.'); }
    } catch { setErr('Could not send — email us at hello@kingkongstickers.com.au'); }
    setSending(false);
  };

  return (
    <main>
      <Header go={go}/>
      <SupportHero go={go} page="Contact" tag="// GET IN TOUCH"
        title={<>Talk to a<br/>human.</>}
        sub="We're a 9-person studio in Sydney. Real people answer every message — usually within a few hours during business hours."/>
      <TrustStrip/>
      <section style={{padding:'80px 0 100px'}}>
        <div className="wrap" style={{display:'grid',gridTemplateColumns:'1fr 1.1fr',gap:60,alignItems:'start'}}>

          {/* Left — info */}
          <div>
            <div className="mono" style={{fontSize:13,letterSpacing:'0.18em',textTransform:'uppercase',color:'var(--orange)',marginBottom:8}}>// HOW TO REACH US</div>
            <h2 className="display" style={{fontSize:'clamp(28px,3.5vw,46px)',margin:'0 0 24px'}}>Our contact details</h2>
            <div style={{display:'flex',flexDirection:'column',gap:14,marginBottom:36}}>
              {[
                { icon:<Icon.Sparkle size={18}/>, h:'Message us', b:'Use the contact form below or email hello@kingkongstickers.com.au — a real person answers within 2 hours, Mon–Fri 9am–5pm AEST.', badge:'Fastest' },
                { icon:<Icon.Star size={18}/>, h:'Email', b:'hello@kingkongstickers.com.au — we reply within 2 hours Mon–Fri, 9am–5pm AEST.', badge:null },
                { icon:<Icon.Aus size={18}/>, h:'Studio', b:'King Kong Stickers · 18 Punch St, Artarmon NSW · Not a walk-in — by appointment only.', badge:null },
              ].map((c,i)=>(
                <div key={i} className="sticker" style={{padding:'18px 20px',boxShadow:'4px 4px 0 var(--ink)',display:'flex',gap:16,alignItems:'flex-start'}}>
                  <div style={{width:40,height:40,display:'grid',placeItems:'center',background:'var(--yellow)',border:'2px solid var(--ink)',borderRadius:10,flexShrink:0}}>{c.icon}</div>
                  <div style={{flex:1}}>
                    <div style={{display:'flex',gap:8,alignItems:'center',marginBottom:4}}>
                      <span className="display" style={{fontSize:18}}>{c.h}</span>
                      {c.badge && <span className="chip" style={{background:'var(--green)',color:'#fff',fontSize:10}}>{c.badge}</span>}
                    </div>
                    <p style={{margin:0,fontSize:13,color:'var(--ink-soft)',lineHeight:1.5}}>{c.b}</p>
                  </div>
                </div>
              ))}
            </div>

            <div style={{padding:'24px',background:'var(--cream-deep)',border:'2.5px solid var(--ink)',borderRadius:16}}>
              <div className="display" style={{fontSize:20,marginBottom:12}}>Business hours</div>
              {[
                ['Monday – Friday','9:00am – 5:00pm AEST'],
                ['Saturday – Sunday + Public holidays','Closed'],
              ].map(([d,t])=>(
                <div key={d} style={{display:'flex',justifyContent:'space-between',padding:'10px 0',borderBottom:'1px solid rgba(0,0,0,0.08)',fontSize:14}}>
                  <span style={{fontWeight:600}}>{d}</span>
                  <span style={{color:'var(--ink-soft)'}}>{t}</span>
                </div>
              ))}
              <p style={{margin:'14px 0 0',fontSize:12,color:'var(--muted)'}}>Proofs and production run 7 days. Chat and email are monitored outside hours for urgent reprints.</p>
            </div>
          </div>

          {/* Right — form */}
          <div className="sticker" style={{padding:28,boxShadow:'8px 8px 0 var(--ink)'}}>
            {sent ? (
              <div style={{textAlign:'center',padding:'40px 20px'}}>
                <div style={{fontSize:52,marginBottom:16}}>✉️</div>
                <h2 className="display" style={{fontSize:38,margin:'0 0 12px'}}>Message sent!</h2>
                <p style={{fontSize:16,color:'var(--ink-soft)',lineHeight:1.5,maxWidth:320,margin:'0 auto 24px'}}>We'll get back to you within 2 hours during business hours. Check your inbox — including spam, just in case.</p>
                <button className="btn ghost" onClick={()=>setSent(false)}>Send another message</button>
              </div>
            ) : (
              <form onSubmit={handleSubmit}>
                <div className="display" style={{fontSize:26,marginBottom:6}}>Send us a message</div>
                <p style={{fontSize:13,color:'var(--muted)',margin:'0 0 22px'}}>We reply within 2 hours on weekdays.</p>
                <div style={{display:'flex',flexDirection:'column',gap:14}}>
                  <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
                    <SupportField label="Full name">
                      <input required placeholder="Jane Smith" value={form.name} onChange={e=>set('name',e.target.value)} style={supInput}/>
                    </SupportField>
                    <SupportField label="Email">
                      <input required type="email" placeholder="jane@example.com" value={form.email} onChange={e=>set('email',e.target.value)} style={supInput}/>
                    </SupportField>
                  </div>
                  <SupportField label="Order number (optional)">
                    <input placeholder="KK-12345" value={form.order} onChange={e=>set('order',e.target.value)} style={supInput}/>
                  </SupportField>
                  <SupportField label="Topic">
                    <select required value={form.topic} onChange={e=>set('topic',e.target.value)} style={supInput}>
                      {topics.map(t=><option key={t}>{t}</option>)}
                    </select>
                  </SupportField>
                  <SupportField label="Message">
                    <textarea required rows={5} placeholder="Tell us what's up..." value={form.message} onChange={e=>set('message',e.target.value)} style={{...supInput,height:'auto',resize:'vertical'}}/>
                  </SupportField>
                </div>
                {err && <div style={{marginTop:12,padding:'10px 14px',background:'#fff0f0',border:'2px solid #e53e3e',borderRadius:8,fontSize:13,color:'#c0392b'}}>{err}</div>}
                <button type="submit" disabled={sending} className="btn primary" style={{width:'100%',justifyContent:'center',marginTop:18,padding:'16px',opacity:sending?0.7:1}}>
                  {sending ? 'Sending…' : <><span>Send message</span><Icon.Arrow/></>}
                </button>
              </form>
            )}
          </div>
        </div>
      </section>
      <Footer go={go}/>
    </main>
  );
};

// ── Help Center ───────────────────────────────────────────────────────────────
const HelpCenter = ({ go }) => {
  const [open, setOpen] = React.useState(null);
  const [activeTab, setActiveTab] = React.useState('Orders');

  const faqs = {
    Orders: [
      { q:'How do I place an order?', a:'Select your product, choose your options (shape, size, material, finish, quantity), upload your artwork, and click "Get free proof". We\'ll review your file and send a digital proof — usually within 2 hours. Once you approve, we print and dispatch.' },
      { q:'Can I change my order after it\'s placed?', a:'Yes — as long as production hasn\'t started. Contact us as soon as possible via email or our contact form. Once your file has been confirmed and sent to the press, changes may not be possible.' },
      { q:'What\'s the minimum order quantity?', a:'10 stickers for die-cut. 1 sheet for sticker sheets. No minimum for sample packs. Bulk pricing starts at 100 units.' },
      { q:'Do you charge for the proof?', a:'No. Every order includes a free digital proof reviewed by a real designer. We\'ll fix any cut line or resolution issues at no extra charge before we send the proof.' },
      { q:'Can I order stickers without artwork?', a:'Yes — you can upload your artwork later. At checkout, just leave the file blank and we\'ll email you a link to upload when you\'re ready. Production starts after artwork is received and approved.' },
      { q:'Do you offer rush orders?', a:'Yes. Express production cuts turnaround to 2 business days from proof approval. Select Express at checkout — it\'s available for most products and sizes.' },
    ],
    Artwork: [
      { q:'What file formats do you accept?', a:'SVG, AI, PDF (vector), EPS, PNG (300dpi+), JPG (300dpi+). Vector files are always preferred for die-cut products as they give the sharpest cut lines.' },
      { q:'My file is low resolution — can you still print it?', a:'Possibly. Send it anyway — our designers will assess it and let you know in the proof. For logos, we can often redraw them in vector at no charge. For photos, we\'ll advise on the best print size for your resolution.' },
      { q:'Do I need to add bleed?', a:'Ideally yes — 3mm beyond your cut line. If you haven\'t, our designers can often extend your background manually. We\'ll flag it in the proof if it\'s an issue.' },
      { q:'Will you fix my artwork?', a:'Yes — within reason. We do free file checks on every order. We\'ll fix blurry edges, adjust cut lines, extend bleeds, and convert fonts to outlines. We won\'t redesign artwork from scratch, but for that we offer a $35 designer session.' },
      { q:'What colour mode should I use?', a:'CMYK gives the most accurate colour output. RGB files are accepted but converted on our end — vivid blues and greens can shift slightly. For colour-critical work, supply CMYK and we\'ll match as closely as possible.' },
      { q:'Can I supply my own cut path?', a:'Yes. Put it on a separate unlocked layer named "Cut" in 100% Magenta with no fill. We\'ll use your path rather than auto-generating one from your artwork.' },
    ],
    Shipping: [
      { q:'How fast do you ship?', a:'Standard turnaround is 4 business days from proof approval to dispatch. Express is 2 business days. Delivery after dispatch is typically 2–5 business days depending on your location.' },
      { q:'Do you offer free shipping?', a:'Yes — free standard shipping on all orders over $25. Orders under $25 have a flat $6.50 shipping fee. Express shipping is calculated at checkout.' },
      { q:'Which carrier do you use?', a:'We dispatch with Australia Post and Aramex depending on your location and parcel size. All orders include tracking.' },
      { q:'Do you ship internationally?', a:'Yes. Flat $15 to New Zealand, $25 to the rest of the world. International orders are shipped with Australia Post International. Free international shipping on orders over $200.' },
      { q:'My order hasn\'t arrived — what do I do?', a:'Check your tracking link first (see Order Tracking). If it shows delivered but you haven\'t received it, contact us within 7 days and we\'ll investigate and reprint if needed at no charge.' },
    ],
    Returns: [
      { q:'What is your reprint guarantee?', a:'100% reprint, no questions asked. If your stickers arrive damaged, with a print defect, or don\'t match your approved proof — contact us with a photo within 14 days of delivery and we\'ll reprint the full order free of charge.' },
      { q:'What if I made a mistake in my artwork?', a:'If you approved the proof and the print matches it, we can\'t cover the reprint cost — but we\'ll give you a 20% discount on a replacement order. If it\'s our error, the reprint is completely free.' },
      { q:'Can I return stickers for a refund?', a:'Custom-printed products can\'t be returned for a refund as they\'re made to order. If there\'s a quality issue, we\'ll always reprint. If you\'re unhappy for any other reason, contact us and we\'ll find a solution.' },
      { q:'How do I request a reprint?', a:'Email hello@kingkongstickers.com.au with your order number and a photo of the issue. We\'ll review it within 2 hours and confirm the reprint — no forms, no hoops.' },
    ],
    Billing: [
      { q:'What payment methods do you accept?', a:'Visa, Mastercard, Amex, PayPal, Apple Pay, Google Pay, and Afterpay (buy now, pay later in 4 instalments). All payments are processed securely — we never store card details.' },
      { q:'When am I charged?', a:'You\'re charged when you place your order. For proof-first orders, payment is held in authorisation until you approve the proof, then captured. You can cancel before proof approval for a full refund.' },
      { q:'Can I get a tax invoice?', a:'Yes — a GST invoice is emailed automatically when your order is placed. If you need a custom invoice (for ABN or business name), contact us after ordering.' },
      { q:'Do you offer credit accounts for businesses?', a:'Yes — net-30 credit accounts are available for approved wholesale and trade customers. Contact us with your ABN and annual estimated spend to apply.' },
    ],
  };

  const tabs = Object.keys(faqs);
  const quickLinks = [
    { label:'Track my order', page:'order-tracking', icon:<Icon.Truck size={18}/> },
    { label:'Request a reprint', page:'contact', icon:<Icon.Sparkle size={18}/> },
    { label:'Shipping info', page:'shipping', icon:<Icon.Arrow size={18}/> },
    { label:'Returns policy', page:'returns', icon:<Icon.Check size={18}/> },
  ];

  return (
    <main>
      <Header go={go}/>
      <SupportHero go={go} page="Help Center" tag="// SUPPORT"
        title={<>Help<br/>Center.</>}
        sub="Quick answers to the most common questions. Can't find what you need? Email us and a real human will get back to you within 2 hours on weekdays."/>
      <TrustStrip/>
      <section style={{padding:'60px 0 100px'}}>
        <div className="wrap">
          <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:16,marginBottom:52}}>
            {quickLinks.map(l=>(
              <button key={l.label} onClick={()=>go(l.page)} className="sticker lift"
                style={{padding:'20px',textAlign:'left',display:'flex',gap:12,alignItems:'center',cursor:'pointer'}}>
                <div style={{width:40,height:40,display:'grid',placeItems:'center',background:'var(--yellow)',border:'2px solid var(--ink)',borderRadius:10,flexShrink:0}}>{l.icon}</div>
                <span className="display" style={{fontSize:16}}>{l.label}</span>
              </button>
            ))}
          </div>

          <div style={{display:'grid',gridTemplateColumns:'200px 1fr',gap:40,alignItems:'start'}}>
            <div style={{position:'sticky',top:100}}>
              <div style={{display:'flex',flexDirection:'column',gap:4}}>
                {tabs.map(t=>(
                  <button key={t} onClick={()=>{setActiveTab(t);setOpen(null);}}
                    style={{padding:'12px 16px',textAlign:'left',fontWeight:800,fontSize:14,borderRadius:10,
                      background:activeTab===t?'var(--ink)':'transparent',color:activeTab===t?'#fff':'var(--ink)',
                      border:activeTab===t?'2px solid var(--ink)':'2px solid transparent'}}>
                    {t}
                  </button>
                ))}
              </div>
              <div style={{marginTop:28,padding:'18px',background:'var(--orange)',color:'#fff',borderRadius:14,border:'2px solid var(--ink)'}}>
                <div className="display" style={{fontSize:18,marginBottom:8}}>Still stuck?</div>
                <p style={{fontSize:13,lineHeight:1.5,margin:'0 0 12px',opacity:0.9}}>Chat with a real person — open weekdays 9am–5pm AEST.</p>
                <button className="btn" style={{width:'100%',justifyContent:'center',padding:'10px'}} onClick={()=>go('contact')}>Contact us</button>
              </div>
            </div>

            <div>
              <div className="mono" style={{fontSize:13,letterSpacing:'0.18em',textTransform:'uppercase',color:'var(--orange)',marginBottom:8}}>// {activeTab.toUpperCase()}</div>
              <h2 className="display" style={{fontSize:'clamp(28px,3.5vw,44px)',margin:'0 0 24px'}}>{activeTab} questions</h2>
              <div style={{display:'flex',flexDirection:'column',gap:10}}>
                {faqs[activeTab].map((item,i)=>(
                  <div key={i} className="sticker" style={{padding:0,boxShadow:open===`${activeTab}-${i}`?'6px 6px 0 var(--ink)':'3px 3px 0 var(--ink)',background:open===`${activeTab}-${i}`?'var(--yellow)':'#fff'}}>
                    <button onClick={()=>setOpen(open===`${activeTab}-${i}`?null:`${activeTab}-${i}`)}
                      style={{display:'flex',width:'100%',justifyContent:'space-between',alignItems:'center',padding:'18px 22px',textAlign:'left'}}>
                      <span className="display" style={{fontSize:19,flex:1,paddingRight:16}}>{item.q}</span>
                      <span style={{width:32,height:32,display:'grid',placeItems:'center',background:'var(--ink)',color:'#fff',borderRadius:'50%',flexShrink:0,
                        transform:open===`${activeTab}-${i}`?'rotate(45deg)':'none',transition:'transform .15s'}}>
                        <Icon.Plus size={14}/>
                      </span>
                    </button>
                    {open===`${activeTab}-${i}` && (
                      <div style={{padding:'0 22px 20px',fontSize:15,lineHeight:1.6,color:'var(--ink-soft)'}}>{item.a}</div>
                    )}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
      <Footer go={go}/>
    </main>
  );
};

// ── Order Tracking ────────────────────────────────────────────────────────────
const OrderTracking = ({ go }) => {
  const [orderNum, setOrderNum] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [searched, setSearched] = React.useState(false);

  const stages = [
    { label:'Order received', desc:'Payment confirmed, artwork queued for review', done:true },
    { label:'Proof sent', desc:'Designer reviewed your file and sent a digital proof', done:true },
    { label:'Proof approved', desc:'You approved — we sent it to the press', done:true },
    { label:'In production', desc:'Printing, laminating, and cutting your stickers', done:false, active:true },
    { label:'Quality check', desc:'12-point inspection before packing', done:false },
    { label:'Dispatched', desc:'Handed to the carrier — tracking link emailed to you', done:false },
    { label:'Delivered', desc:'In your hands', done:false },
  ];

  return (
    <main>
      <Header go={go}/>
      <SupportHero go={go} page="Order Tracking" tag="// WHERE IS IT?"
        title={<>Track your<br/>order.</>}
        sub="Enter your order number and email to see where your stickers are right now."/>
      <section style={{padding:'80px 0 100px'}}>
        <div className="wrap" style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:60,alignItems:'start'}}>

          <div>
            <div className="sticker" style={{padding:28,boxShadow:'8px 8px 0 var(--ink)',marginBottom:28}}>
              <div className="display" style={{fontSize:24,marginBottom:6}}>Find your order</div>
              <p style={{fontSize:13,color:'var(--muted)',margin:'0 0 20px'}}>Your order number is in your confirmation email — it looks like KK-12345.</p>
              <form onSubmit={e=>{e.preventDefault();window.location.href=`/my-account/orders/?billing_email=${encodeURIComponent(email)}`;}}>
                <div style={{display:'flex',flexDirection:'column',gap:12}}>
                  <SupportField label="Order number">
                    <input required placeholder="12345" value={orderNum} onChange={e=>setOrderNum(e.target.value)} style={supInput}/>
                  </SupportField>
                  <SupportField label="Email used at checkout">
                    <input required type="email" placeholder="jane@example.com" value={email} onChange={e=>setEmail(e.target.value)} style={supInput}/>
                  </SupportField>
                  <button type="submit" className="btn primary" style={{justifyContent:'center'}}>Track order <Icon.Arrow/></button>
                </div>
              </form>
            </div>

            <div style={{padding:'22px 24px',background:'var(--cream-deep)',border:'2.5px solid var(--ink)',borderRadius:16}}>
              <div className="display" style={{fontSize:20,marginBottom:14}}>Typical delivery times</div>
              {[
                { zone:'Sydney / NSW',        std:'2–3 business days', exp:'Next business day' },
                { zone:'Melbourne / VIC',     std:'2–3 business days', exp:'Next business day' },
                { zone:'Brisbane / QLD',      std:'2–3 business days', exp:'Next business day' },
                { zone:'Adelaide / SA',       std:'3–4 business days', exp:'1–2 business days' },
                { zone:'Perth / WA',          std:'4–6 business days', exp:'2–3 business days' },
                { zone:'Darwin / NT',         std:'4–6 business days', exp:'2–3 business days' },
                { zone:'Hobart / TAS',        std:'3–5 business days', exp:'2–3 business days' },
                { zone:'New Zealand',         std:'5–8 business days', exp:'3–5 business days' },
                { zone:'International',       std:'8–14 business days', exp:'5–8 business days' },
              ].map(r=>(
                <div key={r.zone} style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:8,padding:'10px 0',borderBottom:'1px solid rgba(0,0,0,0.08)',fontSize:13}}>
                  <span style={{fontWeight:700}}>{r.zone}</span>
                  <span style={{color:'var(--ink-soft)'}}>{r.std}</span>
                  <span style={{color:'var(--orange)',fontWeight:600}}>{r.exp}</span>
                </div>
              ))}
              <div style={{display:'flex',gap:16,marginTop:12,fontSize:11,color:'var(--muted)'}}>
                <span>Standard</span><span style={{color:'var(--orange)',fontWeight:700}}>Express (in orange)</span>
              </div>
            </div>
          </div>

          <div>
            <div className="mono" style={{fontSize:13,letterSpacing:'0.18em',textTransform:'uppercase',color:'var(--orange)',marginBottom:8}}>// ORDER JOURNEY</div>
            <h2 className="display" style={{fontSize:'clamp(28px,3.5vw,44px)',margin:'0 0 28px'}}>How your order moves</h2>
            <div style={{position:'relative'}}>
              <div style={{position:'absolute',left:19,top:20,bottom:20,width:2,background:'var(--cream-deep)',zIndex:0}}/>
              <div style={{display:'flex',flexDirection:'column',gap:0}}>
                {stages.map((s,i)=>(
                  <div key={i} style={{display:'flex',gap:16,alignItems:'flex-start',padding:'14px 0',position:'relative',zIndex:1}}>
                    <div style={{width:40,height:40,borderRadius:'50%',flexShrink:0,display:'grid',placeItems:'center',
                      background: s.done?'var(--green)': s.active?'var(--orange)':'var(--cream-deep)',
                      border:`3px solid ${s.done?'var(--green)':s.active?'var(--orange)':'var(--ink)'}`,
                      color: s.done||s.active?'#fff':'var(--muted)'}}>
                      {s.done ? <Icon.Check size={16}/> : s.active ? <span style={{width:10,height:10,borderRadius:'50%',background:'#fff',display:'block'}}/> : <span style={{fontSize:12,fontWeight:800}}>{i+1}</span>}
                    </div>
                    <div style={{paddingTop:8}}>
                      <div style={{fontWeight:800,fontSize:15, color: s.done?'var(--green)':s.active?'var(--orange)':'var(--ink)'}}>{s.label}{s.active && <span className="chip" style={{marginLeft:10,background:'var(--orange)',color:'#fff',fontSize:10}}>Current</span>}</div>
                      <div style={{fontSize:13,color:'var(--muted)',marginTop:2}}>{s.desc}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div style={{marginTop:28,padding:'18px 20px',background:'var(--yellow)',border:'2.5px solid var(--ink)',borderRadius:14}}>
              <div style={{fontWeight:800,fontSize:14,marginBottom:4}}>Issue with your delivery?</div>
              <div style={{fontSize:13,color:'var(--ink-soft)',marginBottom:12}}>If your order hasn't arrived within the expected window, contact us and we'll investigate within 2 hours.</div>
              <button className="btn primary" style={{padding:'10px 16px',fontSize:13}} onClick={()=>go('contact')}>Contact support <Icon.Arrow/></button>
            </div>
          </div>
        </div>
      </section>
      <Footer go={go}/>
    </main>
  );
};

// ── Returns ───────────────────────────────────────────────────────────────────
const Returns = ({ go }) => {
  const steps = [
    { n:'01', h:'Take a photo', b:'Photograph the issue clearly — ideally against a neutral background. Include the whole sticker sheet, not just one sticker.' },
    { n:'02', h:'Email us', b:'Send the photo to hello@kingkongstickers.com.au with your order number in the subject line. Or use our contact form — it\'s the same inbox.' },
    { n:'03', h:'We review it', b:'We assess every claim within 2 hours on weekdays. If it\'s our error, we confirm the reprint immediately — no arguing, no forms.' },
    { n:'04', h:'Reprint dispatched', b:'Your replacement order goes to the front of the queue and ships within 1 business day. Same specs as your original order.' },
  ];
  const covered = [
    'Printing defects (banding, colour shift, incorrect colours)',
    'Cut line errors (cut too close to artwork, uneven borders)',
    'Lamination issues (bubbling, peeling, matte/gloss mismatch)',
    'Wrong product received',
    'Damaged in transit',
    'Missing items from your order',
  ];
  const notCovered = [
    'Artwork errors that were present in your approved proof',
    'Colour variance within ±5% (inherent to digital printing)',
    'Change of mind after production has started',
    'Damage caused by incorrect application',
  ];

  return (
    <main>
      <Header go={go}/>
      <SupportHero go={go} page="Returns & Reprints" tag="// 100% GUARANTEE"
        title={<>We'll make<br/>it right.</>}
        sub="If something's wrong with your order, we reprint it. No questions, no forms, no argument. That's the whole policy."/>
      <TrustStrip/>
      <section style={{padding:'80px 0'}}>
        <div className="wrap">
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:48,marginBottom:64}}>
            <div>
              <div className="mono" style={{fontSize:13,letterSpacing:'0.18em',textTransform:'uppercase',color:'var(--green)',marginBottom:8}}>// WHAT WE COVER</div>
              <h2 className="display" style={{fontSize:'clamp(28px,3.5vw,44px)',margin:'0 0 20px'}}>100% covered</h2>
              <div style={{display:'flex',flexDirection:'column',gap:10}}>
                {covered.map((c,i)=>(
                  <div key={i} style={{display:'flex',gap:12,alignItems:'flex-start',padding:'12px 16px',background:'#fff',border:'2px solid var(--ink)',borderRadius:12}}>
                    <span style={{width:22,height:22,borderRadius:'50%',background:'var(--green)',color:'#fff',display:'grid',placeItems:'center',flexShrink:0,marginTop:1}}><Icon.Check size={11}/></span>
                    <span style={{fontSize:14,lineHeight:1.4}}>{c}</span>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <div className="mono" style={{fontSize:13,letterSpacing:'0.18em',textTransform:'uppercase',color:'var(--red)',marginBottom:8}}>// NOT COVERED</div>
              <h2 className="display" style={{fontSize:'clamp(28px,3.5vw,44px)',margin:'0 0 20px'}}>Outside the guarantee</h2>
              <div style={{display:'flex',flexDirection:'column',gap:10,marginBottom:24}}>
                {notCovered.map((c,i)=>(
                  <div key={i} style={{display:'flex',gap:12,alignItems:'flex-start',padding:'12px 16px',background:'var(--cream)',border:'2px solid var(--ink)',borderRadius:12}}>
                    <span style={{fontSize:18,color:'var(--red)',flexShrink:0,lineHeight:1.4}}>×</span>
                    <span style={{fontSize:14,lineHeight:1.4,color:'var(--ink-soft)'}}>{c}</span>
                  </div>
                ))}
              </div>
              <div style={{padding:'18px 20px',background:'var(--yellow)',border:'2.5px solid var(--ink)',borderRadius:14}}>
                <div style={{fontWeight:800,fontSize:14,marginBottom:4}}>Made a mistake in your artwork?</div>
                <div style={{fontSize:13,color:'var(--ink-soft)'}}>We can\'t cover the reprint cost — but we\'ll give you 20% off a replacement order, no questions asked.</div>
              </div>
            </div>
          </div>

          <div className="mono" style={{fontSize:13,letterSpacing:'0.18em',textTransform:'uppercase',color:'var(--orange)',marginBottom:8}}>// HOW IT WORKS</div>
          <h2 className="display" style={{fontSize:'clamp(28px,4vw,52px)',margin:'0 0 28px'}}>Requesting a reprint</h2>
          <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:20,marginBottom:48}}>
            {steps.map(s=>(
              <div key={s.n} className="sticker" style={{padding:'22px',boxShadow:'5px 5px 0 var(--ink)'}}>
                <div className="display" style={{fontSize:36,color:'var(--orange)',marginBottom:10}}>{s.n}</div>
                <div className="display" style={{fontSize:20,marginBottom:8}}>{s.h}</div>
                <p style={{margin:0,fontSize:13,color:'var(--ink-soft)',lineHeight:1.5}}>{s.b}</p>
              </div>
            ))}
          </div>

          <div style={{background:'var(--ink)',color:'#fff',borderRadius:28,border:'3px solid var(--ink)',padding:'40px 48px',boxShadow:'8px 8px 0 var(--ink)',display:'grid',gridTemplateColumns:'1fr auto',gap:40,alignItems:'center'}}>
            <div>
              <h2 className="display" style={{fontSize:'clamp(26px,3.5vw,44px)',color:'#fff',margin:'0 0 10px'}}>Got an issue with your order?</h2>
              <p style={{opacity:0.8,fontSize:15,lineHeight:1.5,margin:0}}>Don't sit on it — contact us within 14 days of delivery. We'll sort it out straight away.</p>
            </div>
            <button className="btn" onClick={()=>go('contact')} style={{whiteSpace:'nowrap'}}>Contact us now <Icon.Arrow/></button>
          </div>
        </div>
      </section>
      <Footer go={go}/>
    </main>
  );
};

// ── Shipping ──────────────────────────────────────────────────────────────────
const Shipping = ({ go }) => {
  const domestic = [
    { zone:'Sydney metro', std:'1–2 business days', exp:'Same/next day', stdRate:'Free over $25', expRate:'From $12' },
    { zone:'NSW regional', std:'2–3 business days', exp:'1–2 business days', stdRate:'Free over $25', expRate:'From $14' },
    { zone:'VIC / QLD / SA', std:'2–3 business days', exp:'1–2 business days', stdRate:'Free over $25', expRate:'From $14' },
    { zone:'WA / NT', std:'4–6 business days', exp:'2–3 business days', stdRate:'Free over $25', expRate:'From $18' },
    { zone:'TAS', std:'3–5 business days', exp:'2–3 business days', stdRate:'Free over $25', expRate:'From $16' },
  ];
  const international = [
    { zone:'New Zealand', std:'5–8 business days', rate:'$15 flat' },
    { zone:'USA / Canada', std:'8–12 business days', rate:'$25 flat' },
    { zone:'UK / Europe', std:'8–14 business days', rate:'$25 flat' },
    { zone:'Asia Pacific', std:'6–10 business days', rate:'$25 flat' },
    { zone:'Rest of world', std:'10–18 business days', rate:'$25 flat' },
  ];

  return (
    <main>
      <Header go={go}/>
      <SupportHero go={go} page="Shipping" tag="// DELIVERY INFO"
        title={<>Shipping<br/>& delivery.</>}
        sub="We dispatch from Sydney. Standard orders ship within 3 business days of proof approval — express within 1."/>
      <TrustStrip/>
      <section style={{padding:'80px 0 100px'}}>
        <div className="wrap">

          <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:20,marginBottom:60}}>
            {[
              { icon:<Icon.Truck size={22}/>, h:'Free shipping $25+', b:'All Australian orders over $25 ship free. Orders under $25 have a flat $6.50 fee. No weight surcharges, no fuel levies.' },
              { icon:<Icon.Sparkle size={20}/>, h:'Same-day dispatch', b:'Orders with approved proofs before 12pm AEST on weekdays are dispatched the same day. After 12pm, next business day.' },
              { icon:<Icon.Check size={20}/>, h:'Tracking on every order', b:'Every order ships with a tracking number. You\'ll receive it by email the moment your parcel is scanned by the carrier.' },
            ].map((c,i)=>(
              <div key={i} className="sticker" style={{padding:'22px 24px',boxShadow:'5px 5px 0 var(--ink)',display:'flex',gap:14,alignItems:'flex-start'}}>
                <div style={{width:44,height:44,display:'grid',placeItems:'center',background:'var(--yellow)',border:'2px solid var(--ink)',borderRadius:12,flexShrink:0}}>{c.icon}</div>
                <div>
                  <div className="display" style={{fontSize:20,marginBottom:6}}>{c.h}</div>
                  <p style={{margin:0,fontSize:13,color:'var(--ink-soft)',lineHeight:1.5}}>{c.b}</p>
                </div>
              </div>
            ))}
          </div>

          <div className="mono" style={{fontSize:13,letterSpacing:'0.18em',textTransform:'uppercase',color:'var(--orange)',marginBottom:8}}>// AUSTRALIA</div>
          <h2 className="display" style={{fontSize:'clamp(28px,3.5vw,46px)',margin:'0 0 20px'}}>Domestic shipping</h2>
          <div className="sticker" style={{padding:0,overflow:'hidden',marginBottom:52}}>
            <table style={{width:'100%',borderCollapse:'collapse'}}>
              <thead>
                <tr style={{background:'var(--ink)',color:'#fff'}}>
                  {['Zone','Standard delivery','Express delivery','Standard rate','Express rate'].map(h=>(
                    <th key={h} style={{padding:'14px 18px',textAlign:'left',fontWeight:800,fontSize:13,fontFamily:'inherit'}}>{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {domestic.map((r,i)=>(
                  <tr key={r.zone} style={{borderBottom:'2px solid var(--ink)',background:i%2?'var(--cream)':'#fff'}}>
                    <td style={{padding:'14px 18px',fontWeight:700,fontSize:14}}>{r.zone}</td>
                    <td style={{padding:'14px 18px',fontSize:13}}>{r.std}</td>
                    <td style={{padding:'14px 18px',fontSize:13,color:'var(--orange)',fontWeight:700}}>{r.exp}</td>
                    <td style={{padding:'14px 18px',fontSize:13}}>{r.stdRate}</td>
                    <td style={{padding:'14px 18px',fontSize:13}}>{r.expRate}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <div className="mono" style={{fontSize:13,letterSpacing:'0.18em',textTransform:'uppercase',color:'var(--orange)',marginBottom:8}}>// INTERNATIONAL</div>
          <h2 className="display" style={{fontSize:'clamp(28px,3.5vw,46px)',margin:'0 0 20px'}}>International shipping</h2>
          <div className="sticker" style={{padding:0,overflow:'hidden',marginBottom:36}}>
            <table style={{width:'100%',borderCollapse:'collapse'}}>
              <thead>
                <tr style={{background:'var(--ink)',color:'#fff'}}>
                  {['Destination','Estimated delivery','Flat rate'].map(h=>(
                    <th key={h} style={{padding:'14px 18px',textAlign:'left',fontWeight:800,fontSize:13,fontFamily:'inherit'}}>{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {international.map((r,i)=>(
                  <tr key={r.zone} style={{borderBottom:'2px solid var(--ink)',background:i%2?'var(--cream)':'#fff'}}>
                    <td style={{padding:'14px 18px',fontWeight:700,fontSize:14}}>{r.zone}</td>
                    <td style={{padding:'14px 18px',fontSize:13}}>{r.std}</td>
                    <td style={{padding:'14px 18px',fontSize:13,fontWeight:700}}>{r.rate}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <p style={{fontSize:13,color:'var(--muted)',marginBottom:52}}>Free international shipping on orders over $200 AUD. International delivery times are estimates and subject to customs clearance in the destination country.</p>

          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:24}}>
            <div style={{padding:'28px',background:'var(--yellow)',border:'3px solid var(--ink)',borderRadius:18,boxShadow:'5px 5px 0 var(--ink)'}}>
              <div className="display" style={{fontSize:22,marginBottom:10}}>Production time</div>
              <p style={{fontSize:14,lineHeight:1.55,margin:'0 0 14px',color:'var(--ink-soft)'}}>Delivery time starts after your proof is approved. Standard production is 4 business days. Express production is 2 business days.</p>
              <div style={{fontSize:13,fontWeight:700}}>Total time = production + delivery</div>
            </div>
            <div style={{padding:'28px',background:'var(--cream-deep)',border:'2.5px solid var(--ink)',borderRadius:18}}>
              <div className="display" style={{fontSize:22,marginBottom:10}}>Something went wrong?</div>
              <p style={{fontSize:14,lineHeight:1.55,margin:'0 0 14px',color:'var(--ink-soft)'}}>If your parcel is delayed, damaged in transit, or hasn't arrived within the expected window — contact us. We'll investigate and reprint if needed.</p>
              <button className="btn primary" style={{padding:'10px 16px',fontSize:13}} onClick={()=>go('contact')}>Contact support <Icon.Arrow/></button>
            </div>
          </div>
        </div>
      </section>
      <Footer go={go}/>
    </main>
  );
};

// ── Shared helpers ────────────────────────────────────────────────────────────
const supInput = {
  display:'block',width:'100%',padding:'11px 14px',
  border:'2.5px solid var(--ink)',borderRadius:12,
  fontFamily:'inherit',fontSize:14,fontWeight:600,
  background:'var(--cream)',outline:'none',boxSizing:'border-box',
};

const SupportField = ({ label, children }) => (
  <div>
    <div style={{fontWeight:700,fontSize:11,textTransform:'uppercase',letterSpacing:'0.06em',marginBottom:6,color:'var(--ink-soft)'}}>{label}</div>
    {children}
  </div>
);

Object.assign(window, { Contact, HelpCenter, OrderTracking, Returns, Shipping });