// cards.jsx — CourseCard + TestimonialCard
(function () {
  const Icon = window.Icon;
  const { Placeholder, Stars } = window;

  const CAT_LABEL = {
    design: "Design & Creative", marketing: "Digital Marketing", cad: "CAD & 3D", it: "IT Fundamentals",
  };

  function CourseCard({ course, navigate, compact }) {
    const c = course;
    return (
      <a href={"#course/" + c.slug} onClick={(e) => { e.preventDefault(); navigate("course", c.slug); }}
        className="course-card card"
        style={{ display: "flex", flexDirection: "column", overflow: "hidden", textAlign: "left", cursor: "pointer" }}>
        <div style={{ position: "relative" }}>
          <image-slot id={"course-card-" + c.slug} src={c.image} shape="rect" fit="cover" placeholder="Course Cover"
            style={{ width: "100%", aspectRatio: "16 / 10", display: "block" }}></image-slot>
          <div style={{ position: "absolute", top: 14, left: 14 }}>
            <span className="chip" style={{ background: "rgba(255,255,255,.92)", color: "var(--brand)", backdropFilter: "blur(4px)" }}>{CAT_LABEL[c.cat]}</span>
          </div>
          {c.featured && (
            <div style={{ position: "absolute", top: 14, right: 14 }}>
              <span className="chip" style={{ background: "var(--accent)", color: "var(--brand-ink)" }}><Icon name="star" size={13} fill /> Featured</span>
            </div>
          )}
          <div style={{ position: "absolute", left: 14, bottom: 14, width: 52, height: 52, borderRadius: 15,
            background: "linear-gradient(135deg, var(--accent), var(--accent-600))", display: "grid", placeItems: "center",
            color: "var(--brand-ink)", boxShadow: "0 8px 18px rgba(248,181,24,.45)" }}>
            <Icon name={c.icon} size={26} />
          </div>
        </div>
        <div style={{ padding: "20px 22px 22px", display: "flex", flexDirection: "column", flex: 1 }}>
          <h3 style={{ fontSize: "1.28rem" }}>{c.title}</h3>
          <p className="muted" style={{ marginTop: 8, fontSize: ".97rem", flex: 1 }}>{c.tagline}</p>
          <div style={{ display: "flex", gap: 16, marginTop: 16, fontSize: ".88rem", color: "var(--ink-2)", fontWeight: 600 }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Icon name="clock" size={16} style={{ color: "var(--brand-500)" }} /> {c.duration}</span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Icon name="book" size={16} style={{ color: "var(--brand-500)" }} /> {c.lessons} lessons</span>
          </div>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 18, paddingTop: 18, borderTop: "1px solid var(--line-2)" }}>
            <span style={{ fontWeight: 800, color: "var(--brand)", fontSize: "1.1rem" }}>{c.fee}</span>
            <span className="course-cta" style={{ display: "inline-flex", alignItems: "center", gap: 6, fontWeight: 700, color: "var(--accent-700)", fontSize: ".92rem" }}>
              View details <Icon name="arrowRight" size={17} />
            </span>
          </div>
        </div>
      </a>
    );
  }

  function TestimonialCard({ t, featured }) {
    return (
      <figure className="card" style={{ margin: 0, padding: featured ? "34px 34px 30px" : "28px 28px 26px", display: "flex", flexDirection: "column", gap: 16, height: "100%" }}>
        <Icon name="quote" size={34} fill style={{ color: "var(--accent)", opacity: .9 }} />
        <blockquote style={{ margin: 0, fontSize: featured ? "1.18rem" : "1.02rem", lineHeight: 1.6, color: "var(--ink)", fontWeight: 500, flex: 1 }}>
          "{t.quote}"
        </blockquote>
        <Stars n={t.rating} />
        <figcaption style={{ display: "flex", alignItems: "center", gap: 14, marginTop: 4, paddingTop: 18, borderTop: "1px solid var(--line-2)" }}>
          <image-slot id={t.photo} src={t.image} style={{ width: 50, height: 50, flex: "0 0 auto" }} shape="circle" placeholder="Photo"></image-slot>
          <span style={{ display: "grid", lineHeight: 1.3 }}>
            <span style={{ fontWeight: 800, color: "var(--ink)" }}>{t.name}</span>
            <span style={{ fontSize: ".86rem", color: "var(--ink-2)" }}>{t.course} Graduate</span>
          </span>
        </figcaption>
      </figure>
    );
  }

  Object.assign(window, { CourseCard, TestimonialCard, CAT_LABEL });
})();