// app.jsx — ZURU Pitch v2
// Photo-led, cinematic, editorial. Zero particle slop.

const { useState, useEffect, useRef } = React;

// ---------- Video preloader ----------
// All videos used on the page. Keep in sync with <video src=...> below.
const PRELOAD_VIDEOS = [
  'design/plates/shot-01-squad.mp4',
  'design/plates/hero-closeup.mp4',
  'design/plates/shot-buoy-gun.mp4',
  'design/plates/shot-bubbles.mp4',
  'design/plates/shot-balloons.mp4',
  'design/plates/fml-endlogo.mp4',
];

function Loader({ onReady }) {
  const [pct, setPct] = useState(0);
  const [exiting, setExiting] = useState(false);

  useEffect(() => {
    let loaded = 0;
    const total = PRELOAD_VIDEOS.length;
    const els = [];
    let done = false;

    const finish = () => {
      if (done) return;
      done = true;
      setExiting(true);
      setTimeout(onReady, 600);
    };

    const tick = () => {
      loaded += 1;
      setPct(Math.round((loaded / total) * 100));
      if (loaded >= total) finish();
    };

    PRELOAD_VIDEOS.forEach((url) => {
      const v = document.createElement('video');
      v.muted = true;
      v.playsInline = true;
      v.preload = 'auto';
      v.src = url;
      v.style.cssText = 'position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;left:-9999px;';
      const handle = () => {
        v.removeEventListener('canplaythrough', handle);
        v.removeEventListener('loadeddata', handle);
        v.removeEventListener('error', handle);
        tick();
      };
      v.addEventListener('canplaythrough', handle);
      // Safari sometimes never fires canplaythrough — accept loadeddata as good enough
      v.addEventListener('loadeddata', () => setTimeout(handle, 800));
      v.addEventListener('error', handle);
      document.body.appendChild(v);
      els.push(v);
    });

    // Hard fail-safe: never block longer than 8s total
    const timer = setTimeout(finish, 8000);

    return () => {
      clearTimeout(timer);
      els.forEach((v) => v.remove());
    };
  }, [onReady]);

  return (
    <div className={`zuru-loader ${exiting ? 'is-exiting' : ''}`}>
      <div className="zuru-loader-inner">
        <div className="zuru-loader-eye">FML <span className="slash">×</span> ZURU</div>
        <div className="zuru-loader-title">Famous by Friday</div>
        <div className="zuru-loader-bar"><div className="zuru-loader-fill" style={{ width: pct + '%' }} /></div>
        <div className="zuru-loader-pct">{String(pct).padStart(3, '0')}<span className="slash">/</span>100</div>
      </div>
    </div>
  );
}

// ---------- Custom cursor ----------
function Cursor() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    let x = innerWidth/2, y = innerHeight/2, tx = x, ty = y;
    const move = (e) => { tx = e.clientX; ty = e.clientY; };
    const down = () => el.classList.add('is-down');
    const up = () => el.classList.remove('is-down');
    const over = (e) => {
      const t = e.target;
      if (t.closest && t.closest('a, button, .concept, .pick-btn, .book-btn')) el.classList.add('is-over-link');
      else el.classList.remove('is-over-link');
    };
    addEventListener('mousemove', move);
    addEventListener('mouseover', over);
    addEventListener('mousedown', down);
    addEventListener('mouseup', up);
    let raf;
    const tick = () => {
      x += (tx-x)*0.28; y += (ty-y)*0.28;
      el.style.transform = `translate(${x}px,${y}px) translate(-50%,-50%)`;
      raf = requestAnimationFrame(tick);
    };
    tick();
    return () => { cancelAnimationFrame(raf); removeEventListener('mousemove', move); removeEventListener('mouseover', over); removeEventListener('mousedown', down); removeEventListener('mouseup', up); };
  }, []);
  return <div className="cursor" ref={ref} />;
}

// ---------- Progress bar ----------
function Progress() {
  const ref = useRef(null);
  useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement;
      const pct = h.scrollTop / (h.scrollHeight - h.clientHeight) * 100;
      ref.current.style.width = pct + '%';
    };
    addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => removeEventListener('scroll', onScroll);
  }, []);
  return <div className="progress" ref={ref} />;
}

