// Noodle Seed — Investor Deck Slides v3 (minimal)

const TYPE_SCALE = {
  display: 128,
  hero: 96,
  title: 64,
  subtitle: 44,
  lead: 36,
  body: 30,
  small: 24,
  tiny: 18,
  eyebrow: 20
};

const SPACING = {
  paddingTop: 100,
  paddingBottom: 90,
  paddingX: 120,
  titleGap: 52,
  itemGap: 28,
  gutter: 48
};

const COLORS = {
  bg: "#fafaf9",
  bgSubtle: "#fafaf9",
  bgMuted: "#f5f5f4",
  ink: "#0c0a09",
  ink2: "#44403c",
  ink3: "#57534e",
  muted: "#78716c",
  muted2: "#a8a29e",
  line: "#e7e5e4",
  line2: "#d6d3d1",
  accent: "#f97316",
  accentRose: "#f43f5e",
  accentAmber: "#f59e0b",
  accentSoft: "#fff7ed",
  gradientWarm: "linear-gradient(90deg, #f97316, #f43f5e, #f59e0b)",
  darkBg: "#0c0a09",
  darkInk: "#fafaf9",
  darkMuted: "#a8a29e",
  darkLine: "#292524"
};

// ── Primitives ──────────────────────────────────────────────

const SlideFrame = ({ children, bg = COLORS.bg, ink = COLORS.ink, padded = true, style = {} }) =>
<div style={{
  width: "100%", height: "100%", background: bg, color: ink,
  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
  padding: padded ? `${SPACING.paddingTop}px ${SPACING.paddingX}px ${SPACING.paddingBottom}px` : 0,
  position: "relative", overflow: "hidden", boxSizing: "border-box", ...style, fontSize: "78px"
}}>
    {children}
  </div>;


const Eyebrow = ({ children, dark = false, style = {} }) =>
<div style={{
  fontSize: TYPE_SCALE.eyebrow, fontWeight: 500, letterSpacing: "0.14em",
  textTransform: "uppercase", color: dark ? COLORS.darkMuted : COLORS.muted, ...style
}}>{children}</div>;


const Serif = ({ children, style = {} }) =>
<span style={{ fontFamily: "'Instrument Serif', Georgia, serif", fontStyle: "italic", fontWeight: 400, ...style }}>
    {children}
  </span>;


const SlideFooter = ({ index, total, section, dark = false }) => {
  const ink = dark ? COLORS.darkMuted : COLORS.muted;
  const line = dark ? COLORS.darkLine : COLORS.line;
  return (
    <div style={{
      position: "absolute", left: SPACING.paddingX, right: SPACING.paddingX, bottom: 48,
      display: "flex", justifyContent: "space-between", alignItems: "center",
      fontSize: 29, color: ink, letterSpacing: "0.08em", textTransform: "uppercase",
      fontWeight: 500, borderTop: `1px solid ${line}`, paddingTop: 18
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
        <img src="assets/justnoodleseed.svg" alt="" style={{ height: 19, display: dark ? "none" : "block" }} />
        <img src="assets/justnoodleseed-dark.svg" alt="" style={{ height: 19, display: dark ? "block" : "none" }} />
        <span style={{ opacity: 0.7 }}>June 2026</span>
      </div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 14 }}>
        <span style={{
          fontFamily: "'Instrument Serif', serif", fontStyle: "italic",
          fontSize: 33, color: COLORS.accent, fontWeight: 400, lineHeight: 1
        }}>{index == null ? "—" : String(index).padStart(2, "0")}</span>
        {section && <Eyebrow dark={dark}>{section}</Eyebrow>}
      </div>
    </div>);

};

const SectionLabel = ({ number, label, dark = false }) =>
<div style={{ display: "flex", alignItems: "baseline", gap: 20 }}>
    <span style={{
    fontFamily: "'Instrument Serif', serif", fontStyle: "italic",
    fontSize: 33, color: COLORS.accent, fontWeight: 400, lineHeight: 1
  }}>{number}</span>
    <Eyebrow dark={dark}>{label}</Eyebrow>
  </div>;


// ── 01 · Cover ──────────────────────────────────────────────

