/* global React */
// Rayu.ai — investor pitch deck, served at #/deck.
// Full-screen slide viewer: arrow keys / on-screen arrows / dots / swipe.
// Dark editorial styling (see deck.css) matching the site brand. Content is the
// pre-seed deck, cleaned up. Unlisted: reachable only by the #/deck path.

const { useState: useDeckState, useEffect: useDeckEffect, useRef: useDeckRef, useCallback: useDeckCb } = React;

function DeckKicker({ children }) {
  return <div className="deck-kicker">{children}</div>;
}

/* Each entry: { label, node }. Nodes are static JSX (no state). */
const DECK_SLIDES = [
  // 1 — Cover
  {
    label: "Cover",
    node: (
      <section className="deck-slide deck-cover">
        <div className="deck-orb" aria-hidden="true" />
        <div className="deck-cover-in">
          <div className="deck-eyebrow">Pre-seed Investment Deck · May 2026</div>
          <h1 className="deck-script">Nutrition for the<br />Agentic Era</h1>
          <img className="deck-cover-logo" src="assets/logo-white.png" alt="Rayu.ai" />
        </div>
      </section>
    ),
  },

  // 2 — Problem
  {
    label: "Problem",
    node: (
      <section className="deck-slide">
        <DeckKicker>The shift</DeckKicker>
        <h2 className="deck-title">Nutrition guidance<br />is changing.</h2>
        <div className="deck-cols2">
          <div className="deck-card">
            <h3>Trainers &amp; nutritionists exist, right?</h3>
            <p>Human nutritionists are expensive, slow, and hard to access — often <b>$80–150 per session</b>, booked weeks out, and still delivering static meal plans that don't fit daily life.</p>
          </div>
          <div className="deck-card">
            <h3>Consumers are agent-ready. Agents are not.</h3>
            <p>Tools like ChatGPT are reactive, prompted, and disconnected from live health context. They keep <b>no persistent memory of you</b> — every chat starts from scratch — and have <b>no collective learning</b> across users. They can't track goals, adapt as your body changes, or act on your behalf. <b>Almost 40% of UK adults</b> have already used ChatGPT for some form of health or wellness coaching.</p>
          </div>
        </div>
        <p className="deck-underline">The next shift is <b>agentic</b>: services that don't wait for prompts, but work alongside you 24/7 — monitoring, advising, and helping you live a healthy life.</p>
        <div className="deck-cite">Source: AISI Frontier AI Trends Report</div>
      </section>
    ),
  },

  // 3 — Introducing
  {
    label: "Introducing",
    node: (
      <section className="deck-slide deck-intro">
        <video className="deck-intro-vid" src="assets/rayu_scroll.mp4" autoPlay muted loop playsInline preload="auto" aria-hidden="true" />
        <div className="deck-intro-veil" aria-hidden="true" />
        <div className="deck-intro-in">
          <div className="deck-eyebrow">Introducing</div>
          <img className="deck-intro-logo" src="assets/logo-white.png" alt="Rayu.ai" />
          <div className="deck-intro-tag">The nutritionist for the agentic age.</div>
        </div>
      </section>
    ),
  },

  // 4 — The Product
  {
    label: "Product",
    node: (
      <section className="deck-slide">
        <DeckKicker>How it works</DeckKicker>
        <h2 className="deck-title small">The Product.</h2>
        <div className="deck-grid4">
          <div className="deck-card">
            <h3><span className="deck-dot" />Talk to Rayu <em>· message or live voice</em></h3>
            <p>Natural dialogue helps Rayu understand your goals, preferences, lifestyle and dietary restrictions. She guides, advises, reads photos of food and packaging, and holds full conversations — like a trainer would.</p>
          </div>
          <div className="deck-card">
            <h3><span className="deck-dot" />Food Diary <em>· not a meal logger</em></h3>
            <p>Gentle nudges: a voice note for the whole day, once a day, or a photo of your meal. Rayu analyses portions, macros and nutrition instantly — with ideas and nudges to hit your goals.</p>
          </div>
          <div className="deck-card">
            <h3><span className="deck-dot" />Personalised &amp; global learning</h3>
            <p>An advanced memory layer learns constantly — even how you like to be advised. Rayu gets smarter with every user globally, sharing what works between people on similar paths.</p>
          </div>
          <div className="deck-card">
            <h3><span className="deck-dot" />Wearable data feed <em>· optional</em></h3>
            <p>Continuous biometric monitoring captures activity, sleep, heart rate, stress and menstrual cycle — shaping your macros and how Rayu advises. Works with partner bands, or standalone.</p>
          </div>
        </div>
        <div className="deck-chips">
          <span className="deck-chip"><b>rayu.ai app</b> — €12.99/mo · 3-day free trial</span>
          <span className="deck-chip"><b>Optional wearable</b> — €99 · 3 months included</span>
        </div>
      </section>
    ),
  },

  // 5 — Collective Learning
  {
    label: "Collective learning",
    node: (
      <section className="deck-slide">
        <DeckKicker>How it works</DeckKicker>
        <h2 className="deck-title small">Collective Learning.</h2>
        <p className="deck-lede">A continuous AI nutritionist that learns what works — and drives daily outcomes.</p>
        <div className="deck-personas">
          {[
            { i: "J", n: "Julie, 34", d: "Weight loss, hates nuts, poor sleep, sugar cravings, eats late." },
            { i: "N", n: "Neil, 29", d: "Muscle gain, trains a lot, poor sleep, methodical, binges beer on weekends." },
            { i: "M", n: "Mary, 46", d: "Post-op recovery, told to eat healthy by her doctor, struggles to find good options out of the house all day." },
          ].map((p) => (
            <div className="deck-persona" key={p.i}>
              <div className="deck-avatar">{p.i}</div>
              <div className="deck-persona-name">{p.n}</div>
              <div className="deck-persona-desc">{p.d}</div>
            </div>
          ))}
        </div>
        <div className="deck-two-notes">
          <div><span className="deck-tag">Individually personalised</span> Language, tone, timing and advice tuned to each person's conversations, meals and wearable data.</div>
          <div><span className="deck-tag">Collective learning</span> Rayu learns what actually works across users — and applies it to similar users automatically.</div>
        </div>
      </section>
    ),
  },

  // 6 — Advanced AI
  {
    label: "Advanced AI",
    node: (
      <section className="deck-slide">
        <DeckKicker>How it works</DeckKicker>
        <h2 className="deck-title small">Advanced AI.</h2>
        <div className="deck-cols3">
          <div className="deck-card">
            <h3>Not an LLM wrapper</h3>
            <p>A proprietary intelligence layer controls how AI is used. Every interaction is built on a structured evidence system — goals, behaviour, health constraints, meals eaten, past conversations and wearable metrics — before any model is called.</p>
          </div>
          <div className="deck-card">
            <h3>Deterministic, not guesswork</h3>
            <p>Core decisions are made by deterministic systems, not language models. Rayu operates within rules, thresholds and controlled logic, so outputs are consistent, auditable and reliable.</p>
          </div>
          <div className="deck-card">
            <h3>A compounding data moat</h3>
            <p>Rayu builds a persistent memory graph, learns from corrections and behaviour, and adapts — a personalised health model per user and a proprietary dataset that gets more valuable and harder to replicate with every interaction.</p>
          </div>
        </div>
        <p className="deck-pull">"Imagine a nutritionist with 500,000 clients — who remembers every one, but learns collectively."</p>
      </section>
    ),
  },

  // 7 — Vision
  {
    label: "Vision",
    node: (
      <section className="deck-slide deck-vision">
        <DeckKicker>The vision</DeckKicker>
        <blockquote className="deck-quote">
          We believe in an <em>agent-first world</em>, where your personal nutritionist understands you, supports you, and connects to your world — ordering food, reading medical records, driving prevention, and much more. It has one core goal: <em>for you not to die.</em>
        </blockquote>
      </section>
    ),
  },

  // 8 — Go to Market
  {
    label: "Go to market",
    node: (
      <section className="deck-slide">
        <DeckKicker>Go to market</DeckKicker>
        <h2 className="deck-title small">Go to Market.</h2>
        <div className="deck-audiences">
          <div className="deck-card slim"><h3>Medical requirements</h3><p>Critical need, high trust, long-term retention — often already tracking or getting support. A natural switch-over.</p></div>
          <div className="deck-card slim"><h3>Already coached</h3><p>Those with a trainer, advice service or meal plan. A habit switch, as Rayu is better and cheaper.</p></div>
        </div>
        <div className="deck-funnel">
          <div className="deck-stage-col">
            <div className="deck-stage-h"><span>1</span> Acquire</div>
            <ul>
              <li>Paid ads — Meta, TikTok &amp; Google</li>
              <li>10 gym partnerships with QR downloads</li>
              <li>15 fitness micro-influencers w/ free bands</li>
              <li>Target CAC: <b>&lt;$10</b></li>
            </ul>
          </div>
          <div className="deck-stage-col">
            <div className="deck-stage-h"><span>2</span> Convert</div>
            <ul>
              <li><b>App-first</b> — download → 3-day trial → auto-convert</li>
              <li><b>Hardware-led</b> — buy band (3 months free) → onboard → higher retention</li>
              <li>Compare retention at 3 months</li>
            </ul>
          </div>
          <div className="deck-stage-col">
            <div className="deck-stage-h"><span>3</span> Learn &amp; scale</div>
            <ul>
              <li>Measure CAC by channel</li>
              <li>Track trial → paid</li>
              <li>Analyse retention after 3 months</li>
              <li>Double down on best channels</li>
            </ul>
          </div>
        </div>
      </section>
    ),
  },

  // 9 — Traction
  {
    label: "Traction",
    node: (
      <section className="deck-slide">
        <DeckKicker>Where we are</DeckKicker>
        <h2 className="deck-title small">Traction.</h2>
        <div className="deck-timeline">
          {[
            { n: "01", s: "Complete", t: "v0.1 build & AI engine testing" },
            { n: "02", s: "Complete", t: "Launch v1 — 300 test users" },
            { n: "03", s: "We are here", t: "F100 alpha users + 1,000 on the waitlist", here: true },
            { n: "04", s: "In progress", t: "1,000 paying users · CAC <$12 · LTV $40" },
            { n: "05", s: "Next", t: "2,000 paying users · CAC:LTV 1:6" },
          ].map((m) => (
            <div className={`deck-tl-item${m.here ? " here" : ""}`} key={m.n}>
              <div className="deck-tl-n">{m.n}</div>
              <div className="deck-tl-s">{m.s}</div>
              <div className="deck-tl-t">{m.t}</div>
            </div>
          ))}
        </div>
        <div className="deck-metrics">
          <div className="deck-metric"><div className="deck-metric-n">42%</div><div className="deck-metric-l">still using after 7 days</div></div>
          <div className="deck-metric"><div className="deck-metric-n">56%</div><div className="deck-metric-l">daily active — opening every day</div></div>
          <div className="deck-metric"><div className="deck-metric-n">1,000</div><div className="deck-metric-l">on the waitlist</div></div>
        </div>
      </section>
    ),
  },

  // 10 — Market size
  {
    label: "Market size",
    node: (
      <section className="deck-slide">
        <DeckKicker>Opportunity</DeckKicker>
        <h2 className="deck-title small">Market size.</h2>
        <div className="deck-market">
          <div className="deck-mstat">
            <div className="deck-mstat-n">$50B+</div>
            <p>US &amp; Europe paid-guidance market. Individuals pay $100–150+ per session for expert advice.</p>
          </div>
          <div className="deck-mstat">
            <div className="deck-mstat-n">$500–2k</div>
            <p>Spent per year on coaching, diet plans and consultations. A repeatable buying habit.</p>
          </div>
          <div className="deck-mstat">
            <div className="deck-mstat-n">120M+</div>
            <p>Europeans already use AI tools, 10–12% daily — shifting from reactive use to continuous, personalised coaching.</p>
          </div>
        </div>
      </section>
    ),
  },

  // 11 — Founders
  {
    label: "Founders",
    node: (
      <section className="deck-slide">
        <DeckKicker>Team</DeckKicker>
        <h2 className="deck-title small">The Founders.</h2>
        <div className="deck-founders">
          <div className="deck-founder">
            <img className="deck-founder-photo" src="assets/founder-rob.jpg" alt="Robert Minford" />
            <div className="deck-founder-body">
              <div className="deck-founder-name">Robert Minford</div>
              <div className="deck-founder-tags"><span>2× founder</span><span>Nutrition</span><span>AI</span></div>
              <p>A decade building startups across London, Toronto and Nairobi as founder, CTO and product leader — founding member of Filament.ai and Head of Engineering at VC-backed CyberSmart. Founder of Protein.ke, a leading East-African supplement brand across Kenya, Uganda &amp; Tanzania.</p>
            </div>
          </div>
          <div className="deck-founder">
            <img className="deck-founder-photo" src="assets/founder-sailesh.jpg" alt="Sailesh Dahal" />
            <div className="deck-founder-body">
              <div className="deck-founder-name">Sailesh Dahal</div>
              <div className="deck-founder-tags"><span>Startup building expert</span><span>AI</span></div>
              <p>AI-focused engineer, product consultant and co-founder of Launchbox, building first-version products across Ireland, London and Nairobi since 2020 — including Flexera and Solas Compliance. Leads developer communities across South Asia, including Flutter.</p>
            </div>
          </div>
        </div>
      </section>
    ),
  },

  // 12 — Hardware & supply
  {
    label: "The band & supply",
    node: (
      <section className="deck-slide">
        <DeckKicker>Hardware &amp; supply</DeckKicker>
        <h2 className="deck-title small">Sourced, funded, shipping.</h2>
        <div className="deck-supply">
          <div className="deck-supplier-photo" role="img" aria-label="Founders on-site at Valdus / Shengye Technology">
            <span className="deck-supplier-cap">Founders on-site · Valdus (Shengye Technology)</span>
          </div>
          <div className="deck-supply-points">
            <div className="deck-card slim"><h3>Supplier in place</h3><p>Manufacturing partner secured with Valdus / Shengye Technology. We've visited on-site and agreed a product roadmap together.</p></div>
            <div className="deck-card slim"><h3>500 units already shipping</h3><p>500 v1 bands paid for and en route from China — <b>~$110k in planned revenue</b> once sold.</p></div>
            <div className="deck-card slim"><h3>Premium band next</h3><p>This raise funds a premium band design and a <b>3,000-unit</b> first production run (MOQ).</p></div>
          </div>
        </div>
      </section>
    ),
  },

  // 13 — The Ask
  {
    label: "The ask",
    node: (
      <section className="deck-slide">
        <DeckKicker>The ask</DeckKicker>
        <h2 className="deck-title small">Raising <span className="deck-accent">€350k</span> pre-seed.</h2>
        <p className="deck-lede">Self-funded to date — this is our first outside financing. Artificial Intelligence Nutrition Limited is registered in Ireland; 75% is held by Robert Minford, an Irish citizen.</p>
        <div className="deck-funds two">
          <div className="deck-fund"><div className="deck-fund-n">€110k</div><h4>Premium band + first run</h4><p>Design a premium band and produce 3,000 units (MOQ). Supplier in place, roadmap agreed.</p></div>
          <div className="deck-fund"><div className="deck-fund-n">€240k</div><h4>Growth · over 12 months</h4><p>Marketing, user acquisition and proprietary AI advancement — driving CAC toward €10 and a CAC:LTV of 1:5+.</p></div>
        </div>
        <p className="deck-ask-line"><span>Already in motion:</span> <b>500 v1 bands shipping · ~$110k planned revenue.</b></p>
      </section>
    ),
  },

  // 13 — Close
  {
    label: "Thank you",
    node: (
      <section className="deck-slide deck-close">
        <div className="deck-orb small" aria-hidden="true" />
        <div className="deck-cover-in">
          <div className="deck-script small">Nutrition for the<br />agentic era.</div>
          <div className="deck-wordmark">Rayu<span>.ai</span></div>
          <div className="deck-contact">
            <a href="mailto:hello@rayu.ai">hello@rayu.ai</a>
            <span>·</span>
            <a href="tel:+442083428735">0208 342 8735</a>
            <span>·</span>
            <a href="https://www.rayu.ai">www.rayu.ai</a>
          </div>
        </div>
      </section>
    ),
  },
];

