/* app.jsx — KASAU router, nav, footer, tweaks. Mounts the app. */
const { useState, useEffect } = React;
const { Btn: AB } = window;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "split",
  "accent": "#38ec6b",
  "displayFont": "grotesque",
  "backdrop": "mesh",
  "motion": "fade"
}/*EDITMODE-END*/;

const ROUTES = {
  home: { label: "Home", render: (t) => <window.HomePage heroVariant={t.heroVariant} /> },
  services: { label: "Services", render: () => <window.ServicesPage /> },
  expertise: { label: "Expertise", render: () => <window.ExpertisePage /> },
  engagement: { label: "Engagement", render: () => <window.EngagementPage /> },
  careers: { label: "Careers", render: () => <window.CareersPage /> },
  contact: { label: "Contact", render: () => <window.ContactPage /> },
};

const NAV_LEFT = ["services", "expertise", "engagement"];

/* Parse a path like "careers" or "job/senior-ml-engineer" into { name, param }.
   Any "job/<id>" maps to the single dynamic job page. */
function parsePath(to) {
  const raw = String(to || "").replace(/^#?\/?/, "").trim();
  const slash = raw.indexOf("/");
  const name = slash === -1 ? raw : raw.slice(0, slash);
  const param = slash === -1 ? "" : raw.slice(slash + 1);
  if (name === "job" && param) return { name: "job", param };
  return { name: ROUTES[name] ? name : "home", param: "" };
}
function routeFromHash() { return parsePath(location.hash); }

function Header({ route, onNav, menuOpen, setMenuOpen }) {
  const link = (key) => (
    <a key={key} href={"#/" + key}
       className={"nav-link" + (route.name === key ? " active" : "")}
       onClick={(e) => { e.preventDefault(); onNav(key); }}>
      {ROUTES[key].label}
    </a>
  );
  // the dynamic job page lives under Careers — keep that link lit
  const careersActive = route.name === "careers" || route.name === "job";
  return (
    <header className="site-header">
      <div className="statusbar">
        <div className="statusbar-inner">
          <span className="sgrp"><span className="dot"></span>AVAILABLE FOR NEW ENGAGEMENTS</span>
          <span className="sgrp hide-sm mid">DATA SCIENCE · AI · ML ENGINEERING</span>
          <span className="sgrp"><span className="mid">MODE</span>&nbsp;<span className="clk">OUTSTAFF / OUTSOURCE</span></span>
        </div>
      </div>
      <nav className="nav">
        <div className="nav-left">{NAV_LEFT.map(link)}</div>
        <a href="#/" className="wordmark" onClick={(e) => { e.preventDefault(); onNav("home"); }}>
          <span className="wm-mark"></span>KASAU
        </a>
        <div className="nav-right">
          <a href="#/careers" className={"nav-link hide-sm" + (careersActive ? " active" : "")}
             onClick={(e) => { e.preventDefault(); onNav("careers"); }}>
            Careers
          </a>
          <a href="#/contact" className="nav-cta" onClick={(e) => { e.preventDefault(); onNav("contact"); }}>
            Start a project →
          </a>
          <button className="burger nav-link" onClick={() => setMenuOpen(!menuOpen)} aria-label="Menu">
            {menuOpen ? "Close" : "Menu"}
          </button>
        </div>
      </nav>
      <div className={"mobile-menu" + (menuOpen ? " open" : "")}>
        {["home", ...NAV_LEFT, "careers", "contact"].map((k) => (
          <a key={k} href={"#/" + k} className="display"
             onClick={(e) => { e.preventDefault(); onNav(k); setMenuOpen(false); }}>
            {ROUTES[k].label}
          </a>
        ))}
      </div>
    </header>
  );
}

function Footer({ onNav }) {
  const navLink = (k) => (
    <a key={k} href={"#/" + k} onClick={(e) => { e.preventDefault(); onNav(k); }}>{ROUTES[k].label}</a>
  );
  return (
    <footer className="site-footer">
      <div className="wrap">
        <div className="footer-mark" data-node="// END"><span>KASAU<span className="dot">.</span></span></div>
        <div className="footer-cols">
          <div className="footer-col">
            <h5>Mandate</h5>
            <p style={{ maxWidth: "32ch" }}>Senior data science, AI &amp; ML engineering for teams where being wrong is expensive. Embedded or end-to-end, accountable, production-first.</p>
          </div>
          <div className="footer-col">
            <h5>Navigate</h5>
            {["home", "services", "expertise", "engagement", "careers", "contact"].map(navLink)}
          </div>
          <div className="footer-col">
            <h5>Capabilities</h5>
            {window.SERVICES.slice(0, 5).map((s) => (
              <a key={s.no} href="#/services" onClick={(e) => { e.preventDefault(); onNav("services"); }}>{s.title}</a>
            ))}
          </div>
          <div className="footer-col">
            <h5>Engage</h5>
            <a href="#/engagement" onClick={(e) => { e.preventDefault(); onNav("engagement"); }}>Outstaff — embedded</a>
            <a href="#/engagement" onClick={(e) => { e.preventDefault(); onNav("engagement"); }}>Outsource — end-to-end</a>
            <a href="#/contact" onClick={(e) => { e.preventDefault(); onNav("contact"); }}>Start a project →</a>
          </div>
        </div>
        <div className="footer-bottom">
          <span className="mono-sm">© KASAU · All rights reserved</span>
          <span className="mono-sm">Senior AI &amp; ML engineering · Outstaff / Outsource</span>
        </div>
      </div>
    </footer>
  );
}

const FONT_OPTIONS = ["grotesque", "condensed", "mono"];
const FONT_LABELS = { grotesque: "Grotesque", condensed: "Condensed", mono: "Mono" };
const ACCENT_OPTIONS = ["#38ec6b", "#c2f53d", "#28d3b0", "#7cf03a"];

function App() {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useState(routeFromHash());
  const [menuOpen, setMenuOpen] = useState(false);

  // apply tweaks to :root
  useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--accent", t.accent);
    r.setAttribute("data-disp", t.displayFont);
    r.setAttribute("data-motion", t.motion);
  }, [t.accent, t.displayFont, t.motion]);

  // navigation with native View Transitions. `to` is a path: "careers" or "job/<id>"
  const navigate = (to) => {
    const next = parsePath(to);
    if (next.name === route.name && next.param === route.param) {
      window.scrollTo({ top: 0, behavior: "smooth" });
      return;
    }
    history.pushState({}, "", "#/" + String(to).replace(/^#?\/?/, ""));
    const swap = () => { setRoute(next); window.scrollTo(0, 0); };
    if (document.startViewTransition && t.motion !== "off") {
      document.startViewTransition(swap);
    } else {
      swap();
    }
  };
  useEffect(() => { window.__navigate = navigate; });

  useEffect(() => {
    const onPop = () => { setRoute(routeFromHash()); window.scrollTo(0, 0); };
    window.addEventListener("popstate", onPop);
    window.addEventListener("hashchange", onPop);
    return () => { window.removeEventListener("popstate", onPop); window.removeEventListener("hashchange", onPop); };
  }, []);

  const { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakColor } = window;
  return (
    <React.Fragment>
      <window.RightField mode={t.backdrop} />
      <Header route={route} onNav={navigate} menuOpen={menuOpen} setMenuOpen={setMenuOpen} />
      <window.SiteGraph trigger={route.name + route.param} />
      <main key={route.name + route.param}>
        {route.name === "job"
          ? <window.JobPage id={route.param} onNav={navigate} />
          : ROUTES[route.name].render(t)}
      </main>
      <Footer onNav={navigate} />

      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakRadio label="Layout" value={t.heroVariant}
          options={["split", "centered", "editorial"]}
          onChange={(v) => { if (route.name !== "home") navigate("home"); setTweak("heroVariant", v); }} />
        <TweakSection label="Identity" />
        <TweakColor label="Accent" value={t.accent} options={ACCENT_OPTIONS}
          onChange={(v) => setTweak("accent", v)} />
        <TweakRadio label="Display type" value={t.displayFont} options={FONT_OPTIONS}
          onChange={(v) => setTweak("displayFont", v)} />
        <TweakSection label="Backdrop graph" />
        <TweakSelect label="Field" value={t.backdrop}
          options={["constellation", "mesh", "streams", "off"]}
          onChange={(v) => setTweak("backdrop", v)} />
        <TweakSection label="Motion" />
        <TweakRadio label="Page transition" value={t.motion}
          options={["fade", "slide", "cover"]}
          onChange={(v) => setTweak("motion", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);