/* Second Brain — custom visual slides: layer stack, folder tree, storage compare */

/* ---------- LAYER STACK ---------- */
/* Six layers shown as a physical staircase. Bottom layer first.              */
function LayerStack({ eyebrow = "HOW IT STACKS", title = "A Second Brain has six layers", layers = [], idx, total, layoutLabel }) {
  const items = layers.length ? layers : [
    { num: "01", name: "CLAUDE.md + Memory",       desc: "Master instructions. The brain's personality." },
    { num: "02", name: "Knowledge Base + Rules",   desc: "Deep reference, loaded only when needed." },
    { num: "03", name: "Skills",                   desc: "Slash-commands that run a workflow." },
    { num: "04", name: "Hooks + Automation",       desc: "Triggers that fire on every session, prompt or tool." },
    { num: "05", name: "MCP + Agents",             desc: "Connections to tools and specialised assistants." },
    { num: "06", name: "Health + Maintenance",     desc: "Keeps the brain useful over time." },
  ];

  return (
    <div className="slide bg-light" style={{ position: "relative" }}>
      <Frame>
        <Eyebrow>{eyebrow}</Eyebrow>
        <h2 className="slide-title" style={{ fontSize: TYPE_SCALE.titleSm, maxWidth: 1500 }}>{title}</h2>
        <div style={{ marginTop: 56, display: "flex", flexDirection: "column", gap: 14, alignItems: "stretch" }}>
          {items.slice().reverse().map((row, visualIdx) => {
            const realIdx = items.length - 1 - visualIdx;
            const offset = realIdx * 56;
            const isTop = realIdx === items.length - 1;
            return (
              <div
                key={realIdx}
                className="mr-anim-slide-in"
                style={{
                  marginLeft: offset,
                  marginRight: (items.length - 1 - realIdx) * 56,
                  padding: "22px 34px",
                  background: isTop
                    ? "linear-gradient(135deg, var(--coral) 0%, var(--coral-light) 100%)"
                    : "#fff",
                  color: isTop ? "#fff" : "var(--foreground)",
                  border: isTop ? "0" : "1px solid var(--border)",
                  borderLeft: isTop ? "0" : "6px solid var(--coral)",
                  borderRadius: "var(--radius-lg)",
                  boxShadow: isTop ? "var(--shadow-coral)" : "var(--shadow-md)",
                  display: "grid",
                  gridTemplateColumns: "92px 1fr 1.4fr",
                  alignItems: "center",
                  gap: 28,
                  animationDelay: `${visualIdx * 90}ms`,
                }}
              >
                <div style={{
                  fontFamily: "var(--font-heading)",
                  fontSize: 44, fontWeight: 700,
                  color: isTop ? "rgba(255,255,255,0.95)" : "var(--coral)",
                }}>{row.num}</div>
                <div style={{
                  fontFamily: "var(--font-heading)",
                  fontSize: 30, fontWeight: 600,
                  color: isTop ? "#fff" : "var(--foreground)",
                }}>{row.name}</div>
                <div style={{
                  fontSize: 19, lineHeight: 1.45,
                  color: isTop ? "rgba(255,255,255,0.92)" : "var(--muted)",
                }}>{row.desc}</div>
              </div>
            );
          })}
        </div>
        <p className="mr-anim-fade-up" style={{
          marginTop: 30, fontSize: 22, color: "var(--muted)", textAlign: "center",
          animationDelay: "700ms",
        }}>
          Each layer rests on the one below it. Build from the bottom up.
        </p>
      </Frame>
      {idx && <SlideChrome idx={idx} total={total} />}
      <LayoutLabel>{layoutLabel || "Layer stack"}</LayoutLabel>
    </div>
  );
}