const Cover = ({ total }) =>
<SlideFrame padded={false} bg={COLORS.bg}>
    {/* Date — top right */}
    <div style={{
    position: "absolute", top: 56, right: SPACING.paddingX,
    fontSize: 26, letterSpacing: "0.12em", textTransform: "uppercase",
    color: COLORS.muted, fontWeight: 500
  }}>June · 2026</div>

    {/* Wordmark — large, left-anchored, vertically centered */}
    <div style={{
    position: "absolute", top: "50%", left: SPACING.paddingX,
    transform: "translateY(-60%)"
  }}>
      <img src="assets/noodle_seed_wordmark.svg" alt="Noodle Seed" style={{ width: 1200, display: "block" }} />
    </div>

    {/* Orange underline */}
    <div style={{
    position: "absolute", top: "calc(50% + 130px)", left: SPACING.paddingX,
    width: 1200, height: 3, background: COLORS.gradientWarm
  }} />

    {/* Subtitle — right under the orange line */}
    <div style={{
    position: "absolute", top: "calc(50% + 154px)", left: SPACING.paddingX,
    fontFamily: "'Instrument Serif', serif", fontStyle: "italic",
    color: COLORS.ink, lineHeight: 1.15, textAlign: "left",
    maxWidth: 1000, fontSize: "56px"
  }}>
      Connectivity infrastructure for the agentic era.
    </div>

    {/* Bottom bar */}
    <div style={{
    position: "absolute", bottom: 56, left: SPACING.paddingX, right: SPACING.paddingX,
    borderTop: `1px solid ${COLORS.ink2}`, paddingTop: 24,
    display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr", gap: 64, alignItems: "start"
  }}>
      <div></div>
      <div>
        <div style={{ fontSize: 24, letterSpacing: "0.14em", textTransform: "uppercase", color: COLORS.muted, fontWeight: 500, marginBottom: 10 }}>Round</div>
        <div style={{ fontSize: 32, color: COLORS.ink, fontWeight: 500 }}>$3M seed</div>
      </div>
      <div>
        <div style={{ fontSize: 30, color: COLORS.ink, fontWeight: 500, marginBottom: 4 }}>Fahd Rafi</div>
        <div style={{ fontSize: 26, color: COLORS.muted }}>Founder · fahd@noodleseed.com</div>
      </div>
    </div>
  </SlideFrame>;


// ── 02 · Thesis ─────────────────────────────────────────────

const thesisPoints = [
{
  n: "01",
  headline: "The interface is shifting.",
  body: "People will increasingly interact with the world through AI agents, not browsers or mobile apps."
},
{
  n: "02",
  headline: "The economy stays real.",
  body: "Goods and services will still be delivered by real businesses. That doesn't change."
},
{
  n: "03",
  headline: "A new layer is required.",
  body: "Businesses need to be transactable through every AI agent. That connectivity layer does not yet exist at scale. Noodle Seed builds it."
}];


const Thesis = ({ index, total }) =>
<SlideFrame bg={COLORS.bg} style={{ display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
    <div>
      <div style={{
      marginTop: 40,
      fontFamily: "'Instrument Serif', serif",
      fontStyle: "italic",

      lineHeight: 1.2,
      color: COLORS.muted,
      maxWidth: 900,
      letterSpacing: "-0.01em", fontSize: "64px"
    }}>
        Three things we believe to be true.
      </div>
    </div>

    <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, flex: 1, alignItems: "stretch", marginTop: 52, height: "600px" }}>
      {thesisPoints.map((p, i) =>
    <div key={i} style={{
      borderLeft: i === 0 ? `1px solid ${COLORS.line}` : "none",
      borderRight: `1px solid ${COLORS.line}`,
      borderTop: `1px solid ${COLORS.line}`,
      borderBottom: `1px solid ${COLORS.line}`,
      padding: "22px 36px",
      display: "flex",
      flexDirection: "column",
      gap: 16,
      background: i === 2 ? COLORS.ink : COLORS.bg, height: "600px"
    }}>
          <div style={{
        fontFamily: "'Instrument Serif', serif",
        fontStyle: "italic",
        fontSize: 89,
        lineHeight: 1,
        color: i === 2 ? COLORS.accent : COLORS.accent,
        opacity: i === 2 ? 1 : 0.35,
        fontWeight: 400
      }}>{p.n}</div>
          <div style={{
        fontSize: 48,
        fontWeight: 600,
        letterSpacing: "-0.02em",
        lineHeight: 1.15,
        color: i === 2 ? COLORS.bg : COLORS.ink,
        flex: 1
      }}>{p.headline}</div>
          <div style={{
        fontSize: 34,
        lineHeight: 1.5,
        color: i === 2 ? COLORS.muted2 : COLORS.ink3
      }}>{p.body}</div>
        </div>
    )}
    </div>

    <SlideFooter index={index} total={total} section="Thesis" />
  </SlideFrame>;


// ── 03 · Traction ───────────────────────────────────────────

