/* === CourseCard ===
 * Single course tile. Eyebrow ("// COURSE · 02"), large Anton title, body,
 * meta row, status pill. Hover lights up corner tick.
 */

const PARTNER_LABEL = {
  cossack: "// In partnership with Cossack Consulting //",
  pht: "// Powered by Pipe Hitter Tools //",
};

const CourseCard = ({ index, title, summary, location, dates, level, soldOut, partner, onEnroll }) => {
  const [hover, setHover] = React.useState(false);
  const accent = soldOut ? "var(--signal-warn)" : (hover ? "var(--neon-cyan)" : "var(--neon-magenta)");

  return (
    <article
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: "relative",
        background: "linear-gradient(180deg, var(--obsidian-deep), var(--obsidian-abyss))",
        border: `1px solid ${hover ? "var(--neon-cyan)" : "var(--obsidian-fog)"}`,
        padding: "24px 24px 22px",
        transition: "border-color 120ms cubic-bezier(0.2,0,0,1)",
        cursor: "pointer",
        display: "flex", flexDirection: "column", gap: 14,
        minHeight: 320,
      }}>
      <CornerTicks corners="tl br" color={accent} size={16}/>

      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 12 }}>
        <Eyebrow color={accent}>// Course · {String(index).padStart(2, "0")} //</Eyebrow>
        {soldOut
          ? <StatusPill tone="warn">Sold Out</StatusPill>
          : <StatusPill tone="ok">Open</StatusPill>}
      </div>

      <h3 style={{
        fontFamily: "var(--font-display)",
        fontSize: 36, lineHeight: 0.95,
        textTransform: "uppercase",
        margin: 0,
        color: "var(--fg-1)",
      }}>{title}</h3>

      {partner && (
        <div style={{
          fontFamily: "var(--font-mono)", fontSize: 9.5,
          color: partner === "pht" ? "var(--neon-amber)" : "var(--fg-3)",
          letterSpacing: "0.16em", textTransform: "uppercase",
        }}>{PARTNER_LABEL[partner]}</div>
      )}

      <p style={{
        fontFamily: "var(--font-body)", fontSize: 14, lineHeight: 1.55,
        color: "var(--fg-2)", margin: 0, flex: 1,
      }}>{summary}</p>

      <div style={{
        display: "grid", gridTemplateColumns: "auto 1fr", gap: "6px 16px",
        fontFamily: "var(--font-mono)", fontSize: 11,
        color: "var(--fg-3)", letterSpacing: "0.14em", textTransform: "uppercase",
        borderTop: "1px dashed var(--obsidian-fog)", paddingTop: 14,
      }}>
        <span>Location</span><span style={{ color: "var(--fg-1)" }}>{location}</span>
        <span>Dates</span><span style={{ color: "var(--fg-1)" }}>{dates}</span>
        <span>Level</span><span style={{ color: "var(--fg-1)" }}>{level}</span>
      </div>

      <button
        onClick={(e) => { e.stopPropagation(); onEnroll && onEnroll(); }}
        disabled={soldOut}
        style={{
          background: "none", border: "none", padding: 0, cursor: soldOut ? "not-allowed" : "pointer",
          alignSelf: "flex-start", marginTop: 4,
          fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 500,
          letterSpacing: "0.22em", textTransform: "uppercase",
          color: soldOut ? "var(--fg-4)" : (hover ? "var(--neon-cyan)" : "var(--neon-magenta)"),
          textShadow: soldOut ? "none" : "0 0 8px currentColor",
          transition: "color 120ms",
        }}>
        {soldOut ? "Waitlist →" : "Enroll →"}
      </button>
    </article>
  );
};

Object.assign(window, { CourseCard });