/* Root App */

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

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "violet",
  "locale": "en",
  "hero": "photo",
  "density": "editorial"
}/*EDITMODE-END*/;

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

  // Sync html dir + lang for RTL
  useEffectA(() => {
    document.documentElement.dir = tw.locale === "ar" ? "rtl" : "ltr";
    document.documentElement.lang = tw.locale === "ar" ? "ar" : "en";
  }, [tw.locale]);

  // Apply accent and density classes to body
  useEffectA(() => {
    document.body.classList.remove("accent-violet", "accent-noir", "accent-steel");
    document.body.classList.add(`accent-${tw.accent}`);
    document.body.classList.toggle("density-compact", tw.density === "compact");
  }, [tw.accent, tw.density]);

  const [quoteOpen, setQuoteOpen] = useStateA(false);
  const copy = COPY[tw.locale] || COPY.en;

  const openQuote = () => setQuoteOpen(true);
  const closeQuote = () => setQuoteOpen(false);

  return (
    <>
      <TopBar locale={tw.locale} setLocale={(v) => setTweak("locale", v)} copy={copy}
              onQuote={openQuote} onAccount={openQuote} />
      <Hero copy={copy} locale={tw.locale} heroVariant={tw.hero}
            onQuote={openQuote} onAccount={openQuote} />
      <TrustStrip copy={copy} />
      <Services copy={copy} locale={tw.locale} onQuote={openQuote} />
      <GTMx copy={copy} locale={tw.locale} onDemo={openQuote} />
      <NetworkMap copy={copy} locale={tw.locale} onQuote={openQuote} />
      <WhiteGlove copy={copy} locale={tw.locale} />
      <Charter copy={copy} locale={tw.locale} onQuote={openQuote} />
      <SiteFooter copy={copy} locale={tw.locale} />

      {/* Floating concierge CTAs */}
      <div className="floating-cta">
        <button className="fab dark" onClick={() => window.open("tel:+97142996633")}>
          <span style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--ok)", display: "inline-block" }} />
          {copy.cta.ops}
        </button>
        <button className="fab primary" onClick={openQuote}>
          {copy.cta.quote}<Arrow />
        </button>
      </div>

      <QuoteDrawer open={quoteOpen} onClose={closeQuote} copy={copy} locale={tw.locale} />

      <TweaksPanel>
        <TweakSection title="Locale">
          <TweakRadio value={tw.locale} onChange={v => setTweak("locale", v)}
            options={[{ value: "en", label: "EN" }, { value: "ar", label: "AR · ع" }]} />
        </TweakSection>
        <TweakSection title="Accent">
          <TweakColor value={tw.accent} onChange={v => setTweak("accent", v)}
            options={[
              { value: "violet", color: "#55148E", label: "UAS violet" },
              { value: "noir",   color: "#0B0E14", label: "Noir-only" },
              { value: "steel",  color: "#2C5070", label: "Steel" },
            ]} />
        </TweakSection>
        <TweakSection title="Hero">
          <TweakRadio value={tw.hero} onChange={v => setTweak("hero", v)}
            options={[{ value: "photo", label: "Photo" }, { value: "type", label: "Type-led" }]} />
        </TweakSection>
        <TweakSection title="Density">
          <TweakRadio value={tw.density} onChange={v => setTweak("density", v)}
            options={[{ value: "editorial", label: "Editorial" }, { value: "compact", label: "Compact" }]} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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