const Traction = ({ index, total }) => {
  const numbers = [
  { big: "50+", unit: "apps live", detail: "On the ChatGPT App Store today." },
  { big: "1,500+", unit: "sign-ups", detail: "100+ countries" },
  { big: "#1", unit: "Product Hunt", detail: "Product of the Day, Jan 2026." },
  { big: "4", unit: "paid design partners", detail: "Private aviation (CA) · Consumer travel (DE) · Sovereign tech ecosystem (UAE) · Restaurant marketplace (CA)" }];

  return (
    <SlideFrame>
      <h2 style={{ fontSize: 89, fontWeight: 400, letterSpacing: "-0.03em", lineHeight: 1.02, margin: "32px 0 36px 0", maxWidth: 1600 }}>
        Shipping, paying, <Serif>compounding</Serif>.
      </h2>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, border: `1px solid ${COLORS.line}`, borderRadius: 24, overflow: "hidden" }}>
        {numbers.map((n, i) =>
        <div key={i} style={{
          padding: "44px 48px",
          borderRight: i % 2 === 0 ? `1px solid ${COLORS.line}` : "none",
          borderBottom: i < 2 ? `1px solid ${COLORS.line}` : "none",
          background: COLORS.bg,
          display: "flex", flexDirection: "column", justifyContent: "space-between",
          minHeight: 220
        }}>
            <div style={{ display: "flex", alignItems: "baseline", gap: 20 }}>
              <span style={{ fontSize: 119, fontWeight: 400, letterSpacing: "-0.04em", lineHeight: 0.9, color: COLORS.ink }}>{n.big}</span>
              <span style={{ fontFamily: "'Instrument Serif', serif", fontStyle: "italic", fontSize: 44, color: COLORS.muted }}>{n.unit}</span>
            </div>
            <div style={{ fontSize: 34, color: COLORS.ink2, lineHeight: 1.35, marginTop: 16 }}>{n.detail}</div>
          </div>
        )}
      </div>
      <SlideFooter index={index} total={total} section="Traction" />
    </SlideFrame>);

};

// ── 04 · Opportunity ────────────────────────────────────────

const Opportunity = ({ index, total }) => {
  const stats = [
  { v: "900M", unit: "weekly", label: "ChatGPT active users" },
  { v: "2.5B", unit: "/ day", label: "ChatGPT prompts" },
  { v: "750M", unit: "monthly", label: "Gemini active users" },
  { v: "97M", unit: "/ month", label: "MCP SDK downloads" }];

  return (
    <SlideFrame>
      <div style={{ marginTop: 48, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80 }}>
        <div>
          <h2 style={{ fontSize: 96, fontWeight: 400, letterSpacing: "-0.03em", lineHeight: 1.02, margin: 0 }}>
            AI assistants are the <Serif>new</Serif> discovery layer.
          </h2>
          <div style={{
            marginTop: 64, padding: "28px 36px", borderRadius: 20,
            background: COLORS.ink, color: COLORS.bg, maxWidth: 720
          }}>
            <div style={{ fontSize: 29, letterSpacing: "0.14em", textTransform: "uppercase", color: COLORS.muted2, fontWeight: 500, marginBottom: 10 }}>Agentic commerce TAM</div>
            <div style={{ fontSize: 38, fontWeight: 500, letterSpacing: "-0.02em" }}>
              $5.7B<span style={{ color: COLORS.muted2 }}> → </span>$65.5B
            </div>
            <div style={{ fontSize: 33, color: COLORS.muted2, marginTop: 6 }}>2025 → 2033</div>
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, alignContent: "start" }}>
          {stats.map((s, i) =>
          <div key={i} style={{
            border: `1px solid ${COLORS.line}`, borderRadius: 20, padding: "36px 32px",
            background: COLORS.bgSubtle, display: "flex", flexDirection: "column",
            justifyContent: "space-between", minHeight: 220
          }}>
              <div>
                <span style={{ fontSize: 48, fontWeight: 400, letterSpacing: "-0.03em", lineHeight: 1 }}>{s.v}</span>
                <span style={{ fontFamily: "'Instrument Serif', serif", fontStyle: "italic", fontSize: 38, color: COLORS.muted, marginLeft: 8 }}>{s.unit}</span>
              </div>
              <div style={{ fontSize: 33, color: COLORS.ink2, lineHeight: 1.35, marginTop: 16 }}>{s.label}</div>
            </div>
          )}
        </div>
      </div>
      <SlideFooter index={index} total={total} section="Opportunity" />
    </SlideFrame>);

};

// ── 05 · Product ────────────────────────────────────────────

