// Sample Pack page — fixed set of 13 curated stickers for $1

const SamplePack = ({ go }) => {
  const [submitted, setSubmitted] = React.useState(false);
  const [form, setForm] = React.useState({ name:'', email:'', address:'', suburb:'', state:'NSW', postcode:'' });
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const items = [
    { label:'Die-Cut Vinyl',      desc:'Our OG — contour cut to shape, matte finish', img:'assets/laptop-sticker.jpeg',      color:'var(--yellow)' },
    { label:'Holographic Rainbow', desc:'Colour-shifting holo on chrome base',         img:'assets/holo-rainbow.jpeg',        color:'#E8F4FF' },
    { label:'Holographic Gold',    desc:'Warm gold holo, seriously eye-catching',      img:'assets/holo-gold.jpeg',           color:'#FFF8DC' },
    { label:'Holographic Chrome',  desc:'Mirror-silver finish, ultra premium feel',    img:'assets/holo-chrome.jpeg',         color:'#F0F0F0' },
    { label:'Clear Vinyl',         desc:'See-through base, white ink for detail',      img:'assets/sticker-collection.jpeg',  color:'#F5F5F5' },
    { label:'Glitter',             desc:'Chunky glitter particles, bold colours',      img:'assets/holo-gold.jpeg',           color:'#FFF0F5' },
    { label:'Sticker Sheet',       desc:'Multiple designs on one A6 sheet',            img:'assets/sticker-sheets.jpeg',      color:'var(--cream-deep)' },
    { label:'Kiss-Cut Sheet',      desc:'Peel-and-share, clean white backing',         img:'assets/sticker-stack.jpeg',       color:'var(--cream)' },
    { label:'XL Die-Cut',          desc:'150mm — big, bold, hard to ignore',           img:'assets/bedroom-mural.jpeg',       color:'#FFE8E8' },
    { label:'Bulk Die-Cut',        desc:'Same vinyl, optimised for high-qty runs',     img:'assets/sticker-stack.jpeg',       color:'var(--yellow)' },
    { label:'Waterproof Label',    desc:'Gloss laminate, suit bottle + outdoor use',   img:'assets/water-bottle.jpeg',        color:'#E8FFE8' },
    { label:'Outdoor Vinyl',       desc:'7-year UV-rated, extra-thick substrate',      img:'assets/brick-lifestyle.jpeg',     color:'#FFF0E0' },
    { label:'Kraft Paper',         desc:'Eco uncoated look, matte earthy finish',      img:'assets/sticker-collection.jpeg',  color:'#F5EDD6' },
  ];

  const states = ['ACT','NSW','NT','QLD','SA','TAS','VIC','WA'];

  const handleSubmit = (e) => {
    e.preventDefault();
    // Add sample pack (product 10185) to cart and go straight to checkout
    window.location.href = '/checkout/?add-to-cart=10185&quantity=1';
  };

  return (
    <main data-screen-label="Sample Pack">
      <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>
          <strong style={{color:'var(--ink)'}}>Sample Pack</strong>
        </div>
      </div>

      {/* Hero */}
      <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:'64px 28px 72px',position:'relative',display:'grid',gridTemplateColumns:'1fr 1fr',gap:60,alignItems:'center'}}>
          <div>
            <span className="chip" style={{background:'var(--yellow)',color:'var(--ink)',marginBottom:20,display:'inline-flex'}}>
              <Icon.Sparkle size={13}/> Limited to one per customer
            </span>
            <h1 className="display" style={{fontSize:'clamp(54px,7vw,108px)',margin:'0 0 20px',color:'#fff',lineHeight:0.92}}>
              THE<br/>
              <span style={{color:'var(--yellow)',WebkitTextStroke:'2px var(--yellow)'}}>SAMPLE</span><br/>
              PACK.
            </h1>
            <p style={{fontSize:18,lineHeight:1.55,opacity:0.85,maxWidth:480,margin:'0 0 32px'}}>
              13 of our best stickers across every material we print — die-cut, holo, glitter, clear, sheets and more. Feel the difference before you order.
            </p>
            <div style={{display:'flex',gap:16,alignItems:'center',flexWrap:'wrap'}}>
              <div style={{background:'var(--orange)',border:'3px solid var(--yellow)',borderRadius:18,padding:'16px 28px',display:'inline-block'}}>
                <div className="mono" style={{fontSize:11,letterSpacing:'0.12em',textTransform:'uppercase',opacity:0.85,marginBottom:4}}>Total cost</div>
                <div className="display" style={{fontSize:52,lineHeight:1,color:'#fff'}}>$1<span style={{fontSize:24,opacity:0.7}}>.00</span></div>
                <div style={{fontSize:13,opacity:0.75,marginTop:4}}>Incl. free tracked shipping</div>
              </div>
              <div style={{display:'flex',flexDirection:'column',gap:10}}>
                {['No subscription, no catch','Posted within 1 business day','Real samples, not printouts'].map(t=>(
                  <div key={t} style={{display:'flex',gap:10,alignItems:'center',fontSize:14,fontWeight:600}}>
                    <span style={{width:22,height:22,borderRadius:'50%',background:'var(--green)',border:'2px solid #fff',display:'grid',placeItems:'center',flexShrink:0}}><Icon.Check size={11}/></span>
                    {t}
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* sticker fan */}
          <div style={{position:'relative',height:440,display:'flex',alignItems:'center',justifyContent:'center'}}>
            {[
              { src:'assets/holo-rainbow.jpeg', r:-18, x:-140, y:-40, z:1 },
              { src:'assets/laptop-sticker.jpeg', r:-8, x:-70, y:-60, z:2 },
              { src:'assets/sticker-sheets.jpeg', r:2, x:10, y:-50, z:3 },
              { src:'assets/holo-gold.jpeg', r:12, x:80, y:-30, z:2 },
              { src:'assets/holo-chrome.jpeg', r:22, x:148, y:20, z:1 },
            ].map((p,i)=>(
              <div key={i} style={{
                position:'absolute',width:160,height:160,
                borderRadius:18,border:'3px solid #fff',
                overflow:'hidden',
                transform:`rotate(${p.r}deg) translate(${p.x}px,${p.y}px)`,
                boxShadow:'6px 6px 0 rgba(0,0,0,0.4)',
                zIndex:p.z,
                background:'#fff'
              }}>
                <img src={p.src} style={{width:'100%',height:'100%',objectFit:'cover'}}/>
              </div>
            ))}
            <div className="display" style={{
              position:'absolute',bottom:40,left:'50%',transform:'translateX(-50%) rotate(-4deg)',
              background:'var(--yellow)',color:'var(--ink)',
              padding:'12px 22px',border:'3px solid #fff',borderRadius:14,
              fontSize:20,whiteSpace:'nowrap',boxShadow:'4px 4px 0 rgba(0,0,0,0.3)',
              zIndex:10
            }}>13 materials · 1 pack</div>
          </div>
        </div>
      </section>

      <TrustStrip/>

      {/* What's inside */}
      <section style={{padding:'80px 0 60px'}}>
        <div className="wrap">
          <div style={{marginBottom:36}}>
            <div className="mono" style={{fontSize:13,letterSpacing:'0.18em',textTransform:'uppercase',color:'var(--orange)'}}>// WHAT YOU GET</div>
            <h2 className="display" style={{fontSize:'clamp(36px,5vw,72px)',margin:'6px 0 0'}}>Every sample, <span className="squiggle">listed.</span></h2>
          </div>
          <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:18}}>
            {items.map((it,i)=>(
              <div key={i} className="sticker" style={{padding:0,background:'#fff',display:'flex',alignItems:'stretch'}}>
                <div style={{width:90,flexShrink:0,overflow:'hidden',borderRight:'3px solid var(--ink)',background:it.color}}>
                  <img src={it.img} style={{width:'100%',height:'100%',objectFit:'cover',opacity:0.85}}/>
                </div>
                <div style={{padding:'14px 16px',display:'flex',flexDirection:'column',justifyContent:'center',gap:4}}>
                  <div style={{display:'flex',alignItems:'center',gap:8}}>
                    <span className="display" style={{fontSize:12,background:'var(--ink)',color:'#fff',borderRadius:6,padding:'2px 7px'}}>{String(i+1).padStart(2,'0')}</span>
                    <span style={{fontWeight:800,fontSize:14}}>{it.label}</span>
                  </div>
                  <p style={{margin:0,fontSize:12,color:'var(--muted)',lineHeight:1.4}}>{it.desc}</p>
                </div>
              </div>
            ))}
          </div>
          <div style={{marginTop:24,padding:'18px 22px',background:'var(--yellow)',border:'3px solid var(--ink)',borderRadius:16,boxShadow:'5px 5px 0 var(--ink)',display:'flex',gap:14,alignItems:'center'}}>
            <Icon.Sparkle size={22}/>
            <div style={{fontWeight:700,fontSize:15}}>Every sample is a real production sticker — printed and finished the same way as a full order. Not mock-ups, not paper prints.</div>
          </div>
        </div>
      </section>

      {/* Order form */}
      <section style={{padding:'0 0 100px'}}>
        <div className="wrap" style={{display:'grid',gridTemplateColumns:'1fr 1.1fr',gap:60,alignItems:'start'}}>

          {/* left — why */}
          <div>
            <div className="mono" style={{fontSize:13,letterSpacing:'0.18em',textTransform:'uppercase',color:'var(--orange)'}}>// WHY SAMPLE FIRST</div>
            <h2 className="display" style={{fontSize:'clamp(32px,4.5vw,60px)',margin:'6px 0 24px'}}>Feel before<br/>you commit.</h2>
            <div style={{display:'flex',flexDirection:'column',gap:16}}>
              {[
                { n:'01', h:'Touch the materials', b:'Holo looks different on screen vs. in hand. Clear vinyl needs white ink to pop. Feel them before you spend on 500.' },
                { n:'02', h:'Check the print quality', b:'See our colour accuracy, laminate finish, and cut precision up close — not through a product photo.' },
                { n:'03', h:'Pick the right finish', b:'Matte vs. gloss vs. heavy laminate changes the whole vibe. The sample lets you decide with confidence.' },
              ].map(s=>(
                <div key={s.n} style={{display:'flex',gap:16,padding:'18px 20px',background:'#fff',border:'2.5px solid var(--ink)',borderRadius:16,boxShadow:'4px 4px 0 var(--ink)'}}>
                  <div className="display" style={{fontSize:28,color:'var(--orange)',flexShrink:0,lineHeight:1}}>{s.n}</div>
                  <div>
                    <div className="display" style={{fontSize:20,marginBottom:6}}>{s.h}</div>
                    <p style={{margin:0,fontSize:14,color:'var(--ink-soft)',lineHeight:1.5}}>{s.b}</p>
                  </div>
                </div>
              ))}
            </div>
            <div style={{marginTop:28,padding:'20px',background:'var(--cream-deep)',border:'2px solid var(--ink)',borderRadius:14,display:'flex',gap:12,alignItems:'center'}}>
              <Icon.Truck size={22}/>
              <div style={{fontSize:14}}>
                <strong>Free tracked shipping Australia-wide.</strong> Arrives in 3–5 business days from Sydney.
              </div>
            </div>
          </div>

          {/* right — form */}
          <div>
            <div className="sticker" style={{padding:28,boxShadow:'8px 8px 0 var(--ink)',background:'#fff'}}>
              {submitted ? (
                <div style={{textAlign:'center',padding:'40px 20px'}}>
                  <div style={{fontSize:56,marginBottom:16}}>🎉</div>
                  <h2 className="display" style={{fontSize:42,margin:'0 0 12px'}}>You're in!</h2>
                  <p style={{fontSize:16,color:'var(--ink-soft)',lineHeight:1.5,maxWidth:340,margin:'0 auto 28px'}}>Your sample pack is queued. We'll send a tracking number as soon as it ships — usually next business day.</p>
                  <button className="btn primary" onClick={()=>go('product')}>Start your real order <Icon.Arrow/></button>
                </div>
              ) : (
                <form onSubmit={handleSubmit}>
                  <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:24,paddingBottom:18,borderBottom:'2px solid var(--ink)'}}>
                    <div>
                      <div className="display" style={{fontSize:28}}>Order your pack</div>
                      <div style={{fontSize:13,color:'var(--muted)',marginTop:4}}>One per customer · $1 total</div>
                    </div>
                    <div className="display" style={{fontSize:42,color:'var(--orange)'}}>$1</div>
                  </div>

                  <div style={{display:'flex',flexDirection:'column',gap:14}}>
                    <Field label="Full name" required>
                      <input required placeholder="Jane Smith" value={form.name} onChange={e=>set('name',e.target.value)} style={inputStyle}/>
                    </Field>
                    <Field label="Email">
                      <input type="email" required placeholder="jane@example.com" value={form.email} onChange={e=>set('email',e.target.value)} style={inputStyle}/>
                    </Field>
                    <Field label="Street address">
                      <input required placeholder="123 Sticker Street" value={form.address} onChange={e=>set('address',e.target.value)} style={inputStyle}/>
                    </Field>
                    <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
                      <Field label="Suburb">
                        <input required placeholder="Surry Hills" value={form.suburb} onChange={e=>set('suburb',e.target.value)} style={inputStyle}/>
                      </Field>
                      <Field label="Postcode">
                        <input required placeholder="2010" maxLength={4} value={form.postcode} onChange={e=>set('postcode',e.target.value)} style={inputStyle}/>
                      </Field>
                    </div>
                    <Field label="State">
                      <select required value={form.state} onChange={e=>set('state',e.target.value)} style={inputStyle}>
                        {states.map(s=><option key={s}>{s}</option>)}
                      </select>
                    </Field>
                  </div>

                  <div style={{marginTop:24,padding:'14px 16px',background:'var(--cream)',border:'2px solid var(--ink)',borderRadius:12,fontSize:13,color:'var(--ink-soft)'}}>
                    You'll be charged <strong>$1.00</strong> at checkout. No recurring charges. One pack per address.
                  </div>

                  <button type="submit" className="btn primary" style={{width:'100%',justifyContent:'center',fontSize:16,padding:'18px 20px',marginTop:16}}>
                    Send me the pack <Icon.Arrow/>
                  </button>
                  <div style={{display:'flex',justifyContent:'center',gap:18,marginTop:14,fontSize:11.5,color:'var(--muted)'}}>
                    <span>✓ Secure checkout</span>
                    <span>✓ No subscription</span>
                    <span>✓ Free tracked shipping</span>
                  </div>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>

      <Footer go={go}/>
    </main>
  );
};

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

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

window.SamplePack = SamplePack;