// app.jsx — FML × Qiddiya, for Darren
// Dark editorial. Experiential-design vocabulary. Async-first.

const { useEffect, useState } = React;

// ── Live timecode in the topbar ──────────────────────────────
function useTC() {
  const [tc, setTc] = useState(() => fmtTc(new Date()));
  useEffect(() => {
    const i = setInterval(() => setTc(fmtTc(new Date())), 1000);
    return () => clearInterval(i);
  }, []);
  return tc;
}
function fmtTc(d) {
  const p = (n) => String(n).padStart(2, '0');
  return `${p(d.getUTCHours())}:${p(d.getUTCMinutes())}:${p(d.getUTCSeconds())} UTC`;
}

// ── Scroll progress bar ──────────────────────────────────────
function useProgress() {
  const [p, setP] = useState(0);
  useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement;
      const max = h.scrollHeight - h.clientHeight;
      setP(max > 0 ? (h.scrollTop / max) * 100 : 0);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return p;
}

function Topbar() {
  const tc = useTC();
  return (
    <div className="topbar">
      <div><span className="dot" />FML × QIDDIYA</div>
      <div>FOR DARREN J KERR</div>
      <div>{tc}</div>
    </div>
  );
}

function Progress() {
  const p = useProgress();
  return <div className="progress" style={{ width: p + '%' }} />;
}

function ThemeToggle() {
  const [theme, setTheme] = useState(() => {
    try { return localStorage.getItem('darren-deck-theme') || 'dark'; } catch { return 'dark'; }
  });
  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
    try { localStorage.setItem('darren-deck-theme', theme); } catch {}
  }, [theme]);
  const next = theme === 'dark' ? 'light' : 'dark';
  return (
    <button
      className="theme-toggle"
      onClick={() => setTheme(next)}
      title={`Switch to ${next} theme`}
      aria-label={`Switch to ${next} theme`}
    >
      {theme === 'dark' ? '☼' : '☾'}
    </button>
  );
}

// ── Cover ────────────────────────────────────────────────────
function Cover() {
  return (
    <section className="cover">
      <video className="cover-bg" src="assets/gooh-diriyah.mp4" autoPlay loop muted playsInline />
      <div className="cover-bg-tint" />
      <div className="cover-top">
        <div>Feed Me Light</div>
        <div>2026 · 05 · 11</div>
      </div>
      <div className="cover-mid">
        <div className="cover-meet">Great to meet at Crown Plaza · Riyadh</div>
        <h1 className="cover-title">
          From brand book<br/>
          to <em>brand at scale.</em>
        </h1>
        <div className="cover-sub">
          A short note on what we'd love to build with you next.
          AI-trained design, GOOH for every screen, async by default.
        </div>
      </div>
      <div className="cover-bot">
        <div>Pitch · Capabilities</div>
        <div>For your eyes only</div>
        <div>Scroll ↓</div>
      </div>
    </section>
  );
}

// ── Where we are today ─────────────────────────────────────
function WhereWeAre() {
  return (
    <section className="s">
      <div className="s-tag">01 — Where we are today</div>
      <h2 className="h-1">
        You've already seen<br/>
        the foundation working.
      </h2>
      <div className="col-2" style={{ marginTop: '56px' }}>
        <div>
          <p className="lede dim">
            The Qiddiya brand guidelines live at <a className="accent" href="https://qiddiya.feedmelight.com" target="_blank" rel="noreferrer">qiddiya.feedmelight.com</a>.
            Inside, a quiet thing we're proud of: the procedural pattern generator
            you reacted to. Scarps, F1 tyres, horseshoes — Qiddiya brand elements,
            recombined by code, controllable through a click-and-drag interface.
          </p>
          <p className="lede dim" style={{ marginTop: '20px' }}>
            That tool was a beginning. This deck is about the rest of it.
          </p>
          <div className="chip-row">
            <span className="chip">Brand Guidelines</span>
            <span className="chip">Always-On Strategy</span>
            <span className="chip">Procedural Tools (WIP)</span>
            <span className="chip">Cityscape 2025</span>
          </div>
        </div>
        <div>
          <figure className="asset wide">
            <img src="assets/pattern-generator.png" alt="Pattern generator UI from the Qiddiya brand guidelines" />
            <figcaption>Pattern generator · Qiddiya brand guidelines §4.3</figcaption>
          </figure>
        </div>
      </div>
    </section>
  );
}