const Product = ({ index, total }) => {
  const valueProps = [
  {
    label: "A new growth channel",
    body: "Your customers now start inside an assistant — and the old channels only get more expensive. This is the new one."
  },
  {
    label: "Shopify-simple",
    body: "Set up once. We build, submit, and run your AI presence across every platform — no engineers, no rebuilds."
  },
  {
    label: "Be early, be the leader",
    body: "Be the name your category’s AI surfaces first, before your competitors show up."
  }];

  // Surfaces the business shows up on (merged from the former Channels slide).
  const platforms = [
  { src: "assets/chatgpt-light.svg", name: "ChatGPT", status: "LIVE", invert: true },
  { src: "assets/claude-logo.svg", name: "Claude", status: "Next" },
  { src: "assets/perplexity.svg", name: "Perplexity", status: "Next" },
  { src: "assets/gemini-logo.svg", name: "Gemini", status: "Next" },
  { src: "assets/meta-ai-logo.svg", name: "Meta AI", status: "Next" }];

  return (
    <SlideFrame>
      <div style={{ display: "grid", gridTemplateColumns: "1.15fr 1fr", gap: 82, marginTop: 22 }}>
        {/* Left — the customer's reason to care */}
        <div>
          <h2 style={{ fontSize: 84, fontWeight: 400, letterSpacing: "-0.03em", lineHeight: 0.98, margin: 0 }}>
            Be the business <Serif style={{ color: COLORS.accent }}>AI finds first</Serif>.
          </h2>
          <div style={{ marginTop: 34 }}>
            {valueProps.map((v, i, arr) =>
            <div key={i} style={{
              display: "grid", gridTemplateColumns: "64px 1fr", gap: 28, alignItems: "baseline",
              padding: "21px 0",
              borderTop: `1px solid ${COLORS.line}`,
              borderBottom: i === arr.length - 1 ? `1px solid ${COLORS.line}` : "none"
            }}>
                <span style={{ fontFamily: "'Instrument Serif', serif", fontStyle: "italic", fontSize: 46, color: COLORS.accent, lineHeight: 1 }}>0{i + 1}</span>
                <div>
                  <div style={{ fontSize: 34, fontWeight: 600, letterSpacing: "-0.01em", marginBottom: 6 }}>{v.label}</div>
                  <div style={{ fontSize: 26, color: COLORS.ink3, lineHeight: 1.38 }}>{v.body}</div>
                </div>
              </div>
            )}
          </div>
        </div>

        {/* Right — where the business appears (merged Channels) */}
        <div>
          <Eyebrow style={{ marginBottom: 16 }}>Where you appear</Eyebrow>
          <div style={{ border: `1px solid ${COLORS.line}`, borderRadius: 24, overflow: "hidden", background: COLORS.bgSubtle }}>
            {platforms.map((p, i, arr) =>
            <div key={i} style={{
              display: "flex", alignItems: "center", gap: 22,
              padding: "20px 28px",
              borderBottom: i === arr.length - 1 ? "none" : `1px solid ${COLORS.line}`
            }}>
                <img src={p.src} alt={p.name} style={{ height: 32, maxWidth: 110, objectFit: "contain", objectPosition: "left center", filter: p.invert ? "invert(1) brightness(1.2)" : "none" }} />
                <span style={{ fontSize: 31, fontWeight: 500, color: COLORS.ink, flex: 1 }}>{p.name}</span>
                <span style={{ fontSize: 21, letterSpacing: "0.12em", textTransform: "uppercase", fontWeight: 600, color: p.status === "LIVE" ? COLORS.accent : COLORS.muted2 }}>
                  {p.status === "LIVE" &&
                <span style={{ display: "inline-block", width: 8, height: 8, borderRadius: "50%", background: COLORS.accent, marginRight: 10, verticalAlign: "middle" }}></span>}
                  {p.status}
                </span>
              </div>
            )}
          </div>
          <div style={{ fontSize: 23, color: COLORS.muted, lineHeight: 1.42, marginTop: 16 }}>
            Plus your own website, in-app messaging, and direct discovery on your domain — one build, every surface.
          </div>
        </div>
      </div>
      <SlideFooter index={index} total={total} section="Product" />
    </SlideFrame>);

};

// ── 06 · Moat vs Competition ────────────────────────────────
// (The former Channels slide was merged into Product — its platform
//  list now lives in the "Where you appear" panel there.)

const MoatVsCompetition = ({ index, total }) => {
  const layers = [
  { n: "01", title: "Protocol-agnostic", proof: "OpenAI's Q1 2026 policy shift: zero customer rebuilds." },
  { n: "02", title: "Review know-how", proof: "70+ OpenAI review cycles of tacit knowledge." },
  { n: "03", title: "Cross-platform catalog", proof: "Discoverability compounds for every customer." }];

  const rows = [
  { who: "Platform-native", ex: "Custom GPTs, Gemini Gems, Claude Skills", weak: "One platform only.", coverage: 1 },
  { who: "Bespoke agencies", ex: "BCG X, Slalom, dev shops", weak: "Excludes mid-market.", coverage: 2 },
  { who: "DIY chatbots", ex: "Intercom Fin, Drift, Ada", weak: "Confined to own site.", coverage: 1 },
  { who: "Noodle Seed", ex: "Cross-platform, no-code", weak: "Every channel. No rebuild.", coverage: 5, us: true }];

  return (
    <SlideFrame>
      <h2 style={{ fontSize: 71, fontWeight: 400, letterSpacing: "-0.03em", lineHeight: 1.02, margin: "22px 0 32px 0" }}>
        Three <Serif>compounding</Serif> layers. No one else sits in the middle.
      </h2>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, marginBottom: 26 }}>
        {layers.map((l, i) =>
        <div key={i} style={{
          border: `1px solid ${COLORS.line}`, borderRadius: 16,
          padding: "22px 24px", background: COLORS.bg,
          display: "flex", alignItems: "flex-start", gap: 13
        }}>
            <span style={{ fontFamily: "'Instrument Serif', serif", fontStyle: "italic", fontSize: 26, color: COLORS.accent, lineHeight: 1.1, flexShrink: 0 }}>{l.n}</span>
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              <span style={{ fontSize: 30, fontWeight: 500, letterSpacing: "-0.01em", lineHeight: 1.1 }}>{l.title}</span>
              {l.proof && <span style={{ fontSize: 22, color: COLORS.muted, lineHeight: 1.4 }}>{l.proof}</span>}
            </div>
          </div>
        )}
      </div>

      <div style={{ border: `1px solid ${COLORS.line}`, borderRadius: 16, overflow: "hidden" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1.4fr 1.6fr 0.6fr", padding: "11px 22px", background: COLORS.bgSubtle, fontSize: 21, letterSpacing: "0.14em", textTransform: "uppercase", color: COLORS.muted, fontWeight: 500, borderBottom: `1px solid ${COLORS.line}` }}>
          <div>Category</div>
          <div>Example</div>
          <div>Limitation</div>
          <div style={{ textAlign: "right" }}>Reach</div>
        </div>
        {rows.map((r, i) =>
        <div key={i} style={{
          display: "grid", gridTemplateColumns: "1.2fr 1.4fr 1.6fr 0.6fr",
          padding: "18px 22px", alignItems: "center",
          borderBottom: i === rows.length - 1 ? "none" : `1px solid ${COLORS.line}`,
          background: r.us ? COLORS.ink : COLORS.bg,
          color: r.us ? COLORS.bg : COLORS.ink
        }}>
            <div style={{ fontSize: 27, fontWeight: 500, letterSpacing: "-0.01em" }}>{r.who}</div>
            <div style={{ fontSize: 25, color: r.us ? COLORS.muted2 : COLORS.ink3, fontFamily: "'Instrument Serif', serif", fontStyle: "italic" }}>{r.ex}</div>
            <div style={{ fontSize: 25, color: r.us ? COLORS.muted2 : COLORS.ink2 }}>{r.weak}</div>
            <div style={{ display: "flex", gap: 4, justifyContent: "flex-end" }}>
              {[1, 2, 3, 4, 5].map((n) =>
            <span key={n} style={{
              width: 10, height: 10, borderRadius: "50%",
              background: n <= r.coverage ? r.us ? COLORS.accent : COLORS.ink : "transparent",
              border: `1.5px solid ${r.us ? COLORS.accent : COLORS.ink2}`,
              display: "inline-block"
            }}></span>
            )}
            </div>
          </div>
        )}
      </div>
      <SlideFooter index={index} total={total} section="Why us" />
    </SlideFrame>);

};

