// Lumen — Student dashboard + Course catalog
function StudentDashboard({ onOpenCourse, onOpenQuiz, onOpenCatalog }) {
  const D = window.LUMEN_DATA;
  const myCourses = D.COURSES.filter(c => c.progress > 0);
  const continueWatching = myCourses[0];

  return (
    <div className="page">
      <Topbar crumbs={["Learn", "My courses"]} search="Search courses, lessons…"
              right={<><button className="btn btn--secondary btn--sm" onClick={onOpenCatalog}><I.globe size={14}/> Browse catalog</button></>}/>
      <div className="page__body">
        <div className="page__head">
          <div>
            <h1 className="page__title">Welcome back, Hana</h1>
            <div className="page__subtitle">You've watched 6h 12m this week — top 8% of learners.</div>
          </div>
          <div className="row">
            <span className="badge badge--green badge--dot">7-day streak</span>
            <span className="badge"><I.clock size={11}/> 6h 12m this week</span>
          </div>
        </div>

        {/* Continue watching banner */}
        <div className="card" style={{ marginBottom: 28, padding: 0, background: continueWatching.cover, color: "white", border: "none", overflow: "hidden", position: "relative" }}>
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(90deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.3) 50%, transparent 100%)" }}/>
          <div style={{ position: "relative", padding: 32, display: "flex", alignItems: "center", gap: 24 }}>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 11, opacity: 0.7, textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 8 }}>Pick up where you left off</div>
              <h2 style={{ fontSize: 26, color: "white", marginBottom: 8, letterSpacing: "-0.03em" }}>{continueWatching.title}</h2>
              <div style={{ fontSize: 13, opacity: 0.85, marginBottom: 16 }}>
                Module 2 · Lesson 4 — <em>Office hours #1 (replay)</em> · 58:21
              </div>
              <div style={{ display: "flex", gap: 16, alignItems: "center", marginBottom: 16 }}>
                <div style={{ flex: 1, maxWidth: 360, height: 4, background: "rgba(255,255,255,.2)", borderRadius: 999 }}>
                  <div style={{ width: `${continueWatching.progress}%`, height: "100%", background: "white", borderRadius: 999 }}/>
                </div>
                <span className="mono" style={{ fontSize: 12 }}>{continueWatching.progress}% · {continueWatching.lessonsCompleted}/{continueWatching.lessonsTotal} lessons</span>
              </div>
              <button className="btn btn--lg" style={{ background: "white", color: "var(--ink)" }} onClick={() => onOpenCourse(continueWatching.id)}>
                <I.play size={12}/> Resume lesson
              </button>
            </div>
          </div>
        </div>

        {/* Quick stats */}
        <div className="stats" style={{ marginBottom: 28 }}>
          <div className="stat">
            <div className="stat__label">Courses in progress</div>
            <div className="stat__value">{myCourses.length}</div>
            <div className="stat__delta">2 due this week</div>
          </div>
          <div className="stat">
            <div className="stat__label">Hours this week</div>
            <div className="stat__value">6h 12m</div>
            <div className="stat__delta stat__delta--up"><I.arrowUp size={11}/> +1h 24m vs last</div>
            <div className="stat__spark"><Sparkline data={[2.1, 3.4, 4.8, 5.2, 4.1, 5.8, 6.2]} width={200} height={36} color="var(--ink)" fill/></div>
          </div>
          <div className="stat">
            <div className="stat__label">Quizzes passed</div>
            <div className="stat__value">14<span className="muted" style={{fontSize:14, fontWeight:400}}>/16</span></div>
            <div className="stat__delta">Avg score 88%</div>
          </div>
          <div className="stat">
            <div className="stat__label">Certificates</div>
            <div className="stat__value">3</div>
            <div className="stat__delta">+1 since March</div>
          </div>
        </div>

        {/* In progress */}
        <div className="row" style={{ justifyContent: "space-between", marginBottom: 14 }}>
          <h2 style={{ fontSize: 18 }}>In progress</h2>
          <a className="muted" style={{ fontSize: 13, cursor: "pointer" }}>View all →</a>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, marginBottom: 32 }}>
          {myCourses.slice(0, 3).map(c => (
            <CourseCard key={c.id} course={c} onClick={() => onOpenCourse(c.id)}/>
          ))}
        </div>

        {/* Up next + quizzes */}
        <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 16 }}>
          <div className="card">
            <div className="card__head">
              <div style={{ fontSize: 14, fontWeight: 600 }}>Up next this week</div>
              <button className="btn btn--ghost btn--sm">Calendar <I.chev size={12}/></button>
            </div>
            <div>
              {[
                { day: "TUE", date: "06", title: "Office hours #1 (replay)", course: "Course Creator OS", time: "58 min", action: "Watch" },
                { day: "WED", date: "07", title: "Quiz: positioning fundamentals", course: "Course Creator OS", time: "5 questions", action: "Start", quiz: true },
                { day: "FRI", date: "09", title: "Module 3 unlocks", course: "Course Creator OS", time: "Drip · 9am", action: "Notify", locked: true },
                { day: "MON", date: "12", title: "Live: Founder Q&A", course: "Founder Storytelling", time: "1h · 11am ET", action: "RSVP" },
              ].map((it, i) => (
                <div key={i} className="row" style={{ padding: "14px 20px", borderBottom: i < 3 ? "1px solid var(--border)" : "none", gap: 16 }}>
                  <div style={{ width: 40, textAlign: "center", padding: "4px 0", border: "1px solid var(--border)", borderRadius: 6 }}>
                    <div style={{ fontSize: 9, color: "var(--ink-3)", letterSpacing: "0.05em" }}>{it.day}</div>
                    <div style={{ fontSize: 16, fontWeight: 600, fontFamily: "var(--font-display)", letterSpacing: "-0.02em" }}>{it.date}</div>
                  </div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 500, display: "flex", alignItems: "center", gap: 6 }}>
                      {it.locked && <I.lock size={11}/>}
                      {it.title}
                    </div>
                    <div className="muted" style={{ fontSize: 12 }}>{it.course} · {it.time}</div>
                  </div>
                  <button className="btn btn--secondary btn--sm" onClick={() => it.quiz && onOpenQuiz()}>{it.action}</button>
                </div>
              ))}
            </div>
          </div>

          <div className="card">
            <div className="card__head">
              <div style={{ fontSize: 14, fontWeight: 600 }}>Skill progress</div>
              <span className="badge">This term</span>
            </div>
            <div className="card__pad" style={{ display: "flex", flexDirection: "column", gap: 18 }}>
              {[
                { skill: "Positioning", v: 86, c: "var(--ink)" },
                { skill: "Offer design", v: 64, c: "var(--ink)" },
                { skill: "Launch ops", v: 42, c: "var(--ink)" },
                { skill: "Storytelling", v: 71, c: "var(--ink)" },
              ].map(s => (
                <div key={s.skill}>
                  <div className="row" style={{ justifyContent: "space-between", marginBottom: 6 }}>
                    <div style={{ fontSize: 13, fontWeight: 500 }}>{s.skill}</div>
                    <div className="mono" style={{ fontSize: 12 }}>{s.v}%</div>
                  </div>
                  <div className="progress"><div className="progress__fill" style={{ width: `${s.v}%` }}/></div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function CourseCard({ course, onClick }) {
  return (
    <div className="card" style={{ cursor: "pointer", transition: "transform 120ms, box-shadow 120ms" }}
         onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.boxShadow = "var(--shadow-md)"; }}
         onMouseLeave={e => { e.currentTarget.style.transform = ""; e.currentTarget.style.boxShadow = ""; }}
         onClick={onClick}>
      <div style={{ height: 130, background: course.cover, position: "relative", display: "flex", alignItems: "center", justifyContent: "center" }}>
        <div style={{ position: "absolute", inset: 0, opacity: 0.15,
          background: "repeating-linear-gradient(45deg, transparent 0 12px, rgba(255,255,255,.4) 12px 13px)" }}/>
        <div style={{ position: "absolute", top: 12, left: 12 }}>
          <span className="badge" style={{ background: "rgba(0,0,0,.4)", color: "white", border: "none" }}>{course.category}</span>
        </div>
        <div style={{ position: "relative", color: "white", fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em", padding: "0 24px", textAlign: "center", lineHeight: 1.1 }}>
          {course.title.split(" ").slice(0, 4).join(" ")}
        </div>
      </div>
      <div style={{ padding: 16 }}>
        <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 4, letterSpacing: "-0.01em" }}>{course.title}</div>
        <div className="muted" style={{ fontSize: 12, marginBottom: 12 }}>{course.instructor} · {course.duration}</div>
        {course.progress > 0 ? (
          <>
            <div className="row" style={{ justifyContent: "space-between", marginBottom: 6 }}>
              <span style={{ fontSize: 12 }}>{course.lessonsCompleted}/{course.lessonsTotal} lessons</span>
              <span className="mono" style={{ fontSize: 12, fontWeight: 600 }}>{course.progress}%</span>
            </div>
            <div className="progress"><div className="progress__fill" style={{ width: `${course.progress}%` }}/></div>
          </>
        ) : (
          <div className="row" style={{ justifyContent: "space-between" }}>
            <div className="row" style={{ gap: 4, fontSize: 12 }}>
              <I.star size={12} fill="currentColor" stroke={0}/> {course.rating} <span className="muted">· {course.students.toLocaleString()} students</span>
            </div>
            <div style={{ fontWeight: 600, fontSize: 14 }}>${course.price}</div>
          </div>
        )}
      </div>
    </div>
  );
}

function CourseCatalog({ onOpenCourse }) {
  const D = window.LUMEN_DATA;
  const [cat, setCat] = React.useState("All");
  const cats = ["All", "Business", "Writing", "Design", "Marketing", "Sales", "Tech"];
  const featured = D.COURSES[0];
  const filtered = cat === "All" ? D.COURSES : D.COURSES.filter(c => c.category === cat);

  return (
    <div className="page">
      <Topbar crumbs={["Learn", "Catalog"]} search="Search 240+ courses…"/>
      <div className="page__body">
        <div className="page__head">
          <div>
            <h1 className="page__title">Catalog</h1>
            <div className="page__subtitle">240 courses across 14 categories. New each week.</div>
          </div>
          <div className="row">
            <button className="btn btn--secondary btn--sm"><I.filter size={14}/> Filter</button>
            <button className="btn btn--secondary btn--sm">Sort: Most popular <I.chevDown size={12}/></button>
          </div>
        </div>

        {/* Featured */}
        <div className="card" style={{ marginBottom: 28, display: "grid", gridTemplateColumns: "1.2fr 1fr", overflow: "hidden", padding: 0 }}>
          <div style={{ padding: 32 }}>
            <span className="badge badge--ink" style={{ marginBottom: 12 }}>Editor's pick</span>
            <h2 style={{ fontSize: 28, letterSpacing: "-0.03em", marginBottom: 12, textWrap: "balance" }}>{featured.title}</h2>
            <p className="muted" style={{ fontSize: 14, lineHeight: 1.6, marginBottom: 20 }}>{featured.description}</p>
            <div className="row" style={{ marginBottom: 20 }}>
              <div className="avatar">{featured.instructor.split(" ").map(n => n[0]).join("")}</div>
              <div>
                <div style={{ fontSize: 13, fontWeight: 500 }}>{featured.instructor}</div>
                <div className="muted" style={{ fontSize: 11 }}>Founder, Klein·Co</div>
              </div>
              <div className="row" style={{ marginLeft: 24, gap: 16, fontSize: 12 }}>
                <span><I.star size={12} fill="currentColor" stroke={0}/> {featured.rating} ({featured.reviews})</span>
                <span className="muted">{featured.students.toLocaleString()} students</span>
                <span className="muted">{featured.duration}</span>
              </div>
            </div>
            <div className="row">
              <button className="btn btn--primary" onClick={() => onOpenCourse(featured.id)}>Preview <I.arrowRight size={14}/></button>
              <div style={{ fontSize: 13 }}><strong style={{fontSize: 18, fontFamily: "var(--font-display)"}}>${featured.price}</strong> <span className="muted">one-time</span></div>
            </div>
          </div>
          <div style={{ background: featured.cover, position: "relative", minHeight: 280 }}>
            <div style={{ position: "absolute", inset: 24, border: "1px solid rgba(255,255,255,.25)", borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center" }}>
              <div style={{ width: 64, height: 64, borderRadius: "50%", background: "rgba(255,255,255,.2)", display: "flex", alignItems: "center", justifyContent: "center", color: "white", backdropFilter: "blur(8px)" }}>
                <I.play size={24}/>
              </div>
            </div>
          </div>
        </div>

        {/* Category tabs */}
        <div className="row" style={{ gap: 6, marginBottom: 20, flexWrap: "wrap" }}>
          {cats.map(c => (
            <button key={c} onClick={() => setCat(c)}
              className={`btn ${cat === c ? "btn--primary" : "btn--secondary"} btn--sm`}>{c}</button>
          ))}
        </div>

        {/* Grid */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
          {filtered.map(c => (
            <CourseCard key={c.id} course={{ ...c, progress: 0 }} onClick={() => onOpenCourse(c.id)}/>
          ))}
        </div>
      </div>
    </div>
  );
}

window.StudentDashboard = StudentDashboard;
window.CourseCatalog = CourseCatalog;
window.CourseCard = CourseCard;