/* Studio 76 — page sections. Exported to window. */

/* ---------------- NAV ---------------- */
function Nav({ accent, onBegin, light }) {
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const f = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', f); f();
    return () => window.removeEventListener('scroll', f);
  }, []);
  const onLight = light && !scrolled && !open;
  const links = [['The Spark','#inspiration'],['Imaginarium','#imaginarium'],['Studio Bench','/blueprint.html'],['Luxe & Deluxe','#compare'],['Jewellers','#jewellers']];
  return (
    <header className={'nav' + (scrolled ? ' nav-scrolled' : '') + (open ? ' nav-open' : '') + (onLight ? ' nav-onlight' : '')}>
      <div className="wrap nav-inner">
        <Logo dark={!onLight} />
        <nav className="nav-pill">
          {links.map(([t,h]) => <a key={t} href={h}>{t}</a>)}
        </nav>
        <div className="nav-actions">
          <button className="btn btn-gold nav-cta" onClick={onBegin}>Begin Your Piece <ArrowUR style={{width:16,height:16}}/></button>
          <button className={'nav-burger' + (open ? ' open' : '')} aria-label="Menu" aria-expanded={open} onClick={()=>setOpen(o=>!o)}>
            <span></span><span></span>
          </button>
        </div>
      </div>
      {open && (
        <div className="nav-mobile">
          {links.map(([t,h]) => <a key={t} href={h} onClick={()=>setOpen(false)}>{t}</a>)}
          <button className="btn btn-gold" onClick={()=>{setOpen(false);onBegin();}}>Begin Your Piece</button>
        </div>
      )}
    </header>
  );
}

/* ---------------- HERO — cinematic campaign ---------------- */
function Hero({ t, onBegin }) {
  const pick = t.heroImage;
  const light = pick === 'ivory';
  const bg = pick === 'noir-b' ? ASSETS.heroNoirB : (light ? ASSETS.heroIvory : ASSETS.heroNoirA);
  return (
    <section id="top" className={'hero-cine' + (light ? ' light' : '')}>
      <div className="hero-cine-bg" aria-hidden="true"><img src={bg} alt="" /></div>
      <div className="hero-cine-shade" aria-hidden="true"></div>
      <i className="twinkle tw1" aria-hidden="true">✦</i>
      <i className="twinkle tw2" aria-hidden="true">✦</i>
      <i className="twinkle tw3" aria-hidden="true">✦</i>
      <div className="wrap hero-cine-inner">
        <p className="hero-cine-eyebrow reveal"><i className="spark">✦</i> The original, made real</p>
        <h1 className="hero-cine-head reveal reveal-d1" aria-label="Make it your own">
          Make it <span className="serif-italic gold-text">your&nbsp;own.</span>
        </h1>
        <p className="hero-cine-sub serif reveal reveal-d2">
          The piece you adored, remade in solid gold and genuine stones — <span className="serif-italic">made to be handed down.</span>
        </p>
        <div className="hero-ctas reveal reveal-d3">
          <button className="btn btn-gold" onClick={onBegin}>Begin your piece <ArrowR style={{width:18,height:18}}/></button>
          <a className="link-arrow hero-cine-link" href="#how">How it works</a>
        </div>
      </div>
      <div className="wrap hero-cine-foot reveal reveal-d4">
        <span className="hero-cine-credit">Campaign Nº 01 — <span className="serif-italic">The Empress Rivière,</span> remade from a saved pin</span>
        <a className="hero-cine-scroll" href="#inspiration">Scroll</a>
      </div>
    </section>
  );
}

/* ---------------- MARQUEE ---------------- */
function Marquee() {
  const items = ['Solid gold','Lab-grown or natural','Hand-set in Mumbai','Made to be handed down','The original, made real'];
  const run = [...items, ...items];
  return (
    <div className="marquee dark" style={{padding:'18px 0', borderTop:'1px solid rgba(255,255,255,.08)', borderBottom:'1px solid rgba(255,255,255,.08)'}}>
      <div className="marquee-track">
        {run.map((x,i) => (
          <span className="marquee-item" key={i}>
            <span className={i % 2 ? 'serif-italic gold-text' : ''} style={i % 2 ? undefined : {color:'var(--on-ink)'}}>{x}</span>
            <i className="spark" style={{margin:'0 .2em'}}>✦</i>
          </span>
        ))}
      </div>
    </div>
  );
}