// ── 08 · Model ──────────────────────────────────────────────

const Model = ({ index, total }) => {
  const channels = [
  {
    pct: "9%",
    label: "Plus self-serve",
    tag: "High margin",
    engine: true,
    sub: "160 customers at $50/mo. Self-serve; 4% conversion of the gated freemium funnel.",
    bar: 9
  },
  {
    pct: "63%",
    label: "Pro subscriptions",
    tag: "High margin",
    engine: true,
    sub: "116 customers at $500/mo. The core engine. Founder-led outbound, design-partner expansion, 70-customer migration campaign.",
    bar: 63
  },
  {
    pct: "28%",
    label: "Managed add-on",
    tag: "Strategic on-ramp",
    engine: false,
    sub: "20 Pro customers at +$1,300/mo. Intentionally lower margin \u2014 a hands-off \u2018we run your AI presence\u2019 tier that converts businesses into the high-margin subscriptions above. Not sold standalone.",
    bar: 28
  }];


  const proofPoints = [
  { stat: "1,500", label: "signups already in funnel" },
  { stat: "4", label: "design partners closed at Pro" },
  { stat: "72%", label: "of ARR from high-margin subscriptions", emphasis: true }];


  return (
    <SlideFrame bg={COLORS.bgSubtle}>
      {/* Header */}
      <div style={{ marginBottom: 22 }}>
        <Eyebrow style={{ marginBottom: 12 }}>Software-grade margins · plan evolves with market signal</Eyebrow>
        <h2 style={{ fontSize: 76, fontWeight: 400, letterSpacing: "-0.03em", lineHeight: 1.02, margin: 0 }}>
          Plan to $1M ARR.
        </h2>
        <p style={{ marginTop: 14, fontSize: 26, lineHeight: 1.4, color: COLORS.ink3, maxWidth: 1480 }}>
          Plus and Pro are the engine — deterministic, API-based delivery where most interactions use no LLM tokens, so subscription gross margins are software-grade. The Managed tier exists to drive adoption, not margin.
        </p>
      </div>

      {/* Channel rows */}
      <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
        {channels.map((c, i, arr) =>
        <div key={i} style={{
          display: "grid",
          gridTemplateColumns: "80px 380px 1fr 180px",
          alignItems: "center",
          gap: 36,
          padding: "15px 0",
          borderTop: `1px solid ${COLORS.line2}`,
          borderBottom: i === arr.length - 1 ? `1px solid ${COLORS.line2}` : "none"
        }}>
            <div style={{ fontSize: 34, fontWeight: 600, letterSpacing: "-0.02em", color: COLORS.accent }}>{c.pct}</div>
            <div style={{ display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap" }}>
              <span style={{ fontSize: 32, fontWeight: 500, letterSpacing: "-0.01em", color: COLORS.ink, lineHeight: 1.1 }}>{c.label}</span>
              <span style={{
                fontSize: 16, letterSpacing: "0.1em", textTransform: "uppercase", fontWeight: 600,
                padding: "3px 11px", borderRadius: 9999, whiteSpace: "nowrap",
                background: c.engine ? COLORS.accentSoft : COLORS.bgMuted,
                color: c.engine ? COLORS.accent : COLORS.muted,
                border: `1px solid ${c.engine ? COLORS.accent : COLORS.line2}`
              }}>{c.tag}</span>
            </div>
            <div style={{ fontSize: 24, color: COLORS.ink3, lineHeight: 1.4 }}>{c.sub}</div>
            <div style={{ display: "flex", alignItems: "center" }}>
              <div style={{ flex: 1, height: 8, background: COLORS.line, borderRadius: 9999 }}>
                <div style={{ width: `${c.bar}%`, height: "100%", background: COLORS.gradientWarm, borderRadius: 9999 }} />
              </div>
            </div>
          </div>
        )}
      </div>

      {/* Proof points — below the table */}
      <div style={{ display: "flex", gap: 20, marginTop: 26 }}>
        {proofPoints.map((p, i) =>
        <div key={i} style={{
          background: p.emphasis ? COLORS.gradientWarm : COLORS.bg,
          border: `1.5px solid ${p.emphasis ? COLORS.accent : COLORS.line2}`,
          borderRadius: 16, padding: "18px 32px",
          display: "flex", flexDirection: "column", gap: 6
        }}>
            <div style={{ fontSize: 40, fontWeight: 400, letterSpacing: "-0.03em", color: p.emphasis ? COLORS.darkInk : COLORS.ink, lineHeight: 1 }}>{p.stat}</div>
            <div style={{ fontSize: 22, color: p.emphasis ? "rgba(250,250,249,0.82)" : COLORS.muted, lineHeight: 1.3 }}>{p.label}</div>
          </div>
        )}
      </div>

      <SlideFooter index={index} total={total} section="Model" />
    </SlideFrame>);

};


// ── 09 · Team ───────────────────────────────────────────────

const Team = ({ index, total }) => {
  const people = [
  {
    name: "Fahd Rafi",
    tag: "Founder",
    role: "CEO",
    bio: "7 years AI/ML at Microsoft. Generative AI at Google. MSc UCF · Oxford post-grad diploma.",
    photo: "assets/photo-fahd.png"
  },
  {
    name: "Asad Iqbal",
    tag: "Founder",
    role: "CTO · Product & Engineering",
    bio: "Built the Noodle Seed platform end-to-end. Full-stack, infra, and AI architecture.",
    photo: "assets/photo-asad.png"
  },
  {
    name: "Ali Hasan Butt",
    tag: null,
    role: "COO · Operations & Growth",
    bio: "Fulbright Scholar. Berkeley MBA. Revenue and operations leadership at Sabre and BAT.",
    photo: "assets/photo-ali.png"
  }];

  return (
    <SlideFrame>
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", margin: "24px 0 32px 0" }}>
        <div style={{ maxWidth: 900 }}>
          <h2 style={{ fontSize: 89, fontWeight: 400, letterSpacing: "-0.03em", lineHeight: 1.02, margin: 0 }}>
            Team, <Serif>2</Serif> technical founders.
          </h2>
          <div style={{ marginTop: 14, fontSize: 27, color: COLORS.muted, fontWeight: 500, letterSpacing: "0.08em", textTransform: "uppercase" }}>
            Team of 11 · 7 technical
          </div>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 20, fontSize: 27, color: COLORS.muted, fontWeight: 500, letterSpacing: "0.08em", textTransform: "uppercase", flexShrink: 0, paddingBottom: 6 }}>
          <span>Angels from</span>
          <span style={{ display: "flex", gap: 14, color: COLORS.ink2 }}>
            <span>ARM</span><span>·</span><span>Apple</span><span>·</span><span>Facebook</span><span>·</span><span>Google</span>
          </span>
        </div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0 48px" }}>
        {people.map((p, i) =>
        <div key={i} style={{
          display: "grid", gridTemplateColumns: "180px 1fr",
          gap: 36, alignItems: "center",
          padding: "28px 0",
          borderTop: `2px solid ${i < 2 ? COLORS.ink : COLORS.line2}`
        }}>
            <div style={{
            width: 180, height: 180, borderRadius: 12, overflow: "hidden", flexShrink: 0
          }}>
              <img src={p.photo} alt={p.name} style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center top", display: "block" }} />
            </div>
            <div>
              <div style={{ display: "flex", alignItems: "baseline", gap: 14, marginBottom: 4 }}>
                <div style={{ fontSize: 36, fontWeight: 500, letterSpacing: "-0.01em" }}>{p.name}</div>
                {p.tag && <div style={{ fontSize: 22, color: COLORS.muted, fontWeight: 400, letterSpacing: "0.06em", textTransform: "uppercase" }}>{p.tag}</div>}
              </div>
              <div style={{ fontFamily: "'Instrument Serif', serif", fontStyle: "italic", fontSize: 30, color: COLORS.accent, marginBottom: 8 }}>{p.role}</div>
              <div style={{ fontSize: 26, color: COLORS.ink2, lineHeight: 1.45 }}>{p.bio}</div>
            </div>
          </div>
        )}
      </div>
      <SlideFooter index={index} total={total} section="Team" />
    </SlideFrame>);

};

