/* TTS Marketing — Home page. */
const { Button, CourseCard, Stat, Tag, Badge } = window.TTSTechnicalTradeSchoolDesignSystem_281306;

function HomeHero({ go, mobile }) {
  return (
    <section className="tts-blueprint" style={{ background: "var(--color-ink)", color: "var(--color-stone-50)", borderBottom: "1px solid var(--color-ink-soft)" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto", padding: mobile ? "56px 20px" : "96px 20px 88px" }}>
        <span className="tts-kicker" style={{ color: "var(--color-ember-400)" }}>Enroll anytime · Self-paced</span>
        <h1 style={{
          fontFamily: "var(--font-display)", fontWeight: 700,
          fontSize: mobile ? 44 : 76, lineHeight: 1.02, letterSpacing: "-0.03em",
          margin: "20px 0 0", maxWidth: 880, color: "#fff",
        }}>
          Learn the trade.<br /><span style={{ color: "var(--color-ember-500)" }}>Get to work.</span>
        </h1>
        <p style={{ fontFamily: "var(--font-sans)", fontSize: mobile ? 17 : 20, color: "var(--color-mist)", maxWidth: 580, margin: "22px 0 0", lineHeight: 1.6 }}>
          The online trade school for building automation. Get job-ready with self-paced courses, <strong style={{ color: "#fff", fontWeight: 700 }}>20 hands-on browser labs</strong>, and real <strong style={{ color: "#fff", fontWeight: 700 }}>ASHRAE Guideline&nbsp;36</strong> control sequences — and program a live training controller before you graduate.
        </p>
        <div style={{ display: "flex", gap: 12, marginTop: 32, flexWrap: "wrap" }}>
          <Button variant="primary" size="lg" onClick={() => go("enroll")} rightIcon={<Icon name="arrow-right" size={20} />}>Enroll in BAS</Button>
          <Button variant="secondary" size="lg" onClick={() => go("catalog")}
            style={{ background: "transparent", color: "#fff", borderColor: "var(--color-graphite)" }}>
            Browse catalog
          </Button>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 9, marginTop: 22, fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.04em", color: "var(--color-mist)" }}>
          <Icon name="hard-hat" size={15} color="var(--color-ember-400)" />
          Built by BAS &amp; trade professionals — for new learners.
        </div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 20 }}>
          {["20 interactive labs", "ASHRAE G36 sequences", "Live training controllers", "Community job board"].map((c) => (
            <span key={c} style={{
              fontFamily: "var(--font-mono)", fontSize: 11.5, fontWeight: 600, letterSpacing: "0.03em",
              color: "var(--color-stone-50)", border: "1px solid var(--color-graphite)",
              borderRadius: 20, padding: "5px 12px", display: "inline-flex", alignItems: "center", gap: 6,
            }}>
              <span style={{ width: 5, height: 5, borderRadius: 5, background: "var(--color-ember-500)", display: "inline-block" }} />
              {c}
            </span>
          ))}
        </div>
        <div style={{
          display: "grid", gridTemplateColumns: mobile ? "1fr 1fr" : "repeat(4,auto)",
          gap: mobile ? 24 : 56, marginTop: 56, borderTop: "1px solid var(--color-ink-soft)", paddingTop: 32,
        }}>
          {window.TTS_DATA.stats.map((s) => (
            <div key={s.label}>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: mobile ? 30 : 40, color: "#fff", lineHeight: 1, letterSpacing: "-0.02em" }}>{s.value}</div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--color-mist)", marginTop: 8 }}>{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HowItWorks({ mobile }) {
  const steps = [
    { n: "01", icon: "book-open", t: "Learn the theory", d: "Self-paced modules with real schematics and code references — NEC & IEC." },
    { n: "02", icon: "wrench", t: "Practice hands-on", d: "Guided labs and field-practice assignments on real BAS hardware." },
    { n: "03", icon: "clipboard-check", t: "Pass the checks", d: "Module assessments and a commissioning capstone that proves you're ready." },
    { n: "04", icon: "award", t: "Earn the credential", d: "Finish job-ready with a portfolio and a path to certification." },
  ];
  return (
    <section style={{ maxWidth: 1200, margin: "0 auto", padding: mobile ? "56px 20px" : "96px 20px" }}>
      <span className="tts-kicker">How it works</span>
      <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: mobile ? 30 : 44, letterSpacing: "-0.02em", margin: "16px 0 0", maxWidth: 620 }}>
        Four steps from sign-up to job site.
      </h2>
      <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "repeat(4,1fr)", gap: 20, marginTop: 48 }}>
        {steps.map((s) => (
          <div key={s.n} style={{ borderTop: "2px solid var(--color-ember-500)", paddingTop: 20 }}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--color-ember-600)", fontWeight: 700 }}>{s.n}</span>
              <Icon name={s.icon} size={22} color="var(--color-steel)" />
            </div>
            <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 20, margin: "16px 0 8px", letterSpacing: "-0.01em" }}>{s.t}</h3>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--text-secondary)", lineHeight: 1.6, margin: 0 }}>{s.d}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function ProgramsSection({ go, mobile }) {
  const launch = window.TTS_DATA.courses.filter((c) => c.track === "technician").slice(0, 3);
  return (
    <section style={{ background: "var(--bg-surface)", borderTop: "1px solid var(--color-line)", borderBottom: "1px solid var(--color-line)" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto", padding: mobile ? "56px 20px" : "96px 20px" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 16 }}>
          <div>
            <span className="tts-kicker">Start here · Technician track</span>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: mobile ? 30 : 44, letterSpacing: "-0.02em", margin: "16px 0 0" }}>
              Build automation skills
            </h2>
          </div>
          <Button variant="ghost" onClick={() => go("catalog")} rightIcon={<Icon name="arrow-right" size={18} />}>All 5 tracks</Button>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "repeat(3,1fr)", gap: 20, marginTop: 40 }}>
          {launch.map((c) => (
            <CourseCard key={c.code}
              code={c.code} title={c.title} description={c.description}
              weeks={c.weeks} level={c.level} standards={c.standards}
              badge={{ tone: c.status === "Now enrolling" ? "ember" : "neutral", children: c.status }}
              onClick={() => go(c.code === "BAS-101" ? "program" : "catalog")}
              footer={<Button fullWidth variant={c.status === "Now enrolling" ? "primary" : "secondary"} onClick={(e) => { e.stopPropagation(); go(c.status === "Now enrolling" ? "enroll" : "catalog"); }}>
                {c.status === "Now enrolling" ? "Enroll now" : "View details"}
              </Button>}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

function TuitionBand({ go, mobile }) {
  return (
    <section style={{ maxWidth: 1200, margin: "0 auto", padding: mobile ? "56px 20px" : "80px 20px" }}>
      <div className="tts-blueprint-light" style={{
        border: "1px solid var(--color-line)", borderRadius: "var(--radius-xl)", padding: mobile ? 28 : 56,
        display: "flex", flexWrap: "wrap", gap: 24, alignItems: "center", justifyContent: "space-between",
      }}>
        <div style={{ maxWidth: 560 }}>
          <Badge tone="ember" variant="soft" dot>Scholarships</Badge>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: mobile ? 28 : 38, letterSpacing: "-0.02em", margin: "16px 0 10px" }}>
            Cost shouldn't be the barrier.
          </h2>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: 16, color: "var(--text-secondary)", margin: 0, lineHeight: 1.6 }}>
            Need-based scholarships cover partial or full tuition for candidates who qualify. Apply in about 10 minutes — we're building TTS to raise all ships.
          </p>
        </div>
        <Button variant="primary" size="lg" onClick={() => go("enroll")}>Apply for a scholarship</Button>
      </div>
    </section>
  );
}

