/* global React */
const { useState, useEffect, useRef } = React;

/* ============================================================
   KODIA wordmark — uses the real brand logo
   ============================================================ */
function KodiaMark({ variant = "blue", height = 22 }) {
  // variant: "blue" (default light bg) | "white" (dark bg) | "submark" (k only)
  const R = (typeof window !== "undefined" && window.__resources) || {};
  const src = variant === "white" ? (R.logoWhite || "assets/logo-kodia-white.png") :
  variant === "submark" ? (R.submarkBlue || "assets/submark-k-blue.png") :
  (R.logoBlue || "assets/logo-kodia-blue.png");
  return <img src={src} alt="kodia" style={{ height, width: "auto", display: "block" }} />;
}
function KodiaSubmark({ variant = "white", size = 22 }) {
  const R = (typeof window !== "undefined" && window.__resources) || {};
  const src = variant === "white" ? (R.submarkWhite || "assets/submark-k-white.png") : (R.submarkBlue || "assets/submark-k-blue.png");
  return <img src={src} alt="k" style={{ width: size, height: size, display: "block" }} />;
}

/* ============================================================
   Top nav
   ============================================================ */
function SiteNav({ active }) {
  const links = [
  { id: "approach", label: "Approach", href: "approach.html" },
  { id: "case", label: "Case studies", href: "case-clearpay.html" },
  { id: "about", label: "About", href: "about.html" },
  { id: "contact", label: "Contact", href: "contact.html" }];

  const isCosmos = typeof document !== "undefined" && document.documentElement.getAttribute("data-theme") === "cosmos";
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="index.html" className="nav-logo" aria-label="kodia — home">
          <KodiaMark variant={isCosmos ? "white" : "blue"} height={22} />
        </a>
        <div className="nav-links">
          {links.map((l) =>
          <a key={l.id} href={l.href} className={active === l.id ? "active" : ""}>{l.label}</a>
          )}
        </div>
        <a href="contact.html" className="nav-cta">
          Book a call
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M3 6h6m0 0L6 3m3 3L6 9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg>
        </a>
      </div>
    </nav>);

}

/* ============================================================
   Footer
   ============================================================ */
function SiteFooter() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <p className="footer-tagline">new era.<br />new tools.<br />new possibilities.</p>
            <div style={{ display: "flex", gap: 12, alignItems: "center", fontFamily: "var(--font-body)", fontSize: 13, color: "rgba(255,255,255,0.6)", letterSpacing: "0.04em", textTransform: "uppercase" }}>
              <KodiaSubmark variant="white" size={20} />
              <span>MIAMI - MEDELLIN</span>
            </div>
          </div>
          <div>
            <h4>Offerings</h4>
            <a href="approach.html">AgentOps Blueprint</a>
            <a href="approach.html#audit">Agent-Ready Audit</a>
            <a href="approach.html#build">Build &amp; Ship</a>
            <a href="approach.html#operate">Operate &amp; Evolve</a>
          </div>
          <div>
            <h4>Get in touch</h4>
            <a href="https://wa.me/14159109657" target="_blank" rel="noreferrer">WhatsApp Business</a>
            <a href="mailto:contact_us@kodia.us">contact_us@kodia.us</a>
            <a href="https://www.linkedin.com/company/kodia-us" target="_blank" rel="noreferrer">LinkedIn</a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© kodia 2026</span>
          <span>built for the agent era</span>
        </div>
      </div>
    </footer>);

}

/* ============================================================
   Page chrome shell — handles tweaks + density + theme
   ============================================================ */
function PageShell({ active, children, exposeHeroVariant = false }) {
  // Read defaults from the per-page EDITMODE block on window.PAGE_TWEAK_DEFAULTS
  const defaults = window.PAGE_TWEAK_DEFAULTS || { theme: "paper", density: "regular", heroVariant: "diagram" };
  // Tweaks panel wiring — leverages window.TweaksPanel etc from tweaks-panel.jsx
  const [tweaks, setTweak] = window.useTweaks(defaults);

  // Apply theme + density to <html>
  useEffect(() => {
    document.documentElement.setAttribute("data-theme", tweaks.theme);
    document.documentElement.setAttribute("data-density", tweaks.density);
    // Persist in localStorage too so cross-page nav keeps them
    try {
      localStorage.setItem("kodia.theme", tweaks.theme);
      localStorage.setItem("kodia.density", tweaks.density);
      if (exposeHeroVariant) localStorage.setItem("kodia.heroVariant", tweaks.heroVariant);
    } catch (e) {}
    // Broadcast hero variant change to listeners on this page
    window.dispatchEvent(new CustomEvent("kodia:tweaks", { detail: tweaks }));
  }, [tweaks.theme, tweaks.density, tweaks.heroVariant]);

  const { TweaksPanel, TweakSection, TweakRadio, TweakColor } = window;

  // Map theme name → KODIA palette swatches
  const THEME_PALETTES = [
  { name: "light", palette: ["#FFFFFF", "#122A94", "#90AFFC", "#1B1B1D"] },
  { name: "cosmos", palette: ["#04081F", "#90AFFC", "#56389E", "#FFFFFF"] },
  { name: "content", palette: ["#FFFFFF", "#1F8EA3", "#90AFFC", "#1B1B1D"] },
  { name: "care", palette: ["#FFFFFF", "#90AFFC", "#122A94", "#1B1B1D"] },
  { name: "next", palette: ["#FFFFFF", "#56389E", "#90AFFC", "#1B1B1D"] }];

  const currentPalette = THEME_PALETTES.find((p) => p.name === tweaks.theme)?.palette || THEME_PALETTES[0].palette;
  const onPaletteChange = (newPal) => {
    const match = THEME_PALETTES.find((p) => p.palette[0] === newPal[0] && p.palette[1] === newPal[1]);
    if (match) setTweak("theme", match.name);
  };

  return (
    <>
      <SiteNav active={active} />
      {children}
      <SiteFooter />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme">
          <TweakColor
            label="Palette"
            value={currentPalette}
            onChange={onPaletteChange}
            options={THEME_PALETTES.map((p) => p.palette)} />
          
        </TweakSection>
        <TweakSection label="Density">
          <TweakRadio
            label="Spacing"
            value={tweaks.density}
            onChange={(v) => setTweak("density", v)}
            options={["compact", "regular", "spacious"]} />
          
        </TweakSection>
        {exposeHeroVariant &&
        <TweakSection label="Hero layout">
            <TweakRadio
            label="Variant"
            value={tweaks.heroVariant}
            onChange={(v) => setTweak("heroVariant", v)}
            options={["diagram", "manifesto", "split"]} />
          
          </TweakSection>
        }
      </TweaksPanel>
    </>);

}

/* ============================================================
   Persist theme/density across page nav (read on load before render)
   ============================================================ */
(function applyPersistedDefaults() {
  try {
    const defs = window.PAGE_TWEAK_DEFAULTS || {};
    const t = localStorage.getItem("kodia.theme");
    const d = localStorage.getItem("kodia.density");
    if (t) {
      document.documentElement.setAttribute("data-theme", t);
      defs.theme = t;
    } else if (defs.theme) {
      document.documentElement.setAttribute("data-theme", defs.theme);
    }
    if (d) {
      document.documentElement.setAttribute("data-density", d);
      defs.density = d;
    } else if (defs.density) {
      document.documentElement.setAttribute("data-density", defs.density);
    }
    const hv = localStorage.getItem("kodia.heroVariant");
    if (hv) defs.heroVariant = hv;
  } catch (e) {}
})();

Object.assign(window, {
  KodiaMark, KodiaSubmark, SiteNav, SiteFooter, PageShell
});