// courses.jsx — Course catalog page.
// A real "browse & enrol" catalog: hero, category filter, and rich course
// cards (level, length, social proof, price). Holds the 100-day courses and
// the JKU university subjects in one filterable grid.

const { useState } = React;

// ── Catalog data ──────────────────────────────────────────────────────────
// color drives the per-card media tint (mixed with --card so it stays tasteful
// across every theme + dark mode).
const CATALOG = [
  {
    slug: "python",
    title: "Python in 100 days",
    category: "Programming",
    icon: "🐍",
    color: "#3d7224",
    blurb: "From print('hello world') to a web scraper, a small API, and a tiny game. No prior code needed.",
    level: "Beginner",
    lessons: 100,
    builds: ["Web scraper", "REST API", "CLI tool", "Game"],
    rating: 4.9,
    learners: 3210,
    status: "live",
    featured: true,
    href: "Day.html?day=1",
  },
  {
    slug: "german",
    title: "German in 100 days",
    category: "Languages",
    icon: "🇩🇪",
    color: "#b5852a",
    blurb: "A1 to B1 in 30 minutes a day. Spaced-repetition flashcards, AI sentence grading, and real grammar.",
    level: "A1 → B1",
    lessons: 100,
    builds: ["Flashcards", "AI grading", "Grammar", "Speaking"],
    rating: 4.8,
    learners: 1870,
    status: "live",
    featured: true,
    href: "German.html",
  },
  {
    slug: "jku-statistics",
    title: "Statistics",
    category: "University",
    icon: "📊",
    color: "#3a5fb0",
    blurb: "Descriptive stats, probability, distributions, hypothesis testing, and regression — built for JKU exams.",
    level: "JKU Linz",
    lessons: 100,
    builds: ["Probability", "Distributions", "Regression", "Hypothesis tests"],
    rating: 4.7,
    learners: 640,
    status: "live",
    href: "Statistics.html",
  },
  {
    slug: "devops",
    title: "DevOps in 100 days",
    category: "Programming",
    icon: "⚙️",
    color: "#3d7224",
    blurb: "Linux, Docker, CI/CD, Terraform, observability. For developers who keep getting paged.",
    level: "Intermediate",
    lessons: 100,
    builds: ["Docker", "CI/CD", "Terraform", "Linux"],
    status: "soon",
    href: "/devops/notify",
  },
  {
    slug: "ml",
    title: "Machine Learning in 100 days",
    category: "Programming",
    icon: "🤖",
    color: "#3d7224",
    blurb: "NumPy through transformers, the long way. Math you actually need, code you actually write.",
    level: "Intermediate",
    lessons: 100,
    builds: ["NumPy", "Neural nets", "Transformers"],
    status: "soon",
    href: "/ml/notify",
  },
  {
    slug: "jku-math1",
    title: "Mathematics 1",
    category: "University",
    icon: "∫",
    color: "#3a5fb0",
    blurb: "Limits, derivatives, integrals, and sequences — the full first-semester JKU syllabus, step by step.",
    level: "JKU Linz",
    lessons: 100,
    builds: ["Limits", "Derivatives", "Integrals"],
    status: "soon",
    href: "/jku/math1",
  },
  {
    slug: "jku-math2",
    title: "Mathematics 2",
    category: "University",
    icon: "∑",
    color: "#3a5fb0",
    blurb: "Multivariable calculus, linear algebra, and differential equations — second-semester JKU coverage.",
    level: "JKU Linz",
    lessons: 100,
    builds: ["Linear algebra", "Multivariable", "ODEs"],
    status: "soon",
    href: "/jku/math2",
  },
];

const CATEGORIES = ["All", "Programming", "Languages", "University"];

// ── Bits ──────────────────────────────────────────────────────────────────
function CourseCard({ c }) {
  const live = c.status === "live";
  return (
    <a className={`ccard ${live ? "live" : "soon"}`} href={c.href}>
      <div className="ccard-media" style={{ "--c": c.color }}>
        <span className="ccard-icon">{c.icon}</span>
        <span className="ccard-cat">{c.category}</span>
        {c.featured && <span className="ccard-flag">Popular</span>}
        {!live && <span className="ccard-flag soon">Coming soon</span>}
      </div>

      <div className="ccard-body">
        <h3>{c.title}</h3>
        <p className="ccard-blurb">{c.blurb}</p>

        <div className="ccard-tags">
          {c.builds.map((b) => <span key={b} className="ccard-tag">{b}</span>)}
        </div>

        <div className="ccard-meta">
          <span>📚 {c.lessons} lessons</span>
          <span>⏱ 30 min/day</span>
          <span>🎯 {c.level}</span>
        </div>
      </div>

      <div className="ccard-foot">
        <span className="ccard-price">
          {live ? <b>Free</b> : <span className="muted">Free at launch</span>}
        </span>
        <span className="ccard-cta">
          {live ? "Start learning" : "Notify me"} <Arrow />
        </span>
      </div>
    </a>
  );
}

function Catalog() {
  const [cat, setCat] = useState("All");
  const shown = cat === "All" ? CATALOG : CATALOG.filter((c) => c.category === cat);

  return (
    <section className="section wrap" id="courses">
      <div className="cat-tabs" role="tablist">
        {CATEGORIES.map((t) => {
          const count = t === "All" ? CATALOG.length : CATALOG.filter((c) => c.category === t).length;
          return (
            <button
              key={t}
              role="tab"
              className={`cat-tab ${cat === t ? "is-active" : ""}`}
              aria-selected={cat === t}
              onClick={() => setCat(t)}
            >
              {t} <span className="cat-tab-n">{count}</span>
            </button>
          );
        })}
      </div>

      <div className="ccards" id="jku">
        {shown.map((c) => <CourseCard key={c.slug} c={c} />)}
      </div>
    </section>
  );
}

function CoursesPage() {
  const { t, setTweak, dark, toggleDark } = usePage();

  return (
    <>
      <Nav dark={dark} onToggleDark={toggleDark} active="courses" />

      <header className="catalog-hero wrap">
        <div className="eyebrow">Course catalog</div>
        <h1>Learn one real thing,<br />thirty minutes at a time.</h1>
        <p className="lead" style={{ marginTop: 18 }}>
          Programming, languages, and JKU university subjects — each rebuilt as a hundred
          short daily lessons. Free to start, no card, finish at your own pace.
        </p>
      </header>

      <Catalog />
      <Footer />
      <SiteTweaks t={t} setTweak={setTweak} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<CoursesPage />);