/* ---------------- INSPIRATION ---------------- */
function Inspiration({ onBegin }) {
  return (
    <section id="inspiration" className="dark section-pad">
      <div className="wrap">
        <div className="insp-head">
          <div className="reveal">
            <Eyebrow dark>Where it begins</Eyebrow>
            <h2 className="section-title" style={{marginTop:14}}>
              You only saw it once. <span className="serif-italic" style={{color:'var(--gold-light)'}}>Keep it forever.</span>
            </h2>
            <p className="insp-lead">
              On a friend you loved. On a star, frozen in a frame of celluloid. In a shop window years ago, or a dream you woke up still reaching for. Wherever you first saw it — <span className="serif-italic">describe it, and our AI draws it back to life.</span> Then our Mumbai studio makes it real, in solid gold.
            </p>
            <div className="hero-ctas" style={{marginTop:26}}>
              <button className="btn btn-primary" onClick={onBegin}>Begin from a memory <ArrowR style={{width:18,height:18}}/></button>
              <a className="link-arrow" href="#how">How it works</a>
            </div>
          </div>
          <div className="reveal reveal-d2 film-wrap">
            <div className="film-frame">
              <div className="frame r-md" style={{aspectRatio:'4/3'}}>
                <img className="img-hover" src={ASSETS.ringSnake} alt="A piece glimpsed on screen" />
              </div>
            </div>
            <p className="film-cap"><i className="spark">✦</i> Paused on frame · 0412</p>
          </div>
        </div>

        <div className="insp-grid">
          {INSPIRATION.map((it, i) => (
            <div className={'insp-card reveal reveal-d' + (i+1)} key={it.k}>
              <span className="insp-n">{['I','II','III','IV'][i]}</span>
              <h3 className="serif" style={{fontSize:23, margin:'12px 0 8px'}}>{it.k}</h3>
              <p style={{margin:0, color:'var(--on-ink-soft)', fontSize:16}}>{it.s}</p>
            </div>
          ))}
        </div>

        <div className="insp-ai reveal">
          <span className="insp-ai-txt">
            <i className="spark">✦</i> Our AI turns your words — or a single blurry photo — into a first sketch in seconds. A human stylist refines it from there.
          </span>
          <button className="btn btn-light" onClick={onBegin}>Describe yours <ArrowR style={{width:18,height:18}}/></button>
        </div>
      </div>
    </section>
  );
}

/* ---------------- STUDIO BENCH PROMO ---------------- */
function BenchPromo() {
  return (
    <section id="bench" className="cream-2 section-pad">
      <div className="wrap bench-promo">
        <div className="reveal">
          <Eyebrow>Studio Bench</Eyebrow>
          <h2 className="section-title" style={{marginTop:14}}>Already have a piece? <span className="serif-italic">Photograph it.</span></h2>
          <p style={{margin:'18px 0 28px', color:'var(--on-paper-soft)', fontSize:'clamp(16px,1.6vw,19px)', maxWidth:520, lineHeight:1.6}}>
            Upload any jewellery photo and the bench reads it — a technical <b style={{color:'var(--ink)'}}>blueprint</b>, a full <b style={{color:'var(--ink)'}}>spec sheet</b>,
            and the piece <span className="serif-italic">worn on a model</span>, ready for the grid.
          </p>
          <a className="btn btn-primary" href="/blueprint.html">Open the Studio Bench <ArrowR style={{width:18,height:18}}/></a>
        </div>
        <a href="/blueprint.html" className="reveal reveal-d1 frame r-lg bench-promo-img">
          <img className="img-hover" src={ASSETS.ringRuby} alt="Photograph your piece" style={{objectPosition:'30% 100%'}} />
          <span className="bench-promo-tag">✦ Photo → Blueprint</span>
        </a>
      </div>
    </section>
  );
}