// ── 10 · Ask & Capital ──────────────────────────────────────

const AskAndCapital = ({ index, total }) =>
<SlideFrame bg={COLORS.bg} ink={COLORS.ink}>
    <div style={{ marginTop: 52, display: "grid", gridTemplateColumns: "1fr 1.5fr", gap: 88, alignItems: "start" }}>

      {/* Left: headline + round stats */}
      <div>
        <h2 style={{ fontSize: 88, fontWeight: 400, letterSpacing: "-0.04em", lineHeight: 0.96, margin: 0, color: COLORS.ink }}>
          Raising <Serif style={{ color: COLORS.accent }}>$3M</Serif> to reach <Serif style={{ color: COLORS.accent }}>$1M ARR</Serif> in 18 months.
        </h2>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, marginTop: 44 }}>
          {[
        { k: "Total Round", v: "$3M" },
        { k: "Closed to Date", v: "$1.2M" },
        { k: "Remaining", v: "$1.8M" },
        null].
        map((r, i) =>
        r ?
        <div key={i} style={{
          padding: "18px 0",
          borderTop: `1px solid ${COLORS.line}`,
          borderBottom: i >= 2 ? `1px solid ${COLORS.line}` : "none",
          borderRight: i % 2 === 0 ? `1px solid ${COLORS.line}` : "none",
          paddingRight: i % 2 === 0 ? 28 : 0,
          paddingLeft: i % 2 === 1 ? 28 : 0
        }}>
                <div style={{ fontSize: 22, letterSpacing: "0.14em", textTransform: "uppercase", color: COLORS.muted2, fontWeight: 500, marginBottom: 4 }}>{r.k}</div>
                <div style={{ fontSize: 48, fontWeight: 500, color: i === 1 ? COLORS.accent : COLORS.ink, letterSpacing: "-0.02em" }}>{r.v}</div>
              </div> :

        <div key={i} style={{ borderBottom: `1px solid ${COLORS.line}`, borderTop: `1px solid ${COLORS.line}` }}></div>

        )}
        </div>

        {/* Progress bar */}
        <div style={{ marginTop: 28 }}>
          <div style={{ display: "flex", height: 12, borderRadius: 9999, overflow: "hidden", background: COLORS.line }}>
            <div style={{ width: "40%", background: COLORS.gradientWarm, borderRadius: 9999 }}></div>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", marginTop: 8, fontSize: 22, color: COLORS.muted2 }}>
            <span>$1.2M closed</span>
            <span>$3M target</span>
          </div>
        </div>
      </div>

      {/* Right: use of capital */}
      <div>
        <div style={{ fontSize: 24, letterSpacing: "0.14em", textTransform: "uppercase", color: COLORS.muted2, fontWeight: 500, marginBottom: 20 }}>Use of Capital</div>

        {/* Stacked bar */}
        <div style={{ display: "flex", height: 20, borderRadius: 9999, overflow: "hidden", border: `1px solid ${COLORS.line}` }}>
          <div style={{ width: "50%", background: COLORS.gradientWarm }}></div>
          <div style={{ width: "35%", background: COLORS.muted }}></div>
          <div style={{ width: "15%", background: COLORS.ink3 }}></div>
        </div>

        <div style={{ marginTop: 24, display: "flex", flexDirection: "column" }}>
          {[
        {
          pct: "50%", label: "Go-to-market", color: COLORS.accent,
          desc: "Marketing and demand generation to drive free signups and Plus upgrades. Founder-led outbound to convert free and Plus users to Pro ($500/mo) and the Managed Service add-on (+$1,300/mo). One to two outbound hires to support the motion."
        },
        {
          pct: "35%", label: "Engineering", color: COLORS.muted,
          desc: "Platform expansion across Gemini, Meta AI, and Perplexity. MCP infrastructure and reliability. Product features to support Pro and Managed Service tiers."
        },
        {
          pct: "15%", label: "Operations", color: COLORS.ink3,
          desc: "Legal, finance, and compliance."
        }].
        map((a, i, arr) =>
        <div key={i} style={{
          display: "grid", gridTemplateColumns: "90px 1fr", gap: 24, alignItems: "start",
          padding: "20px 0",
          borderTop: `1px solid ${COLORS.line}`,
          borderBottom: i === arr.length - 1 ? `1px solid ${COLORS.line}` : "none"
        }}>
              <div style={{ fontSize: 40, fontWeight: 400, letterSpacing: "-0.03em", lineHeight: 1, color: a.color }}>{a.pct}</div>
              <div>
                <div style={{ fontSize: 30, fontWeight: 600, color: COLORS.ink, marginBottom: 6 }}>{a.label}</div>
                <div style={{ fontSize: 22, lineHeight: 1.5, color: COLORS.muted2, textWrap: "pretty" }}>{a.desc}</div>
              </div>
            </div>
        )}
        </div>
      </div>
    </div>
    <SlideFooter index={index} total={total} section="The ask" />
  </SlideFrame>;