// ---------- Topbar with running timecode ----------
function Topbar() {
  const [tc, setTc] = useState('00:00:00:00');
  useEffect(() => {
    const start = performance.now();
    let raf;
    const tick = () => {
      const ms = performance.now() - start;
      const total = Math.floor(ms/40);
      const f = String(total % 25).padStart(2,'0');
      const s = String(Math.floor(total/25) % 60).padStart(2,'0');
      const m = String(Math.floor(total/(25*60)) % 60).padStart(2,'0');
      const h = String(Math.floor(total/(25*3600))).padStart(2,'0');
      setTc(`${h}:${m}:${s}:${f}`);
      raf = requestAnimationFrame(tick);
    };
    tick();
    return () => cancelAnimationFrame(raf);
  }, []);
  return (
    <div className="topbar">
      <div className="l"><span className="dot" />FML <span className="slash">//</span> PITCH 001</div>
      <div className="c"><span className="tc">TC {tc}</span></div>
      <div className="r">ZURU <span className="slash">//</span> FAMOUS BY FRIDAY</div>
    </div>
  );
}

// ---------- HERO ----------
function Hero() {
  const bgRef = useRef(null);
  useEffect(() => {
    const onScroll = () => {
      if (!bgRef.current) return;
      const y = scrollY;
      bgRef.current.style.transform = `translateY(${y * 0.25}px) scale(1.05)`;
    };
    addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => removeEventListener('scroll', onScroll);
  }, []);
  return (
    <section className="hero">
      <div className="bg" ref={bgRef} style={{ backgroundColor:'#000' }}>
        <video
          src="design/plates/shot-01-squad.mp4"
          poster="design/plates/hero-xshot-squad.jpg"
          autoPlay muted loop playsInline preload="auto"
          style={{ position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover' }}
        />
      </div>
      <div className="scrim" />
      <div className="crosshair tl" />
      <div className="crosshair tr" />
      <div className="crosshair bl" />
      <div className="crosshair br" />
      <div className="chrome">
        <div className="hero-top">
          <div className="block">
            <h5>Reel // Shot 01</h5>
            <p>XSHOT Hydro Squad · Auckland · 2026</p>
          </div>
          <div className="block" style={{ textAlign: 'right' }}>
            <h5>Brand</h5>
            <p>XSHOT · Bunch O Balloons · Bunch O Bubbles</p>
          </div>
        </div>

        <h1 className="hero-headline">
          Famous<br />
          by <em>Friday</em>.
        </h1>

        <div className="hero-bottom">
          <p className="hero-sub">
            You already publish <span className="hl">20,000+ pieces of content</span> a year. This is about the day every one of them also becomes <em style={{fontFamily:'var(--font-display)',fontStyle:'italic',fontWeight:500}}>culture</em>, on a clock, at ZURU pace.
          </p>
          <div className="scroll-cue">
            <span>Scroll</span>
            <span className="line" />
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- REEL stage ----------
// One shot per unique video. No duplicates, no still frames.
const SHOTS = [
  {
    plate: 'design/plates/hero-xshot-squad.jpg',
    video: 'design/plates/hero-closeup.mp4',
    eye: 'Shot 01 · Action · XSHOT Hydro',
    title: <>XSHOT, <em>in the wild</em>.</>,
    brand: 'XSHOT HYDRO',
    run: '00:00–00:08',
    loc: 'Backyard',
  },
  {
    plate: 'design/plates/xshot-hydro-product.jpg',
    video: 'design/plates/shot-buoy-gun.mp4',
    eye: 'Shot 02 · Lifestyle · XSHOT Hydro',
    title: <>The hero, <em>by the pool</em>.</>,
    brand: 'XSHOT HYDRO',
    run: '00:08–00:13',
    loc: 'Poolside',
  },
  {
    plate: 'design/plates/bubbles-kid-wide.jpg',
    video: 'design/plates/shot-bubbles.mp4',
    eye: 'Shot 03 · Atmosphere · Bunch O Bubbles',
    title: <>Every bubble, <em>a beat</em>.</>,
    brand: 'BUNCH O BUBBLES',
    run: '00:13–00:23',
    loc: 'Golden Hour',
  },
  {
    plate: 'design/plates/bob-bucket-action.jpg',
    video: 'design/plates/shot-balloons.mp4',
    eye: 'Shot 04 · Detail · Bunch O Balloons',
    title: <>One hundred balloons, <em>sixty seconds</em>.</>,
    brand: 'BUNCH O BALLOONS',
    run: '00:23–00:30',
    loc: 'Backyard',
  },
];

// FlowShot — videos autoplay and loop continuously, independent of scroll.
function FlowShot({ shot, index, total }) {
  return (
    <section className="flowshot">
      <div className="flowshot-media">
        {shot.video ? (
          <video
            src={shot.video}
            poster={shot.plate}
            autoPlay
            muted
            loop
            playsInline
            preload="auto"
          />
        ) : (
          <div className="flowshot-still" style={{ backgroundImage:`url(${shot.plate})` }} />
        )}
        <div className="flowshot-scrim" />

        <div className="flowshot-chrome">
          <div className="flowshot-chrome-row">
            <div className="tl">
              <span className="label">Plate</span>
              <span className="val">{`0${index+1}/0${total} · ${shot.brand}`}</span>
            </div>
            <div className="tr" style={{ alignItems: 'flex-end', textAlign:'right' }}>
              <span className="label">Reel</span>
              <span className="val">FML × ZURU · Pitch 001</span>
            </div>
          </div>

          <div className="flowshot-title">
            <span className="eye">{shot.eye}</span>
            <h3>{shot.title}</h3>
          </div>

          <div className="flowshot-chrome-row">
            <div className="bl">
              <span className="label">Runtime</span>
              <span className="val">{shot.run}</span>
            </div>
            <div className="br" style={{ alignItems: 'flex-end', textAlign:'right' }}>
              <span className="label">Location</span>
              <span className="val">{shot.loc}</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Reel() {
  return (
    <div className="reel-flow">
      {SHOTS.map((s, i) => (
        <FlowShot key={i} shot={s} index={i} total={SHOTS.length} />
      ))}
    </div>
  );
}

// ---------- STATS ----------
const STATS = [
  { tag: '01', num: '$3', unit: 'B', label: 'revenue, with sharp growth. You are the operator, not the underdog.', src: 'Company · 2025' },
  { tag: '02', num: '20K', unit: '+', label: 'pieces of content a year, already produced via the Netra pipeline.', src: 'Netra · 2025' },
  { tag: '03', num: '20', unit: 'B', label: 'content views in 2025. Reach is solved. Fame is not the same as reach.', src: 'Company · 2025' },
  { tag: '04', num: '#1', unit: '', label: 'haircare brand on TikTok (MONDAY). You can win categories that are not toys.', src: 'TikTok · 2025' },
  { tag: '05', num: '144', unit: 'M', label: 'daily active users on Roblox. ZURU has one live title. One.', src: 'Roblox · 2025' },
  { tag: '06', num: '$5.5', unit: 'M', label: 'a month: Pop Mart on TikTok Shop. Creator-led is the new toy P&L.', src: 'TikTok Shop · 2025' },
];

function Stats() {
  return (
    <section className="stats dark">
      <div className="wrap">
        <span className="eyebrow"><span className="bar" />The board, today</span>
        <h2>You already win on every axis <em>but one</em>.</h2>
        <div className="stat-list">
          {STATS.map((s, i) => (
            <div className="stat-row" key={i}>
              <div className="tag">{s.tag}</div>
              <div className="num">{s.num}<span className="unit">{s.unit}</span></div>
              <div className="label">{s.label}</div>
              <div className="src">{s.src}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Interlude ----------
function Interlude() {
  return (
    <section className="interlude">
      <div className="caption">
        <span className="eye">Plate 07 · Top-down · ZURU Brand Library</span>
        <h3>Every shot already exists. We make the <em>next ten thousand</em> land.</h3>
      </div>
    </section>
  );
}

// ---------- THESIS ----------
function Thesis() {
  return (
    <section className="thesis">
      <div className="wrap">
        <span className="eyebrow" style={{ color: 'rgba(10,10,15,0.65)' }}><span className="bar" />The gap</span>
        <h2>Quantity is solved. <em>Fame</em> is the gap.</h2>
        <div className="thesis-body">
          <div>
            <p><strong>Miniverse</strong> is winning Little Black Book and Ads of the World with a fraction of your output.</p>
            <p><strong>Mattel</strong> paused its OpenAI deal. <strong>LEGO</strong> shipped nine islands inside Fortnite.</p>
            <p><strong>Pop Mart</strong> is doing $5.5M a month on TikTok Shop with 1,300 creators.</p>
          </div>
          <div>
            <p>You have the licenses, the throughput, the manufacturing.</p>
            <p>What you do not yet have is a production physics that turns every new title, FIFA 2026, MasterChef, Disney, Sega, into a cultural moment on a clock.</p>
            <p>That is the conversation we want to have.</p>
          </div>
        </div>
        <div className="thesis-closer">
          <p className="quote">
            You do not need more content. You need a <em>production physics</em> that ships <em>culture</em> in 48 hours, not six weeks.
          </p>
          <div className="thesis-smallprint">
            A production pod sitting inside the ZURU release calendar. Brief in. Cuts out. Shipped on a clock.
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- CONCEPTS ----------
const CONCEPTS = [
  {
    num: '01', badge: 'Hero drop',
    plate: 'design/plates/xshot-hydro-product.jpg',
    title: 'XSHOT World Summer',
    titleEm: 'Six Cities, Six Blasters',
    blurb: 'A shoppable, city-by-city summer drop. Six episodes, six collectibles, six creators. Cuts land 48 hours after each heat-wave peak.',
  },
  {
    num: '02', badge: 'Always-on',
    plate: 'design/plates/bob-bucket-action.jpg',
    title: 'Bunch O Balloons',
    titleEm: 'Block Party OS',
    blurb: 'An agentic content OS that watches weather APIs, school calendars and TikTok heatmaps, then ships a finished spot per SKU per week, ranked by predicted save rate.',
  },
  {
    num: '03', badge: 'Platform play',
    plate: 'design/plates/bubbles-kid-wide.jpg',
    title: 'Bunch O Bubbles',
    titleEm: 'Infinite Factory',
    blurb: 'Every bubble is a beat. A slow-mo lyric platform that pairs any trending audio with a ZURU bubble plate, auto-sliced for Reels, TikTok and YouTube Shorts.',
  },
];

function Concepts({ selected, onSelect }) {
  return (
    <section className="concepts">
      <div className="wrap">
        <span className="eyebrow"><span className="bar" />Three ways in</span>
        <h2>Pick the one that gets <em>famous first</em>.</h2>
        <div className="concept-grid">
          {CONCEPTS.map((c, i) => (
            <div
              key={i}
              className={`concept ${selected === i ? 'selected' : ''}`}
              onClick={() => onSelect(i)}
            >
              <div className="plate" style={{ backgroundImage: `url(${c.plate})` }} />
              <div className="chrome">
                <div className="top-row">
                  <span>Concept · {c.num}</span>
                  <span className="badge">{c.badge}</span>
                </div>
                <div className="bottom">
                  <h3>{c.title}<em>{c.titleEm}</em></h3>
                  <p className="blurb">{c.blurb}</p>
                  <div className="cta">
                    <span>{selected === i ? 'Selected' : 'Tap to select'}</span>
                    <span className="arr">↗</span>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- PICK CTA ----------
const DETAILS = [
  {
    title: 'XSHOT World Summer',
    titleEm: 'Six Cities, Six Blasters',
    why: 'Highest ceiling. Summer is XSHOT weather, and the category is wide open for a creator-led six-week run. Fast to brief, fast to cast, fast to cut.',
    timeline: [
      { when: 'Week 1', what: 'Pod assembled. Six-city cast + creator shortlist locked.' },
      { when: 'Week 3', what: 'Episode 01 ships. Shoppable rails live in 7 markets.' },
      { when: 'Peak heat', what: 'Episodes 02-05 cut inside 48h of each weekend.' },
      { when: 'Week 12', what: 'Finale + post-summer collectible drop. 12-month retail tail.' },
    ],
    next: 'Workshop in Auckland with the XSHOT product team. We bring a moodboard, two scripts, and a finished cut of the Los Angeles episode.',
  },
  {
    title: 'Bunch O Balloons',
    titleEm: 'Block Party OS',
    why: 'Lowest risk. The SKU library is huge, the unboxing behaviour is proven, the audience is primed. A v1 pod can ship against one Bunch O Balloons wave in 21 days, then double throughput each fortnight.',
    timeline: [
      { when: 'Week 1', what: 'Pod assembled. Brand voice + safety rails workshopped and locked.' },
      { when: 'Week 2', what: 'First 200 spots from the back catalogue. A/B live on TikTok + Reels.' },
      { when: 'Week 3', what: 'Plug into the next wave launch. Agentic ranking loop online.' },
      { when: 'Day 21', what: 'Receipt: cost-per-view down by 6× or we eat the difference.' },
    ],
    next: 'Two-hour scoping call. We bring 12 cuts of a finished Bunch O Balloons wave, made overnight.',
  },
  {
    title: 'Bunch O Bubbles',
    titleEm: 'Infinite Factory',
    why: 'Biggest swing. Bubbles are the most cinematic plate ZURU owns. Slow-mo, trending audio, generative colour. The IP that could become a sound-first platform if we move first.',
    timeline: [
      { when: 'Phase 0', what: 'Audio-to-plate pipeline. Match any trending sound to a bubble cut.' },
      { when: 'Phase 1', what: 'TikTok + Reels rollout. Creator toolkit. Soft launch Auckland + LA.' },
      { when: 'Phase 2', what: 'YouTube Shorts loop. In-pack QR drops a bespoke bubble edit.' },
      { when: 'Phase 3', what: 'Cross-IP guest cuts. Subscription tier for super-fans.' },
    ],
    next: 'A three-week sprint to a working prototype. You see one bubble cut, on your brief, before you sign anything.',
  },
];

function PickCTA({ selected, onSelect }) {
  const d = DETAILS[selected];
  return (
    <section className="pick dark" id="pick">
      <div className="wrap">
        <span className="eyebrow" style={{ color: 'rgba(255,255,255,0.5)' }}><span className="bar" />Decide</span>
        <h2>Which one ships <em>first?</em></h2>
        <div className="pick-buttons">
          {CONCEPTS.map((c, i) => (
            <button key={i} className={`pick-btn ${selected === i ? 'active' : ''}`} onClick={() => onSelect(i)}>
              <span>
                <span className="num">{c.num}</span>
                <span className="label">{c.title}<em>{c.titleEm}</em></span>
              </span>
              <span className="check">{selected === i ? '✓' : ''}</span>
            </button>
          ))}
        </div>

        <div className="pick-detail" key={selected}>
          <div className="why">
            <h4>Why this first</h4>
            <h3>{d.title}<em>{d.titleEm}</em></h3>
            <p>{d.why}</p>
            <div className="next">
              <h5>Next step</h5>
              <p>{d.next}</p>
            </div>
          </div>
          <div className="timeline">
            <h4>The clock</h4>
            <ul>
              {d.timeline.map((t, i) => (
                <li key={i}><span className="when">{t.when}</span><span className="what">{t.what}</span></li>
              ))}
            </ul>
          </div>
        </div>

        <div className="book-row">
          <a className="book-btn" href="mailto:denis@feedmelight.com?subject=ZURU%20pilot">
            Book the pilot
            <span className="arr">→</span>
          </a>
          <div className="book-meta">
            <strong>denis@feedmelight.com</strong><br />
            Currently in Los Angeles · Reply inside 24 hours
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- STUDIO (Feed Me Light) ----------
const FML_WORK = [
  { title: 'Half Heroes', kind: 'Animated Series · Cinematics', tag: '01' },
  { title: 'Safeguard', kind: 'Brand Film · Procter & Gamble', tag: '02' },
  { title: 'Kansas City Chiefs', kind: 'NFL · Hype Reel', tag: '03' },
  { title: 'FIFA World Cup', kind: 'Tournament Title Sequence', tag: '04' },
];

function Studio() {
  return (
    <section className="studio dark" id="studio">
      <div className="studio-hero">
        <video
          className="studio-hero-video"
          src="design/plates/fml-endlogo.mp4"
          autoPlay muted loop playsInline preload="auto"
        />
        <div className="studio-hero-scrim" />
        <div className="studio-hero-chrome">
          <span className="eye">A note from the FMLy</span>
          <h2>Feed Me <em>Light</em>.</h2>
          <p className="studio-lede">
            A kiwi-owned creative and technology studio. We build production physics for brands that need to move at the speed of culture.
          </p>
        </div>
      </div>

      <div className="wrap studio-body">
        <div className="studio-grid">
          <div className="studio-col">
            <span className="eyebrow"><span className="bar" />The studio</span>
            <h3>Born in Auckland.<br/>Working from <em>three time zones</em>.</h3>
            <p>
              Founded by a small group of kiwis who wanted to make work that travels.
              A decade in, we're a remote-first FMLy of directors, animators, technologists and
              producers, plugged into broadcast, sport, gaming and brand.
            </p>
            <div className="studio-cities">
              <div className="studio-city">
                <span className="city-tag">HQ · Europe</span>
                <strong>London</strong>
                <span className="city-meta">Shoreditch · GMT</span>
              </div>
              <div className="studio-city">
                <span className="city-tag">MENA</span>
                <strong>Riyadh</strong>
                <span className="city-meta">Creative Arabia · AST</span>
              </div>
              <div className="studio-city">
                <span className="city-tag">Origin</span>
                <strong>Auckland</strong>
                <span className="city-meta">Tāmaki Makaurau · NZST</span>
              </div>
            </div>
          </div>

          <div className="studio-col">
            <span className="eyebrow"><span className="bar" />Selected work</span>
            <h3>A decade of <em>cuts</em> that travelled.</h3>
            <ul className="studio-work">
              {FML_WORK.map((w, i) => (
                <li key={i} className="studio-work-row">
                  <span className="tag">{w.tag}</span>
                  <span className="title">{w.title}</span>
                  <span className="kind">{w.kind}</span>
                </li>
              ))}
            </ul>
            <p className="studio-foot">
              Plus broadcast, sport and brand for the Premier League, Saudi Pro League, Roblox, Procter &amp; Gamble, Sky and the BBC.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Footer ----------
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <div className="footer-mark">Feed Me <em>Light</em></div>
            <p className="intro">A creative and technology studio. Animation, VFX, game cinematics, live events, and agentic AI creative pods.</p>
          </div>
          <div>
            <h5>The FMLy</h5>
            <div className="row">London · Shoreditch</div>
            <div className="row">Riyadh · Creative Arabia</div>
            <div className="row">Auckland</div>
            <div className="row">Los Angeles · via Elastic</div>
          </div>
          <div>
            <h5>Talk</h5>
            <div className="row">denis@feedmelight.com</div>
            <div className="row" style={{ color:'rgba(255,255,255,0.5)' }}>feedmelight.com</div>
          </div>
          <div>
            <h5>For</h5>
            <div className="row">ZURU Toys</div>
            <div className="row" style={{ color:'rgba(255,255,255,0.5)' }}>Marketing + Brand</div>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2014 — 2026 Feed Me Light Ltd</span>
          <span>Built in <em>48 hours</em> · By the FMLy</span>
        </div>
      </div>
    </footer>
  );
}

// ---------- App root ----------
function App() {
  const [ready, setReady] = useState(false);
  const [selected, setSelected] = useState(() => {
    try { return Number(localStorage.getItem('zuru_pick') || 0); } catch { return 0; }
  });
  const select = (i) => {
    setSelected(i);
    try { localStorage.setItem('zuru_pick', String(i)); } catch {}
  };
  return (
    <>
      {!ready && <Loader onReady={() => setReady(true)} />}
      <Cursor />
      <Progress />
      <Topbar />
      <main>
        <Hero />
        <Reel />
        <Stats />
        <Interlude />
        <Thesis />
        <Concepts selected={selected} onSelect={(i) => {
          select(i);
          setTimeout(() => {
            const el = document.getElementById('pick');
            if (el) scrollTo({ top: el.offsetTop - 40, behavior: 'smooth' });
          }, 150);
        }} />
        <PickCTA selected={selected} onSelect={select} />
        <Studio />
        <Footer />
      </main>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);