/* =========================================================================
 *  Python Tutor — /videos (curated reading list)
 *  -----------------------------------------------------------------------
 *  Hand-curated videos that match the Python Tutor curriculum's tone:
 *  chill, calm, factual, and not clickbaity. Grouped by topic.
 *
 *  Curator notes:
 *    - Karpathy's "Neural Networks: Zero to Hero" series: every video is a
 *      careful from-scratch derivation, no hype. Best canonical playlist.
 *    - 3Blue1Brown's neural-network chapters: visual, slow, lasting.
 *    - Sebastian Raschka conference talks: dry, factual ML methodology.
 *    - mCoding: Python language deep-dives, no listicles.
 *    - Real Python's deep-dive uploads (not the listicle ones).
 *
 *  We embed only videos with stable, known IDs to avoid surfacing a video
 *  that's been retitled or removed. If a video disappears the embed shows
 *  "unavailable" rather than crashing the page.
 * =======================================================================*/

const PT_VIDEO_GROUPS = [
  {
    eyebrow: "01 / Foundations",
    title: "Foundations",
    videos: [
      {
        id: "VMj-3S1tku0",
        title: "The spelled-out intro to neural networks and backpropagation: building micrograd",
        author: "Andrej Karpathy",
        why: "From scalar to autograd in one sitting. The single best on-ramp to how a neural net actually trains.",
      },
      {
        id: "PaCmpygFfXo",
        title: "The spelled-out intro to language modeling: building makemore",
        author: "Andrej Karpathy",
        why: "Builds a tiny character-level model end-to-end — bigrams up through MLPs — without skipping the ugly bits.",
      },
      {
        id: "kCc8FmEb1nY",
        title: "Let's build GPT: from scratch, in code, spelled out",
        author: "Andrej Karpathy",
        why: "A working GPT in ~300 lines. Watch this once you can read a torch tensor without flinching.",
      },
    ],
  },
  {
    eyebrow: "02 / Neural Nets — visual intuition",
    title: "Neural Nets — visual intuition",
    videos: [
      {
        id: "aircAruvnKk",
        title: "But what is a neural network?",
        author: "3Blue1Brown",
        why: "The chapter-1 visual primer everyone refers back to. Quiet, careful, no hype.",
      },
      {
        id: "IHZwWFHWa-w",
        title: "Gradient descent, how neural networks learn",
        author: "3Blue1Brown",
        why: "Pairs with the micrograd video — the same idea from the geometric side.",
      },
      {
        id: "Ilg3gGewQ5U",
        title: "What is backpropagation really doing?",
        author: "3Blue1Brown",
        why: "The chain rule, made visual. Watch immediately after the Karpathy backprop video.",
      },
      {
        id: "tIeHLnjs5U8",
        title: "Backpropagation calculus",
        author: "3Blue1Brown",
        why: "The math chapter for when the visual version isn't enough.",
      },
    ],
  },
  {
    eyebrow: "03 / Math you'll actually use",
    title: "Math you'll actually use",
    videos: [
      {
        id: "fNk_zzaMoSs",
        title: "Vectors | Chapter 1, Essence of linear algebra",
        author: "3Blue1Brown",
        why: "Linear algebra the way it's used in ML — geometric, not symbolic. The whole series is worth it.",
      },
      {
        id: "WUvTyaaNkzM",
        title: "The essence of calculus, chapter 1",
        author: "3Blue1Brown",
        why: "The derivative as 'how a quantity responds to a small nudge' — the same intuition every gradient-descent step uses.",
      },
    ],
  },
  {
    eyebrow: "04 / Python patterns",
    title: "Python patterns",
    videos: [
      {
        id: "tmeKsb2Fras",
        title: "Python's most magical method: __init_subclass__",
        author: "mCoding (James Murphy)",
        why: "Calmly demonstrates a real metaprogramming hook — the kind of pattern frameworks lean on.",
      },
      {
        id: "_AEJHKGk9ns",
        title: "Why I prefer __init_subclass__ to metaclasses",
        author: "mCoding (James Murphy)",
        why: "Companion piece — 'why' before 'how' on a topic most tutorials gloss over.",
      },
      {
        id: "9OeznAkyQz4",
        title: "Floating Point Numbers — Computerphile",
        author: "Computerphile",
        why: "Why 0.1 + 0.2 != 0.3 — the explanation that finally makes float behavior make sense.",
      },
    ],
  },
];

function PythonTutorVideos({ onNavigate }) {
  const user = window.usePtUser();
  return (
    <div className="pt-page">
      <window.PtNav route="videos" onNavigate={onNavigate} user={user} />
      <main className="pt-main">
        <section className="pt-soon" style={{ paddingTop: 24, paddingBottom: 8 }}>
          <div className="ct-eyebrow">Curated videos</div>
          <h1 className="pt-soon-h1" style={{ fontSize: "clamp(28px, 3.6vw, 40px)" }}>
            Calm, factual, no hype.
          </h1>
          <p className="pt-soon-sub">
            A small list, hand-picked. These are the videos worth pausing for —
            they take their time and they tell the truth.
          </p>
        </section>

        {PT_VIDEO_GROUPS.map((g) => (
          <section key={g.title} className="pt-video-group">
            <div className="ct-eyebrow pt-video-group-eyebrow">{g.eyebrow}</div>
            <h2 className="pt-video-group-title">{g.title}</h2>
            <div className="pt-video-grid">
              {g.videos.map((v) => <VideoCard key={v.id} v={v} />)}
            </div>
          </section>
        ))}
      </main>
      <window.PtFooter />
    </div>
  );
}

function VideoCard({ v }) {
  // Lazy-load the iframe by default — only render the iframe when the
  // user clicks the thumbnail. Saves bandwidth + keeps the page calm
  // (no autoplay sound bombs, no tracking until they ask for it).
  const { useState } = React;
  const [open, setOpen] = useState(false);
  const thumb = `https://i.ytimg.com/vi/${v.id}/hqdefault.jpg`;
  const watchUrl = `https://www.youtube.com/watch?v=${v.id}`;
  return (
    <div className="pt-video-card">
      <div className="pt-video-frame">
        {open ? (
          <iframe
            title={v.title}
            src={`https://www.youtube-nocookie.com/embed/${v.id}?rel=0`}
            allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowFullScreen
            loading="lazy"
            referrerPolicy="strict-origin-when-cross-origin"
          />
        ) : (
          <button
            type="button"
            className="pt-video-poster"
            onClick={() => setOpen(true)}
            aria-label={`Play: ${v.title}`}
          >
            <img src={thumb} alt="" loading="lazy" />
            <span className="pt-video-play" aria-hidden="true">▶</span>
          </button>
        )}
      </div>
      <div className="pt-video-meta">
        <div className="pt-video-title">
          <a href={watchUrl} target="_blank" rel="noopener noreferrer">{v.title}</a>
        </div>
        <div className="ct-mono ct-dim pt-video-author">{v.author}</div>
        <div className="pt-video-why">{v.why}</div>
      </div>
    </div>
  );
}

window.PythonTutorVideos = PythonTutorVideos;