// CampCard.jsx — camp listing card with image header, badge, meta, and CTA
const CampCard = ({ camp, onSelect }) => {
  const soldOut = camp.status === "soldout";
  const recommended = camp.status === "recommended";
  return (
    <div
      className="bee-card"
      onClick={() => onSelect && onSelect(camp)}
      style={{ cursor: "pointer", display: "flex", flexDirection: "column", transition: "transform .2s ease, box-shadow .2s ease" }}
      onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.boxShadow = "0 14px 32px -8px rgba(11,11,13,.18)"; }}
      onMouseLeave={(e) => { e.currentTarget.style.transform = ""; e.currentTarget.style.boxShadow = ""; }}
    >
      <div
        style={{
          position: "relative",
          height: 160,
          backgroundImage: `linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.18) 100%), url('../../assets/hero-camp-photo.png')`,
          backgroundSize: "cover",
          backgroundPosition: "center",
          filter: soldOut ? "grayscale(.65) brightness(.85)" : "none",
        }}
      >
        {recommended && <Pill variant="yellow" style={{ position: "absolute", top: 14, left: 14 }}>✓ Recommended</Pill>}
        {soldOut && <Pill variant="dark" style={{ position: "absolute", top: 14, left: 14 }}>Sold Out</Pill>}
        <Pill variant="ghost" style={{ position: "absolute", top: 14, right: 14, background: "rgba(255,255,255,.92)" }}>
          {camp.ageGroup}
        </Pill>
      </div>
      <div style={{ padding: "18px 20px 20px", display: "flex", flexDirection: "column", gap: 6 }}>
        <div style={{ fontFamily: "var(--bee-font-body)", fontWeight: 700, fontSize: 17, color: "var(--bee-ink)" }}>
          {camp.title}
        </div>
        <div style={{ fontFamily: "var(--bee-font-body)", fontSize: 13, color: "var(--bee-fg-muted)" }}>
          {camp.location} · {camp.dates}
        </div>
        <div style={{ display: "flex", gap: 6, marginTop: 6, flexWrap: "wrap" }}>
          {camp.tags.map((t) => (
            <Pill key={t} variant="ghost">{t}</Pill>
          ))}
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 14 }}>
          <div>
            <div style={{ fontFamily: "var(--bee-font-body)", fontWeight: 700, fontSize: 22, color: soldOut ? "var(--bee-fg-muted)" : "var(--bee-ink)" }}>
              {soldOut ? "Waitlist" : `$${camp.price}`}
            </div>
            <div style={{ fontFamily: "var(--bee-font-body)", fontSize: 11, color: "var(--bee-fg-muted)" }}>
              {soldOut ? "Open spots full" : "per player"}
            </div>
          </div>
          <Btn variant={soldOut ? "ghost" : "yellow"} size="md">
            {soldOut ? "Join Waitlist" : "Register"}
          </Btn>
        </div>
      </div>
    </div>
  );
};

window.CampCard = CampCard;