/* Building a Second Brain in Claude Code — 14-slide deck rebuilt in the MR slide template */

const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "showLayoutLabels": false,
  "language": "EN",
  "accent": "coral"
}/*EDITMODE-END*/;

function useSlides() {
  return [
    // 1 — Title cover
    {
      label: "01 Cover · Building a Second Brain",
      section: "Cover",
      render: () => (
        <CoverHero
          eyebrow="A PRACTICAL GUIDE"
          title="Building a Second Brain"
          titleAccent="in Claude Code."
          subtitle="Making your AI assistant remember, learn, and grow."
          presenter="Annet Kloprogge"
          date="2026 · Mission Relearn"
        />
      ),
    },

    // 2 — Core Setup (three components)
    {
      label: "02 Core setup",
      section: "Setup",
      render: (i, n) => (
        <ThreeCardGrid
          idx={i} total={n}
          eyebrow="CORE SETUP"
          title="What you need to get started"
          items={[
            { icon: "sparkles", title: "Claude account", body: "Claude Pro or Max gives you access to Claude Code and extended context." },
            { icon: "monitor", title: "Terminal or editor", body: "A terminal (Ghostty, iTerm, Terminal.app) or VS Code. Whichever feels at home." },
            { icon: "terminal", title: "Claude Code", body: "Install as a CLI in your terminal, or as the official VS Code extension." },
          ]}
        />
      ),
    },

    // 3 — Where to keep it (storage compare)
    {
      label: "03 Where to keep your Second Brain",
      section: "Setup",
      render: (i, n) => (
        <StorageCompare idx={i} total={n} />
      ),
    },

    // 4 — Agenda (six layers)
    {
      label: "04 The six layers",
      section: "Navigation",
      render: (i, n) => (
        <AgendaNumbered
          idx={i} total={n}
          items={[
            { title: "Foundation", note: "CLAUDE.md + Memory" },
            { title: "Knowledge Base + Rules", note: "Deep reference, on demand." },
            { title: "Skills", note: "Custom slash-commands." },
            { title: "Hooks + Automation", note: "Work that runs itself." },
            { title: "MCP + Agents", note: "Tools and orchestration." },
            { title: "Health + Maintenance", note: "Keep the brain alive." },
          ]}
        />
      ),
    },

    // 5 — The Problem
    {
      label: "05 The problem",
      section: "Problem",
      render: (i, n) => (
        <ThreeCardGrid
          idx={i} total={n}
          eyebrow="THE PROBLEM"
          title="Claude Code starts fresh every session"
          items={[
            { icon: "circle-x", title: "Forgets preferences", body: "Every session starts blank. Your style, conventions, and tools are gone." },
            { icon: "folder-x", title: "No project context", body: "Claude doesn't know your project structure, technology, or architecture unless you re-explain it." },
            { icon: "repeat", title: "Repeated explanations", body: "The same instructions, the same corrections, the same frustration, session after session." },
          ]}
        />
      ),
    },

    // 6 — The Solution
    {
      label: "06 The solution",
      section: "Solution",
      render: (i, n) => (
        <FourQuadrant
          idx={i} total={n}
          eyebrow="THE SOLUTION"
          title="A Second Brain for Claude Code"
          items={[
            { icon: "brain", title: "Remembers", body: "Your preferences and work style, every session." },
            { icon: "compass", title: "Knows", body: "Your project context and architecture." },
            { icon: "graduation-cap", title: "Learns", body: "From corrections, adapts to your patterns." },
            { icon: "trending-up", title: "Grows", body: "Improves with every interaction." },
          ]}
          footnote="* The 'learns' and 'grows' behaviour requires the memory and hooks layers to be configured. The full setup is on the next slides."
        />
      ),
    },

    // 7 — Layer Stack (visual)
    {
      label: "07 Layer stack",
      section: "Visual",
      render: (i, n) => (
        <LayerStack idx={i} total={n} />
      ),
    },

    // 8 — Folder Tree (visual)
    {
      label: "08 Folder structure on disk",
      section: "Visual",
      render: (i, n) => (
        <FolderTree idx={i} total={n} />
      ),
    },

    // 9 — Layer 1: CLAUDE.md + Memory
    {
      label: "09 Layer 1 · CLAUDE.md + Memory",
      section: "Layers",
      render: (i, n) => (
        <Bullets
          idx={i} total={n}
          eyebrow="LAYER 1 OF 6 · FOUNDATION"
          title="CLAUDE.md + Memory"
          items={[
            { head: "Master instruction file", tail: "Tells Claude who you are, how you work, what you expect." },
            { head: "Compact: under 100 lines", tail: "Lean by design. The knowledge base carries the depth." },
            { head: "Cross-session memory", tail: "Persistent context that survives reboots." },
            { head: "Automatic pattern recognition", tail: "Claude spots recurring requests and adapts." },
            { head: "Semantically organized", tail: "Indexed by topic, not chronology." },
          ]}
        />
      ),
    },

    // 10 — Layer 2: Knowledge Base + Rules
    {
      label: "10 Layer 2 · Knowledge Base + Rules",
      section: "Layers",
      render: (i, n) => (
        <TwoColumn
          idx={i} total={n}
          eyebrow="LAYER 2 OF 6 · KNOWLEDGE BASE"
          title="Deep reference, loaded on demand"
          left={{
            label: "FILES",
            title: "What lives in the knowledge base",
            items: [
              "brand.md, tone of voice and style",
              "clients.md, client profiles",
              "mcp-tools.md, tool documentation",
              "workflows.md, processes and steps",
            ],
          }}
          right={{
            label: "BENEFITS",
            title: "Why split it from CLAUDE.md",
            items: [
              "Context window: overloaded → efficient",
              "Loading: always-on → on-demand",
              "Only what's needed, exactly when it's needed",
              "Keep CLAUDE.md lean, the knowledge base carries depth",
            ],
          }}
        />
      ),
    },

    // 11 — Layer 3: Skills
    {
      label: "11 Layer 3 · Skills",
      section: "Layers",
      render: (i, n) => (
        <FourQuadrant
          idx={i} total={n}
          eyebrow="LAYER 3 OF 6 · SKILLS"
          title="Repeatable workflows as superpowers"
          items={[
            { icon: "sun", title: "/morning-review", body: "Daily orientation, calendar, tasks, priorities." },
            { icon: "file-text", title: "/generate-proposal", body: "Turn a meeting transcript into a Dutch + English proposal." },
            { icon: "calendar", title: "/meeting-prep", body: "Compose meeting prep from source materials." },
            { icon: "palette", title: "/design-assets", body: "Brand-aware social graphics and slide visuals on demand." },
          ]}
        />
      ),
    },

    // 12 — Layer 4: Hooks + Automation
    {
      label: "12 Layer 4 · Hooks + Automation",
      section: "Layers",
      render: (i, n) => (
        <ProcessHorizontal
          idx={i} total={n}
          eyebrow="LAYER 4 OF 6 · HOOKS"
          title="Automate the invisible work"
          steps={[
            { title: "SessionStart", body: "Load context, check status, surface recent changes." },
            { title: "UserPromptSubmit", body: "Detect skill opportunities, suggest slash commands." },
            { title: "PreToolUse", body: "Validate changes, check rules, warn on risk." },
            { title: "PostToolUse", body: "Log the action, verify the result landed cleanly." },
            { title: "Stop", body: "Save learnings, update memory, report results." },
          ]}
        />
      ),
    },

    // 13 — The Compound Effect
    {
      label: "13 Compound effect",
      section: "Compound",
      render: (i, n) => (
        <ProcessHorizontal
          idx={i} total={n}
          eyebrow="THE COMPOUND EFFECT"
          title="All layers work together"
          steps={[
            { title: "You type 'proposal'", body: "A hook surfaces the matching skill." },
            { title: "Skill provides", body: "Instructions, structure, examples." },
            { title: "Knowledge supplies", body: "Brand voice, client profile, rules." },
            { title: "MCP + agent", body: "Looks up data, orchestrates the work." },
          ]}
        />
      ),
    },

    // 14 — Testimonials / In Production
    {
      label: "14 In production",
      section: "Production",
      render: (i, n) => (
        <FourQuadrant
          idx={i} total={n}
          eyebrow="IN PRODUCTION"
          title="What it looks like once you've built it"
          items={[
            { icon: "file-text", title: "Proposal workflow", body: "“I type /generate-proposal and within minutes I have a complete proposal based on the meeting transcript.”" },
            { icon: "palette", title: "Brand automation", body: "“Documents get branded automatically, fonts, colours, headers. Nothing manual.”" },
            { icon: "search", title: "Client research", body: "“Claude looks up client info via MCP, combines it with my knowledge base, and delivers a complete briefing.”" },
            { icon: "receipt", title: "Accounting", body: "“Invoices are processed and verified automatically, that saves me hours every week.”" },
          ]}
        />
      ),
    },

    // 15 — Getting Started
    {
      label: "15 Getting started",
      section: "Getting started",
      render: (i, n) => (
        <AgendaNumbered
          idx={i} total={n}
          items={[
            { title: "Create your CLAUDE.md", note: "Start lean, under 60 lines." },
            { title: "Set up a knowledge file", note: "Pick the topic you re-explain most." },
            { title: "Build your first skill", note: "Wrap one repeated workflow." },
            { title: "Add a session hook", note: "Automate one start-of-session task." },
            { title: "Start the growth cycle", note: "Use, observe, correct, repeat." },
            { title: "Iterate often", note: "Refine, don't perfect." },
          ]}
        />
      ),
    },

    // 16 — Growth cycle
    {
      label: "16 Growth cycle",
      section: "Growth",
      render: (i, n) => (
        <ProcessHorizontal
          idx={i} total={n}
          eyebrow="THE GROWTH CYCLE"
          title="Continuous improvement, your Second Brain grows with every iteration"
          steps={[
            { title: "Use", body: "Run the workflow." },
            { title: "Observe", body: "We are here. Watch what works." },
            { title: "Correct", body: "Fix what didn't land." },
            { title: "Verify", body: "Check the change held." },
            { title: "Repeat", body: "Do it again, better." },
            { title: "Grow", body: "Add the next layer." },
          ]}
        />
      ),
    },

    // 17 — Thank you
    {
      label: "17 Thank you",
      section: "Closing",
      render: (i, n) => (
        <ThankYou
          idx={i} total={n}
          message="Start small, iterate often."
          footnote="Annet Kloprogge · annet@missionrelearn.com · missionrelearn.com"
        />
      ),
    },
  ];
}

function App() {
  const slides = useSlides();

  useEffect(() => {
    const stage = document.querySelector("deck-stage");
    if (!stage) return;
    stage.innerHTML = "";
    const total = slides.length;
    slides.forEach((slide, i) => {
      const sec = document.createElement("section");
      sec.setAttribute("data-label", slide.label);
      stage.appendChild(sec);
      const root = ReactDOM.createRoot(sec);
      root.render(slide.render(i + 1, total));
    });
    setTimeout(() => { if (window.lucide) window.lucide.createIcons(); }, 50);
  }, []);

  useEffect(() => {
    document.body.classList.toggle("hide-labels", !TWEAK_DEFAULTS.showLayoutLabels);
  }, []);

  return null;
}

const tweaksRoot = document.createElement("div");
document.body.appendChild(tweaksRoot);
ReactDOM.createRoot(tweaksRoot).render(<App />);