// ── 11 · Closing ────────────────────────────────────────────

const Closing = ({ index, total }) =>
<SlideFrame padded={false} bg={COLORS.bg}>
    <div style={{
    position: "absolute", top: 64, left: SPACING.paddingX, right: SPACING.paddingX,
    display: "flex", justifyContent: "space-between", alignItems: "center",
    borderBottom: `1px solid ${COLORS.ink}`, paddingBottom: 24
  }}>
      <img src="assets/noodle_seed_logo.svg" alt="Noodle Seed" style={{ height: 32 }} />
      <div style={{ fontFamily: "'Instrument Serif', serif", fontStyle: "italic", fontSize: 38, color: COLORS.ink }}>End note</div>
      <div style={{ fontSize: 28, letterSpacing: "0.14em", textTransform: "uppercase", fontWeight: 500, color: COLORS.ink }}>Thank you</div>
    </div>

    <div style={{ position: "absolute", top: 200, left: SPACING.paddingX, right: SPACING.paddingX, maxWidth: 1520 }}>
      <h1 style={{ fontWeight: 400, letterSpacing: "-0.03em", lineHeight: 1.02, margin: 0, color: COLORS.ink, fontSize: "64px" }}>
        Businesses needed a website in 2000. A mobile app in 2010. In 2026, they need to be <Serif style={{ color: COLORS.accent }}>transactable</Serif> through every AI agent.
      </h1>
      <div style={{ marginTop: 28, color: COLORS.ink2, fontFamily: "'Instrument Serif', serif", fontStyle: "italic", fontSize: "64px", textAlign: "center" }}>
        We intend to be the layer that powers them.
      </div>
    </div>

    <div style={{
    position: "absolute", bottom: 64, left: SPACING.paddingX, right: SPACING.paddingX,
    borderTop: `1px solid ${COLORS.ink}`, paddingTop: 28,
    display: "grid", gridTemplateColumns: "1fr 1fr 200px", gap: 64, alignItems: "end"
  }}>
      <div>
        <div style={{ fontSize: 29, letterSpacing: "0.14em", textTransform: "uppercase", color: COLORS.muted, fontWeight: 500, marginBottom: 12 }}>Contact</div>
        <div style={{ fontSize: 42, fontWeight: 500, color: COLORS.ink, marginBottom: 4 }}>Fahd Rafi</div>
        <div style={{ fontSize: 33, color: COLORS.ink2, lineHeight: 1.5 }}>fahd@noodleseed.com</div>
        <div style={{ fontSize: 28, color: COLORS.muted, lineHeight: 1.5 }}>noodleseed.com</div>
      </div>
      <div>
        <div style={{ fontSize: 29, letterSpacing: "0.14em", textTransform: "uppercase", color: COLORS.muted, fontWeight: 500, marginBottom: 12 }}>Book a meeting</div>
        <div style={{ fontFamily: "'Instrument Serif', serif", fontStyle: "italic", fontSize: 42, color: COLORS.accent }}>meetfahd.noodleseed.com</div>
      </div>
      <div style={{
      width: 180, height: 180, borderRadius: 16, background: COLORS.bg,
      border: `1px solid ${COLORS.line}`, padding: 12,
      display: "flex", alignItems: "center", justifyContent: "center"
    }}>
        <img src="uploads/adobe-express-qr-code.svg" alt="QR code" style={{ width: "100%", height: "100%", objectFit: "contain" }} />
      </div>
    </div>
  </SlideFrame>;