/* ---------- FOLDER TREE ---------- */
/* Terminal-style monospace tree of ~/.claude/, with friendly labels.          */
function FolderTree({ eyebrow = "WHAT IT LOOKS LIKE", title = "Your Second Brain on disk", caption, idx, total, layoutLabel }) {
  const nodes = [
    { depth: 0, kind: "dir", name: "~/.claude/", note: "" },
    { depth: 1, kind: "file", name: "CLAUDE.md", note: "Master instructions" },
    { depth: 1, kind: "dir",  name: "memory/", note: "Cross-session memory" },
    { depth: 2, kind: "file", name: "MEMORY.md", note: "" },
    { depth: 1, kind: "dir",  name: "knowledge/", note: "Deep reference, loaded on demand" },
    { depth: 2, kind: "file", name: "brand.md", note: "" },
    { depth: 2, kind: "file", name: "clients.md", note: "" },
    { depth: 2, kind: "file", name: "voice.md", note: "" },
    { depth: 1, kind: "dir",  name: "skills/", note: "Your /slash-commands" },
    { depth: 2, kind: "dir",  name: "morning-review/", note: "" },
    { depth: 2, kind: "dir",  name: "meeting-prep/", note: "" },
    { depth: 2, kind: "dir",  name: "generate-proposal/", note: "" },
    { depth: 1, kind: "dir",  name: "agents/", note: "Specialised AI helpers" },
    { depth: 1, kind: "dir",  name: "hooks/", note: "Triggers that run automatically" },
    { depth: 1, kind: "file", name: "settings.json", note: "Configuration" },
  ];

  // Build a sibling map so we know whether each node is the last child at its depth.
  const lastAtDepth = nodes.map((n, i) => {
    for (let j = i + 1; j < nodes.length; j++) {
      if (nodes[j].depth < n.depth) return true;
      if (nodes[j].depth === n.depth) return false;
    }
    return true;
  });

  function prefix(depth, isLast) {
    if (depth === 0) return "";
    let p = "";
    // For depth > 1 we'd need parent state, but keep it simple: pipes for non-last siblings.
    if (depth === 1) p = isLast ? "└── " : "├── ";
    if (depth === 2) p = "    " + (isLast ? "└── " : "├── ");
    return p;
  }

  return (
    <div className="slide bg-light" style={{ position: "relative" }}>
      <Frame>
        <Eyebrow>{eyebrow}</Eyebrow>
        <h2 className="slide-title" style={{ fontSize: TYPE_SCALE.titleSm, maxWidth: 1500 }}>{title}</h2>
        <div style={{ display: "grid", gridTemplateColumns: "1.15fr 1fr", gap: 60, marginTop: 56, flex: 1, alignItems: "start" }}>
          <div className="mr-anim-fade-up" style={{
            background: "var(--navy)",
            color: "#e9ecf2",
            borderRadius: "var(--radius-lg)",
            padding: "36px 40px",
            boxShadow: "var(--shadow-lg)",
            fontFamily: "ui-monospace, 'SF Mono', Menlo, Consolas, monospace",
            fontSize: 22, lineHeight: 1.55,
          }}>
            <div style={{ display: "flex", gap: 8, marginBottom: 24 }}>
              <span style={{ width: 14, height: 14, borderRadius: "50%", background: "#ff5f57" }} />
              <span style={{ width: 14, height: 14, borderRadius: "50%", background: "#febc2e" }} />
              <span style={{ width: 14, height: 14, borderRadius: "50%", background: "#28c840" }} />
            </div>
            {nodes.map((n, i) => (
              <div
                key={i}
                className="mr-anim-line"
                style={{
                  display: "grid",
                  gridTemplateColumns: "minmax(440px, auto) 1fr",
                  gap: 24,
                  animationDelay: `${120 + i * 55}ms`,
                  whiteSpace: "pre",
                }}
              >
                <span>
                  {prefix(n.depth, lastAtDepth[i])}
                  <span style={{
                    color: n.kind === "dir" ? "var(--coral-light)" : "#e9ecf2",
                    fontWeight: n.kind === "dir" ? 600 : 400,
                  }}>{n.name}</span>
                </span>
                {n.note && (
                  <span style={{ color: "rgba(233,236,242,0.55)" }}># {n.note}</span>
                )}
              </div>
            ))}
          </div>

          <div className="mr-anim-fade-up" style={{ animationDelay: "200ms" }}>
            <div className="mr-card" style={{ padding: 36, marginBottom: 24 }}>
              <div style={{ fontFamily: "var(--font-heading)", fontSize: 28, fontWeight: 600, marginBottom: 12 }}>
                How to read it
              </div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 14 }}>
                <li style={{ fontSize: 19, lineHeight: 1.5, color: "var(--muted)" }}>
                  <strong style={{ color: "var(--coral)" }}>Folders</strong> are categories. The four big ones are <em>knowledge</em>, <em>skills</em>, <em>agents</em>, <em>hooks</em>.
                </li>
                <li style={{ fontSize: 19, lineHeight: 1.5, color: "var(--muted)" }}>
                  <strong style={{ color: "var(--foreground)" }}>Files</strong> inside folders hold the actual instructions and references.
                </li>
                <li style={{ fontSize: 19, lineHeight: 1.5, color: "var(--muted)" }}>
                  Everything lives in <code style={{ background: "var(--coral-soft)", padding: "2px 8px", borderRadius: 6 }}>~/.claude/</code>, a hidden folder in your home directory.
                </li>
              </ul>
            </div>
            <div className="mr-card" style={{ padding: 28, background: "var(--coral-soft)", border: "1px solid var(--coral-soft-2)" }}>
              <div style={{ fontFamily: "var(--font-heading)", fontSize: 22, fontWeight: 600, marginBottom: 8 }}>
                You don't have to memorise it
              </div>
              <p style={{ fontSize: 18, lineHeight: 1.5, color: "var(--muted)", margin: 0 }}>
                Claude Code creates and edits these files for you. You just tell it what you want to remember.
              </p>
            </div>
          </div>
        </div>
        {caption && (
          <p style={{ marginTop: 28, fontSize: 20, color: "var(--muted)", textAlign: "center" }}>{caption}</p>
        )}
      </Frame>
      {idx && <SlideChrome idx={idx} total={total} />}
      <LayoutLabel>{layoutLabel || "Folder tree"}</LayoutLabel>
    </div>
  );
}

