// Custom Wall Mural — product configurator
// WC product ID: 10198  |  Material: vinyl only  |  Qty: 1  |  Custom size only

const MURAL_WC_ID = 10198;

const MURAL_SCHEMA = {
  '@context':'https://schema.org','@type':'Product',
  name:'Custom Wall Mural',
  description:'Custom printed vinyl wall murals. Wipe-clean, repositionable, printed to your exact dimensions. Printed in Sydney, Australia.',
  image:'https://kingkongstickers.com.au/assets/bedroom-mural.jpeg',
  brand:{'@type':'Brand',name:'King Kong Stickers'},
  offers:{'@type':'AggregateOffer',priceCurrency:'AUD',lowPrice:'149',availability:'https://schema.org/InStock',seller:{'@type':'Organization',name:'King Kong Stickers'}},
  additionalProperty:[
    {'@type':'PropertyValue',name:'Material',value:'Wipe-clean vinyl wallpaper'},
    {'@type':'PropertyValue',name:'Installation',value:'Paste-the-wall'},
    {'@type':'PropertyValue',name:'Finish',value:'Satin'},
    {'@type':'PropertyValue',name:'Turnaround',value:'5 business days'},
    {'@type':'PropertyValue',name:'Size',value:'Custom — any width and height'},
  ]
};

const MURAL_FAQ_SCHEMA = {
  '@context':'https://schema.org','@type':'FAQPage',
  mainEntity:[
    {'@type':'Question',name:'What material are your wall murals printed on?',acceptedAnswer:{'@type':'Answer',text:'Our murals are printed on wipe-clean satin vinyl wallpaper. It is durable, moisture-resistant, and suitable for living rooms, kids rooms, and feature walls.'}},
    {'@type':'Question',name:'How do I install a vinyl wall mural?',acceptedAnswer:{'@type':'Answer',text:'Our murals are paste-the-wall — apply standard wallpaper paste to the wall surface, then hang the panels. No specialist needed. We include a full installation guide with every order.'}},
    {'@type':'Question',name:'Can I remove and reuse the mural?',acceptedAnswer:{'@type':'Answer',text:'The mural can be removed, but it is not designed for repeated repositioning. Paste-the-wall installation bonds more permanently than self-adhesive options.'}},
    {'@type':'Question',name:'What file format do I need?',acceptedAnswer:{'@type':'Answer',text:'PDF, AI, PSD, or high-resolution JPG/PNG. Minimum 150dpi at print size. We review every file and send a digital proof before printing.'}},
    {'@type':'Question',name:'How long does delivery take?',acceptedAnswer:{'@type':'Answer',text:'5 business days from proof approval to dispatch, plus 2–5 days shipping. Most customers receive their mural within 8–10 business days.'}},
  ]
};

// Area-based pricing: $89/m² with $149 minimum
const muralPrice = (wCm, hCm) => {
  const w = parseFloat(wCm) || 0;
  const h = parseFloat(hCm) || 0;
  if (!w || !h) return null;
  const areaSqM = (w * h) / 10000;
  const raw = Math.max(149, Math.round(areaSqM * 89 * 100) / 100);
  return { total: raw, areaSqM: +areaSqM.toFixed(2) };
};