const QRPlaceholder = () => {
  const size = 21;const cells = [];const seed = 7;
  for (let y = 0; y < size; y++) {
    for (let x = 0; x < size; x++) {
      const inFinder = x < 7 && y < 7 || x >= size - 7 && y < 7 || x < 7 && y >= size - 7;
      if (inFinder) {
        const fx = x >= size - 7 ? x - (size - 7) : x;
        const fy = y >= size - 7 ? y - (size - 7) : y;
        const on = fx === 0 || fx === 6 || fy === 0 || fy === 6 || fx >= 2 && fx <= 4 && fy >= 2 && fy <= 4;
        cells.push({ x, y, on });
      } else {
        const v = Math.sin((x + 1) * (y + 3) * seed) * 10000;
        cells.push({ x, y, on: v - Math.floor(v) > 0.52 });
      }
    }
  }
  const cellSize = 7;
  return (
    <svg viewBox={`0 0 ${size * cellSize} ${size * cellSize}`} width="100%" height="100%">
      {cells.map((c, i) => c.on && <rect key={i} x={c.x * cellSize} y={c.y * cellSize} width={cellSize} height={cellSize} fill={COLORS.ink} rx="1" />)}
    </svg>);

};

Object.assign(window, {
  Cover, Thesis, Traction, Opportunity, Product,
  MoatVsCompetition, Model, Team, AskAndCapital, Closing,
  TYPE_SCALE, SPACING, COLORS
});