/* === CourseCatalog ===
 * The "Training" section with a 3-up grid of CourseCards.
 */

const COURSES = [
  {
    index: 1,
    title: "Gray Man",
    summary: "Also known as OSRM — Operator Signature Reduction & Mitigation 101 — and our flagship. The backbone and baseline: the critical skills to cut your signature and operate inside today's complex ubiquitous-technical-surveillance environment. Threat modeling, attack surface, device posture. Be unremarkable, not a soft target.",
    location: "TBD",
    dates: "TBD",
    level: "Beginner",
    partner: "cossack",
  },
  {
    index: 2,
    title: "Gray Ghost",
    summary: "Also known as OSRM Advanced — where Gray Man ends and the infrastructure begins. Run private, secure comms on COTS hardware you own outright. Self-hosting from bare silicon up: single-board computers built into a complete comms stack, no third party in the loop. Scoped to your operation. On the net, off the radar.",
    location: "TBD",
    dates: "TBD",
    level: "Advanced",
    partner: "cossack",
  },
  {
    index: 3,
    title: "Sovereign Citizen",
    summary: "Take back the infrastructure. This package pairs the training with the pre-configured hardware and the self-hosted tech stack — you leave knowing how to run, and maintain, the freedom-tech stack that replaces the data brokers in your life.",
    location: "TBD",
    dates: "TBD",
    level: "Intermediate",
    partner: "pht",
  },
  {
    index: 4,
    title: "Down Range",
    summary: "3-level mistakes get you flagged the moment you arrive in theater. We send you out the door with the kit — GrapheneOS handsets, travel-router nodes, faraday bags for when you need to go black — and the protocols to use them without highlighting your team.",
    location: "TBD",
    dates: "TBD",
    level: "Advanced",
    partner: "cossack",
  },
  {
    index: 5,
    title: "Technical Travel",
    summary: "Cross borders without leaving a trail. Hostile-network hygiene, hotel-room sweeps, device sterilization protocols, and the discipline of carrying only what you can afford to lose at a customs desk.",
    location: "TBD",
    dates: "TBD",
    level: "Intermediate",
    partner: "cossack",
  },
  {
    index: 6,
    title: "Glass Eye",
    summary: "Also known as TPSC — Tactical Photographic Surveillance. Capture, edit, and transmit critical imagery from any environment without burning your position. The foundational reconnaissance discipline the advanced intelligence work is built on. Long glass. Low light. Clean handoff.",
    location: "TBD",
    dates: "TBD",
    level: "Intermediate",
    partner: "cossack",
  },

];

const CourseCatalog = ({ onEnroll }) => (
  <section id="training" style={{
    padding: "96px 32px",
    maxWidth: 1280, margin: "0 auto",
  }}>
    <SectionHeader
      eyebrow="// SECTION 01 · TRAINING //"
      title={<>Be a<br/><span style={{ color: "var(--neon-cyan)", textShadow: "var(--glow-cyan)" }}>hard target</span></>}
      subtitle="Whether you're looking to equip your Team with basic to advanced OPSEC skills, prep them to go out the door, or custom tailor anything in between, we've got you covered."
    />

    <div style={{
      display: "grid",
      // auto-fit so 4 cards flow to a clean 4-up at desktop, 2x2 at tablet,
      // 1-up at mobile without any media queries.
      gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))",
      gap: 20,
    }}>
      {COURSES.map((c) => <CourseCard key={c.index} {...c} onEnroll={onEnroll}/>)}
    </div>
  </section>
);

Object.assign(window, { CourseCatalog });