// courses.jsx — Courses listing + Course detail
(function () {
  const { useState, useMemo } = React;
  const Icon = window.Icon;
  const D = window.DATA;
  const { Placeholder, CourseCard, CAT_LABEL } = window;

  function PageHero({ eyebrow, title, sub, crumb, navigate }) {
    return (
      <section style={{ position: "relative", overflow: "hidden", background: "linear-gradient(135deg, var(--brand) 0%, var(--brand-ink) 100%)", color: "#fff" }}>
        <div style={{ position: "absolute", inset: 0, backgroundImage: "radial-gradient(rgba(255,255,255,.06) 1.5px, transparent 1.6px)", backgroundSize: "22px 22px", opacity: .55 }} />
        <div style={{ position: "absolute", top: -120, right: -60, width: 420, height: 420, borderRadius: "50%", background: "radial-gradient(circle, rgba(248,181,24,.2), transparent 70%)" }} />
        <div className="wrap" style={{ position: "relative", paddingBlock: "clamp(48px,6vw,84px)" }}>
          <nav style={{ display: "flex", alignItems: "center", gap: 8, fontSize: ".88rem", color: "rgba(255,255,255,.7)", fontWeight: 600, flexWrap: "wrap", whiteSpace: "nowrap" }}>
            <a href="#home" onClick={(e) => { e.preventDefault(); navigate("home"); }} style={{ color: "rgba(255,255,255,.7)" }}>Home</a>
            {crumb && crumb.map((c, i) => (
              <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
                <Icon name="chevronRight" size={14} />
                {c.key ? <a href="#" onClick={(e) => { e.preventDefault(); navigate(c.key); }} style={{ color: "rgba(255,255,255,.7)" }}>{c.label}</a> : <span style={{ color: "#fff" }}>{c.label}</span>}
              </span>
            ))}
          </nav>
          <span className="eyebrow" style={{ color: "var(--accent)", marginTop: 22, display: "inline-flex" }}>{eyebrow}</span>
          <h1 style={{ fontSize: "clamp(2.1rem,4.4vw,3.4rem)", color: "#fff", marginTop: 14 }}>{title}</h1>
          {sub && <p style={{ color: "rgba(255,255,255,.82)", marginTop: 16, fontSize: "1.12rem", maxWidth: 620 }}>{sub}</p>}
        </div>
      </section>
    );
  }

  function Courses({ navigate }) {
    const [cat, setCat] = useState("all");
    const [q, setQ] = useState("");
    const list = useMemo(() => D.COURSES.filter((c) => (cat === "all" || c.cat === cat) && (q.trim() === "" || (c.title + " " + c.tagline + " " + c.software.join(" ")).toLowerCase().includes(q.toLowerCase()))), [cat, q]);
    return (
      <main>
        <PageHero eyebrow="Our Courses" title="Find the course that fits your goals"
          sub="Twelve professional, hands-on programs across design, marketing, CAD & 3D and IT — built to make you job-ready."
          crumb={[{ label: "Courses" }]} navigate={navigate} />
        <section className="section">
          <div className="wrap">
            {/* controls */}
            <div className="course-controls" style={{ display: "flex", justifyContent: "space-between", gap: 18, flexWrap: "wrap", marginBottom: 36 }}>
              <div className="cat-tabs" style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                {D.CATEGORIES.map((c) => (
                  <button key={c.key} onClick={() => setCat(c.key)}
                    style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "11px 18px", borderRadius: 999, fontWeight: 700, fontSize: ".92rem", border: "1.5px solid", cursor: "pointer", transition: "all .15s ease",
                      borderColor: cat === c.key ? "var(--brand)" : "var(--line)",
                      background: cat === c.key ? "var(--brand)" : "var(--surface)",
                      color: cat === c.key ? "#fff" : "var(--ink-2)" }}>
                    <Icon name={c.icon} size={17} /> {c.label}
                  </button>
                ))}
              </div>
              <div style={{ position: "relative", minWidth: 240 }}>
                <Icon name="search" size={18} style={{ position: "absolute", left: 15, top: "50%", transform: "translateY(-50%)", color: "var(--ink-3)" }} />
                <input className="input" placeholder="Search courses…" value={q} onChange={(e) => setQ(e.target.value)} style={{ paddingLeft: 44 }} />
              </div>
            </div>

            {list.length === 0 ? (
              <div style={{ textAlign: "center", padding: "70px 20px", background: "var(--surface)", borderRadius: "var(--r-lg)", border: "1px dashed var(--line)" }}>
                <span style={{ width: 66, height: 66, borderRadius: 18, background: "var(--cream-2)", display: "inline-grid", placeItems: "center", color: "var(--ink-3)" }}><Icon name="search" size={32} /></span>
                <h3 style={{ marginTop: 18 }}>No courses found</h3>
                <p className="muted" style={{ marginTop: 8 }}>Try a different category or search term.</p>
                <button className="btn btn-outline btn-sm" style={{ marginTop: 18 }} onClick={() => { setCat("all"); setQ(""); }}>Clear filters</button>
              </div>
            ) : (
              <div className="card-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 26 }}>
                {list.map((c) => <CourseCard key={c.slug} course={c} navigate={navigate} />)}
              </div>
            )}
          </div>
        </section>
      </main>
    );
  }

  function CourseDetail({ slug, navigate }) {
    const c = D.COURSES.find((x) => x.slug === slug);
    if (!c) {
      return (
        <main>
          <PageHero eyebrow="Course" title="Course not found" crumb={[{ label: "Courses", key: "courses" }, { label: "Not found" }]} navigate={navigate} />
          <section className="section"><div className="wrap" style={{ textAlign: "center" }}>
            <button className="btn btn-brand" onClick={() => navigate("courses")}>Back to all courses</button>
          </div></section>
        </main>
      );
    }
    const related = D.COURSES.filter((x) => x.cat === c.cat && x.slug !== c.slug).slice(0, 3);
    return (
      <main>
        <PageHero eyebrow={CAT_LABEL[c.cat]} title={c.title} sub={c.blurb}
          crumb={[{ label: "Courses", key: "courses" }, { label: c.title }]} navigate={navigate} />

        <section className="section">
          <div className="wrap detail-grid" style={{ display: "grid", gridTemplateColumns: "1.6fr .9fr", gap: 44, alignItems: "start" }}>
            <div>
              <image-slot id={"course-" + c.slug} src={c.image} shape="rounded" radius="22" placeholder={"Drop a " + c.title + " photo"}
                style={{ width: "100%", height: 360, display: "block", boxShadow: "var(--sh-md)", marginBottom: 36 }}></image-slot>

              <h2 style={{ fontSize: "1.7rem" }}>About this course</h2>
              <p className="muted" style={{ marginTop: 14, fontSize: "1.06rem" }}>{c.blurb} You'll work through guided projects and finish with portfolio-ready pieces and the confidence to apply your skills professionally.</p>

              <h2 style={{ fontSize: "1.7rem", marginTop: 40 }}>What you'll learn</h2>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginTop: 18 }}>
                {c.outcomes.map((o) => (
                  <div key={o} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                    <span style={{ width: 26, height: 26, borderRadius: "50%", background: "var(--ok-bg)", color: "var(--ok)", display: "grid", placeItems: "center", flex: "0 0 auto", marginTop: 2 }}><Icon name="check" size={16} stroke={2.6} /></span>
                    <span style={{ fontWeight: 600 }}>{o}</span>
                  </div>
                ))}
              </div>

              <h2 style={{ fontSize: "1.7rem", marginTop: 44 }}>Course curriculum</h2>
              <div style={{ marginTop: 18, display: "grid", gap: 12 }}>
                {c.modules.map((m, i) => (
                  <details key={i} className="card" style={{ padding: 0, overflow: "hidden" }} open={i === 0}>
                    <summary style={{ display: "flex", alignItems: "center", gap: 16, padding: "18px 22px", cursor: "pointer", listStyle: "none", fontWeight: 700 }}>
                      <span style={{ width: 34, height: 34, borderRadius: 10, background: "var(--accent-soft)", color: "var(--accent-700)", display: "grid", placeItems: "center", flex: "0 0 auto", fontWeight: 800 }}>{String(i + 1).padStart(2, "0")}</span>
                      <span style={{ flex: 1 }}>{m.t}</span>
                      <Icon name="chevronDown" size={20} style={{ color: "var(--ink-3)" }} />
                    </summary>
                    <div style={{ padding: "0 22px 20px 72px", color: "var(--ink-2)" }}>{m.d}</div>
                  </details>
                ))}
              </div>
            </div>

            {/* sticky enroll card */}
            <aside className="detail-aside" style={{ position: "sticky", top: 96, display: "grid", gap: 20 }}>
              <div className="card" style={{ padding: 26 }}>
                <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
                  <span style={{ fontSize: "2rem", fontWeight: 800, color: "var(--brand)" }}>{c.fee}</span>
                  <span className="muted" style={{ fontSize: ".9rem" }}>/ full course</span>
                </div>
                <span className="chip" style={{ marginTop: 12 }}>Easy installments available</span>
                <ul style={{ listStyle: "none", padding: 0, margin: "22px 0", display: "grid", gap: 14 }}>
                  {[["clock", "Duration", c.duration], ["chart", "Level", c.level], ["book", "Lessons", c.lessons + " sessions"], ["award", "Certificate", "Verifiable on completion"]].map(([ic, t, v]) => (
                    <li key={t} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12 }}>
                      <span style={{ display: "inline-flex", alignItems: "center", gap: 10, color: "var(--ink-2)", fontWeight: 600, fontSize: ".94rem" }}><Icon name={ic} size={18} style={{ color: "var(--brand-500)" }} /> {t}</span>
                      <span style={{ fontWeight: 700, fontSize: ".94rem", textAlign: "right" }}>{v}</span>
                    </li>
                  ))}
                </ul>
                <button className="btn btn-accent" style={{ width: "100%" }} onClick={() => navigate("contact")}><Icon name="rocket" size={18} /> Enroll now</button>
                <a className="btn btn-outline" style={{ width: "100%", marginTop: 10 }} href={"tel:" + D.INSTITUTE.phoneHref}><Icon name="phone" size={18} /> Ask a question</a>
              </div>

              <div className="card" style={{ padding: 26 }}>
                <h3 style={{ fontSize: "1.05rem" }}>Software & tools</h3>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 14 }}>
                  {c.software.map((s) => <span key={s} className="chip chip-brand">{s}</span>)}
                </div>
              </div>
            </aside>
          </div>
        </section>

        {related.length > 0 && (
          <section className="section" style={{ background: "var(--cream-2)", paddingTop: 0 }}>
            <div className="wrap" style={{ paddingTop: "clamp(56px,7vw,104px)" }}>
              <div className="head"><span className="eyebrow">Keep exploring</span><h2 style={{ fontSize: "clamp(1.6rem,2.8vw,2.2rem)" }}>Related courses</h2></div>
              <div className="card-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 26, marginTop: 36 }}>
                {related.map((r) => <CourseCard key={r.slug} course={r} navigate={navigate} />)}
              </div>
            </div>
          </section>
        )}
      </main>
    );
  }

  Object.assign(window, { Courses, CourseDetail, PageHero });
})();