// Courses hub page

function CourseCard({ course }) {
  const bullets = tx(course, "bullets");
  return (
    <article className={"course-card" + (course.status === "soon" ? " is-soon" : "")}>
      <div className="course-card-head">
        <span className="course-icon"><i data-lucide={course.icon}></i></span>
        <span className="course-status">{tx(course, "eyebrow")}</span>
      </div>
      <h3 className="course-title">{tx(course, "title")}</h3>
      <div className="course-meta">
        <span><i data-lucide="clock" style={{ width: 12, height: 12 }}></i> {tx(course, "duration")}</span>
        <span><i data-lucide="bar-chart-3" style={{ width: 12, height: 12 }}></i> {tx(course, "level")}</span>
      </div>
      <p className="course-desc">{tx(course, "desc")}</p>
      {bullets && (
        <ul className="course-bullets">
          {bullets.map((b, i) => (
            <li key={i}><i data-lucide="check"></i> {b}</li>
          ))}
        </ul>
      )}
      <div className="course-actions">
        {course.status === "available" ? (
          <>
            <a href={course.href} className="btn btn--primary">
              {t("courses.viewCurriculum")} <i data-lucide="arrow-right"></i>
            </a>
            {course.forentoHref && (
              <a href="enroll.html" className="btn btn--outline">
                {t("courses.openForento")} <i data-lucide="arrow-right"></i>
              </a>
            )}
          </>
        ) : (
          <a
            href="mailto:info@pmosimplified.com?subject=Notify me when this course launches"
            className="btn btn--outline">
            {t("courses.notifyMe")} <i data-lucide="bell"></i>
          </a>
        )}
      </div>
    </article>
  );
}

function ModuleDetail({ module: m }) {
  if (!m.details) {
    return (
      <div className="module-detail-block">
        <p className="module-detail-coming">{t("courses.detailComingSoon")}</p>
        <a href={m.videoUrl || "enroll.html"}
           target={m.videoUrl ? "_blank" : undefined}
           rel={m.videoUrl ? "noopener noreferrer" : undefined}
           className="btn btn--primary btn--sm">
          {t("cta.enrollNow")} <i data-lucide="arrow-right"></i>
        </a>
      </div>
    );
  }
  const d = m.details;
  return (
    <>
      <div className="module-detail-block">
        <h4>{t("courses.moduleOverview")}</h4>
        <p>{tx(d, "overview")}</p>
      </div>
      <div className="module-detail-block">
        <h4>{t("courses.learningObjectives")}</h4>
        <ul>
          {tx(d, "objectives").map((o, i) => (
            <li key={i}><i data-lucide="check"></i> {o}</li>
          ))}
        </ul>
      </div>
      <div className="module-detail-block">
        <h4>{t("courses.whoIsFor")}</h4>
        <ul>
          {tx(d, "audience").map((a, i) => (
            <li key={i}><i data-lucide="user"></i> {a}</li>
          ))}
        </ul>
      </div>
      <a href={m.videoUrl || ("enroll.html?module=" + m.num)}
         target={m.videoUrl ? "_blank" : undefined}
         rel={m.videoUrl ? "noopener noreferrer" : undefined}
         className="btn btn--primary btn--sm module-detail-cta">
        {t("courses.enrollModule")} {m.num} <i data-lucide="arrow-right"></i>
      </a>
    </>
  );
}

function CoursesApp() {
  const [tweaks, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{ "themeColor": "navy" }/*EDITMODE-END*/);
  const [expandedModule, setExpandedModule] = React.useState(null);
  useLucideIcons([tweaks, expandedModule]);
  useTweakBodyClasses(tweaks);

  return (
    <>
      <SiteNav active="courses" />

      <section className="courses-hero courses-hero--stacked">
        <div className="container" style={{ textAlign: "center" }}>
          <div className="courses-hero-image-wrap">
            <img
              src="assets/courses-hero.jpg"
              alt="Working PMO team in a strategy session — facilitator presenting a project board to colleagues with laptops"
              className="courses-hero-image"
            />
          </div>
          <span className="eyebrow">{t("courses.heroEyebrow")}</span>
          <h1 style={{ fontSize: "35px" }}>{t("courses.heroTitle")}</h1>
          <p style={{ maxWidth: "640px", margin: "0 auto" }}>{t("courses.heroSub")}</p>
          <div className="courses-hero-actions" style={{ justifyContent: "center" }}>
            <a href="enroll.html" className="btn btn--primary btn--lg">
              {t("cta.enrollNow")} <i data-lucide="arrow-right"></i>
            </a>
            <a href="enroll.html" className="btn btn--outline btn--lg">
              {t("courses.exploreForento")} <i data-lucide="arrow-right"></i>
            </a>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-head" style={{ marginBottom: 32 }}>
            <div className="section-head-text">
              <span className="eyebrow">{t("courses.catalogueEyebrow")}</span>
              <h2 style={{ fontSize: 32 }}>{t("courses.catalogueTitle")}</h2>
              <p>{t("courses.catalogueSub")}</p>
            </div>
          </div>
          <div className="course-grid">
            {SITE.COURSES.map((c) => <CourseCard key={c.id} course={c} />)}
          </div>
        </div>
      </section>

      <section id="curriculum" className="section">
        <div className="container">
          <div className="section-head" style={{ marginBottom: 32 }}>
            <div className="section-head-text">
              <span className="eyebrow">{t("courses.curriculumEyebrow")}</span>
              <h2 style={{ fontSize: 32, whiteSpace: "nowrap" }}>{t("home.modulesTitle")}</h2>
              <p>{t("home.modulesSub")}</p>
            </div>
            <a href="enroll.html" className="btn btn--primary">
              {t("courses.enrollPMOMastery")} <i data-lucide="arrow-right"></i>
            </a>
          </div>
          <div className="module-grid">
            {SITE.MODULES.map((m) => {
              const isOpen = expandedModule === m.num;
              return (
                <div
                  key={m.num}
                  className={"module-card is-numbered is-expandable" + (isOpen ? " is-open" : "")}>
                  <div className="module-head">
                    <span className="module-icon" data-num={String(m.num).padStart(2, "0")}>
                      <i data-lucide={m.icon}></i>
                    </span>
                    <span className="module-eyebrow">{t("home.moduleLabel")} {m.num}</span>
                  </div>
                  <h3 className="module-title">{tx(m, "title")}</h3>
                  <p className="module-desc">{tx(m, "desc")}</p>
                  <div className="module-foot">
                    <span>{tx(m, "duration")}</span>
                    <button
                      type="button"
                      className="module-cta"
                      onClick={() => setExpandedModule(isOpen ? null : m.num)}
                      aria-expanded={isOpen}>
                      {isOpen ? t("cta.hideModule") : t("cta.viewModule")}
                      <i data-lucide={isOpen ? "chevron-up" : "arrow-right"}></i>
                    </button>
                  </div>
                  {isOpen && (
                    <div className="module-detail">
                      <ModuleDetail module={m} />
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      </section>

      <SiteFooter />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakRadio
          label="Primary color"
          value={tweaks.themeColor}
          onChange={(v) => setTweak("themeColor", v)}
          options={[
            { value: "navy",     label: "Navy"     },
            { value: "graphite", label: "Graphite" },
            { value: "emerald",  label: "Emerald"  },
            { value: "gold",     label: "Gold"     },
          ]}
        />
      </TweaksPanel>
    </>
  );
}

window.CoursesApp = CoursesApp;