const MuralProduct = ({ go }) => {
  useSEO({
    title: 'Custom Wall Murals Australia — Printed to Your Size',
    description: 'Custom vinyl wall murals printed to your exact dimensions. Wipe-clean, paste-the-wall installation. Printed in Sydney. Free proof before we print.',
    schema: [MURAL_SCHEMA, MURAL_FAQ_SCHEMA],
  });

  const [widthCm, setWidthCm]   = React.useState('');
  const [heightCm, setHeightCm] = React.useState('');
  const [tab, setTab]           = React.useState('description');
  const [file, setFile]         = React.useState(null);
  const [upState, setUpState]   = React.useState('idle');
  const [saved, setSaved]       = React.useState(()=>localStorage.getItem('kk_saved_mural')==='1');
  const toggleSave = () => { const n=!saved; setSaved(n); n ? localStorage.setItem('kk_saved_mural','1') : localStorage.removeItem('kk_saved_mural'); };

  const pricing = muralPrice(widthCm, heightCm);

  // artwork upload (same token system as die-cut)
  const handleFile = async (f) => {
    if (!f) return;
    setFile(f); setUpState('uploading');
    try {
      const fd = new FormData(); fd.append('artwork', f);
      const r = await fetch('/wp-json/kk/v1/upload-artwork', { method:'POST', body:fd });
      const d = await r.json();
      if (d.token) { localStorage.setItem('kk_art_token', d.token); setUpState('done'); }
      else { setUpState('error'); }
    } catch { setUpState('error'); }
  };

  const handleOrder = () => {
    if (!pricing) return;
    const token = localStorage.getItem('kk_art_token');
    const p = new URLSearchParams({ 'add-to-cart': MURAL_WC_ID, quantity: 1 });
    if (token) p.set('kk_art', token);
    // pass dimensions + authoritative price as meta for the order
    p.set('mural_width_cm', widthCm);
    p.set('mural_height_cm', heightCm);
    p.set('kk_price', pricing.total.toFixed(2));
    p.set('kk_size', `${widthCm}cm × ${heightCm}cm`);
    window.location.href = '/cart/?' + p.toString();
  };

  const images = [
    'assets/bedroom-mural.jpeg',
    'assets/brick-lifestyle.jpeg',
    'assets/sticker-collection.jpeg',
  ];
  const [activeImg, setActiveImg] = React.useState(0);

  const tabContent = {
    description: (
      <div style={{lineHeight:1.7,color:'var(--ink-soft)'}}>
        <p>Your wall, your rules. Upload any photo, artwork, or pattern — we print it as a single seamless mural sized to exactly fit your wall.</p>
        <p>Printed on <strong>wipe-clean satin vinyl wallpaper</strong> using wide-format pigment inks. Colours stay vivid for 10+ years without fading. The surface cleans up with a damp cloth — ideal for kids' rooms and high-traffic walls.</p>
        <h4 style={{color:'var(--ink)',marginTop:20}}>What's included</h4>
        <ul>
          <li>Full-width seamless mural printed to your exact dimensions</li>
          <li>Pre-cut panels for easier installation (panels max 60cm wide)</li>
          <li>Free digital proof before we print</li>
          <li>Step-by-step installation guide included</li>
        </ul>
        <h4 style={{color:'var(--ink)',marginTop:20}}>Material specs</h4>
        <ul>
          <li>Substrate: 175gsm wipe-clean satin vinyl</li>
          <li>Print: pigment wide-format, 1200dpi output</li>
          <li>Finish: satin (low glare)</li>
          <li>Installation: paste-the-wall (standard wallpaper paste)</li>
          <li>Moisture resistant — suitable for living rooms and feature walls</li>
        </ul>
      </div>
    ),
    artwork: (
      <div style={{lineHeight:1.7,color:'var(--ink-soft)'}}>
        <h4 style={{color:'var(--ink)'}}>File requirements</h4>
        <ul>
          <li><strong>Accepted formats:</strong> PDF, AI, PSD, JPG, PNG, TIFF</li>
          <li><strong>Resolution:</strong> 150dpi minimum at final print size (72dpi for very large murals is acceptable)</li>
          <li><strong>Colour mode:</strong> RGB or CMYK — we convert to print-optimised CMYK</li>
          <li><strong>Bleed:</strong> add 20mm bleed on all edges for paste-the-wall overlap</li>
        </ul>
        <p>Not sure if your file is good enough? Upload it and our artwork team will check it within 2 hours and let you know before we print anything.</p>
        <h4 style={{color:'var(--ink)',marginTop:20}}>Custom design service</h4>
        <p>No artwork? No problem. We can source, retouch, or create a design for your mural — <a href="#contact" onClick={()=>go('contact')} style={{color:'var(--orange)',fontWeight:700}}>get in touch</a> for a quote.</p>
      </div>
    ),
    install: (
      <div style={{lineHeight:1.7,color:'var(--ink-soft)'}}>
        <h4 style={{color:'var(--ink)'}}>Installation — paste-the-wall method</h4>
        <ol>
          <li><strong>Prepare the wall</strong> — clean, dry, smooth. Fill any holes or cracks first.</li>
          <li><strong>Mix wallpaper paste</strong> — standard paste from any hardware store. Follow paste instructions.</li>
          <li><strong>Apply paste to wall</strong> (not the mural) — work one panel width at a time.</li>
          <li><strong>Hang the first panel</strong> — align to a plumb vertical line. Smooth out any air with a wallpaper brush or squeegee.</li>
          <li><strong>Butt-join panels</strong> — each panel is numbered. Match the edges carefully.</li>
          <li><strong>Trim edges</strong> — use a sharp knife and straight edge along skirting and ceiling.</li>
          <li><strong>Leave to dry</strong> — 24 hours before touching. Keep the room ventilated.</li>
        </ol>
        <div style={{marginTop:16,padding:'14px 18px',background:'var(--cream-deep)',border:'2px solid var(--ink)',borderRadius:12}}>
          <strong>Tip:</strong> Measure your wall height accurately. Add 50mm to both width and height dimensions when ordering — it gives you room to trim and align precisely.
        </div>
      </div>
    ),
  };

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

      {/* breadcrumb */}
      <div style={{borderBottom:'1px solid #00000015',background:'#fff'}}>
        <div className="wrap" style={{padding:'14px 28px',fontSize:13,color:'var(--muted)'}}>
          <a onClick={()=>go('home')} style={{cursor:'pointer'}}>Home</a>
          <span style={{margin:'0 8px',opacity:0.5}}>/</span>
          <span>Shop</span>
          <span style={{margin:'0 8px',opacity:0.5}}>/</span>
          <strong style={{color:'var(--ink)'}}>Custom Wall Mural</strong>
        </div>
      </div>

      {/* hero */}
      <section style={{padding:'36px 0'}}>
        <div className="wrap prod-layout" style={{display:'grid',gridTemplateColumns:'1.05fr 0.95fr',gap:48,alignItems:'start'}}>

          {/* LEFT — gallery */}
          <div>
            <div className="sticker" style={{aspectRatio:'4/3',padding:0,background:'var(--cream)',position:'relative',overflow:'hidden'}}>
              <img src={images[activeImg]} alt="Custom wall mural — King Kong Stickers" style={{position:'relative',width:'100%',height:'100%',objectFit:'cover'}} fetchpriority="high"/>
              <div style={{position:'absolute',top:16,left:16,display:'flex',gap:8}}>
                <span className="chip" style={{background:'var(--orange)',color:'#fff'}}>New product</span>
                <span className="chip" style={{background:'var(--yellow)'}}>Vinyl wallpaper</span>
              </div>
              <button aria-label="Wishlist" onClick={toggleSave} style={{position:'absolute',top:16,right:16,width:42,height:42,borderRadius:'50%',background:saved?'var(--yellow)':'#fff',border:'2.5px solid var(--ink)',display:'grid',placeItems:'center'}}>
                <Icon.Heart size={18} fill={saved?'var(--ink)':'none'}/>
              </button>
            </div>
            <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:10,marginTop:12}}>
              {images.map((src,i)=>(
                <button key={i} onClick={()=>setActiveImg(i)} className="sticker" style={{aspectRatio:'4/3',padding:0,overflow:'hidden',boxShadow:activeImg===i?'4px 4px 0 var(--ink)':'2px 2px 0 var(--ink)',transform:activeImg===i?'translate(-1px,-1px)':'none',outline:activeImg===i?'2px solid var(--orange)':'none',outlineOffset:2}}>
                  <img src={src} alt="Wall mural gallery" loading="lazy" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
                </button>
              ))}
            </div>

            {/* feature pills */}
            <div style={{marginTop:24,display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:12}}>
              {[
                { i:<Icon.Aus size={18}/>,     h:'Printed in Sydney' },
                { i:<Icon.Sparkle size={16}/>, h:'Wipe-clean vinyl' },
                { i:<Icon.Truck size={18}/>,   h:'Free shipping' },
                { i:<Icon.Check size={16}/>,   h:'Free proof first' },
              ].map((f,i)=>(
                <div key={i} style={{display:'flex',gap:10,alignItems:'center',padding:'10px 14px',background:'#fff',border:'2px solid var(--ink)',borderRadius:12}}>
                  <div style={{width:32,height:32,display:'grid',placeItems:'center',background:'var(--yellow)',border:'2px solid var(--ink)',borderRadius:8}}>{f.i}</div>
                  <div style={{fontWeight:700,fontSize:13}}>{f.h}</div>
                </div>
              ))}
            </div>
          </div>

          {/* RIGHT — configurator */}
          <div>
            <div className="mono" style={{fontSize:12,letterSpacing:'0.16em',textTransform:'uppercase',color:'var(--orange)'}}>// PRODUCT — MURAL001</div>
            <h1 className="display" style={{fontSize:'clamp(32px,4vw,52px)',margin:'8px 0 0',lineHeight:0.95}}>Custom<br/>Wall Mural</h1>
            <p style={{fontSize:16,color:'var(--ink-soft)',marginTop:14,lineHeight:1.5,maxWidth:520}}>
              Printed to your exact dimensions on wipe-clean satin vinyl. Any photo, artwork, or pattern — seamless and sized to fit your wall perfectly.
            </p>

            {/* dimensions — custom only */}
            <Section title="01 · Dimensions (cm)">
              <div style={{background:'var(--cream)',border:'2px solid var(--ink)',borderRadius:14,padding:'16px 18px',marginBottom:10}}>
                <div style={{fontSize:13,fontWeight:700,color:'var(--muted)',marginBottom:12,textTransform:'uppercase',letterSpacing:'0.08em'}}>Enter your wall size</div>
                <div style={{display:'flex',gap:12,alignItems:'center'}}>
                  <div style={{flex:1}}>
                    <div style={{fontSize:12,fontWeight:700,marginBottom:6,color:'var(--ink)'}}>Width (cm)</div>
                    <input
                      type="number" min="50" max="600" placeholder="e.g. 300"
                      value={widthCm} onChange={e=>setWidthCm(e.target.value)}
                      style={{width:'100%',padding:'14px 16px',border:'2.5px solid var(--ink)',borderRadius:12,fontSize:20,fontWeight:700,fontFamily:'var(--mono)',background:'#fff',outline:'none',boxSizing:'border-box'}}
                    />
                  </div>
                  <div style={{fontSize:28,fontWeight:900,color:'var(--muted)',marginTop:20}}>×</div>
                  <div style={{flex:1}}>
                    <div style={{fontSize:12,fontWeight:700,marginBottom:6,color:'var(--ink)'}}>Height (cm)</div>
                    <input
                      type="number" min="50" max="400" placeholder="e.g. 240"
                      value={heightCm} onChange={e=>setHeightCm(e.target.value)}
                      style={{width:'100%',padding:'14px 16px',border:'2.5px solid var(--ink)',borderRadius:12,fontSize:20,fontWeight:700,fontFamily:'var(--mono)',background:'#fff',outline:'none',boxSizing:'border-box'}}
                    />
                  </div>
                </div>
                {pricing && (
                  <div style={{marginTop:12,fontSize:13,color:'var(--muted)',display:'flex',gap:16}}>
                    <span>Area: <strong style={{color:'var(--ink)'}}>{pricing.areaSqM} m²</strong></span>
                    <span>Material: <strong style={{color:'var(--ink)'}}>Vinyl wallpaper</strong></span>
                    <span>Qty: <strong style={{color:'var(--ink)'}}>1</strong></span>
                  </div>
                )}
              </div>
              <div style={{fontSize:12,color:'var(--muted)',lineHeight:1.5}}>
                💡 Measure your wall and add 5cm to each edge for trimming. Panel joins are invisible once installed.
              </div>
            </Section>

            {/* artwork upload */}
            <Section title="02 · Upload Artwork">
              <label style={{display:'block',border:'2.5px dashed var(--ink)',borderRadius:14,padding:'20px',textAlign:'center',cursor:'pointer',background:upState==='done'?'#e6f9ee':upState==='error'?'#ffeaea':'var(--cream)',transition:'background .2s'}}>
                <input type="file" accept=".jpg,.jpeg,.png,.pdf,.ai,.psd,.tiff" style={{display:'none'}} onChange={e=>handleFile(e.target.files[0])}/>
                {upState==='idle' && <>
                  <div style={{fontSize:28,marginBottom:8}}>🖼</div>
                  <div style={{fontWeight:700}}>Drop your artwork here</div>
                  <div style={{fontSize:12,color:'var(--muted)',marginTop:4}}>PDF, AI, PSD, JPG, PNG · 150dpi+ at print size</div>
                </>}
                {upState==='uploading' && <div style={{fontWeight:700,color:'var(--orange)'}}>⏳ Uploading…</div>}
                {upState==='done' && <div style={{fontWeight:700,color:'#00a86b'}}>✓ Artwork saved — {file?.name}</div>}
                {upState==='error' && <div style={{fontWeight:700,color:'#e03'}}>Upload failed — try again or email us</div>}
              </label>
              <div style={{fontSize:12,color:'var(--muted)',marginTop:8,lineHeight:1.5}}>
                Don't have artwork ready? Order now — our team will contact you within 2 hours to collect your file.
              </div>
            </Section>

            {/* price + CTA */}
            <div style={{marginTop:28,background:'#fff',border:'3px solid var(--ink)',borderRadius:18,padding:20,boxShadow:'6px 6px 0 var(--ink)'}}>
              {pricing ? (
                <>
                  <div>
                    <div className="mono" style={{fontSize:12,color:'var(--muted)',textTransform:'uppercase',letterSpacing:'0.1em'}}>
                      Total — {widthCm}cm × {heightCm}cm
                    </div>
                    <div style={{display:'flex',alignItems:'baseline',gap:12,marginTop:4}}>
                      <div className="display" style={{fontSize:54,lineHeight:1}}>${pricing.total.toFixed(2)}</div>
                    </div>
                    <div style={{fontSize:13,marginTop:4,color:'var(--ink-soft)'}}>${(pricing.total / pricing.areaSqM).toFixed(0)}/m² · free shipping · GST included</div>
                  </div>
                  <div style={{display:'flex',gap:10,marginTop:18}}>
                    <button className="btn primary" style={{flex:1,justifyContent:'center',fontSize:16,padding:'18px 20px'}} onClick={handleOrder}>
                      Order now <Icon.Arrow/>
                    </button>
                    <button className="btn ghost" style={{padding:'18px 18px',background:saved?'var(--yellow)':'#fff'}} onClick={toggleSave}>
                      {saved?'♥ Saved':'♡ Save'}
                    </button>
                  </div>
                </>
              ) : (
                <>
                  <div style={{color:'var(--muted)',fontSize:15,marginBottom:14}}>Enter your dimensions above to see pricing.</div>
                  <div style={{display:'flex',alignItems:'baseline',gap:12}}>
                    <div className="display" style={{fontSize:32,lineHeight:1,color:'var(--muted)'}}>From $149</div>
                    <span style={{fontSize:13,color:'var(--muted)'}}>($89/m²)</span>
                  </div>
                </>
              )}
              <div style={{display:'flex',gap:14,marginTop:14,fontSize:11.5,color:'var(--muted)',flexWrap:'wrap'}}>
                <span>✓ 100% reprint guarantee</span>
                <span>✓ Pay by Card, PayPal, Afterpay</span>
              </div>
            </div>

          </div>
        </div>
      </section>

      {/* TABS */}
      <section style={{background:'#fff',borderTop:'3px solid var(--ink)',borderBottom:'3px solid var(--ink)'}}>
        <div className="wrap" style={{padding:'0 28px'}}>
          <div style={{display:'flex',gap:0,borderBottom:'2px solid var(--ink)'}}>
            {[['description','Description'],['artwork','Artwork Guide'],['install','Installation']].map(([k,l])=>(
              <button key={k} onClick={()=>setTab(k)}
                style={{padding:'16px 22px',fontWeight:800,fontSize:14,textTransform:'uppercase',letterSpacing:'0.06em',border:'none',borderBottom:tab===k?'3px solid var(--orange)':'3px solid transparent',background:'transparent',cursor:'pointer',color:tab===k?'var(--orange)':'var(--ink)',marginBottom:'-2px'}}>
                {l}
              </button>
            ))}
          </div>
          <div style={{padding:'28px 0 36px',maxWidth:720}}>
            {tabContent[tab]}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section style={{padding:'56px 0',background:'var(--cream)'}}>
        <div className="wrap" style={{padding:'0 28px'}}>
          <h2 className="display" style={{fontSize:'clamp(28px,3vw,42px)',marginBottom:32}}>Common questions</h2>
          <div style={{display:'flex',flexDirection:'column',gap:12,maxWidth:760}}>
            {MURAL_FAQ_SCHEMA.mainEntity.map((q,i)=>(
              <details key={i} style={{background:'#fff',border:'2.5px solid var(--ink)',borderRadius:14,padding:'18px 22px',boxShadow:'4px 4px 0 var(--ink)'}}>
                <summary style={{fontWeight:800,fontSize:15,cursor:'pointer',listStyle:'none',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
                  {q.name}
                  <span style={{fontSize:20,opacity:0.5,marginLeft:12}}>+</span>
                </summary>
                <p style={{marginTop:12,color:'var(--ink-soft)',lineHeight:1.65,fontSize:14}}>{q.acceptedAnswer.text}</p>
              </details>
            ))}
          </div>
        </div>
      </section>

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