function TracksOverview({ go, mobile }) {
  const iconMap = { technician: "chip", brand: "network", developer: "circuit", pm: "laptop", design: "brain" };
  const count = (id) => window.TTS_DATA.courses.filter((c) => c.track === id).length;
  return (
    <section style={{ maxWidth: 1200, margin: "0 auto", padding: mobile ? "56px 20px" : "96px 20px 64px" }}>
      <span className="tts-kicker">Five career tracks</span>
      <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: mobile ? 30 : 44, letterSpacing: "-0.02em", margin: "16px 0 0", maxWidth: 640 }}>
        Pick the role you're building toward.
      </h2>
      <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "repeat(3,1fr)", gap: 16, marginTop: 40 }}>
        {window.TTS_DATA.tracks.map((t) => (
          <a key={t.id} href="#" onClick={(e) => { e.preventDefault(); go("catalog"); }}
            style={{ textDecoration: "none", display: "block", background: "var(--bg-surface)", border: "1px solid var(--color-line)", borderRadius: "var(--radius-lg)", padding: 22, transition: "border-color var(--dur-base), box-shadow var(--dur-base)" }}
            onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--border-strong)"; e.currentTarget.style.boxShadow = "var(--shadow-md)"; }}
            onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--color-line)"; e.currentTarget.style.boxShadow = "none"; }}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
              <span style={{ width: 48, height: 48, borderRadius: "var(--radius-md)", background: "var(--color-ember-50)", border: "1px solid var(--color-ember-100)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <img src={`../../assets/section-icons/${iconMap[t.id]}.svg`} width="30" height="30" alt="" />
              </span>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-muted)" }}>{count(t.id)} courses</span>
            </div>
            <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 19, letterSpacing: "-0.01em", margin: "16px 0 6px", color: "var(--text-primary)" }}>{t.label}</h3>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--text-secondary)", margin: 0, lineHeight: 1.55 }}>{t.blurb}</p>
          </a>
        ))}
      </div>
    </section>
  );
}