function Deck() {
  const [cur, setCur] = useDeckState(0);
  const n = DECK_SLIDES.length;
  const go = useDeckCb((i) => setCur(Math.max(0, Math.min(n - 1, i))), [n]);
  const next = useDeckCb(() => setCur((c) => Math.min(n - 1, c + 1)), [n]);
  const prev = useDeckCb(() => setCur((c) => Math.max(0, c - 1)), []);

  useDeckEffect(() => {
    const prevTitle = document.title;
    document.title = "Rayu.ai — Investor Deck";
    const onKey = (e) => {
      if (e.key === "ArrowRight" || e.key === "PageDown" || e.key === " ") { e.preventDefault(); next(); }
      else if (e.key === "ArrowLeft" || e.key === "PageUp") { e.preventDefault(); prev(); }
      else if (e.key === "Home") go(0);
      else if (e.key === "End") go(n - 1);
    };
    window.addEventListener("keydown", onKey);
    window.scrollTo(0, 0);
    return () => { window.removeEventListener("keydown", onKey); document.title = prevTitle; };
  }, [next, prev, go, n]);

  const touchX = useDeckRef(null);
  const onTouchStart = (e) => { touchX.current = e.touches[0].clientX; };
  const onTouchEnd = (e) => {
    if (touchX.current == null) return;
    const dx = e.changedTouches[0].clientX - touchX.current;
    if (Math.abs(dx) > 55) { if (dx < 0) next(); else prev(); }
    touchX.current = null;
  };

  return (
    <div className="deck-root" onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>
      <a className="deck-home" href="#/" aria-label="Back to rayu.ai">Rayu<span>.ai</span></a>
      <div className="deck-progress"><div className="deck-progress-fill" style={{ width: `${((cur + 1) / n) * 100}%` }} /></div>

      <div className="deck-stage">
        {DECK_SLIDES.map((s, i) => (
          <div
            key={i}
            className={`deck-slidewrap ${i === cur ? "on" : i < cur ? "was" : "next"}`}
            aria-hidden={i !== cur}
          >
            {s.node}
          </div>
        ))}
      </div>

      <button className="deck-arrow left" onClick={prev} disabled={cur === 0} aria-label="Previous slide">‹</button>
      <button className="deck-arrow right" onClick={next} disabled={cur === n - 1} aria-label="Next slide">›</button>

      <div className="deck-foot">
        <div className="deck-dots">
          {DECK_SLIDES.map((s, i) => (
            <button key={i} className={i === cur ? "on" : ""} onClick={() => go(i)} aria-label={`Go to slide ${i + 1}: ${s.label}`} />
          ))}
        </div>
        <div className="deck-count">{String(cur + 1).padStart(2, "0")} / {String(n).padStart(2, "0")}</div>
      </div>
    </div>
  );
}

Object.assign(window, { Deck });