/* ---------------- LATEST SETS ---------------- */
function LatestSets() {
  const [sets, setSets] = React.useState(null);
  React.useEffect(() => {
    fetch('/blueprint.php?action=list_sets')
      .then(r => r.json())
      .then(j => setSets((j.sets || []).filter(s => s.count > 0 && s.cover).slice(0, 8)))
      .catch(() => setSets([]));
  }, []);
  if (!sets || !sets.length) return null;
  return (
    <section id="latest" className="cream section-pad">
      <div className="wrap">
        <div className="gallery-head">
          <div>
            <Eyebrow>Lately on the bench</Eyebrow>
            <h2 className="section-title" style={{marginTop:14}}>Freshly <span className="serif-italic">imagined.</span></h2>
          </div>
          <a className="link-arrow" href="/blueprint.html">Make yours <ArrowUR style={{width:16,height:16}}/></a>
        </div>
        <div className="latest-grid">
          {sets.map(s => (
            <a className="latest-card" href={'/set.html?id=' + s.id} key={s.id}>
              <div className="frame r-md latest-img"><img className="img-hover" src={'/sets/' + s.id + '/' + s.cover} alt={s.title} loading="lazy" /></div>
              <div className="latest-meta">
                <span className="latest-name">{s.title}</span>
                <span className="latest-n">{s.count} piece{s.count === 1 ? '' : 's'}</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- HOW IT WORKS ---------------- */
function HowItWorks() {
  return (
    <section id="how" className="cream section-pad">
      <div className="wrap">
        <div className="reveal" style={{maxWidth:720, marginBottom:'clamp(36px,5vw,64px)'}}>
          <Eyebrow>How it works</Eyebrow>
          <h2 className="section-title" style={{marginTop:14}}>Three steps from <span className="serif-italic">obsession</span> to heirloom.</h2>
        </div>
        <div className="how-grid">
          {HOW.map((h, i) => (
            <div className={'how-item reveal reveal-d' + (i+1)} key={h.n}>
              <span className="how-n display">{h.n}</span>
              <h3 className="serif" style={{fontSize:27, margin:'10px 0 10px'}}>{h.t}</h3>
              <p style={{margin:0, color:'var(--on-paper-soft)', fontSize:16.5}}>{h.s}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- GALLERY ---------------- */
function Gallery({ onBegin }) {
  return (
    <section id="gallery" className="dark section-pad">
      <div className="wrap">
        <div className="gallery-head reveal">
          <div>
            <Eyebrow dark>Pins, reborn</Eyebrow>
            <h2 className="section-title" style={{marginTop:14}}>The saves that <span className="serif-italic gold-text">became real.</span></h2>
          </div>
          <a className="link-arrow" href="#studio">Start yours <ArrowUR style={{width:16,height:16}}/></a>
        </div>
        <div className="gallery-grid">
          {GALLERY.map((g,i) => (
            <div className={'reveal reveal-d' + (Math.min(i,4)+1)} key={g.name}>
              <TransformCard item={g} onAdd={onBegin} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- LUXE vs DELUXE ---------------- */
function Compare() {
  const Side = ({ kind, img, accent, tagline, body, bullets, d }) => (
    <div className={'cmp-side reveal ' + d}>
      <div className="frame r-lg cmp-img"><img className="img-hover" src={img} alt={kind} /></div>
      <div className="cmp-body">
        <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:6}}>
          <span style={{width:10,height:10,borderRadius:9,background:accent}}></span>
          <h3 className="serif" style={{fontSize:32, fontStyle:'italic', margin:0}}>{kind}</h3>
        </div>
        <p className="serif" style={{fontSize:19, margin:'0 0 12px', color:'var(--gold-light)'}}>{tagline}</p>
        <p style={{margin:'0 0 16px', color:'var(--on-ink-soft)', fontSize:16.5}}>{body}</p>
        <ul className="cmp-list">
          {bullets.map(b => <li key={b}><i className="spark">✦</i>{b}</li>)}
        </ul>
      </div>
    </div>
  );
  return (
    <section id="compare" className="dark section-pad">
      <div className="wrap">
        <div className="reveal" style={{textAlign:'center', maxWidth:760, margin:'0 auto clamp(38px,5vw,64px)'}}>
          <Eyebrow dark style={{justifyContent:'center'}}>Two ways to own it</Eyebrow>
          <h2 className="section-title" style={{marginTop:14}}>Same solid gold. <span className="serif-italic" style={{color:'var(--gold-light)'}}>Your kind of forever.</span></h2>
        </div>
        <div className="cmp-grid">
          <Side kind="Luxe" img={ASSETS.cuffPair} accent="var(--gold)" d="reveal-d1"
            tagline="Brilliant lab-grown stones"
            body="Grown, not mined — chemically and optically identical to natural, with the same fire. The kindest way to wear serious sparkle, every day."
            bullets={['Identical brilliance & hardness','A gentler price, more presence','Conflict-free, traceable origin','Best for everyday statement pieces']} />
          <Side kind="Deluxe" img={ASSETS.polki} accent="var(--emerald)" d="reveal-d2"
            tagline="Certified natural stones"
            body="Earth-formed and individually graded. The genuine article — rarer, weightier in meaning, made to be handed down."
            bullets={['Certified, papered & unique','Heirloom-grade rarity','Holds value across generations','Best for milestones & legacy']} />
        </div>
      </div>
    </section>
  );
}

/* ---------------- STORY ---------------- */
function Story() {
  return (
    <section id="story" className="cream section-pad">
      <div className="wrap story-grid">
        <div className="reveal">
          <Eyebrow>Our story</Eyebrow>
          <h2 className="display story-mark" aria-label="Studio 76">
            Studio<span style={{color:'var(--accent)', fontFamily:'var(--font-serif)', fontStyle:'italic', fontWeight:700, marginLeft:'.12em'}}>76</span>
          </h2>
          <p className="serif" style={{fontSize:'clamp(22px,2.4vw,30px)', lineHeight:1.3, margin:'8px 0 0', maxWidth:560}}>
            Not a label — <span className="serif-italic">a bench.</span> Studio 76 is the Mumbai workshop where the piece you only ever saw — on a screen, on someone else, in a dream — is remade in solid gold and genuine stone.
          </p>
        </div>
        <div className="reveal reveal-d1 story-text">
          <p style={{marginTop:0}}>Real gold and real stone don’t tarnish, dull, or date. The trend passes. The piece stays.</p>
          <p>You’ve carried that one image around for years, half-believing it could ever be yours. Studio 76 exists for exactly that: you bring the obsession, we make it last.</p>
          <p style={{marginBottom:0}}><b>Hand-set in Mumbai. Worn anywhere. Yours to keep.</b></p>
          <div className="frame r-lg" style={{aspectRatio:'4/3', marginTop:24}}>
            <img className="img-hover" src={ASSETS.beadChoker} alt="Studio 76 emerald cascade" style={{objectPosition:'center 18%'}} />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- PROCESS ---------------- */
function Process() {
  return (
    <section className="cream-2 section-pad">
      <div className="wrap">
        <div className="reveal" style={{marginBottom:'clamp(34px,4vw,54px)'}}>
          <Eyebrow>The process</Eyebrow>
          <h2 className="section-title" style={{marginTop:14}}>Made by hand, <span className="serif-italic">made to keep.</span></h2>
        </div>
        <div className="process-grid">
          {PROCESS.map((p, i) => (
            <div className={'process-item reveal reveal-d' + (i+1)} key={p.t}>
              <span className="process-n">0{i+1}</span>
              <hr className="rule" style={{margin:'14px 0'}} />
              <h3 className="serif" style={{fontSize:24, margin:'0 0 8px'}}>{p.t}</h3>
              <p style={{margin:0, color:'var(--on-paper-soft)', fontSize:15.5}}>{p.s}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- JEWELLERS — THE PRIVATE STUDIO (coming soon) ---------------- */
function Jewellers() {
  const [email, setEmail] = React.useState('');
  const [state, setState] = React.useState('idle');   // idle | busy | done | err
  const ok = /\S+@\S+\.\S+/.test(email);
  async function apply(e) {
    e.preventDefault();
    if (!ok || state === 'busy') return;
    setState('busy');
    try {
      const r = await fetch('imaginarium.php', { method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ action: 'waitlist', list: 'trade', email }) });
      const j = await r.json();
      if (!r.ok || j.error) throw new Error(j.error);
      setState('done');
    } catch (err) { setState('err'); }
  }
  const rows = [
    ['I',   'The Bench, under your mark',   'Photo to blueprint, spec sheet, model shoots and a 3D concept mesh — white-labelled, on your counter.'],
    ['II',  'Client presentation sets',     'Every reading becomes a private, shareable set. Your client leaves with a link; you keep the commission.'],
    ['III', 'Drawings your karigar can use','Dimensioned elevations and orthographic plates the workshop can actually start from.'],
    ['IV',  'A small first circle',         'By application only — trade terms, priority bench hours, and a hand in what we build next.'],
  ];
  return (
    <section id="jewellers" className="dark section-pad jw">
      <div className="wrap">
        <div className="jw-head reveal">
          <Eyebrow dark>For the trade</Eyebrow>
          <h2 className="section-title" style={{marginTop:14}}>
            The Private Studio. <span className="serif-italic" style={{color:'var(--gold-light)'}}>For jewellers.</span>
          </h2>
          <p className="jw-lead">
            The bench behind Studio 76 — the readings, the blueprints, the shoots, the 3D — is opening as a
            <span className="serif-italic" style={{color:'var(--on-ink)'}}> private studio for working jewellers.</span> Your
            mark on the door. Our machinery behind it.
          </p>
        </div>

        <div className="jw-grid">
          <div className="jw-rows reveal reveal-d1">
            {rows.map(([n, t, s]) => (
              <div className="jw-row" key={n}>
                <span className="jw-n serif-italic">{n}</span>
                <div>
                  <h3 className="serif">{t}</h3>
                  <p>{s}</p>
                </div>
              </div>
            ))}
          </div>

          <div className="jw-card-wrap reveal reveal-d2">
            <div className="jw-card shimmer">
              <div className="jw-card-top">
                <RingsMark size={36} sw={1.6} stroke="rgba(27,19,13,.78)" />
                <span className="jw-card-tag">Coming soon</span>
              </div>
              <p className="jw-card-name serif">Private Studio</p>
              <p className="jw-card-sub">Studio 76 · for the trade</p>
              <hr className="jw-card-rule" />
              <div className="jw-card-foot">
                <span>Member Nº ——</span>
                <span>By application</span>
              </div>
            </div>
            <p className="jw-card-cap"><i className="spark">✦</i> First ateliers onboard winter 2026</p>
          </div>
        </div>

        <div className="jw-apply reveal">
          {state !== 'done' ? (
            <React.Fragment>
              <span className="jw-apply-txt serif">Keep a place at the bench — <span className="serif-italic">we’ll write when the door opens.</span></span>
              <form className="cta-form jw-form" onSubmit={apply}>
                <input value={email} onChange={e => setEmail(e.target.value)} type="email" placeholder="you@youratelier.com" aria-label="Your email" />
                <button className="btn btn-primary" type="submit" disabled={state === 'busy'} style={{opacity: ok ? 1 : .6}}>
                  {state === 'busy' ? 'Sending…' : 'Request an invitation'} <ArrowR style={{width:18,height:18}}/>
                </button>
              </form>
              {state === 'err' && <span className="jw-apply-err">Something slipped — try once more.</span>}
            </React.Fragment>
          ) : (
            <p className="serif jw-apply-done">✓ Noted in the ledger. You’ll hear from us before anyone else.</p>
          )}
        </div>
      </div>
    </section>
  );
}

/* ---------------- CTA ---------------- */
function CTA() {
  const [email, setEmail] = React.useState('');
  const [state, setState] = React.useState('idle');   // idle | busy | done
  const ok = /\S+@\S+\.\S+/.test(email);
  async function join(e) {
    e.preventDefault();
    if (!ok || state === 'busy') return;
    setState('busy');
    try {
      const r = await fetch('imaginarium.php', { method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ action: 'waitlist', list: 'client', email }) });
      const j = await r.json();
      if (!r.ok || j.error) throw new Error(j.error);
      setState('done');
    } catch (err) { setState('idle'); }
  }
  return (
    <section className="dark section-pad cta">
      <div className="wrap" style={{textAlign:'center', maxWidth:820, marginInline:'auto'}}>
        <div className="reveal" style={{display:'flex', justifyContent:'center', marginBottom:22}}><RingsMark size={56} sw={1.4} stroke="var(--gold-light)" /></div>
        <h2 className="section-title reveal reveal-d1">Bring the one you’ve <span className="serif-italic" style={{color:'var(--gold-light)'}}>never let go of.</span></h2>
        <p className="reveal reveal-d2" style={{color:'var(--on-ink-soft)', fontSize:18.5, maxWidth:560, margin:'18px auto 30px'}}>
          Join early access for a complimentary first consultation — and be first to make your saved piece real.
        </p>
        {state !== 'done' ? (
          <form className="cta-form reveal reveal-d3" onSubmit={join}>
            <input value={email} onChange={e=>setEmail(e.target.value)} type="email" placeholder="you@email.com" />
            <button className="btn btn-primary" type="submit" disabled={state === 'busy'} style={{opacity:ok?1:.6}}>{state === 'busy' ? 'Joining…' : 'Get early access'} <ArrowR style={{width:18,height:18}}/></button>
          </form>
        ) : (
          <p className="reveal in serif" style={{fontSize:22, color:'var(--gold-light)'}}>✓ You’re on the list. We’ll be in touch with your first consultation.</p>
        )}
      </div>
    </section>
  );
}

/* ---------------- FOOTER ---------------- */
function Footer() {
  const hrefs = { 'Studio Bench': '/blueprint.html', 'Private Studio — trade': '#jewellers' };
  const cols = [
    ['Explore', ['Studio Bench','Luxe & Deluxe','Pins, reborn','How it works']],
    ['Studio', ['Our story','Certification','Care & repair','Book a consultation']],
    ['More', ['Early access','Private Studio — trade','Gifting','Contact']],
  ];
  return (
    <footer className="dark" style={{paddingTop:'clamp(60px,8vw,100px)', paddingBottom:40, borderTop:'1px solid rgba(255,255,255,.08)'}}>
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <div style={{display:'flex', alignItems:'center', gap:12, marginBottom:16}}>
              <RingsMark size={40} sw={1.6} stroke="var(--gold-light)" />
              <Wordmark size={30} accent="var(--gold-light)" color="var(--on-ink)" />
            </div>
            <p style={{maxWidth:300, color:'var(--on-ink-soft)', fontSize:15.5}}>The piece you adored, finally made real — in solid gold and genuine stones. Mumbai · studio76.in</p>
          </div>
          {cols.map(([h, items]) => (
            <div key={h}>
              <p className="label-mono" style={{color:'var(--gold-light)', marginBottom:14}}>{h}</p>
              <ul className="footer-links">
                {items.map(it => <li key={it}><a href={hrefs[it] || '#top'}>{it}</a></li>)}
              </ul>
            </div>
          ))}
        </div>
        <hr className="rule" style={{margin:'40px 0 22px'}} />
        <div className="footer-base">
          <span>© 2026 Studio 76. The original, made real.</span>
          <span style={{display:'flex', gap:22}}>
            <a href="#top">Privacy</a><a href="#top">Terms</a><a href="#top">Instagram</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

/* ---------------- MOBILE STICKY CTA ---------------- */
function MobileBar({ onBegin }) {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const inView = (el, topFrac, botFrac) => {
      if (!el) return false;
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight;
      return r.top < vh * topFrac && r.bottom > vh * botFrac;
    };
    let raf = 0;
    const f = () => {
      raf = 0;
      const studio = document.getElementById('studio');
      const cta = document.querySelector('.cta');
      const pastHero = window.scrollY > window.innerHeight * 0.65;
      const busy = inView(studio, 0.7, 0.25) || inView(cta, 0.85, 0.1);
      setShow(pastHero && !busy);
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(f); };
    f();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);
  return (
    <div className={'mobile-bar' + (show ? ' show' : '')} aria-hidden={!show}>
      <span className="mobile-bar-text">
        <span className="mb-title">Make it real</span>
        <span className="mb-sub">Luxe or Deluxe · solid gold</span>
      </span>
      <button className="btn btn-primary" onClick={onBegin} tabIndex={show ? 0 : -1}>Begin <ArrowR style={{width:16,height:16}}/></button>
    </div>
  );
}

Object.assign(window, { Nav, Hero, Marquee, Inspiration, BenchPromo, LatestSets, HowItWorks, Gallery, Compare, Story, Process, Jewellers, CTA, Footer, MobileBar });