// screens.jsx — Home, Browse, PDP, Cart, Checkout

const { useState, useEffect, useRef } = React;

// ─────────────────────────────────────────────────────────────
// HOME
// ─────────────────────────────────────────────────────────────
function Home({ go, openInquire, addToCart, heroIntensity }) {
  const heroRug = RUGS[1]; // Atlas Bloom
  const featured = RUGS.slice(0, 6);

  // scroll-tilt for hero
  const stageRef = useRef(null);
  useEffect(() => {
    if (heroIntensity === 'off') return;
    const onScroll = () => {
      if (!stageRef.current) return;
      const y = window.scrollY;
      stageRef.current.style.setProperty('--scroll-y', y + 'px');
    };
    window.addEventListener('scroll', onScroll, { passive:true });
    return () => window.removeEventListener('scroll', onScroll);
  }, [heroIntensity]);

  return (
    <div className="screen" data-screen-label="01 Home">
      {/* HERO */}
      <section className="hero">
        <div className="container hero-grid">
          <div>
            <div className="hero-eye eyebrow">Atelier No. 7 — Spring MMXXVI</div>
            <h1 className="hero-title display">
              Rugs that<br/>
              hold a<br/>
              <em className="italic accent">room together.</em>
            </h1>
            <p className="hero-sub">
              Made-to-order, modern-abstract pieces — hand-knotted by a quiet roster of
              master weavers. Ten weeks from your inquiry to your floor.
            </p>
            <div className="hero-cta">
              <button className="btn btn-primary" onClick={() => go('browse')}>
                See the collection <span className="btn-arrow"/>
              </button>
              <button className="btn btn-ghost" onClick={() => openInquire(heroRug)}>
                Begin an inquiry
              </button>
            </div>
            <div className="hero-meta">
              <div className="item">
                <div className="num">12<span style={{fontSize:18,opacity:.55}}>+</span></div>
                <span className="lbl">Master weavers</span>
              </div>
              <div className="item">
                <div className="num">10<span style={{fontSize:18,opacity:.55,marginLeft:2}}>wk</span></div>
                <span className="lbl">Lead time</span>
              </div>
              <div className="item">
                <div className="num">1<span style={{fontSize:18,opacity:.55,marginLeft:2}}>/1</span></div>
                <span className="lbl">Of a kind</span>
              </div>
            </div>
          </div>

          {/* Hero video */}
          <div className="stage" ref={stageRef} data-intensity={heroIntensity}>
            <div className="stage-blob" />
            <div className="hero-video-wrap" onClick={() => { go('pdp'); window.__pdpRug = heroRug; }}
                 style={{ cursor:'pointer' }}>
              <video className="hero-video"
                     autoPlay muted loop playsInline preload="auto"
                     poster=""
                     src="https://aqua-crocodile-403639.hostingersite.com/wp-content/uploads/2026/05/HERO-for-PLush.mp4">
              </video>
              <div className="hero-video-glow" aria-hidden="true" />
            </div>

            {/* Second floating element — product still */}
            <div className="hero-still-wrap"
                 onClick={() => go('shop')}>
              <img className="hero-still"
                   src="https://aqua-crocodile-403639.hostingersite.com/wp-content/uploads/2026/05/Seedream-5_0-make-this-look-like-it-standing-at-an-40-angle-for-a-product-shot_-use-shadows-and-ca-scaled.jpg"
                   alt="Featured rug — product shot" />
              <div className="hero-still-glow" aria-hidden="true" />
              <div className="hero-still-tag">
                <span className="dot"/>
                <div>
                  <div className="t">Atlas · Bloom</div>
                  <div className="s">Featured · Spring MMXXVI</div>
                </div>
              </div>
            </div>

            <span className="chip chip-1">
              <span className="dot"/> Atlas Bloom · 9×12 ft
            </span>
            <span className="chip chip-2">
              <span className="dot"/> 120 KPSI · wool + silk
            </span>
          </div>
        </div>
      </section>

      <Marquee />

      {/* SECTION: Featured */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow">The Collection</div>
              <h2 className="display section-title">
                Quiet pieces, <em className="italic accent">long lives.</em>
              </h2>
            </div>
            <button className="btn btn-ghost" onClick={() => go('browse')}>
              All 24 rugs <span className="btn-arrow"/>
            </button>
          </div>

          <div className="featured">
            {featured.map((r) => (
              <article key={r.id} className="card"
                       onClick={() => { window.__pdpRug = r; go('pdp'); }}>
                <div className="card-frame">
                  <Rug rug={r} style={{ width:'100%', height:'100%', borderRadius:0,
                                        boxShadow:'none' }} />
                  <span className="card-cta">View piece →</span>
                </div>
                <div className="card-meta">
                  <div className="name">
                    {r.name}{r.italic && <> · <em className="italic">{r.italic}</em></>}
                  </div>
                  <div className="tag">{r.tag.split('·')[0]}</div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* SECTION: Story */}
      <section style={{ background:'var(--bone-2)' }}>
        <div className="container story">
          <div className="story-img">
            <span className="ph-label">Atelier · Bhadohi · 2025</span>
          </div>
          <div>
            <div className="eyebrow">The Atelier</div>
            <h2 className="display">
              A loom moves<br/>at <em className="italic accent">human speed.</em>
            </h2>
            <p>
              Every rug we make is started after you've decided you want it.
              Twelve master weavers across three ateliers — Jaipur, Bhadohi, Kashan —
              keep wool and silk moving through hand-tied knots at a rate that hasn't
              changed in two centuries.
            </p>
            <p style={{ marginTop:18 }}>
              We don't keep stock. The rug you order is the rug being made.
            </p>
            <button className="btn btn-ghost mt-24">Meet the weavers <span className="btn-arrow"/></button>
          </div>
        </div>
      </section>

      {/* SECTION: Process strip */}
      <section className="section" style={{ paddingBottom:160 }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom:32 }}>How it works</div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:48,
                        borderTop:'1px solid var(--hairline)', paddingTop:40 }}>
            {[
              ['Inquire',  'Select a piece and tell us about your room.'],
              ['Confirm',  'We send fibre samples and a quote in 48 hours.'],
              ['Weave',    'Your rug is knotted by a single weaver, start to finish.'],
              ['Arrive',   'White-glove delivery in ten to fourteen weeks.'],
            ].map(([t, d], i) => (
              <div key={i}>
                <div style={{ fontFamily:'var(--font-mono)', fontSize:12,
                              color:'var(--accent)', letterSpacing:'.18em' }}>
                  0{i+1}
                </div>
                <h3 className="display" style={{ fontSize:36, margin:'16px 0 12px' }}>{t}</h3>
                <p style={{ color:'var(--ink-2)', opacity:.75, maxWidth:'24ch', lineHeight:1.55 }}>
                  {d}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// BROWSE
// ─────────────────────────────────────────────────────────────
function Browse({ go }) {
  const [filter, setFilter] = useState('all');
  const filters = [
    ['all',        'All pieces'],
    ['hand-knot',  'Hand-knotted'],
    ['tufted',     'Hand-tufted'],
    ['flat',       'Flat-weave'],
    ['silk',       'With silk'],
    ['large',      '9×12 ft and up'],
  ];
  const visible = filter === 'all' ? RUGS :
    filter === 'silk' ? RUGS.filter(r => r.tag.includes('silk')) :
    filter === 'flat' ? RUGS.filter(r => r.tag.includes('Flat-weave')) :
    filter === 'tufted' ? RUGS.filter(r => r.tag.includes('tufted')) :
    filter === 'hand-knot' ? RUGS.filter(r => r.tag.includes('knotted')) :
    RUGS;

  return (
    <div className="screen" data-screen-label="02 Browse">
      <div className="container browse-head">
        <div>
          <div className="eyebrow">Spring MMXXVI · 24 pieces</div>
          <h1 className="display browse-title">
            The <em className="italic accent">Collection.</em>
          </h1>
        </div>
        <div style={{ maxWidth:380, textAlign:'right' }}>
          <p style={{ fontFamily:'var(--font-display)', fontStyle:'italic', fontSize:20,
                      color:'var(--ink-2)', opacity:.78 }}>
            Each rug is made to order. Inquire on any piece to receive samples
            and a quote within forty-eight hours.
          </p>
        </div>
      </div>

      <div className="container">
        <div className="filter-bar">
          <span className="lbl">Filter</span>
          {filters.map(([k, label]) => (
            <button key={k}
                    className={'pill ' + (filter === k ? 'is-active' : '')}
                    onClick={() => setFilter(k)}>
              {label}
            </button>
          ))}
          <div style={{ marginLeft:'auto' }}>
            <span className="small" style={{ fontFamily:'var(--font-mono)', fontSize:11,
              letterSpacing:'.12em', textTransform:'uppercase' }}>
              Showing {visible.length} of {RUGS.length}
            </span>
          </div>
        </div>

        <div className="featured">
          {visible.map((r) => (
            <article key={r.id} className="card"
                     onClick={() => { window.__pdpRug = r; go('pdp'); }}>
              <div className="card-frame">
                <Rug rug={r} style={{ width:'100%', height:'100%', borderRadius:0, boxShadow:'none' }} />
                <span className="card-cta">Inquire →</span>
              </div>
              <div className="card-meta">
                <div className="name">
                  {r.name}{r.italic && <> · <em className="italic">{r.italic}</em></>}
                </div>
                <div className="tag">{r.tag.split('·')[0]}</div>
              </div>
              <div className="small mt-8" style={{ display:'flex', justifyContent:'space-between' }}>
                <span style={{ fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.12em',
                                textTransform:'uppercase' }}>{r.origin.split('·')[1]?.trim()}</span>
                <span style={{ fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.12em',
                                textTransform:'uppercase' }}>{r.lead}</span>
              </div>
            </article>
          ))}
        </div>

        <div style={{ textAlign:'center', padding:'120px 0 40px' }}>
          <p style={{ fontFamily:'var(--font-display)', fontStyle:'italic', fontSize:32,
                      color:'var(--ink-2)', maxWidth:'30ch', margin:'0 auto 24px', lineHeight:1.2 }}>
            Don't see your room? We design custom pieces too.
          </p>
          <button className="btn btn-accent">Commission a piece <span className="btn-arrow"/></button>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// PDP
// ─────────────────────────────────────────────────────────────
function PDP({ go, addToCart, openInquire }) {
  const rug = window.__pdpRug || RUGS[1];
  const [size, setSize] = useState(rug.sizes[1] || rug.sizes[0]);
  const [colorIdx, setColorIdx] = useState(0);
  const [angle, setAngle] = useState('45');
  const stageRef = useRef(null);

  // mouse-tilt
  useEffect(() => {
    const stage = stageRef.current;
    if (!stage) return;
    const onMove = (e) => {
      const r = stage.getBoundingClientRect();
      const x = (e.clientX - r.left) / r.width - 0.5;
      const y = (e.clientY - r.top) / r.height - 0.5;
      stage.style.setProperty('--mx', x);
      stage.style.setProperty('--my', y);
    };
    stage.addEventListener('mousemove', onMove);
    return () => stage.removeEventListener('mousemove', onMove);
  }, []);

  const angleMap = {
    '0':  'rotateX(0deg)   rotateZ(0deg)',
    '45': 'rotateX(50deg)  rotateZ(0deg)',
    '90': 'rotateX(80deg)  rotateZ(0deg)',
  };

  return (
    <div className="screen" data-screen-label="03 PDP">
      <div className="container">
        <div style={{ display:'flex', gap:8, alignItems:'center', padding:'24px 0 0',
                      fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.12em',
                      textTransform:'uppercase', color:'var(--muted)' }}>
          <a onClick={() => go('home')}   style={{cursor:'pointer'}}>Atelier</a>
          <span>›</span>
          <a onClick={() => go('browse')} style={{cursor:'pointer'}}>Collection</a>
          <span>›</span>
          <span style={{ color:'var(--ink)' }}>{rug.name}{rug.italic ? ` · ${rug.italic}` : ''}</span>
        </div>

        <div className="pdp">
          <div className="pdp-stage" ref={stageRef}
               style={{ position:'sticky', top:96 }}>
            <div style={{ position:'absolute', inset:0, perspective:1400,
                          display:'flex', alignItems:'center', justifyContent:'center' }}>
              <div style={{
                width:'58%', aspectRatio:'3/4', position:'relative',
                transformStyle:'preserve-3d',
                transform:`${angleMap[angle]} rotateY(calc(var(--mx, 0) * 14deg)) rotateX(calc(var(--my, 0) * -6deg + ${angle === '45' ? 50 : angle === '90' ? 80 : 0}deg))`,
                transition:'transform .6s cubic-bezier(.2,.7,.2,1)'
              }}>
                <Rug rug={rug} style={{ width:'100%', height:'100%',
                  boxShadow:'0 80px 100px -30px rgba(30,24,18,.4), 0 30px 50px -20px rgba(30,24,18,.3)' }} />
              </div>
            </div>
            <div className="pdp-controls">
              {['0','45','90'].map((a) => (
                <button key={a}
                        className={angle === a ? 'is-active' : ''}
                        onClick={() => setAngle(a)}>
                  {a}°
                </button>
              ))}
            </div>
            <div style={{ position:'absolute', top:18, left:18,
              fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.18em',
              textTransform:'uppercase', color:'var(--muted)' }}>
              ◐ Move the cursor — view the pile
            </div>
          </div>

          <div>
            <div className="eyebrow">{rug.origin.split('·')[0].trim()}</div>
            <h1 className="pdp-title display">
              {rug.name}{rug.italic && <><br/><em className="italic accent">{rug.italic}</em></>}
            </h1>
            <p className="pdp-sub">{rug.tag}</p>
            <p className="pdp-desc">{rug.desc}</p>

            <div className="eyebrow">Palette</div>
            <div className="swatch-row">
              {rug.palette.map((c, i) => (
                <button key={i}
                        className={'swatch ' + (colorIdx === i ? 'is-active' : '')}
                        style={{ background:c }}
                        onClick={() => setColorIdx(i)} />
              ))}
            </div>

            <div className="eyebrow">Size</div>
            <div className="size-row">
              {rug.sizes.map((s) => (
                <button key={s}
                        className={'size-pill ' + (size === s ? 'is-active' : '')}
                        onClick={() => setSize(s)}>
                  {s}
                </button>
              ))}
              <button className="size-pill" style={{ borderStyle:'dashed' }}>+ Custom size</button>
            </div>

            <div style={{ display:'flex', gap:12, marginTop:8 }}>
              <button className="btn btn-primary" onClick={() => {
                addToCart({ ...rug, size, qty:1, key: rug.id + '-' + size });
              }}>
                Reserve this piece <span className="btn-arrow"/>
              </button>
              <button className="btn btn-ghost" onClick={() => openInquire(rug)}>
                Request samples
              </button>
            </div>

            <p style={{ fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.12em',
                        textTransform:'uppercase', color:'var(--muted)', marginTop:18 }}>
              Price on inquiry · Lead time {rug.lead}
            </p>

            <div className="spec-grid">
              <div className="spec">
                <div className="k">Origin</div>
                <div className="v" style={{ textAlign:'right' }}>{rug.origin.split('·')[1]?.trim()}</div>
              </div>
              <div className="spec">
                <div className="k">Weave</div>
                <div className="v" style={{ textAlign:'right' }}>{rug.weave}</div>
              </div>
              <div className="spec">
                <div className="k">Pile</div>
                <div className="v" style={{ textAlign:'right' }}>{rug.pile}</div>
              </div>
              <div className="spec">
                <div className="k">Lead time</div>
                <div className="v" style={{ textAlign:'right' }}>{rug.lead}</div>
              </div>
            </div>

            <div className="check-section" style={{ marginTop:24 }}>
              <div className="sub">The Process</div>
              <h3>How a {rug.name} comes to your floor.</h3>
              <ol style={{ margin:'24px 0 0', padding:0, listStyle:'none' }}>
                {[
                  ['Concierge', 'A specialist sends material samples and confirms specs.'],
                  ['Weaving', 'One weaver, start to finish, at our partner atelier.'],
                  ['Finishing', 'Washing, clipping, and binding — three weeks of finishing.'],
                  ['Delivery', 'White-glove freight, carbon-neutral, to your room.'],
                ].map(([t, d], i) => (
                  <li key={i} style={{ display:'grid', gridTemplateColumns:'auto 1fr',
                                       gap:18, padding:'16px 0', borderBottom:'1px solid var(--hairline)' }}>
                    <span style={{ fontFamily:'var(--font-mono)', fontSize:11, color:'var(--accent)',
                                   letterSpacing:'.18em' }}>0{i+1}</span>
                    <div>
                      <div style={{ fontFamily:'var(--font-display)', fontSize:20 }}>{t}</div>
                      <div style={{ fontSize:14, opacity:.7, color:'var(--ink-2)', marginTop:4 }}>{d}</div>
                    </div>
                  </li>
                ))}
              </ol>
            </div>
          </div>
        </div>

        {/* You might also like */}
        <section className="section" style={{ paddingTop:120 }}>
          <div className="section-head">
            <div>
              <div className="eyebrow">Continue browsing</div>
              <h2 className="display section-title">
                Pieces that <em className="italic accent">sit nearby.</em>
              </h2>
            </div>
          </div>
          <div className="featured">
            {RUGS.filter(r => r.id !== rug.id).slice(0, 3).map((r) => (
              <article key={r.id} className="card"
                       onClick={() => { window.__pdpRug = r; go('pdp'); window.scrollTo(0,0); }}>
                <div className="card-frame">
                  <Rug rug={r} style={{ width:'100%', height:'100%', borderRadius:0, boxShadow:'none' }} />
                </div>
                <div className="card-meta">
                  <div className="name">{r.name}{r.italic && <> · <em className="italic">{r.italic}</em></>}</div>
                  <div className="tag">{r.tag.split('·')[0]}</div>
                </div>
              </article>
            ))}
          </div>
        </section>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// CART
// ─────────────────────────────────────────────────────────────
function Cart({ go, cart, setCart }) {
  const update = (key, q) => {
    setCart(cart
      .map(i => i.key === key ? { ...i, qty: Math.max(1, i.qty + q) } : i)
    );
  };
  const remove = (key) => setCart(cart.filter(i => i.key !== key));

  if (cart.length === 0) {
    return (
      <div className="screen" data-screen-label="04 Cart empty">
        <div className="container" style={{ padding:'120px 0', textAlign:'center', minHeight:'70vh' }}>
          <div className="eyebrow">Your selection</div>
          <h1 className="display" style={{ fontSize:80, margin:'14px 0 24px' }}>
            <em className="italic">Empty.</em>
          </h1>
          <p style={{ maxWidth:'42ch', margin:'0 auto 32px', color:'var(--ink-2)', opacity:.75 }}>
            Begin by reserving a piece. Your selection holds for seven days while we prepare
            samples and your quote.
          </p>
          <button className="btn btn-primary" onClick={() => go('browse')}>
            Browse the collection <span className="btn-arrow"/>
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="screen" data-screen-label="04 Cart">
      <div className="container">
        <div style={{ paddingTop:40 }}>
          <div className="eyebrow">Your selection</div>
          <h1 className="display cart-title">
            Reserved <em className="italic accent">pieces.</em>
          </h1>
        </div>
        <div className="cart-wrap">
          <div>
            {cart.map((item) => (
              <div key={item.key} className="cart-row">
                <div className="cart-thumb"><RugThumb rug={item} /></div>
                <div>
                  <h3 className="cart-name">
                    {item.name}{item.italic && <> · <em className="italic">{item.italic}</em></>}
                  </h3>
                  <div className="cart-spec">{item.size} · {item.weave.split(',')[0]}</div>
                  <div style={{ fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.12em',
                                textTransform:'uppercase', color:'var(--accent)', marginTop:6 }}>
                    Price on inquiry · {item.lead} lead
                  </div>
                </div>
                <div style={{ display:'flex', flexDirection:'column', alignItems:'flex-end', gap:8 }}>
                  <div className="qty">
                    <button onClick={() => update(item.key, -1)}>–</button>
                    <span className="n">{item.qty}</span>
                    <button onClick={() => update(item.key, +1)}>+</button>
                  </div>
                  <button className="cart-remove" onClick={() => remove(item.key)}>Remove</button>
                </div>
              </div>
            ))}
            <div style={{ marginTop:48 }}>
              <button className="btn btn-ghost" onClick={() => go('browse')}>
                ← Continue browsing
              </button>
            </div>
          </div>

          <aside className="summary">
            <div className="sub">Your reservation</div>
            <h3>Summary</h3>
            <div className="line"><span className="k">Pieces</span>
              <span className="v">{cart.reduce((s,i)=>s+i.qty,0)}</span></div>
            <div className="line"><span className="k">Total area</span>
              <span className="v">{cart.length * 80} sq ft</span></div>
            <div className="line"><span className="k">Shipping</span>
              <span className="v">White-glove</span></div>
            <div className="line"><span className="k">Lead time</span>
              <span className="v">10–14 wk</span></div>
            <div className="line total">
              <span className="k">Final price</span>
              <span className="v"><em className="italic">on inquiry</em></span>
            </div>
            <p className="note">
              A concierge will confirm pricing, fibre samples and shipping within
              forty-eight hours of checkout. No charge is taken until you approve.
            </p>
            <button className="btn btn-primary" style={{ width:'100%' }}
                    onClick={() => go('checkout')}>
              Proceed to inquiry <span className="btn-arrow"/>
            </button>
          </aside>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// CHECKOUT
// ─────────────────────────────────────────────────────────────
function Checkout({ go, cart, setCart }) {
  const [step, setStep] = useState(1);
  const [ship, setShip] = useState('whiteglove');
  const [submitted, setSubmitted] = useState(false);

  if (submitted) {
    return (
      <div className="screen" data-screen-label="06 Confirmation">
        <div className="container" style={{ padding:'120px 0 160px', textAlign:'center', minHeight:'75vh' }}>
          <div className="eyebrow" style={{ color:'var(--accent)' }}>Inquiry received</div>
          <h1 className="display" style={{ fontSize:96, margin:'14px 0 24px', lineHeight:.95 }}>
            Thank <em className="italic accent">you.</em>
          </h1>
          <p style={{ maxWidth:'48ch', margin:'0 auto 36px', color:'var(--ink-2)',
                      fontSize:17, lineHeight:1.6, opacity:.85 }}>
            A concierge will write within forty-eight hours with material samples,
            a final quote, and a weaving slot. Your reference is{' '}
            <span style={{ fontFamily:'var(--font-mono)', color:'var(--ink)' }}>
              #MPP-{Math.floor(Math.random()*9000+1000)}
            </span>.
          </p>
          <button className="btn btn-primary" onClick={() => { setCart([]); go('home'); }}>
            Return to atelier
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="screen" data-screen-label="05 Checkout">
      <div className="container">
        <div style={{ paddingTop:40 }}>
          <div className="eyebrow">Inquiry</div>
          <h1 className="display" style={{ fontSize:'clamp(48px, 6vw, 88px)', margin:'14px 0 56px' }}>
            Almost <em className="italic accent">yours.</em>
          </h1>
        </div>

        <div className="checkout-grid">
          <div>
            {/* Stepper */}
            <div style={{ display:'flex', gap:36, marginBottom:36, paddingBottom:24,
                          borderBottom:'1px solid var(--hairline)' }}>
              {['Details', 'Delivery', 'Confirm'].map((s, i) => {
                const idx = i + 1;
                return (
                  <div key={s} className={'check-step ' + (idx === step ? 'is-active' :
                                                            idx <  step ? 'is-done' : '')}>
                    <div className="n">{idx <  step ? '✓' : '0' + idx}</div>
                    <div className="label">{s}</div>
                  </div>
                );
              })}
            </div>

            {step === 1 && (
              <>
                <div className="check-section" style={{ borderTop:0, paddingTop:0 }}>
                  <div className="sub">Step 1 of 3</div>
                  <h3>Tell us where this rug is going.</h3>
                  <div className="form-grid">
                    <div className="field"><label>First name</label><input defaultValue="Eleanor" /></div>
                    <div className="field"><label>Last name</label><input defaultValue="Wren" /></div>
                    <div className="field full"><label>Email</label>
                      <input type="email" defaultValue="eleanor@studiowren.co" /></div>
                    <div className="field full"><label>Street address</label>
                      <input defaultValue="22 Lansdowne Crescent" /></div>
                    <div className="field"><label>City</label><input defaultValue="London" /></div>
                    <div className="field"><label>Postcode</label><input defaultValue="W11 2NS" /></div>
                    <div className="field full"><label>Country</label>
                      <select defaultValue="UK">
                        <option>United Kingdom</option><option>United States</option>
                        <option>France</option><option>Japan</option>
                      </select>
                    </div>
                    <div className="field full">
                      <label>The room (optional)</label>
                      <input placeholder="A note about the room — light, scale, surroundings." />
                    </div>
                  </div>
                </div>
                <div style={{ display:'flex', justifyContent:'space-between', marginTop:36 }}>
                  <button className="btn btn-ghost" onClick={() => go('cart')}>← Back to cart</button>
                  <button className="btn btn-primary" onClick={() => setStep(2)}>
                    Continue to delivery <span className="btn-arrow"/>
                  </button>
                </div>
              </>
            )}

            {step === 2 && (
              <>
                <div className="check-section" style={{ borderTop:0, paddingTop:0 }}>
                  <div className="sub">Step 2 of 3</div>
                  <h3>How shall we deliver?</h3>
                  {[
                    ['whiteglove', 'White-glove · room placement', 'Two-person team, scheduled delivery.', 'Included'],
                    ['standard',   'Standard freight',             'Door-to-door, signature required.',    'Included'],
                    ['expedited',  'Expedited air freight',         'Available on select pieces.',          'On request'],
                  ].map(([id, t, d, p]) => (
                    <div key={id}
                         className={'ship-option ' + (ship === id ? 'is-active' : '')}
                         onClick={() => setShip(id)}>
                      <span className="radio" />
                      <div style={{ flex:1 }}>
                        <div style={{ fontFamily:'var(--font-display)', fontSize:22 }}>{t}</div>
                        <div className="small" style={{ marginTop:4 }}>{d}</div>
                      </div>
                      <div style={{ fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.18em',
                                    textTransform:'uppercase', color:'var(--muted)' }}>{p}</div>
                    </div>
                  ))}
                </div>
                <div className="check-section">
                  <div className="sub">Samples</div>
                  <h3>Send fibre samples first.</h3>
                  <p style={{ color:'var(--ink-2)', opacity:.8, maxWidth:'52ch', marginTop:8 }}>
                    We'll cut and mail 4-inch swatches of the proposed yarns before any weaving begins.
                    Free, no commitment.
                  </p>
                  <div style={{ display:'flex', gap:12, marginTop:18 }}>
                    <label className="ship-option is-active" style={{ flex:1 }}>
                      <span className="radio"/>
                      <div style={{ flex:1 }}>
                        <div style={{ fontFamily:'var(--font-display)', fontSize:20 }}>Yes — send samples</div>
                      </div>
                    </label>
                    <label className="ship-option" style={{ flex:1 }}>
                      <span className="radio"/>
                      <div style={{ flex:1 }}>
                        <div style={{ fontFamily:'var(--font-display)', fontSize:20 }}>Skip — I'm sure</div>
                      </div>
                    </label>
                  </div>
                </div>
                <div style={{ display:'flex', justifyContent:'space-between', marginTop:36 }}>
                  <button className="btn btn-ghost" onClick={() => setStep(1)}>← Back</button>
                  <button className="btn btn-primary" onClick={() => setStep(3)}>
                    Continue <span className="btn-arrow"/>
                  </button>
                </div>
              </>
            )}

            {step === 3 && (
              <>
                <div className="check-section" style={{ borderTop:0, paddingTop:0 }}>
                  <div className="sub">Step 3 of 3</div>
                  <h3>One last look.</h3>
                  <p style={{ color:'var(--ink-2)', opacity:.8, marginTop:8 }}>
                    Submit your inquiry — a concierge will reply within forty-eight hours
                    with samples and your quote. No charge is taken now.
                  </p>
                  <div style={{ marginTop:24 }}>
                    {cart.map((i) => (
                      <div key={i.key} className="cart-row" style={{ padding:'18px 0' }}>
                        <div className="cart-thumb" style={{ width:72, height:72 }}>
                          <RugThumb rug={i}/>
                        </div>
                        <div>
                          <div style={{ fontFamily:'var(--font-display)', fontSize:20 }}>
                            {i.name}{i.italic && <> · <em className="italic">{i.italic}</em></>}
                          </div>
                          <div className="cart-spec">{i.size} · qty {i.qty}</div>
                        </div>
                        <div style={{ fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.18em',
                                      textTransform:'uppercase', color:'var(--muted)' }}>
                          {i.lead}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
                <div style={{ display:'flex', justifyContent:'space-between', marginTop:36 }}>
                  <button className="btn btn-ghost" onClick={() => setStep(2)}>← Back</button>
                  <button className="btn btn-accent" onClick={() => setSubmitted(true)}>
                    Submit inquiry <span className="btn-arrow"/>
                  </button>
                </div>
              </>
            )}
          </div>

          <aside className="summary">
            <div className="sub">Order summary</div>
            <h3>{cart.length} {cart.length === 1 ? 'piece' : 'pieces'}</h3>
            <div style={{ marginTop:24 }}>
              {cart.map((i) => (
                <div key={i.key} style={{ display:'flex', gap:14, padding:'12px 0',
                                          borderBottom:'1px solid var(--hairline)' }}>
                  <div style={{ width:54, height:54, borderRadius:6, overflow:'hidden', flex:'0 0 auto' }}>
                    <RugThumb rug={i} />
                  </div>
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ fontFamily:'var(--font-display)', fontSize:18, lineHeight:1.1 }}>
                      {i.name}{i.italic && <> · <em className="italic">{i.italic}</em></>}
                    </div>
                    <div style={{ fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.12em',
                                  textTransform:'uppercase', color:'var(--muted)', marginTop:4 }}>
                      {i.size} · qty {i.qty}
                    </div>
                  </div>
                </div>
              ))}
            </div>
            <div className="line" style={{ marginTop:16 }}>
              <span className="k">Shipping</span>
              <span className="v">{ship === 'whiteglove' ? 'White-glove' :
                                    ship === 'standard'   ? 'Standard'    : 'Expedited'}</span>
            </div>
            <div className="line total">
              <span className="k">Final</span>
              <span className="v"><em className="italic">on inquiry</em></span>
            </div>
            <p className="note">
              Sourcing &amp; fulfilment handled by My Plush Palace and our verified atelier partners.
              No payment is captured until you approve the quote.
            </p>
          </aside>
        </div>
      </div>
    </div>
  );
}

// ─── Inquire modal ──────────────────────────────────────────
function InquireModal({ rug, onClose }) {
  return (
    <div className="modal-bg" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()} style={{ position:'relative' }}>
        <button className="close icon-btn" onClick={onClose}
                style={{ position:'absolute', top:18, right:18 }}>×</button>
        <div className="sub">Inquiry · {rug.name}{rug.italic ? ` · ${rug.italic}` : ''}</div>
        <h3>Begin an <em className="italic accent">inquiry.</em></h3>
        <p style={{ color:'var(--ink-2)', opacity:.8, marginBottom:24, marginTop:8 }}>
          Tell us a little about the room. A specialist will write within forty-eight hours
          with material samples and a quote.
        </p>
        <div className="form-grid">
          <div className="field"><label>Name</label><input defaultValue="Eleanor Wren" /></div>
          <div className="field"><label>Email</label><input defaultValue="eleanor@studiowren.co" /></div>
          <div className="field full"><label>Room dimensions (optional)</label>
            <input placeholder="e.g. 5.4 × 3.8 m, oak floor" /></div>
        </div>
        <div style={{ display:'flex', gap:12, marginTop:24, justifyContent:'flex-end' }}>
          <button className="btn btn-ghost" onClick={onClose}>Not now</button>
          <button className="btn btn-primary" onClick={onClose}>Send inquiry <span className="btn-arrow"/></button>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// SHOP — live Ecwid storefront (id 136169752)
// ─────────────────────────────────────────────────────────────
function Shop() {
  const mountId = 'my-store-136169752';

  useEffect(() => {
    // If Ecwid is already loaded, just open the browser into our div.
    const init = () => {
      if (window.xProductBrowser) {
        try {
          window.xProductBrowser(
            'categoriesPerRow=3',
            'views=grid(20,3) list(60) table(60)',
            'categoryView=grid',
            'searchView=list',
            'id=' + mountId
          );
        } catch (e) { console.warn('Ecwid init', e); }
      }
    };

    if (window.xProductBrowser) { init(); return; }

    // Otherwise inject the loader.
    const s = document.createElement('script');
    s.setAttribute('data-cfasync', 'false');
    s.type = 'text/javascript';
    s.charset = 'utf-8';
    s.src = 'https://app.ecwid.com/script.js?136169752&data_platform=code&data_date=2026-05-15';
    s.onload = init;
    document.body.appendChild(s);
  }, []);

  return (
    <div className="screen" data-screen-label="07 Shop (live)">
      <div className="container">
        <div style={{ paddingTop: 56, display:'flex', justifyContent:'space-between',
                       alignItems:'flex-end', gap:32, flexWrap:'wrap' }}>
          <div>
            <div className="eyebrow">Live storefront · Ecwid #136169752</div>
            <h1 className="display" style={{ fontSize:'clamp(48px, 6vw, 96px)', margin:'14px 0 0' }}>
              The <em className="italic accent">Shop.</em>
            </h1>
          </div>
          <p style={{ fontFamily:'var(--font-display)', fontStyle:'italic', fontSize:20,
                       color:'var(--ink-2)', opacity:.78, maxWidth:380, textAlign:'right' }}>
            Single-order pieces ready to ship — sourced through our verified atelier partners.
          </p>
        </div>
        <hr className="hairline" style={{ margin:'40px 0 32px' }}/>

        {/* Ecwid mount point */}
        <div id={mountId} style={{ minHeight:'70vh' }} />

        <p style={{ fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.12em',
                     textTransform:'uppercase', color:'var(--muted)',
                     padding:'48px 0 96px', textAlign:'center' }}>
          Fulfilment handled directly by My Plush Palace · secure checkout via Ecwid
        </p>
      </div>
    </div>
  );
}

Object.assign(window, { Home, Browse, PDP, Cart, Checkout, InquireModal, Shop });