// Hash-router app shell + Tweaks integration
// TWEAK_DEFAULTS is set on window in the root HTML file so the host's
// EDITMODE block scanner can find and persist edits.
const TWEAK_DEFAULTS = window.TWEAK_DEFAULTS || {};

// Registry of all per-section tone-able blocks across the site.
// id MUST match the id passed to <section data-section-id="...">.
const SECTION_REGISTRY = [
  { page: "Home", id: "home-creed",       label: "Creed",        def: "bone" },
  { page: "Home", id: "home-platforms",   label: "Platforms",    def: "dark" },
  { page: "Home", id: "home-threats",     label: "Threats",      def: "dark" },
  { page: "Home", id: "home-market",      label: "Market",       def: "bone" },
  { page: "Home", id: "home-whyus",       label: "Why Us",       def: "bone" },
  { page: "Home", id: "home-applications",label: "Applications", def: "dark" },
  { page: "Home", id: "home-cta",         label: "CTA",          def: "dark" },

  { page: "Mission", id: "mission-challenge",   label: "Challenge",   def: "dark" },
  { page: "Mission", id: "mission-solution",    label: "Solution",    def: "dark" },
  { page: "Mission", id: "mission-doctrine",    label: "Doctrine",    def: "navy" },
  { page: "Mission", id: "mission-stewardship", label: "Stewardship", def: "bone" },
  { page: "Mission", id: "mission-market",      label: "Market",      def: "dark" },
  { page: "Mission", id: "mission-cta",         label: "CTA",         def: "dark" },

  { page: "Counter-Drone", id: "ddh-overview",    label: "Overview",    def: "bone" },
  { page: "Counter-Drone", id: "ddh-specs",       label: "Specs",       def: "dark" },
  { page: "Counter-Drone", id: "ddh-advantages",  label: "Advantages",  def: "navy" },
  { page: "Counter-Drone", id: "ddh-applications",label: "Applications",def: "dark" },
  { page: "Counter-Drone", id: "ddh-origin",      label: "Origin",      def: "bone" },
  { page: "Counter-Drone", id: "ddh-cta",         label: "CTA",         def: "dark" },

  { page: "Soft Robotics", id: "soft-overview",    label: "Overview",    def: "bone" },
  { page: "Soft Robotics", id: "soft-specs",       label: "Specs",       def: "dark" },
  { page: "Soft Robotics", id: "soft-advantages",  label: "Advantages",  def: "navy" },
  { page: "Soft Robotics", id: "soft-variants",    label: "Variants",    def: "bone" },
  { page: "Soft Robotics", id: "soft-applications",label: "Applications",def: "dark" },
  { page: "Soft Robotics", id: "soft-origin",      label: "Origin",      def: "bone" },
  { page: "Soft Robotics", id: "soft-cta",         label: "CTA",         def: "dark" },

  { page: "Partners", id: "partners-origins",  label: "Origins",  def: "bone" },
  { page: "Partners", id: "partners-cta",      label: "CTA",      def: "dark" },

  { page: "Contact", id: "contact-form", label: "Form", def: "dark" },
  { page: "Contact", id: "contact-cta",  label: "CTA",  def: "dark" },
];

// Resolve tone for a section: tweak override > registry default.
window.sectionTone = function(id, tweaks) {
  // Use flat per-section keys: tone_<id with hyphens turned to underscores>
  const key = "tone_" + id.replace(/-/g, "_");
  const t = tweaks?.[key];
  if (t === "dark" || t === "bone" || t === "navy") return t;
  const entry = SECTION_REGISTRY.find(e => e.id === id);
  return entry ? entry.def : "dark";
};
// Build className for a regular `s` section
window.sClass = function(id, tweaks, extra = "") {
  const tone = window.sectionTone(id, tweaks);
  const toneClass = tone === "bone" ? "bone" : tone === "navy" ? "navy" : "";
  return ["s", toneClass, extra].filter(Boolean).join(" ");
};
// Build className for the cta-block
window.ctaClass = function(id, tweaks) {
  const tone = window.sectionTone(id, tweaks);
  // bone-cta = light tone; dark = default; navy adds navy-cta modifier
  if (tone === "bone") return "cta-block bone-cta";
  if (tone === "navy") return "cta-block navy-cta";
  return "cta-block";
};

