/* TTS Marketing — Program detail page (BAS-101). */
const { Button, Tag, Badge, Card, Stat, ProgressBar } = window.TTSTechnicalTradeSchoolDesignSystem_281306;

function ProgramPage({ go }) {
  const mobile = useIsMobile();
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });
  const c = window.TTS_DATA.courses[0];

  const modules = [
    { n: "Module 1", t: "Building automation foundations", d: "What a BAS does, system architecture, and the technician's role.", lessons: 8 },
    { n: "Module 2", t: "Controllers & field devices", d: "Sensors, actuators, controllers — selection and placement.", lessons: 9 },
    { n: "Module 3", t: "Wiring & terminations", d: "Pulling, landing, and labeling to NEC. Your first live panel.", lessons: 8 },
    { n: "Module 4", t: "Networks & protocols", d: "BACnet, Modbus, and trunk wiring done right.", lessons: 7 },
    { n: "Module 5", t: "Commissioning prep", d: "Point-to-point checks, documentation, and handoff.", lessons: 8 },
    { n: "Module 6", t: "Capstone: commission a panel", d: "Commission a live BAS panel end-to-end. Graded.", lessons: 8 },
  ];

  return (
    <div>
      {/* Hero */}
      <section className="tts-blueprint" style={{ background: "var(--color-ink)", color: "var(--color-stone-50)" }}>
        <div style={{ maxWidth: 1100, margin: "0 auto", padding: mobile ? "40px 20px" : "64px 20px" }}>
          <a href="#" onClick={(e) => { e.preventDefault(); go("home"); }} style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--color-mist)", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 6 }}>
            <Icon name="arrow-left" size={14} /> All programs
          </a>
          <div style={{ display: "flex", gap: 10, alignItems: "center", marginTop: 20 }}>
            <Tag>{c.code}</Tag>
            <Badge tone="ember" dot>{c.status}</Badge>
          </div>
          <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: mobile ? 36 : 56, letterSpacing: "-0.03em", margin: "18px 0 0", color: "#fff", maxWidth: 760 }}>{c.title}</h1>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: mobile ? 16 : 19, color: "var(--color-mist)", maxWidth: 620, marginTop: 18, lineHeight: 1.6 }}>{c.description}</p>
          <div style={{ display: "flex", gap: mobile ? 24 : 48, marginTop: 36, flexWrap: "wrap" }}>
            {[["12", "Weeks"], ["6", "Modules"], ["48", "Lessons"], ["NEC+IEC", "Standards"]].map(([v, l]) => (
              <div key={l}>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 28, color: "#fff", lineHeight: 1 }}>{v}</div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--color-mist)", marginTop: 6 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Body + sticky enroll card */}
      <section style={{ maxWidth: 1100, margin: "0 auto", padding: mobile ? "40px 20px" : "64px 20px", display: "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 340px", gap: 40, alignItems: "start" }}>
        <div>
          <span className="tts-kicker">Curriculum</span>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: mobile ? 26 : 34, letterSpacing: "-0.02em", margin: "14px 0 24px" }}>Six modules. One commissioned panel.</h2>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {modules.map((m, i) => (
              <Card key={m.n} padding={20} style={{ display: "flex", gap: 16, alignItems: "flex-start" }}>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 700, color: "var(--color-ember-600)", flex: "none", width: 28 }}>{String(i + 1).padStart(2, "0")}</span>
                <div style={{ flex: 1 }}>
                  <div style={{ display: "flex", justifyContent: "space-between", gap: 12, alignItems: "baseline", flexWrap: "wrap" }}>
                    <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 18, margin: 0, letterSpacing: "-0.01em" }}>{m.t}</h3>
                    <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-muted)" }}>{m.lessons} lessons</span>
                  </div>
                  <p style={{ fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--text-secondary)", margin: "6px 0 0", lineHeight: 1.55 }}>{m.d}</p>
                </div>
              </Card>
            ))}
          </div>
        </div>

        <aside style={{ position: mobile ? "static" : "sticky", top: 88 }}>
          <Card accent padding={24}>
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 32, letterSpacing: "-0.02em" }}>Courses from $99</div>
            <div style={{ fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--text-secondary)", marginTop: 4 }}>Build your own plan · full tracks from $1,900 · payment plans available</div>
            <div style={{ height: 1, background: "var(--color-line)", margin: "20px 0" }} />
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}>
              {["Live BAS hardware labs", "NEC + IEC aligned", "Commissioning capstone", "Job-ready portfolio"].map((f) => (
                <li key={f} style={{ display: "flex", gap: 10, alignItems: "center", fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--text-primary)" }}>
                  <Icon name="check" size={18} color="var(--color-success)" /> {f}
                </li>
              ))}
            </ul>
            <div style={{ marginTop: 22, display: "flex", flexDirection: "column", gap: 10 }}>
              <Button variant="primary" size="lg" fullWidth onClick={() => go("enroll")}>Build my plan</Button>
              <Button variant="ghost" fullWidth onClick={() => { window.location.href = "../assessment/index.html"; }}>Take the free assessment</Button>
            </div>
          </Card>
        </aside>
      </section>
    </div>
  );
}

Object.assign(window, { ProgramPage });