// Sticker application guide — web preview + print-ready A5 insert card

const InstallGuide = ({ go }) => {

  const handlePrint = () => window.print();

  const steps = [
    {
      n: '01',
      title: 'CLEAN',
      icon: (
        <svg viewBox="0 0 40 40" width={36} height={36} fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M10 30 Q 12 18 20 16 Q 28 14 30 10"/>
          <path d="M8 34 Q 14 22 22 20 Q 30 18 32 14"/>
          <path d="M14 36 Q 18 26 24 24 Q 30 22 33 18"/>
          <circle cx="20" cy="8" r="3" fill="currentColor" stroke="none"/>
          <path d="M20 11 L20 14"/>
        </svg>
      ),
      body: 'Wipe the surface with a dry cloth or alcohol wipe. No grease, no moisture, no dust. Cold, damp, or oily surfaces are the #1 cause of stickers not sticking.',
      tip: 'Isopropyl alcohol (rubbing alcohol) works best',
    },
    {
      n: '02',
      title: 'PEEL',
      icon: (
        <svg viewBox="0 0 40 40" width={36} height={36} fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
          <rect x="8" y="12" width="24" height="18" rx="3"/>
          <path d="M8 20 Q 16 12 24 20"/>
          <path d="M20 12 L26 6 M26 6 L30 10"/>
        </svg>
      ),
      body: 'Gently flex the backing card to loosen the sticker from the corners. Peel the backing away at a 45° angle — never straight back. Go slowly to keep the sticker flat.',
      tip: 'If edges lift, press them down and peel more slowly',
    },
    {
      n: '03',
      title: 'POSITION',
      icon: (
        <svg viewBox="0 0 40 40" width={36} height={36} fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="20" cy="20" r="3" fill="currentColor" stroke="none"/>
          <path d="M20 6 L20 11 M20 29 L20 34 M6 20 L11 20 M29 20 L34 20"/>
          <circle cx="20" cy="20" r="10"/>
        </svg>
      ),
      body: 'Hold the sticker by its edges and hover it over your chosen spot before touching the adhesive to the surface. Take your time — once it touches, it sticks.',
      tip: 'Dry-position first, then commit',
    },
    {
      n: '04',
      title: 'APPLY',
      icon: (
        <svg viewBox="0 0 40 40" width={36} height={36} fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
          <rect x="6" y="16" width="28" height="12" rx="4"/>
          <path d="M12 16 L12 28 M20 16 L20 28 M28 16 L28 28"/>
          <path d="M8 22 L32 22" strokeWidth="1.5" strokeDasharray="3 2"/>
        </svg>
      ),
      body: 'Lower one edge down first, then lay the rest across. Use your thumb or a bank card to smooth firmly from the centre outward, pushing any air bubbles toward the edges.',
      tip: 'Work from centre outward — never from edge to edge',
    },
    {
      n: '05',
      title: 'PRESS',
      icon: (
        <svg viewBox="0 0 40 40" width={36} height={36} fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M14 8 L14 22 Q 14 28 20 28 Q 26 28 26 22 L26 8"/>
          <path d="M10 22 Q 10 34 20 34 Q 30 34 30 22"/>
          <path d="M14 12 L10 12 M26 12 L30 12"/>
        </svg>
      ),
      body: 'Apply firm pressure with your thumb across the entire sticker for 30 seconds. Pay extra attention to the edges and corners — these are the first places that lift if not pressed down properly.',
      tip: 'Use a coin or card edge to press down corners',
    },
  ];

  const materials = [
    { name: 'Die-Cut Vinyl',    dot: '#FF6A1A', tips: ['Press edges firmly — the cut profile is where lifting starts', 'Curved surfaces: warm sticker with palm heat first'] },
    { name: 'Holographic',      dot: '#3D7AFE', tips: ['Avoid fingerprints on the face — oils dull the shift', 'Apply in shade — direct sun makes positioning tricky'] },
    { name: 'Clear Vinyl',      dot: '#ECE3D0', border: true, tips: ['Use a squeegee or credit card — bubbles show more on clear', 'Apply to clean glass at room temperature only'] },
    { name: 'Glitter',          dot: '#FFD700', tips: ['Don\'t scrub — light firm pressure only to avoid scratching', 'Avoid soaking — glitter edges can lift in dishwashers'] },
    { name: 'Sticker Sheets',   dot: '#2BB04A', tips: ['Flex the sheet before peeling individual stickers', 'Store flat — rolled sheets are harder to apply cleanly'] },
    { name: 'Outdoor / XL',     dot: '#A23BFF', tips: ['Surface must be above 10°C for adhesive to bond fully', 'Run a hand squeegee from centre outward for large sizes'] },
  ];

  return (
    <>
      {/* ── Print stylesheet injected into head ── */}
      <style dangerouslySetInnerHTML={{__html:`
        @media print {
          * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
          .no-print { display: none !important; }
          .print-card { box-shadow: none !important; border-radius: 0 !important; }
          @page { size: A5 portrait; margin: 0; }
          body { background: white !important; }
          #root > * > .no-print { display: none !important; }
        }
        @media screen {
          .print-only { display: none !important; }
        }
      `}}/>

      <main className="no-print-wrapper">

        {/* ── Screen: page header ── */}
        <div className="no-print" style={{background:'var(--ink)',color:'#fff',padding:0}}>
          <Header go={go} cart={0}/>
        </div>

        <div className="no-print" 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>
            <strong style={{color:'var(--ink)'}}>Sticker Application Guide</strong>
          </div>
        </div>

        {/* ── Screen: intro + print CTA ── */}
        <div className="no-print" style={{background:'var(--cream)',padding:'48px 0 36px'}}>
          <div className="wrap" style={{display:'grid',gridTemplateColumns:'1fr auto',gap:40,alignItems:'center'}}>
            <div>
              <div className="mono" style={{fontSize:13,letterSpacing:'0.18em',textTransform:'uppercase',color:'var(--orange)'}}>// INSERT CARD</div>
              <h1 className="display" style={{fontSize:'clamp(40px,5vw,72px)',margin:'8px 0 14px',lineHeight:0.9}}>Sticker<br/><span style={{color:'var(--orange)'}}>Application</span><br/>Guide</h1>
              <p style={{fontSize:16,color:'var(--ink-soft)',lineHeight:1.6,maxWidth:540,margin:'0 0 24px'}}>Print-ready A5 insert card for inclusion in every order box. Click print below — it outputs at exactly A5 size in full colour. Designed to be read quickly, remembered, and kept.</p>
              <div style={{display:'flex',gap:12,flexWrap:'wrap'}}>
                <button onClick={handlePrint} className="btn primary" style={{display:'flex',alignItems:'center',gap:10,fontSize:15,padding:'16px 24px'}}>
                  <svg viewBox="0 0 24 24" width={18} height={18} fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M6 9V3h12v6M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/>
                    <rect x="6" y="14" width="12" height="8" rx="1"/>
                  </svg>
                  Print / Save as PDF
                </button>
                <div style={{display:'flex',gap:16,alignItems:'center',fontSize:13,color:'var(--muted)'}}>
                  <span>✓ A5 portrait</span>
                  <span>✓ Full colour</span>
                  <span>✓ Single sheet</span>
                </div>
              </div>
            </div>
            <div style={{display:'flex',flexDirection:'column',gap:10,padding:'20px 24px',background:'#fff',border:'3px solid var(--ink)',borderRadius:16,boxShadow:'6px 6px 0 var(--ink)',fontSize:13}}>
              {[
                {l:'Format', v:'A5 portrait (148 × 210mm)'},
                {l:'Paper',  v:'100–170gsm recommended'},
                {l:'Sides',  v:'Single-sided'},
                {l:'Colour', v:'Full CMYK'},
                {l:'Finish', v:'Matt or gloss laminate'},
              ].map(r=>(
                <div key={r.l} style={{display:'flex',justifyContent:'space-between',gap:24}}>
                  <span style={{color:'var(--muted)',fontWeight:600}}>{r.l}</span>
                  <span style={{fontWeight:800}}>{r.v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* ── THE CARD — renders on screen AND in print ── */}
        <div className="no-print" style={{background:'#e8e0d4',padding:'48px 28px',display:'flex',justifyContent:'center',alignItems:'flex-start'}}>
          <div style={{fontSize:11,color:'var(--muted)',textAlign:'center',marginBottom:20,letterSpacing:'0.1em',textTransform:'uppercase',fontFamily:'Space Mono,monospace',position:'absolute',marginTop:-28}}>↓ Preview — actual print output at A5 size</div>
        </div>

        {/* Card — centred on screen for preview, full-bleed on print */}
        <div style={{background:'#e8e0d4',padding:'0 28px 48px',display:'flex',justifyContent:'center'}}>
          <InsertCard/>
        </div>

        {/* ── Screen: second print CTA ── */}
        <div className="no-print" style={{background:'var(--ink)',padding:'48px 28px',textAlign:'center'}}>
          <div className="display" style={{fontSize:'clamp(28px,3vw,42px)',color:'#fff',marginBottom:16}}>Ready to print?</div>
          <p style={{color:'rgba(255,255,255,0.7)',fontSize:15,marginBottom:24}}>Open Print dialog → set paper size to A5 → disable page scaling → print.</p>
          <button onClick={handlePrint} className="btn" style={{fontSize:15,padding:'16px 28px'}}>
            <svg viewBox="0 0 24 24" width={18} height={18} fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9V3h12v6M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8" rx="1"/></svg>
            Print / Save as PDF
          </button>
        </div>

        <div className="no-print"><Footer go={go}/></div>
      </main>
    </>
  );
};

// ── The actual insert card ────────────────────────────────────────────────────
// Sized at 148mm × 210mm (A5). Uses mm units so print output is exact.

const InsertCard = () => {

  const steps = [
    { n:'01', title:'CLEAN',    body:'Wipe the surface with a dry cloth or alcohol wipe. No grease, dust, or moisture — these prevent adhesion.' },
    { n:'02', title:'PEEL',     body:'Flex the backing to loosen edges. Peel at 45° from a corner. Never straight back — it stretches the sticker.' },
    { n:'03', title:'POSITION', body:'Hold by the edges and hover over your spot before touching adhesive to the surface. Once it lands, it sticks.' },
    { n:'04', title:'SMOOTH',   body:'Lay from one edge inward. Use your thumb or a bank card to smooth firmly from centre outward, pushing air out.' },
    { n:'05', title:'PRESS',    body:'Apply firm pressure with your thumb for 30 seconds — especially on edges and corners. This seals the bond.' },
  ];

  const proTips = [
    { icon:'🌡️', text:'Apply between 15°C and 30°C — cold adhesive won\'t bond fully.' },
    { icon:'💧', text:'Outdoor stickers: wait 24 hrs before exposing to rain or washing.' },
    { icon:'📌', text:'Bubbles? Prick with a pin and press flat from edge inward.' },
    { icon:'🔄', text:'Curved surfaces: warm with your palm, then apply in small sections.' },
    { icon:'🧲', text:'Clear vinyl: use a card squeegee for bubble-free clarity on glass.' },
  ];

  return (
    <div className="print-card" style={{
      width:'148mm', minHeight:'210mm',
      background:'#FFFEF8',
      fontFamily:"'Archivo',Arial,sans-serif",
      overflow:'hidden',
      boxShadow:'0 8px 40px rgba(0,0,0,0.25)',
      position:'relative',
    }}>

      {/* ── TOP BAND — dark with logo ── */}
      <div style={{background:'#111111',padding:'12mm 10mm 10mm',position:'relative',overflow:'hidden'}}>
        {/* subtle dot grid */}
        <div style={{position:'absolute',inset:0,backgroundImage:'radial-gradient(#ffffff18 1px,transparent 1.5px)',backgroundSize:'8mm 8mm',pointerEvents:'none'}}/>
        <div style={{position:'relative',display:'flex',alignItems:'center',justifyContent:'space-between',gap:'6mm'}}>
          {/* logo mark */}
          <div style={{display:'flex',alignItems:'center',gap:'4mm'}}>
            <div style={{width:'12mm',height:'12mm',borderRadius:'50%',border:'2px solid #FFCE00',background:'#222',overflow:'hidden',flexShrink:0}}>
              <img src="assets/mascot.jpeg" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
            </div>
            <div style={{lineHeight:0.9}}>
              <div style={{fontFamily:"'Bowlby One',Arial Black,sans-serif",fontSize:'9pt',color:'#ffffff',letterSpacing:'-0.02em'}}>KING KONG</div>
              <div style={{fontFamily:"'Bowlby One',Arial Black,sans-serif",fontSize:'9pt',color:'#FF6A1A',letterSpacing:'-0.02em',WebkitTextStroke:'0.5px #FFCE00'}}>STICKERS</div>
            </div>
          </div>
          {/* heading */}
          <div style={{textAlign:'right'}}>
            <div style={{fontFamily:"'Bowlby One',Arial Black,sans-serif",fontSize:'14pt',color:'#FFCE00',lineHeight:0.9,letterSpacing:'-0.01em'}}>HOW TO APPLY</div>
            <div style={{fontFamily:"'Bowlby One',Arial Black,sans-serif",fontSize:'14pt',color:'#ffffff',lineHeight:0.9,letterSpacing:'-0.01em'}}>YOUR STICKERS.</div>
          </div>
        </div>
      </div>

      {/* ── ORANGE ACCENT LINE ── */}
      <div style={{height:'3px',background:'linear-gradient(90deg,#FF6A1A,#FFCE00,#FF6A1A)'}}/>

      {/* ── STEPS ── */}
      <div style={{padding:'6mm 10mm 4mm'}}>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'4mm 6mm'}}>
          {steps.map((s,i) => (
            <div key={s.n} style={{
              display:'flex',gap:'3mm',alignItems:'flex-start',
              padding:'4mm',
              background: i===4 ? '#FFF6E5' : '#ffffff',
              border:'2px solid #111111',
              borderRadius:'6px',
              gridColumn: i===4 ? '1 / -1' : 'auto',
            }}>
              <div style={{
                flexShrink:0,
                width:'9mm',height:'9mm',
                borderRadius:'50%',
                background:'#FF6A1A',
                border:'2px solid #111111',
                display:'flex',alignItems:'center',justifyContent:'center',
                fontFamily:"'Bowlby One',Arial Black,sans-serif",
                fontSize:'8pt',
                color:'#ffffff',
                lineHeight:1,
              }}>{s.n}</div>
              <div style={{flex:1}}>
                <div style={{fontFamily:"'Bowlby One',Arial Black,sans-serif",fontSize:'9pt',color:'#111111',marginBottom:'1mm',letterSpacing:'-0.01em'}}>{s.title}</div>
                <div style={{fontSize:'7pt',color:'#3A332B',lineHeight:1.45}}>{s.body}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* ── YELLOW CALLOUT ── */}
      <div style={{margin:'0 10mm',padding:'4mm 5mm',background:'#FFCE00',border:'2.5px solid #111111',borderRadius:'8px',display:'flex',gap:'4mm',alignItems:'center'}}>
        <div style={{fontSize:'16pt',lineHeight:1,flexShrink:0}}>⚡</div>
        <div>
          <div style={{fontFamily:"'Bowlby One',Arial Black,sans-serif",fontSize:'9pt',color:'#111111',letterSpacing:'-0.01em'}}>WAIT 24 HOURS</div>
          <div style={{fontSize:'7pt',color:'#111111',lineHeight:1.4,marginTop:'1mm'}}>Before washing, soaking, or extended outdoor exposure. The adhesive needs time to cure fully — this is what makes your sticker last years, not weeks.</div>
        </div>
      </div>

      {/* ── PRO TIPS ── */}
      <div style={{padding:'4mm 10mm 4mm'}}>
        <div style={{fontFamily:"'Bowlby One',Arial Black,sans-serif",fontSize:'8pt',color:'#FF6A1A',letterSpacing:'0.08em',marginBottom:'3mm',textTransform:'uppercase'}}>// Pro Tips</div>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'2mm'}}>
          {proTips.map((t,i) => (
            <div key={i} style={{
              display:'flex',gap:'2.5mm',alignItems:'flex-start',
              padding:'2.5mm 3mm',
              background:'#F7F0E2',
              borderRadius:'5px',
              border:'1.5px solid #11111120',
              gridColumn: i===4 ? '1 / -1' : 'auto',
            }}>
              <span style={{fontSize:'9pt',lineHeight:1,flexShrink:0}}>{t.icon}</span>
              <span style={{fontSize:'6.5pt',color:'#3A332B',lineHeight:1.45}}>{t.text}</span>
            </div>
          ))}
        </div>
      </div>

      {/* ── FOOTER BAND ── */}
      <div style={{background:'#111111',padding:'5mm 10mm',display:'flex',alignItems:'center',justifyContent:'space-between',gap:'6mm',marginTop:'2mm'}}>

        {/* QR code */}
        <div style={{display:'flex',gap:'4mm',alignItems:'center'}}>
          <div style={{width:'18mm',height:'18mm',background:'#ffffff',borderRadius:'4px',overflow:'hidden',border:'2px solid #FFCE00',flexShrink:0,display:'flex',alignItems:'center',justifyContent:'center'}}>
            <img
              src="https://api.qrserver.com/v1/create-qr-code/?size=120x120&data=https://kingkongstickers.com.au/&color=111111&bgcolor=ffffff"
              style={{width:'100%',height:'100%',imageRendering:'pixelated'}}
              alt="QR"
            />
          </div>
          <div>
            <div style={{fontFamily:"'Bowlby One',Arial Black,sans-serif",fontSize:'7pt',color:'#FFCE00',letterSpacing:'-0.01em',marginBottom:'1.5mm'}}>SCAN FOR MORE TIPS</div>
            <div style={{fontSize:'6pt',color:'rgba(255,255,255,0.7)',lineHeight:1.5}}>kingkongstickers.com.au<br/>hello@kingkongstickers.com.au</div>
          </div>
        </div>

        {/* guarantee + social */}
        <div style={{textAlign:'right'}}>
          <div style={{fontFamily:"'Bowlby One',Arial Black,sans-serif",fontSize:'7.5pt',color:'#ffffff',lineHeight:1.2,marginBottom:'2mm'}}>NOT HAPPY?<br/><span style={{color:'#FF6A1A'}}>WE REPRINT.</span></div>
          <div style={{fontSize:'6pt',color:'rgba(255,255,255,0.65)',lineHeight:1.5}}>100% reprint guarantee<br/>No questions asked</div>
          <div style={{display:'flex',gap:'3mm',marginTop:'3mm',justifyContent:'flex-end'}}>
            {['IG','TT','YT','FB'].map(s=>(
              <div key={s} style={{width:'7mm',height:'7mm',borderRadius:'3px',border:'1.5px solid rgba(255,255,255,0.3)',display:'flex',alignItems:'center',justifyContent:'center',fontWeight:800,fontSize:'5pt',color:'rgba(255,255,255,0.7)',fontFamily:'Arial,sans-serif'}}>{s}</div>
            ))}
          </div>
        </div>
      </div>

      {/* ── very bottom micro line ── */}
      <div style={{background:'#FF6A1A',height:'3px'}}/>

    </div>
  );
};

window.InstallGuide = InstallGuide;