// ── The problem (their own words) ──────────────────────────
function ProblemQuote() {
  return (
    <section className="s">
      <div className="s-tag">02 — The wedge</div>
      <h2 className="h-1">A line in the Always-On deck we keep coming back to.</h2>
      <div className="callout">
        "Content creation is slow, tool-dependent, and often falls on a few
        individuals. This limits spontaneity, experimentation, and the ability
        to respond to trends — making content feel static and less playful."
        <span className="src">From FML × Qiddiya Always-On · §4.1</span>
      </div>
      <p className="lede dim" style={{ marginTop: '12px' }}>
        Qiddiya City has Six Flags, Aquarabia, the F1 plan, the city itself.
        Marketing has to feed many surfaces, every week, in two languages, at
        the pace of a destination that's opening in real time. Manual creative
        production can't keep up with that brief. That's the problem we want
        to solve next, properly.
      </p>
    </section>
  );
}

// ── AI-trained design ──────────────────────────────────────
function AITrained() {
  return (
    <section className="s">
      <div className="s-tag">03 — Trained design</div>
      <h2 className="h-1">
        Teach the Qiddiya brand to a model.<br/>
        Then ask it for a campaign.
      </h2>
      <div className="col-2" style={{ marginTop: '48px' }}>
        <div>
          <p className="lede dim">
            We fine-tune image models on Qiddiya's actual brand: colour, type,
            mark, motion language, photography conventions, the existing
            Always-On tone. The output isn't generic AI — it's <span className="accent">on-brand AI</span>.
            A brief that used to mean five days of design + revisions becomes
            a morning of generation + selection.
          </p>
          <p className="lede dim" style={{ marginTop: '20px' }}>
            Same workflow as the procedural pattern generator. Same philosophy:
            anyone on the marketing team can produce on-brand content without
            needing Photoshop, Illustrator, or a queue. The brand stays the
            authority. The team stays the editor.
          </p>
        </div>
        <div>
          <figure className="asset square">
            <img src="assets/qiddiya-map.webp" alt="Qiddiya City — surface map" />
            <figcaption>One brand, many surfaces · Qiddiya City</figcaption>
          </figure>
        </div>
      </div>
      <div className="chip-row">
        <span className="chip">LoRA / DreamBooth</span>
        <span className="chip">Brand-style transfer</span>
        <span className="chip">Photography brief consistency</span>
        <span className="chip">Bilingual layouts</span>
        <span className="chip">Operator UI, not prompt engineering</span>
      </div>
    </section>
  );
}

// ── Meet GOOH ──────────────────────────────────────────────
function MeetGOOH() {
  return (
    <section className="s">
      <div className="s-tag">04 — GOOH</div>
      <h2 className="h-1">
        Then GOOH puts it on every screen.
      </h2>
      <p className="lede" style={{ marginTop: '24px', color: 'var(--fg-dim)' }}>
        GOOH is FML's site-specific DOOH platform. A unique data matrix for
        every screen — its 3D geometry, viewing angle, ambient light. Generated
        content arrives pre-formatted for the actual surface, not generically
        cropped to it. Already running across Riyadh (Diriyah, KAFD Mezapole,
        Rosh Front Bulkhead, King Fahd Bridge, Curved Riyadh Airport), Jeddah,
        London, Berlin, Manchester, Melbourne, New York.
      </p>
      <div className="stats">
        <div className="stat">
          <div className="n">∞</div>
          <div className="l">Sites supported<br/>per campaign</div>
        </div>
        <div className="stat">
          <div className="n">3D</div>
          <div className="l">Site-specific<br/>geometry baked in</div>
        </div>
        <div className="stat">
          <div className="n">2D + 3D</div>
          <div className="l">Pipeline works<br/>with existing assets</div>
        </div>
        <div className="stat">
          <div className="n">Live</div>
          <div className="l">Riyadh · London<br/>NY · Berlin · Manchester</div>
        </div>
      </div>
      <div className="col-2" style={{ marginTop: '56px' }}>
        <figure className="asset">
          <video src="assets/gooh-diriyah.mp4" autoPlay loop muted playsInline />
          <figcaption>GOOH · Diriyah, Riyadh</figcaption>
        </figure>
        <figure className="asset">
          <img src="assets/gooh-mezapole-kafd.png" alt="GOOH at KAFD Mezapole, Riyadh" />
          <figcaption>GOOH · KAFD Mezapole, Riyadh</figcaption>
        </figure>
      </div>
      <figure className="asset wide" style={{ marginTop: '24px' }}>
        <img src="assets/gooh-rosh-front-v2.png" alt="GOOH at Rosh Front Bulkhead, Riyadh" />
        <figcaption>GOOH · Rosh Front Bulkhead, Riyadh</figcaption>
      </figure>
    </section>
  );
}

