/* app.jsx — composition + tweaks */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "split",
  "palette": ["#16437E", "#5C6CF2", "#7B5CF0"],
  "showPipeline": true
}/*EDITMODE-END*/;

function applyPalette(p) {
  if (!Array.isArray(p) || p.length < 3) return;
  const [navy, indigo, violet] = p;
  const root = document.documentElement.style;
  root.setProperty("--brand-teal", violet);
  root.setProperty("--brand-sky", navy);
  root.setProperty("--brand-indigo", indigo);
  root.setProperty("--grad", `linear-gradient(118deg, ${navy} 0%, ${indigo} 55%, ${violet} 100%)`);
  root.setProperty("--grad-soft", `linear-gradient(118deg, ${hexA(navy,0.14)} 0%, ${hexA(indigo,0.14)} 55%, ${hexA(violet,0.14)} 100%)`);
  root.setProperty("--accent", navy);
  root.setProperty("--accent-soft", hexA(navy, 0.10));
  root.setProperty("--accent-border", hexA(navy, 0.28));
}
function hexA(hex, a) {
  const h = hex.replace("#", "");
  const n = parseInt(h.length === 3 ? h.split("").map(c => c + c).join("") : h, 16);
  return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${a})`;
}

/* One-page layout: nav tabs scroll to sections. Legacy tab URLs (#/services etc.) map to anchors. */
const ROUTE_ANCHORS = {
  home: "top",
  services: "solutions",
  platform: "solutions",
  "our-solutions": "solutions",
  status: "status",
  invoicing: "invoicing",
  "how-it-works": "lifecycle",
  "denial-management": "denial-hero",
  "custom-reporting": "dashboard",
  dashboard: "dashboard",
  reporting: "reporting",
  "why-datamed": "compare",
};

function useHashScroll() {
  useEffect(() => {
    const onHash = () => {
      const h = window.location.hash;
      if (!h || h === "#") return;
      const id = h.startsWith("#/") ? (ROUTE_ANCHORS[h.slice(2)] || "top") : h.slice(1);
      const el = document.getElementById(id);
      if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
    };
    window.addEventListener("hashchange", onHash);
    setTimeout(onHash, 150); /* honor deep links on first load, after sections mount */
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
}

/* Highlights the nav tab for whichever section is currently in view. */
const SPY_SECTIONS = [
  ["top", "home"],
  ["solutions", "services"],
  ["status", "services"],
  ["invoicing", "services"],
  ["lifecycle", "how-it-works"],
  ["denial-hero", "denial-management"],
  ["dashboard", "custom-reporting"],
  ["reporting", "custom-reporting"],
  ["compare", "why-datamed"],
];

function useScrollSpy() {
  const [active, setActive] = useState("home");
  useEffect(() => {
    let raf = 0;
    const compute = () => {
      raf = 0;
      let cur = "home";
      for (const [id, key] of SPY_SECTIONS) {
        const el = document.getElementById(id);
        if (el && el.getBoundingClientRect().top <= 140) cur = key;
      }
      setActive((a) => (a === cur ? a : cur));
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(compute); };
    window.addEventListener("scroll", onScroll, { passive: true });
    compute();
    return () => { window.removeEventListener("scroll", onScroll); if (raf) cancelAnimationFrame(raf); };
  }, []);
  return active;
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const active = useScrollSpy();
  useHashScroll();

  useEffect(() => { applyPalette(t.palette); }, [t.palette]);

  const scrollToCta = useCallback(() => {
    document.getElementById("cta")?.scrollIntoView({ behavior: "smooth", block: "start" });
  }, []);

  return (
    <React.Fragment>
      <Nav onCta={scrollToCta} route={active} />
      <main>
        <Hero variant={t.heroVariant} onCta={scrollToCta} />
        <Solutions onCta={scrollToCta} />
        <StatusSection />
        <Invoicing />
        <Lifecycle />
        <DenialManagement onCta={scrollToCta} />
        <DashboardPreview />
        <Reporting />
        <Comparison />
        <Security />
        <CTA />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Hero direction" />
        <TweakRadio
          label="Layout"
          value={t.heroVariant}
          options={["split", "centered"]}
          onChange={(v) => setTweak("heroVariant", v)}
        />
        <TweakSection label="Brand color" />
        <TweakColor
          label="Gradient"
          value={t.palette}
          options={[
            ["#16437E", "#5C6CF2", "#7B5CF0"],
            ["#10C8A8", "#19B0E0", "#2F7BF0"],
            ["#1FA8D6", "#2F7BF0", "#6A5CF2"],
            ["#13C2C2", "#2A8FF0", "#7B5CF0"]
          ]}
          onChange={(v) => setTweak("palette", v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

(function mount() {
  const boot = document.getElementById("boot");
  ReactDOM.createRoot(document.getElementById("root")).render(<App />);
  const hide = () => { if (boot) { boot.classList.add("hide"); setTimeout(() => boot.remove(), 450); } };
  setTimeout(hide, 80);
})();