// app.jsx — root app, tweak wiring, page assembly
const { useEffect: useAE } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroStyle": "statement",
  "primary": "#7c3aed",
  "accent": "#2dd4bf",
  "meshStrength": 1,
  "glassBlur": 22,
  "grain": true
}/*EDITMODE-END*/;

// lighter tint companion for a given primary (kept perceptually close)
const SOFT = {
  "#7c3aed": "#a78bfa",
  "#8b5cf6": "#c4b5fd",
  "#a855f7": "#d8b4fe",
  "#6d28d9": "#a78bfa",
};

// Fullscreen Circular transition wipe centered on click
function triggerSageTransition(e, callback) {
  let x = window.innerWidth / 2;
  let y = window.innerHeight / 2;
  if (e && e.clientX !== undefined && e.clientY !== undefined) {
    x = e.clientX;
    y = e.clientY;
  } else if (e && e.currentTarget) {
    const rect = e.currentTarget.getBoundingClientRect();
    x = rect.left + rect.width / 2;
    y = rect.top + rect.height / 2;
  }

  const overlay = document.createElement("div");
  overlay.className = "sage-transition-overlay";

  // Calculate viewport diagonal to cover screen
  const w = window.innerWidth;
  const h = window.innerHeight;
  const corners = [
    { x: 0, y: 0 },
    { x: w, y: 0 },
    { x: 0, y: h },
    { x: w, y: h }
  ];
  let maxRadius = 0;
  corners.forEach(c => {
    const dist = Math.sqrt((c.x - x) ** 2 + (c.y - y) ** 2);
    if (dist > maxRadius) maxRadius = dist;
  });

  overlay.style.left = `${x - maxRadius}px`;
  overlay.style.top = `${y - maxRadius}px`;
  overlay.style.width = `${maxRadius * 2}px`;
  overlay.style.height = `${maxRadius * 2}px`;

  document.body.appendChild(overlay);

  // Force reflow
  overlay.offsetWidth;

  overlay.classList.add("active");

  setTimeout(() => {
    callback();
  }, 450);

  setTimeout(() => {
    overlay.classList.add("fade-out");
    setTimeout(() => {
      overlay.remove();
    }, 450);
  }, 950);
}

// Expose transition function globally for Nav redirects on subpages
window.triggerSageTransition = triggerSageTransition;

function App(){
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useReveal();

  const [sageMode, setSageMode] = React.useState(false);

  // Initialize Sage Mode based on query parameter
  useAE(() => {
    const params = new URLSearchParams(window.location.search);
    if (params.get("sage") === "true") {
      setSageMode(true);
      document.body.classList.add("sage-active");
    }
  }, []);

  // Sync sageMode state to body class
  useAE(() => {
    if (sageMode) {
      document.body.classList.add("sage-active");
    } else {
      document.body.classList.remove("sage-active");
    }
  }, [sageMode]);

  const toggleSageMode = (e) => {
    triggerSageTransition(e, () => {
      setSageMode(prev => {
        const next = !prev;
        const url = new URL(window.location);
        if (next) {
          url.searchParams.set("sage", "true");
        } else {
          url.searchParams.delete("sage");
        }
        window.history.replaceState({}, "", url);
        return next;
      });
    });
  };

  // apply color / feel tweaks to CSS variables
  useAE(() => {
    const r = document.documentElement.style;
    if (sageMode) {
      r.setProperty("--primary", "#00D639");
      r.setProperty("--primary-soft", "#73f090");
      r.setProperty("--accent", "#00843D");
      r.setProperty("--bg-0", "#050806");
      r.setProperty("--ink", "#ffffff");
      r.setProperty("--ink-dim", "#99cfad");
      r.setProperty("--ink-faint", "#00D639");
    } else {
      r.setProperty("--primary", t.primary);
      r.setProperty("--primary-soft", SOFT[t.primary] || "#a78bfa");
      r.setProperty("--accent", t.accent);
      r.setProperty("--mesh-strength", String(t.meshStrength));
      r.setProperty("--glass-blur", t.glassBlur + "px");
      // Reset all Sage-only overrides back to :root defaults
      r.removeProperty("--bg-0");
      r.removeProperty("--ink");
      r.removeProperty("--ink-dim");
      r.removeProperty("--ink-faint");
      const g = document.querySelector(".bg-grain");
      if (g) g.style.display = t.grain ? "block" : "none";
    }
  }, [sageMode, t.primary, t.accent, t.meshStrength, t.glassBlur, t.grain]);

  return (
    React.createElement(React.Fragment, null,
      React.createElement(Background, null),
      React.createElement(Nav, { sageMode, toggleSageMode }),
      <main>
        <Hero key={t.heroStyle} variant={t.heroStyle} sageMode={sageMode} />
        {!sageMode && <MetricsSection sageMode={sageMode} />}
        <AppKinds sageMode={sageMode} toggleSageMode={toggleSageMode} />
        <Integrations sageMode={sageMode} />
        <InternalTools sageMode={sageMode} />
        <ContactSection sageMode={sageMode} />
        {!sageMode && <LatestBlogs sageMode={sageMode} />}
        <StartCTA sageMode={sageMode} />
      </main>,
      React.createElement(Footer, { sageMode }),

      React.createElement(TweaksPanel, null,
        React.createElement(TweakSection, { label: "Hero direction" }),
        React.createElement(TweakRadio, {
          label: "Layout", value: t.heroStyle,
          options: ["statement", "conversational", "kinetic"],
          onChange: (v) => setTweak("heroStyle", v),
        }),
        React.createElement(TweakSection, { label: "Color" }),
        React.createElement(TweakColor, {
          label: "Primary", value: t.primary,
          options: ["#7c3aed", "#8b5cf6", "#a855f7", "#6d28d9"],
          onChange: (v) => setTweak("primary", v),
        }),
        React.createElement(TweakColor, {
          label: "Accent", value: t.accent,
          options: ["#2dd4bf", "#22d3ee", "#ec4899", "#6366f1"],
          onChange: (v) => setTweak("accent", v),
        }),
        React.createElement(TweakSection, { label: "Atmosphere" }),
        React.createElement(TweakSlider, {
          label: "Mesh glow", value: t.meshStrength, min: 0.3, max: 1.8, step: 0.1,
          onChange: (v) => setTweak("meshStrength", v),
        }),
        React.createElement(TweakSlider, {
          label: "Glass blur", value: t.glassBlur, min: 6, max: 36, step: 1, unit: "px",
          onChange: (v) => setTweak("glassBlur", v),
        }),
        React.createElement(TweakToggle, {
          label: "Film grain", value: t.grain,
          onChange: (v) => setTweak("grain", v),
        }),
      ),
    )
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(React.createElement(App));