// ── End-to-end pipeline ────────────────────────────────────
function Pipeline() {
  const steps = [
    { num: '01', name: 'Brief', desc: 'Campaign idea, audience, channel mix. Half a page, no PowerPoint.' },
    { num: '02', name: 'Generate', desc: 'Fine-tuned Qiddiya model produces 100s of on-brand variants. Team selects the strong ones.' },
    { num: '03', name: 'Format', desc: 'GOOH adapts the master to every screen and aspect — site-specific geometry, not cropping.' },
    { num: '04', name: 'Deploy', desc: 'Pre-flighted assets handed to media partners. Ready to schedule the same week.' },
  ];
  return (
    <section className="s">
      <div className="s-tag">05 — How it fits together</div>
      <h2 className="h-1">
        One pipeline, brief to billboard,<br/>
        four touches not forty.
      </h2>
      <div className="steps">
        {steps.map(s => (
          <div className="step" key={s.num}>
            <div className="num">{s.num}</div>
            <div className="name">{s.name}</div>
            <div className="desc">{s.desc}</div>
          </div>
        ))}
      </div>
      <p className="lede dim" style={{ marginTop: '40px', maxWidth: '70ch' }}>
        The point isn't speed for its own sake. It's giving the marketing team
        space for the bit that actually matters — judgment, taste, the call
        on what makes a Qiddiya moment land.
      </p>
    </section>
  );
}

// ── Worked example ───────────────────────────────────────
function WorkedExample() {
  const days = [
    { d: 'Day 1', title: 'Brief', body: 'Six Flags Eid weekend push. Half-page from your team — audience, dates, channels, one tonal cue.' },
    { d: 'Day 2', title: 'Generate', body: '300 variants from the fine-tuned Qiddiya model. Your team selects 12. We refine 4.' },
    { d: 'Day 3', title: 'Format', body: 'GOOH adapts the four masters to 26 placements: King Fahd Bridge bulkhead, Mezapole, Riyadh airport curve, plus social, in-park screens, app.' },
    { d: 'Day 4', title: 'QA · sign-off', body: 'Bilingual proof, brand-compliance check, sign-off built into the share link. No PDF round-trips.' },
    { d: 'Day 5', title: 'Live', body: 'Pre-flighted bundles delivered to media. Up by Friday evening.' },
  ];
  return (
    <section className="s">
      <div className="s-tag">06 — A worked example</div>
      <h2 className="h-1">
        Hypothetical:<br/>
        a Six Flags Eid push in five days.
      </h2>
      <p className="lede dim" style={{ marginTop: '24px', maxWidth: '64ch' }}>
        Made up, but realistic. Same shape as work we already deliver in Riyadh.
        The numbers below assume the fine-tuned model is in place — month two onwards.
      </p>
      <div className="example">
        {days.map((day) => (
          <div className="day" key={day.d}>
            <div className="d">{day.d}</div>
            <div className="t">{day.title}</div>
            <div className="b">{day.body}</div>
          </div>
        ))}
      </div>
      <div className="example-foot">
        <div>
          <div className="ef-n">26</div>
          <div className="ef-l">Placements delivered</div>
        </div>
        <div>
          <div className="ef-n">5 days</div>
          <div className="ef-l">Brief to live</div>
        </div>
        <div>
          <div className="ef-n">1 reviewer</div>
          <div className="ef-l">From your team needed</div>
        </div>
      </div>
    </section>
  );
}