/* ---------- STORAGE COMPARE ---------- */
/* Where to keep your Second Brain. GitHub > Local > Drive.                   */
function StorageCompare({ eyebrow = "WHERE TO KEEP IT", title = "Best place for your Second Brain", idx, total, layoutLabel }) {
  const options = [
    {
      verdict: "best",
      icon: "github",
      title: "GitHub repository",
      tagline: "Recommended.",
      pros: [
        "Versioned, every change is reversible.",
        "Sync across laptops, work + home, the same brain.",
        "Plain text files, perfect for AI to read and edit.",
        "Backup is built in. No extra service needed.",
      ],
      cta: "Start with a private repo.",
    },
    {
      verdict: "ok",
      icon: "folder",
      title: "Local folder",
      tagline: "Good first step.",
      pros: [
        "Easiest to set up, just create a folder.",
        "No accounts, no internet needed.",
        "Move to GitHub later when you're ready.",
      ],
      cta: "Use this to start small.",
    },
    {
      verdict: "no",
      icon: "x-circle",
      title: "Google Drive or Dropbox",
      tagline: "Careful.",
      pros: [
        "Markdown-only notes are fine, they sync without issue.",
        "Sync conflicts will corrupt the executable parts (scripts, hooks).",
        "Hard to track what changed and roll back compared to git.",
      ],
      cta: "Markdown is fine. Skip it for scripts.",
    },
  ];

  function colorFor(v) {
    if (v === "best") return { bg: "linear-gradient(135deg, var(--coral) 0%, var(--coral-light) 100%)", text: "#fff", border: "0", shadow: "var(--shadow-coral)" };
    if (v === "ok")   return { bg: "#fff", text: "var(--foreground)", border: "1px solid var(--border)", shadow: "var(--shadow-md)" };
    return { bg: "var(--navy)", text: "rgba(255,255,255,0.92)", border: "0", shadow: "var(--shadow-md)" };
  }

  return (
    <div className="slide bg-white" style={{ position: "relative" }}>
      <Frame>
        <Eyebrow>{eyebrow}</Eyebrow>
        <h2 className="slide-title" style={{ fontSize: TYPE_SCALE.titleSm, maxWidth: 1500 }}>{title}</h2>
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr 1fr", gap: 28, marginTop: 60, flex: 1 }}>
          {options.map((o, i) => {
            const c = colorFor(o.verdict);
            return (
              <div
                key={i}
                className="mr-anim-rise"
                style={{
                  background: c.bg, color: c.text, border: c.border, boxShadow: c.shadow,
                  borderRadius: "var(--radius-lg)",
                  padding: 36,
                  display: "flex", flexDirection: "column",
                  animationDelay: `${i * 120}ms`,
                  position: "relative",
                }}
              >
                <div style={{
                  position: "absolute", top: 22, right: 22,
                  width: 44, height: 44, borderRadius: "50%",
                  background: o.verdict === "ok" ? "var(--coral-soft)" : "rgba(255,255,255,0.18)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                }}>
                  <Icon
                    name={o.verdict === "best" ? "check" : o.verdict === "ok" ? "check-circle" : "x"}
                    size={26}
                    color={o.verdict === "ok" ? "var(--coral)" : "#fff"}
                  />
                </div>

                <div style={{
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  width: 76, height: 76, borderRadius: 18,
                  background: o.verdict === "ok" ? "var(--coral-soft)" : "rgba(255,255,255,0.16)",
                  marginBottom: 22,
                }}>
                  <Icon
                    name={o.icon}
                    size={40}
                    color={o.verdict === "ok" ? "var(--coral)" : "#fff"}
                    strokeWidth={1.75}
                  />
                </div>

                <div style={{
                  fontFamily: "var(--font-heading)", fontSize: 34, fontWeight: 600,
                  lineHeight: 1.2, marginBottom: 6,
                }}>{o.title}</div>
                <div style={{
                  fontSize: 18, fontWeight: 600, letterSpacing: "0.06em",
                  textTransform: "uppercase",
                  color: o.verdict === "best" ? "rgba(255,255,255,0.95)" :
                         o.verdict === "ok"   ? "var(--coral)" :
                                                "rgba(255,255,255,0.7)",
                  marginBottom: 22,
                }}>{o.tagline}</div>

                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12, flex: 1 }}>
                  {o.pros.map((p, j) => (
                    <li key={j} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 12, alignItems: "baseline", fontSize: 17, lineHeight: 1.45 }}>
                      <span style={{ display: "inline-block", width: 8, height: 8, borderRadius: "50%",
                        background: o.verdict === "best" ? "rgba(255,255,255,0.95)" :
                                    o.verdict === "ok"   ? "var(--coral)" :
                                                          "rgba(255,255,255,0.6)", marginTop: 8 }} />
                      <span>{p}</span>
                    </li>
                  ))}
                </ul>

                <div style={{
                  marginTop: 22, paddingTop: 18,
                  borderTop: o.verdict === "ok" ? "1px solid var(--border)" : "1px solid rgba(255,255,255,0.25)",
                  fontSize: 18, fontWeight: 600,
                  color: o.verdict === "ok" ? "var(--coral)" : "inherit",
                }}>{o.cta}</div>
              </div>
            );
          })}
        </div>
      </Frame>
      {idx && <SlideChrome idx={idx} total={total} />}
      <LayoutLabel>{layoutLabel || "Storage compare"}</LayoutLabel>
    </div>
  );
}