function useHashRoute() {
  const [route, setRoute] = React.useState(() =>
    window.location.hash.replace(/^#/, "") || "/"
  );
  React.useEffect(() => {
    const handler = () => {
      const next = window.location.hash.replace(/^#/, "") || "/";
      setRoute(next);
      window.scrollTo({ top: 0, behavior: "instant" });
    };
    window.addEventListener("hashchange", handler);
    return () => window.removeEventListener("hashchange", handler);
  }, []);
  return route;
}

function applyTweaksToRoot(t) {
  const r = document.documentElement;
  r.style.setProperty("--crimson", t.crimson);
  r.style.setProperty("--ink", t.ink);
  r.style.setProperty("--bone", t.bone);
  r.style.setProperty("--max", `${t.containerMax}px`);
  r.style.setProperty("--tweak-font-scale", t.fontScale);
  r.style.setProperty("--tweak-section-pad", t.sectionPadding);
  // marquee speed
  document.querySelectorAll(".marquee-track").forEach((el) => {
    el.style.animationDuration = `${t.tickerSpeed}s`;
  });
}

function App() {
  const route = useHashRoute();
  const [tweaks, setTweak] = (window.useTweaks || (() => [TWEAK_DEFAULTS, () => {}]))(TWEAK_DEFAULTS);

  React.useEffect(() => { applyTweaksToRoot(tweaks); }, [tweaks]);

  let Page;
  switch (route) {
    case "/mission": Page = MissionPage; break;
    case "/counter-drone": Page = DDHPage; break;
    case "/soft-robotics": Page = SoftPage; break;
    case "/partners": Page = PartnersPage; break;
    case "/contact": Page = ContactPage; break;
    default: Page = HomePage;
  }

  return (
    <>
      <Nav route={route} />
      <Page tweaks={tweaks} />
      <Footer />
      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection title="Color">
            <window.TweakColor
              label="Crimson accent"
              value={tweaks.crimson}
              onChange={(v) => setTweak("crimson", v)}
              options={["#b33a3a", "#8b2a2a", "#d24545", "#c9472a", "#a8324d"]}
            />
            <window.TweakColor
              label="Ink (dark)"
              value={tweaks.ink}
              onChange={(v) => setTweak("ink", v)}
              options={["#0a0e14", "#11161f", "#1b2c4a", "#1a1a1a", "#0d1318"]}
            />
            <window.TweakColor
              label="Bone (light)"
              value={tweaks.bone}
              onChange={(v) => setTweak("bone", v)}
              options={["#ede7da", "#f3eee2", "#e7dfca", "#f0ece2", "#ddd4be"]}
            />
            <window.TweakRadio
              label="Primary CTA"
              value={tweaks.accent}
              onChange={(v) => setTweak("accent", v)}
              options={[
                { label: "Bone", value: "bone" },
                { label: "Crimson", value: "crimson" },
              ]}
            />
          </window.TweakSection>
          <window.TweakSection title="Typography & Layout">
            <window.TweakSlider
              label="Font scale"
              min={0.85} max={1.2} step={0.025}
              value={tweaks.fontScale}
              onChange={(v) => setTweak("fontScale", v)}
              format={(v) => `${Math.round(v * 100)}%`}
            />
            <window.TweakSlider
              label="Section padding"
              min={0.5} max={1.5} step={0.05}
              value={tweaks.sectionPadding}
              onChange={(v) => setTweak("sectionPadding", v)}
              format={(v) => `${Math.round(v * 100)}%`}
            />
            <window.TweakSlider
              label="Max content width"
              min={1100} max={1700} step={20}
              value={tweaks.containerMax}
              onChange={(v) => setTweak("containerMax", v)}
              format={(v) => `${v}px`}
            />
          </window.TweakSection>
          <window.TweakSection title="Content">
            <window.TweakToggle
              label="Marquee bar"
              value={tweaks.showMarquee}
              onChange={(v) => setTweak("showMarquee", v)}
            />
            <window.TweakToggle
              label="Hero status strip"
              value={tweaks.showStatus}
              onChange={(v) => setTweak("showStatus", v)}
            />
            <window.TweakSlider
              label="Marquee speed"
              min={20} max={120} step={5}
              value={tweaks.tickerSpeed}
              onChange={(v) => setTweak("tickerSpeed", v)}
              format={(v) => `${v}s`}
            />
          </window.TweakSection>
          <window.TweakSection title="Section tones">
            {(() => {
              const groups = {};
              SECTION_REGISTRY.forEach((s) => { (groups[s.page] = groups[s.page] || []).push(s); });
              return Object.entries(groups).map(([page, sections]) => (
                <React.Fragment key={page}>
                  <div style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", opacity: 0.55, padding: "10px 0 4px" }}>{page}</div>
                  {sections.map((s) => (
                    <window.TweakSelect
                      key={s.id}
                      label={s.label}
                      value={tweaks["tone_" + s.id.replace(/-/g, "_")] || s.def}
                      options={["dark", "bone", "navy"]}
                      onChange={(v) => setTweak("tone_" + s.id.replace(/-/g, "_"), v)}
                    />
                  ))}
                </React.Fragment>
              ));
            })()}
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </>
  );
}

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