// ── Selected work ────────────────────────────────────────
function SelectedWork() {
  const work = [
    { asset: 'assets/work-pif.jpg', title: 'PIF', meta: 'Piccadilly Lights + Riyadh Boulevard · 2024', why: 'Anamorphic 3D content built to the millimetre for Piccadilly\'s curved LED, then deployed across Riyadh Boulevard and global landmark screens. Multiple executions, one brand system.' },
    { asset: 'assets/work-fifa-wc.jpg', title: 'FIFA World Cup', meta: 'Doha · 2022', why: 'Full content portfolio — opening ceremony cinematic, social, OOH, broadcast, projection-mapping countdowns globally. 1.5B+ cumulative audience. Not a supplier; the team running it.' },
    { asset: 'assets/work-afc-asia.jpg', title: 'AFC Asian Cup — Mascot Hologram', meta: 'Doha · 2023', why: 'Holographic content for the official mascot reveal. Regional broadcast plus live in-venue scale.' },
    { asset: 'assets/work-alton-towers.jpg', title: 'Alton Towers — Nemesis Reborn', meta: 'UK · 2024 · DOOH + anamorphic', why: 'Theme-park coaster reopening, the same campaign shape as Six Flags Qiddiya or Aquarabia launches.' },
    { asset: 'assets/work-royal-enfield.jpg', title: 'Royal Enfield 125 Years', meta: 'London · 2025 · Anamorphic OOH + sculpture', why: 'Anamorphic motorcycle sculpture for landmark screens. Lifted Royal Enfield UK brand search 4× in the activation window.' },
    { asset: 'assets/work-kc-chiefs.jpg', title: 'Kansas City Chiefs — Chief Kingdom', meta: 'Europe · 2025', why: 'Mascot activation taking NFL fandom outside the US — sports-brand audience expansion playbook.' },
  ];
  return (
    <section className="s">
      <div className="s-tag">07 — Selected work</div>
      <h2 className="h-1">
        Six pieces that map to what you'd be hiring us for.
      </h2>
      <p className="lede dim" style={{ marginTop: '24px', maxWidth: '64ch' }}>
        Not a credentials parade. Each tile picks at one corner of the Qiddiya
        brief: a Saudi sovereign client, regional sports scale, theme-park
        relaunch, site-specific OOH craft.
      </p>
      <div className="work-grid">
        {work.map((w) => (
          <figure className="work" key={w.title}>
            <img src={w.asset} alt={w.title} loading="lazy" />
            <figcaption>
              <div className="w-t">{w.title}</div>
              <div className="w-m">{w.meta}</div>
              <div className="w-w">{w.why}</div>
            </figcaption>
          </figure>
        ))}
      </div>
      <p className="lede dim" style={{ marginTop: '40px', maxWidth: '60ch' }}>
        Full case studies at <a className="accent" href="https://experience.feedmelight.com" target="_blank" rel="noreferrer">experience.feedmelight.com</a>.
      </p>
    </section>
  );
}

// ── How we work — async cadence ───────────────────────────
function HowWeWork() {
  return (
    <section className="s">
      <div className="s-tag">08 — How we work</div>
      <h2 className="h-1">
        Async by default.<br/>
        Calls reserved for the calls that matter.
      </h2>
      <p className="lede dim" style={{ marginTop: '24px', maxWidth: '64ch' }}>
        Qiddiya's leadership time is the scarcest resource on this project.
        We treat it that way. The default cadence:
      </p>
      <div className="cadence">
        <div>
          <div className="when">Every Thursday</div>
          <div className="what">Weekly video update</div>
          <div className="how">
            5–7 minutes, recorded. Walk through what shipped, what's queued,
            what we're stuck on. Same time every week. Watchable on a phone
            between meetings.
          </div>
        </div>
        <div>
          <div className="when">Always live</div>
          <div className="what">Project board</div>
          <div className="how">
            Notion or Linear, your call. Reflects reality, not status games.
            One look tells you where every workstream is.
          </div>
        </div>
        <div>
          <div className="when">When it matters</div>
          <div className="what">Calls for decisions only</div>
          <div className="how">
            No status calls. We book a call when there's a creative call
            to make, an approval to land, or a problem worth two heads.
          </div>
        </div>
      </div>
      <p className="lede dim" style={{ marginTop: '40px', maxWidth: '60ch' }}>
        The video updates are recorded, transcribed, and searchable. So when
        someone joins the Qiddiya team in month six, they can scrub back
        through everything we've done and catch up in an afternoon.
      </p>
    </section>
  );
}

