/* Main app — composes all sections, manages charter modal + tweaks */

const { useState: useStateA, useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#C18D33",
  "density": "default",
  "hero": "cinematic",
  "showWhatsApp": false,
  "darkShell": false
}/*EDITMODE-END*/;

function App() {
  const [charterOpen, setCharterOpen] = useStateA(false);
  const [locale, setLocale] = useStateA("en");
  const [tweaks, setTweak] = (typeof useTweaks === "function") ? useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}];

  // Apply tweaks
  useEffectA(() => {
    document.documentElement.style.setProperty("--gold", tweaks.accent || "#C18D33");
    document.documentElement.style.setProperty("--gold-soft", lighten(tweaks.accent || "#C18D33", 0.15));
    document.documentElement.style.setProperty("--gold-deep", darken(tweaks.accent || "#C18D33", 0.18));
    document.body.dataset.density = tweaks.density || "default";
  }, [tweaks.accent, tweaks.density]);

  // Locale → dir
  useEffectA(() => {
    document.documentElement.dir = locale === "ar" ? "rtl" : "ltr";
    document.documentElement.lang = locale;
  }, [locale]);

  // Body lock when modal open
  useEffectA(() => {
    document.body.style.overflow = charterOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [charterOpen]);

  const openCharter = () => setCharterOpen(true);
  const closeCharter = () => setCharterOpen(false);

  return (
    <>
      <Navbar
        onCharterClick={openCharter}
        locale={locale}
        setLocale={setLocale}
      />

      <main>
        <Hero onCharterClick={openCharter} />
        <TrustStrip />
        <Services onCharterClick={openCharter} />
        <Plate src="media/cabin-legacy-650-interior.webp" meta="LEGACY 650 · VIP CABIN" gold="EMPIRE MANAGED" />
        <Fleet />
        <Plate src="media/charter-global-6000-leisure.webp" meta="GLOBAL 6000 · LEISURE CHARTER" gold="DXB → MLE" height="58vh" />
        <Experience />
        <About />
        <Offices />
        <Contact onCharterClick={openCharter} />
      </main>

      <Footer />

      <FAB onCharterClick={openCharter} />

      <CharterFlow open={charterOpen} onClose={closeCharter} />

      {/* Tweaks panel */}
      <EmpireTweaks tweaks={tweaks} setTweak={setTweak} />
    </>
  );
}

// --- color helpers (simple hex lighten/darken)
function clamp(n, lo, hi) { return Math.max(lo, Math.min(hi, n)); }
function hexToRgb(hex) {
  const h = hex.replace("#", "");
  const i = parseInt(h.length === 3 ? h.split("").map(c => c + c).join("") : h, 16);
  return [(i >> 16) & 255, (i >> 8) & 255, i & 255];
}
function rgbToHex(r, g, b) {
  return "#" + [r, g, b].map(x => clamp(Math.round(x), 0, 255).toString(16).padStart(2, "0")).join("");
}
function lighten(hex, amt) { const [r, g, b] = hexToRgb(hex); return rgbToHex(r + (255 - r) * amt, g + (255 - g) * amt, b + (255 - b) * amt); }
function darken(hex, amt) { const [r, g, b] = hexToRgb(hex); return rgbToHex(r * (1 - amt), g * (1 - amt), b * (1 - amt)); }

// --- Tweaks panel
function EmpireTweaks({ tweaks, setTweak }) {
  if (typeof TweaksPanel === "undefined") return null;
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand">
        <TweakColor
          label="Accent"
          value={tweaks.accent}
          onChange={(v) => setTweak("accent", v)}
          options={["#C18D33", "#8A6A24", "#A8A39C", "#1F3A52"]}
        />
      </TweakSection>

      <TweakSection label="Rhythm">
        <TweakRadio
          label="Density"
          value={tweaks.density}
          onChange={(v) => setTweak("density", v)}
          options={[
            { value: "cozy", label: "Cozy" },
            { value: "default", label: "Mid" },
            { value: "cinematic", label: "Wide" },
          ]}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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