/* Reusable "honest layer" course card - used in the comparison hero
   and (later) the course directory. */

function CourseCard({ data, onOpen }) {
  return (
    <div className="tr-card tr-card-hover" style={{ padding: 22, position: "relative", cursor: onOpen ? "pointer" : "default" }} onClick={onOpen}>
      {data.flag && (
        <div
          style={{
            position: "absolute", top: -13, left: 20,
            background: "var(--tr-amber-500)", color: "var(--tr-ink)",
            fontFamily: "var(--tr-font-text)", fontWeight: 700, fontSize: 11.5,
            letterSpacing: "0.04em", textTransform: "uppercase",
            padding: "5px 11px", borderRadius: 999, whiteSpace: "nowrap",
          }}
        >
          {data.flag}
        </div>
      )}
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12, marginTop: data.flag ? 8 : 0 }}>
        <span className="tr-pill tr-pill-approved" style={{ fontSize: 11 }}>
          <Icon name="badge-check" size={13} /> REPs UAE approved
        </span>
        <span className="tr-pill tr-pill-neutral" style={{ fontSize: 11 }}>Level 3</span>
      </div>

      <h3 style={{ fontFamily: "var(--tr-font-display)", fontWeight: 700, fontSize: 22, margin: "0 0 3px", color: "var(--tr-ink)", letterSpacing: "-0.01em" }}>
        {data.title}
      </h3>


      <div style={{ display: "flex", flexDirection: "column" }}>
        {data.rows.map((r) => (
          <div className="tr-kv" key={r.k}>
            <span className="tr-kv-k"><Icon name={r.icon} size={15} style={{ color: "var(--tr-brand-500)" }} /> {r.k}</span>
            <span className="tr-kv-v" style={r.accent ? { color: "var(--tr-brand-700)" } : null}>{r.v}</span>
          </div>
        ))}
      </div>

      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 16, paddingTop: 14, borderTop: "1px solid var(--tr-line-2)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <div style={{ width: 38, height: 38, borderRadius: "50%", flexShrink: 0, background: "var(--tr-brand-100)", color: "var(--tr-brand-700)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--tr-font-display)", fontWeight: 700, fontSize: 13 }}>
            {data.instructor.initials}
          </div>
          <div style={{ lineHeight: 1.25 }}>
            <div style={{ fontSize: 13.5, fontWeight: 600, color: "var(--tr-ink)" }}>{data.instructor.name}</div>
            <div style={{ fontSize: 12, color: "var(--tr-fg-muted)" }}>{data.instructor.meta}</div>
          </div>
        </div>
      </div>


    </div>
  );
}

window.CourseCard = CourseCard;