// ── About FML — light credentials ──────────────────────────
function AboutFML() {
  const caps = [
    { name: 'Experiential content', note: 'Opening ceremonies · brand films · in-park' },
    { name: 'Brand systems', note: 'Guidelines · tooling · always-on toolkits' },
    { name: 'GOOH platform', note: 'Site-specific DOOH at scale' },
    { name: 'Procedural design tools', note: 'Custom utilities for marketing teams' },
    { name: 'Bilingual production', note: 'EN/AR · regional cultural fluency' },
    { name: 'Live event delivery', note: 'FIFA WC 22 · AFC Asia Cup 23 · ongoing' },
  ];
  return (
    <section className="s">
      <div className="s-tag">09 — About FML</div>
      <h2 className="h-1">
        Studio in London.<br/>
        Studio in Riyadh.<br/>
        Same team.
      </h2>
      <div className="col-2 tight" style={{ marginTop: '40px' }}>
        <div>
          <p className="lede dim">
            Feed Me Light is a 10-year-old creative company that makes work for
            the biggest screens and events in the world. <span className="accent">FML Creative Arabia</span> is
            the Riyadh entity, on the ground, working in Saudi pace and Saudi context.
            We're a small enough team to know what each other's working on, large
            enough to deliver at city scale.
          </p>
          <p className="lede dim" style={{ marginTop: '20px' }}>
            We don't pitch ourselves as an agency. We're a studio that builds
            tools and ships experiences.
          </p>
        </div>
        <div className="stats" style={{ marginTop: 0 }}>
          <div className="stat">
            <div className="n">800M</div>
            <div className="l">FIFA WC 2022<br/>global broadcast reach</div>
          </div>
          <div className="stat">
            <div className="n">10+ yrs</div>
            <div className="l">Big-screen + event<br/>delivery</div>
          </div>
        </div>
      </div>
      <div className="caps">
        {caps.map(c => (
          <div className="cap" key={c.name}>
            <div className="name">{c.name}</div>
            <div className="note">{c.note}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ── Closer ────────────────────────────────────────────────
function Closer() {
  return (
    <section className="s">
      <div className="s-tag">10 — What's next</div>
      <h2 className="h-display">
        Let's keep<br/>
        the conversation<br/>
        going.
      </h2>
      <div className="closer" style={{ marginTop: '60px' }}>
        <div>
          <p className="lede">
            Happy to walk you through any section in person. Or — if it suits
            the Qiddiya rhythm better — we can record the walk-through and
            send it.
          </p>
          <p className="lede dim" style={{ marginTop: '20px' }}>
            Whichever moves faster for you.
          </p>
        </div>
        <div className="contact">
          <div>
            <div className="name">Denis Bodart</div>
            <div className="role">Founder &amp; CEO</div>
            <a href="mailto:denis@feedmelight.com">denis@feedmelight.com</a>
          </div>
          <div>
            <div className="name">Kiri Haggart</div>
            <div className="role">Co-founder &amp; CEO</div>
            <a href="mailto:kiri@feedmelight.com">kiri@feedmelight.com</a>
          </div>
          <div style={{ marginTop: '8px' }}>
            <a href="https://feedmelight.com" target="_blank" rel="noreferrer">feedmelight.com</a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── App ───────────────────────────────────────────────────
function App() {
  return (
    <>
      <Progress />
      <Topbar />
      <ThemeToggle />
      <Cover />
      <WhereWeAre />
      <ProblemQuote />
      <AITrained />
      <MeetGOOH />
      <Pipeline />
      <WorkedExample />
      <SelectedWork />
      <HowWeWork />
      <AboutFML />
      <Closer />
      <footer className="foot">
        <div>FML × Qiddiya</div>
        <div>For Darren J Kerr</div>
        <div>v1 · 2026.05.11</div>
      </footer>
    </>
  );
}

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