/* Kharaayo Footer — link columns, contact, socials, newsletter, legal, theme toggle. */
(function () {
  const { useState, useEffect } = React;
  const Icon = window.Icon, Logo = window.Logo, KHARAAYO = window.KHARAAYO;

  const COLS = [
    { h: "Solutions", links: [
      { t: "AI-Native MVP", href: "tech-ai-native-mvp.html" },
      { t: "Agentic Systems", href: "tech-agentic-systems.html" },
      { t: "Brand Identity", href: "studio-brand-identity.html" },
      { t: "Web Design & Dev", href: "studio-web-design.html" },
      { t: "Build With Us", href: "ventures-build-with-us.html" },
    ]},
    { h: "Company", links: [
      { t: "About", href: "about.html" },
      { t: "Showcase", href: "showcase.html" },
      { t: "Blog", href: "blog.html" },
      { t: "Careers", href: "careers.html" },
      { t: "Contact", href: "contact.html" },
    ]},
    { h: "Legal", links: [
      { t: "Terms of service", href: "#" },
      { t: "Privacy policy", href: "#" },
      { t: "Data protection", href: "#" },
    ]},
  ];
  const SOCIAL = [
    { name: "LinkedIn", icon: "linkedin", href: "#" },
    { name: "X", icon: "x", href: "#" },
    { name: "Instagram", icon: "instagram", href: "#" },
    { name: "GitHub", icon: "github", href: "#" },
  ];

  function ThemeToggle() {
    const [t, setT] = useState(window.kGetTheme ? window.kGetTheme() : "system");
    useEffect(() => {
      const h = (e) => setT(e.detail);
      window.addEventListener("kthemechange", h);
      return () => window.removeEventListener("kthemechange", h);
    }, []);
    const opts = [{ k: "light", i: "sun" }, { k: "dark", i: "moon" }, { k: "system", i: "desktop" }];
    return React.createElement("div", { className: "k-theme-toggle", role: "group", "aria-label": "Theme" },
      opts.map(o => React.createElement("button", {
        key: o.k, className: t === o.k ? "on" : "", "aria-pressed": t === o.k, "aria-label": o.k + " theme",
        onClick: () => { window.kSetTheme(o.k); setT(o.k); }
      }, React.createElement(Icon, { name: o.i }))));
  }

  function Footer() {
    return React.createElement("footer", { style: { background: "var(--background-soft)", color: "var(--foreground)", borderTop: "1px solid color-mix(in srgb, var(--foreground) 8%, transparent)" } },
      React.createElement("div", { className: "k-wrap", style: { paddingTop: 64, paddingBottom: 48 } },
        React.createElement("div", { className: "k-foot-cols" },
          // brand col
          React.createElement("div", null,
            React.createElement(Logo, { size: 32 }),
            React.createElement("p", { style: { marginTop: 16, fontSize: 14.5, color: "var(--foreground-muted)", maxWidth: 280, lineHeight: 1.6 } },
              "A venture studio that ships its own AI-native products — and brings the same team to yours."),
            React.createElement("p", { style: { marginTop: 18, display: "flex", alignItems: "center", gap: 8, fontSize: 14, color: "var(--foreground-muted)" } },
              React.createElement(Icon, { name: "mapPin", style: { width: 17, height: 17, color: "var(--accent-color)" } }), KHARAAYO.location),
            React.createElement("a", { href: "contact.html", style: { marginTop: 8, display: "flex", alignItems: "center", gap: 8, fontSize: 14, color: "var(--foreground-muted)", textDecoration: "none" } },
              React.createElement(Icon, { name: "envelope", style: { width: 17, height: 17, color: "var(--accent-color)" } }), KHARAAYO.email),
            React.createElement("div", { style: { marginTop: 22, display: "flex", gap: 10 } },
              SOCIAL.map(s => React.createElement("a", { key: s.name, href: s.href, "aria-label": s.name,
                style: { display: "grid", placeItems: "center", width: 38, height: 38, borderRadius: 9999, border: "1px solid color-mix(in srgb, var(--foreground) 12%, transparent)", color: "var(--foreground-muted)" } },
                React.createElement(Icon, { name: s.icon, style: { width: 18, height: 18 } }))))),
          // link cols
          COLS.map(c => React.createElement("div", { key: c.h },
            React.createElement("h3", { style: { margin: "0 0 16px", fontSize: 13, fontWeight: 700, textTransform: "uppercase", letterSpacing: ".06em", fontFamily: "var(--font-body)", color: "var(--foreground-muted)" } }, c.h),
            React.createElement("ul", { style: { margin: 0, padding: 0, listStyle: "none", display: "grid", gap: 12 } },
              c.links.map(l => React.createElement("li", { key: l.t },
                React.createElement("a", { href: l.href, className: "k-foot-link" }, l.t)))))),
          // newsletter col
          React.createElement("div", null,
            React.createElement("h3", { style: { margin: "0 0 16px", fontSize: 13, fontWeight: 700, textTransform: "uppercase", letterSpacing: ".06em", fontFamily: "var(--font-body)", color: "var(--foreground-muted)" } }, "Studio Notes"),
            React.createElement("p", { style: { margin: "0 0 14px", fontSize: 14, color: "var(--foreground-muted)", lineHeight: 1.55 } }, "Launch stories and what we’re building next. ", React.createElement("span", { style: { opacity: .65 } }, "[PLACEHOLDER — confirm newsletter]")),
            React.createElement("form", { onSubmit: (e) => { e.preventDefault(); window.kToast("Thanks — newsletter is a placeholder for now."); },
              style: { display: "flex", alignItems: "center", gap: 6, borderRadius: 9999, border: "1px solid color-mix(in srgb, var(--foreground) 12%, transparent)", background: "var(--background)", padding: 6, maxWidth: 300 } },
              React.createElement("label", { htmlFor: "k-news", style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" } }, "Email address"),
              React.createElement("input", { id: "k-news", type: "email", placeholder: "you@company.com", style: { flex: 1, border: "none", outline: "none", background: "none", padding: "8px 14px", fontFamily: "var(--font-body)", fontSize: 14.5, color: "var(--foreground)" } }),
              React.createElement("button", { type: "submit", "aria-label": "Subscribe", style: { display: "grid", placeItems: "center", width: 40, height: 40, borderRadius: 9999, background: "var(--primary-color)", border: "none", cursor: "pointer", flexShrink: 0 } },
                React.createElement(Icon, { name: "arrowRight", style: { width: 20, height: 20, color: "#fff" } }))))
        )),
      // bottom bar
      React.createElement("div", { style: { borderTop: "1px solid color-mix(in srgb, var(--foreground) 8%, transparent)" } },
        React.createElement("div", { className: "k-wrap", style: { paddingTop: 20, paddingBottom: 20, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, flexWrap: "wrap" } },
          React.createElement("p", { style: { margin: 0, fontSize: 13.5, color: "var(--foreground-muted)" } }, "© 2026 Kharaayo Inc. — All rights reserved."),
          React.createElement(ThemeToggle, null)))
    );
  }
  window.Footer = Footer;
  window.ThemeToggle = ThemeToggle;
})();