function WhyTTS({ go, mobile }) {
  const items = [
    { icon: "flask-conical", t: "Hands-on from day one", d: "20 interactive browser labs are built right into the courses — tune a PID loop, build a control sequence, read the psychrometric chart. Programming students connect to a real training controller and get auto-graded on live hardware." },
    { icon: "book-open-check", t: "The standards you'll actually commission", d: "Learn real ASHRAE Guideline 36 and Trim-and-Respond sequences, BACnet, and NEC-compliant wiring — not toy examples. You practice the sequences you'll be expected to deliver in the field." },
    { icon: "route", t: "Built for a job, not a certificate", d: "Five career tracks with clear exits — Installer, Service Technician, Controls Programmer, Junior Engineer. A free aptitude assessment points you to the right starting track." },
    { icon: "briefcase", t: "A BAS community, not just a school", d: "Finish with a portfolio and a capstone — then stay. Our community job board is open to every BAS professional: find work, post jobs, ask questions in the forum, keep learning." },
  ];
  return (
    <section style={{ background: "var(--color-ink)", color: "var(--color-stone-50)" }} className="tts-blueprint">
      <div style={{ maxWidth: 1200, margin: "0 auto", padding: mobile ? "56px 20px" : "96px 20px" }}>
        <span className="tts-kicker" style={{ color: "var(--color-ember-400)" }}>Why TTS</span>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: mobile ? 30 : 44, letterSpacing: "-0.02em", margin: "16px 0 0", maxWidth: 700, color: "#fff" }}>
          What makes it different.
        </h2>
        <p style={{ fontFamily: "var(--font-sans)", fontSize: mobile ? 16 : 18, color: "var(--color-mist)", maxWidth: 640, margin: "14px 0 0", lineHeight: 1.6 }}>
          Most online courses stop at slides and a quiz. TTS is built to get you working — with real hardware, real standards, and a real path to a job.
        </p>
        <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 1fr", gap: 20, marginTop: 48 }}>
          {items.map((it) => (
            <div key={it.t} style={{ border: "1px solid var(--color-ink-soft)", borderRadius: "var(--radius-lg)", padding: 24, background: "rgba(255,255,255,.02)" }}>
              <span style={{ width: 44, height: 44, borderRadius: "var(--radius-md)", background: "rgba(212,82,30,.14)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                <Icon name={it.icon} size={22} color="var(--color-ember-400)" />
              </span>
              <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 20, margin: "16px 0 8px", letterSpacing: "-0.01em", color: "#fff" }}>{it.t}</h3>
              <p style={{ fontFamily: "var(--font-sans)", fontSize: 14.5, color: "var(--color-mist)", lineHeight: 1.6, margin: 0 }}>{it.d}</p>
            </div>
          ))}
        </div>
        <div style={{ display: "flex", gap: 12, marginTop: 40, flexWrap: "wrap" }}>
          <Button variant="primary" size="lg" onClick={() => { window.location.href = "/ui_kits/assessment/index.html"; }} rightIcon={<Icon name="arrow-right" size={20} />}>Request a free assessment</Button>
          <Button variant="secondary" size="lg" onClick={() => go("catalog")}
            style={{ background: "transparent", color: "#fff", borderColor: "var(--color-graphite)" }}>
            Browse the catalog
          </Button>
        </div>
      </div>
    </section>
  );
}

function HomePage({ go }) {
  const mobile = useIsMobile();
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });
  return (
    <div>
      <HomeHero go={go} mobile={mobile} />
      <WhyTTS go={go} mobile={mobile} />
      <HowItWorks mobile={mobile} />
      <ProgramsSection go={go} mobile={mobile} />
      <TracksOverview go={go} mobile={mobile} />
      <TuitionBand go={go} mobile={mobile} />
    </div>
  );
}

Object.assign(window, { HomePage });