/* TTS Marketing — shared chrome: responsive header + footer. */
const { Logo, Button } = window.TTSTechnicalTradeSchoolDesignSystem_281306;

function useIsMobile(bp = 860) {
  const [m, setM] = React.useState(typeof window !== "undefined" && window.innerWidth < bp);
  React.useEffect(() => {
    const on = () => setM(window.innerWidth < bp);
    window.addEventListener("resize", on);
    return () => window.removeEventListener("resize", on);
  }, [bp]);
  return m;
}

function Icon({ name, size = 20, color }) {
  return <i data-lucide={name} style={{ width: size, height: size, color }} />;
}

function SiteHeader({ route, go }) {
  const mobile = useIsMobile();
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });

  const links = [
    { id: "home", label: "Home" },
    { id: "program", label: "Programs" },
    { id: "catalog", label: "Catalog" },
    { id: "assessment", label: "Assessment", href: "../assessment/index.html" },
    { id: "careers", label: "Careers", href: "../placement/index.html" },
    { id: "forum", label: "Forum", href: "../forum/index.html" },
    { id: "about", label: "About" },
  ];

  const linkStyle = (active) => ({
    fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", fontWeight: 600,
    color: active ? "var(--text-primary)" : "var(--text-secondary)",
    textDecoration: "none", padding: mobile ? "12px 0" : "8px 0",
    borderBottom: mobile ? "1px solid var(--color-line)" : "none",
    display: "block",
  });
  const navLink = (l) => (
    l.href
      ? <a key={l.id} href={l.href} style={linkStyle(false)}>{l.label}</a>
      : <a key={l.id} href="#" onClick={(e) => { e.preventDefault(); go(l.id); setOpen(false); }} style={linkStyle(route === l.id)}>{l.label}</a>
  );

  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: "rgba(250,248,243,0.85)", backdropFilter: "blur(10px)",
      borderBottom: "1px solid var(--color-line)",
    }}>
      <div style={{
        maxWidth: 1200, margin: "0 auto", padding: "0 20px", height: 68,
        display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16,
      }}>
        <a href="#" onClick={(e) => { e.preventDefault(); go("home"); }} style={{ display: "flex", textDecoration: "none" }}>
          <Logo size={34} assetBase="../../assets" />
        </a>

        {!mobile && (
          <nav style={{ display: "flex", gap: 26, alignItems: "center" }}>
            {links.map(navLink)}
          </nav>
        )}

        {!mobile ? (
          <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
            <Button variant="ghost" size="sm" onClick={() => go("login")}>Student sign in</Button>
            <Button variant="ghost" size="sm" onClick={() => { window.location.href = "../../backend/pages/staff-login.html"; }}>Staff</Button>
            <Button variant="primary" size="sm" onClick={() => go("enroll")}>Enroll now</Button>
          </div>
        ) : (
          <button onClick={() => setOpen(!open)} aria-label="Menu" style={{
            background: "none", border: "none", cursor: "pointer", padding: 8, display: "flex", color: "var(--text-primary)",
          }}>
            <Icon name={open ? "x" : "menu"} size={24} />
          </button>
        )}
      </div>

      {mobile && open && (
        <div style={{ padding: "8px 20px 20px", background: "var(--bg-page)", borderBottom: "1px solid var(--color-line)" }}>
          {links.map(navLink)}
          <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 16 }}>
            <Button variant="secondary" fullWidth onClick={() => { go("login"); setOpen(false); }}>Student sign in</Button>
            <Button variant="secondary" fullWidth onClick={() => { window.location.href = "../../backend/pages/staff-login.html"; }}>Staff sign in</Button>
            <Button variant="primary" fullWidth onClick={() => { go("enroll"); setOpen(false); }}>Enroll now</Button>
          </div>
        </div>
      )}
    </header>
  );
}

function SiteFooter({ go }) {
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });
  const linkSt = { fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--color-line)", textDecoration: "none" };
  const item = (label, target) => {
    const ext = typeof target === "string" && (target.startsWith("../") || target.startsWith("http"));
    return ext
      ? <a key={label} href={target} style={linkSt}>{label}</a>
      : <a key={label} href="#" onClick={(e) => { e.preventDefault(); go(target); }} style={linkSt}>{label}</a>;
  };
  const col = (title, pairs) => (
    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--color-mist)" }}>{title}</div>
      {pairs.map(([label, target]) => item(label, target))}
    </div>
  );
  return (
    <footer style={{ background: "var(--color-ink)", color: "var(--color-stone-50)", padding: "56px 20px 32px" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto" }}>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 48, justifyContent: "space-between", marginBottom: 48 }}>
          <div style={{ maxWidth: 320 }}>
            <Logo size={34} tone="light" assetBase="../../assets" />
            <p style={{ fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--color-mist)", marginTop: 16, lineHeight: 1.6 }}>
              Built by BAS and trade professionals — for new learners. Learn the trade. Get to work.
            </p>
          </div>
          <div style={{ display: "flex", gap: 48, flexWrap: "wrap" }}>
            {col("Programs", [["Course catalog", "catalog"], ["Placement assessment", "../assessment/index.html"], ["Scholarships", "enroll"], ["Enroll now", "enroll"]])}
            {col("Community", [["Technical forum", "../forum/index.html"], ["Community job board", "../placement/index.html"], ["About", "about"], ["Accreditation", "about"]])}
            {col("Access", [["Student sign in", "login"], ["Student portal", "../portal/index.html"], ["Instructor console", "../admin/index.html"], ["Post a job", "../placement/index.html"]])}
          </div>
        </div>
        <div style={{ borderTop: "1px solid var(--color-ink-soft)", paddingTop: 24, display: "flex", flexWrap: "wrap", gap: 12, justifyContent: "space-between", alignItems: "center" }}>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--color-mist)" }}>© 2026 TTS · Technical Trade School</span>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--color-mist)" }}>Accreditation in progress</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { SiteHeader, SiteFooter, useIsMobile, Icon });