/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakSlider,
   Nav, Hero, Solutions, WhyUs, CTA, Footer */
const { useEffect } = React;

const PALETTES = {
  nebula:  ["#0a84ff", "#5e9dff", "#7cf0ff"],  // apple blue · cielo  (default)
  cosmos:  ["#6d56f6", "#a45cff", "#ff7ea6"],  // indigo · violet · rosa
  aurora:  ["#10b8a6", "#34d399", "#7dd3fc"],  // teal · esmeralda
  sunset:  ["#f0584f", "#ff8a5b", "#ffc46b"],  // coral · ámbar
};

const FONTS = {
  "Space Grotesk": '"Space Grotesk", "SF Pro Display", -apple-system, system-ui, sans-serif',
  "Sora": '"Sora", "SF Pro Display", -apple-system, system-ui, sans-serif',
  "Manrope": '"Manrope", -apple-system, BlinkMacSystemFont, system-ui, sans-serif',
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#0a84ff", "#5e9dff", "#7cf0ff"],
  "font": "Space Grotesk",
  "glow": 1
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [a, a2, a3] = t.palette;

  useEffect(() => {
    // Signal the splash that the app has mounted and painted
    requestAnimationFrame(() => {
      if (typeof window.__hideSplash === "function") window.__hideSplash();
    });
  }, []);

  useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty("--accent", a);
    r.setProperty("--accent-2", a2);
    r.setProperty("--accent-3", a3);
    r.setProperty("--accent-press", `color-mix(in srgb, ${a} 82%, #000)`);
    r.setProperty("--glow-a", `color-mix(in srgb, ${a} 55%, transparent)`);
    r.setProperty("--glow-b", `color-mix(in srgb, ${a2} 48%, transparent)`);
    r.setProperty("--glow-c", `color-mix(in srgb, ${a3} 44%, transparent)`);
    r.setProperty("--dark-bg", `color-mix(in srgb, ${a} 7%, #05050b)`);
    r.setProperty("--dark-surface", `color-mix(in srgb, ${a} 13%, #0c0c16)`);
    r.setProperty("--font-display", FONTS[t.font] || FONTS["Space Grotesk"]);
    r.setProperty("--glow-op", String(t.glow));
  }, [a, a2, a3, t.font, t.glow]);

  return (
    <>
      <Nav />
      <main>
        <Hero />
        <Solutions />
        <WhyUs />
        <CTA />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Paleta de color" />
        <TweakColor
          label="Combinación"
          value={t.palette}
          options={Object.values(PALETTES)}
          onChange={(v) => setTweak("palette", v)}
        />
        <TweakSection label="Tipografía" />
        <TweakRadio
          label="Display"
          value={t.font}
          options={Object.keys(FONTS)}
          onChange={(v) => setTweak("font", v)}
        />
        <TweakSection label="Ambiente" />
        <TweakSlider
          label="Intensidad del aura"
          value={t.glow} min={0} max={1.6} step={0.1}
          onChange={(v) => setTweak("glow", v)}
        />
      </TweaksPanel>
    </>
  );
}

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

/* Feature probe: only enable scroll-reveal hiding once we confirm the animation
   timeline actually advances. In a frozen/hidden environment it never engages,
   so content is never stuck invisible. */
(function probeAnim() {
  try {
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
      document.documentElement.classList.add("anim-ok");
      return;
    }
    const p = document.createElement("div");
    p.style.cssText = "position:fixed;left:-9999px;top:0;width:1px;height:1px;opacity:0;pointer-events:none;animation:revealUp 6s linear";
    document.body.appendChild(p);
    let tries = 0;
    const chk = () => {
      const a = p.getAnimations && p.getAnimations()[0];
      if (a && a.currentTime > 0) { document.documentElement.classList.add("anim-ok"); p.remove(); return; }
      if (++tries > 5) { p.remove(); return; }   // give up → content stays visible
      requestAnimationFrame(chk);
    };
    requestAnimationFrame(chk);
  } catch (e) { /* leave content visible */ }
})();