// Main App — v2 (Sentinel-style)
const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#04eb04",
  "motion": 1,
  "density": "default"
}/*EDITMODE-END*/;

// All curated to keep the "neon on charcoal" identity
const ACCENT_OPTIONS = [
  "#04eb04", // vivid green (default — matches spec primary 119/99/46)
  "#00e5ff", // cyan
  "#fffb04", // electric yellow
  "#ff2db4", // magenta
];

// Convert hex to HSL components for variable
function hexToHsl(hex) {
  const m = hex.replace("#", "");
  const r = parseInt(m.substring(0, 2), 16) / 255;
  const g = parseInt(m.substring(2, 4), 16) / 255;
  const b = parseInt(m.substring(4, 6), 16) / 255;
  const max = Math.max(r, g, b), min = Math.min(r, g, b);
  let h = 0, s = 0;
  const l = (max + min) / 2;
  if (max !== min) {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
      case g: h = (b - r) / d + 2; break;
      case b: h = (r - g) / d + 4; break;
    }
    h /= 6;
  }
  return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
}

function applyAccent(hex) {
  const { h, s, l } = hexToHsl(hex);
  document.documentElement.style.setProperty("--primary", hex);
  document.documentElement.style.setProperty("--primary-h", `${h} ${s}% ${l}%`);
  document.documentElement.style.setProperty("--accent", hex);
}
function applyMotion(m) {
  document.documentElement.style.setProperty("--motion", m);
}
function applyDensity(d) {
  if (d === "default") document.documentElement.removeAttribute("data-density");
  else document.documentElement.setAttribute("data-density", d);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [checkoutOpen, setCheckoutOpen] = useStateApp(false);

  useEffectApp(() => { applyAccent(t.accent); }, [t.accent]);
  useEffectApp(() => { applyMotion(t.motion); }, [t.motion]);
  useEffectApp(() => { applyDensity(t.density); }, [t.density]);

  useEffectApp(() => {
    document.body.style.overflow = checkoutOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [checkoutOpen]);

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 80;
      window.scrollTo({ top, behavior: "smooth" });
    }
  };

  return (
    <>
      <TopBar onTickets={() => setCheckoutOpen(true)} onScrollTo={scrollTo} />
      <Hero onTickets={() => setCheckoutOpen(true)} />
      <HeroMarquee />
      <Dates />
      <About />
      <Sets />
      <Gallery />
      <Booking />
      <Footer />

      <Checkout open={checkoutOpen} onClose={() => setCheckoutOpen(false)} />

      <TweaksPanel>
        <TweakSection label="Accent" />
        <TweakColor
          label="Neon"
          value={t.accent}
          options={ACCENT_OPTIONS}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakSection label="Motion" />
        <TweakSlider
          label="Intensidad"
          value={t.motion}
          min={0}
          max={2}
          step={0.1}
          onChange={(v) => setTweak("motion", v)}
        />
        <TweakSection label="Layout" />
        <TweakRadio
          label="Densidad"
          value={t.density}
          options={[
            { value: "airy", label: "Aire" },
            { value: "default", label: "Normal" },
            { value: "dense", label: "Denso" },
          ]}
          onChange={(v) => setTweak("density", v)}
        />
        <TweakSection label="Demo" />
        <TweakButton label="Abrir checkout →" onClick={() => setCheckoutOpen(true)} />
      </TweaksPanel>
    </>
  );
}

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