// SecureSystems landing — app shell + tweaks wiring
const { useState, useEffect, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "en",
  "accentNavy": "#081834",
  "goldAccent": "#c9a96a",
  "glassIntensity": 16,
  "headingFont": "Instrument Serif",
  "titleSize": 100,
  "show_hero": true,
  "show_start": true,
  "show_services": true,
  "show_chess": true,
  "show_pricing": true,
  "show_process": true,
  "show_faq": true,
  "show_cta": true,
  "grain": true,
  "horizonGlow": true,
  "radius": 24
}/*EDITMODE-END*/;

const HEADING_FONTS = {
  "Instrument Serif": `"Instrument Serif", "EB Garamond", Georgia, serif`,
  "Cormorant Garamond": `"Cormorant Garamond", "EB Garamond", Georgia, serif`,
  "Fraunces": `"Fraunces", "Instrument Serif", Georgia, serif`,
  "Playfair Display": `"Playfair Display", "Instrument Serif", Georgia, serif`,
  "Barlow": `"Barlow", system-ui, sans-serif`,
};

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const lang = tweaks.lang;
  const t = window.__SS_I18N[lang];

  // Apply tweaks to :root
  useEffect(() => {
    const r = document.documentElement;
    r.setAttribute("dir", t.dir);
    r.setAttribute("lang", lang);
    r.style.setProperty("--bg", tweaks.accentNavy);
    r.style.setProperty("--accent", tweaks.goldAccent);
    r.style.setProperty("--glass-blur", tweaks.glassIntensity + "px");
    r.style.setProperty("--glass-blur-strong", Math.max(28, tweaks.glassIntensity * 2.6) + "px");
    r.style.setProperty("--font-heading", HEADING_FONTS[tweaks.headingFont] || HEADING_FONTS["Instrument Serif"]);
    document.body.style.setProperty("--title-scale", tweaks.titleSize / 100);
    // grain toggle
    document.body.classList.toggle("no-grain", !tweaks.grain);
  }, [tweaks, lang, t.dir]);

  return (
    <div style={{ "--title-scale": tweaks.titleSize / 100 }}>
      <Navbar t={t} lang={lang} onToggleLang={() => setTweak("lang", lang === "en" ? "ar" : "en")} onContact={() => {
        const el = document.getElementById("contact-section");
        if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
      }} />
      {tweaks.show_hero     && <Hero t={t} lang={lang} />}
      {tweaks.show_start    && <StartSection t={t} lang={lang} />}
      {tweaks.show_services && <Services t={t} lang={lang}
                                  onContact={() => document.getElementById("contact-section")?.scrollIntoView({ behavior: "smooth" })}
                                  onPricing={() => document.getElementById("pricing-section")?.scrollIntoView({ behavior: "smooth" })} />}
      {tweaks.show_chess    && <FeaturesChess t={t} lang={lang} />}
      {tweaks.show_pricing  && <Pricing t={t} lang={lang}
                                  onContact={() => document.getElementById("contact-section")?.scrollIntoView({ behavior: "smooth" })} />}
      {tweaks.show_process  && <Process t={t} lang={lang} />}
      {tweaks.show_faq      && <Faq t={t} lang={lang} />}
      {tweaks.show_cta      && <CtaFooter t={t} lang={lang} />}

      <TweaksPanel title="Tweaks">
        <TweakSection title="Language">
          <TweakRadio
            label="Direction"
            value={tweaks.lang}
            options={[{ label: "English", value: "en" }, { label: "العربية", value: "ar" }]}
            onChange={(v) => setTweak("lang", v)}
          />
        </TweakSection>

        <TweakSection title="Color">
          <TweakColor label="Navy background" value={tweaks.accentNavy} onChange={(v) => setTweak("accentNavy", v)} />
          <TweakColor label="Gold accent"     value={tweaks.goldAccent} onChange={(v) => setTweak("goldAccent", v)} />
        </TweakSection>

        <TweakSection title="Glass">
          <TweakSlider
            label="Glass blur" min={4} max={48} step={1}
            value={tweaks.glassIntensity} onChange={(v) => setTweak("glassIntensity", v)}
            unit="px"
          />
        </TweakSection>

        <TweakSection title="Typography">
          <TweakSelect
            label="Heading font"
            value={tweaks.headingFont}
            options={Object.keys(HEADING_FONTS).map((k) => ({ label: k, value: k }))}
            onChange={(v) => setTweak("headingFont", v)}
          />
          <TweakSlider
            label="Display title size" min={60} max={130} step={2}
            value={tweaks.titleSize} onChange={(v) => setTweak("titleSize", v)}
            unit="%"
          />
        </TweakSection>

        <TweakSection title="Atmosphere">
          <TweakToggle label="Film grain" checked={tweaks.grain} onChange={(v) => setTweak("grain", v)} />
          <TweakToggle label="Horizon glow" checked={tweaks.horizonGlow} onChange={(v) => setTweak("horizonGlow", v)} />
          <TweakSlider
            label="Card radius" min={4} max={36} step={2}
            value={tweaks.radius} onChange={(v) => setTweak("radius", v)}
            unit="px"
          />
        </TweakSection>

        <TweakSection title="Sections">
          <TweakToggle label="Hero"          checked={tweaks.show_hero}     onChange={(v) => setTweak("show_hero", v)} />
          <TweakToggle label="How It Works"  checked={tweaks.show_start}    onChange={(v) => setTweak("show_start", v)} />
          <TweakToggle label="Services"      checked={tweaks.show_services} onChange={(v) => setTweak("show_services", v)} />
          <TweakToggle label="Capabilities"  checked={tweaks.show_chess}    onChange={(v) => setTweak("show_chess", v)} />
          <TweakToggle label="Pricing"       checked={tweaks.show_pricing}  onChange={(v) => setTweak("show_pricing", v)} />
          <TweakToggle label="Process"       checked={tweaks.show_process}  onChange={(v) => setTweak("show_process", v)} />
          <TweakToggle label="FAQ"           checked={tweaks.show_faq}      onChange={(v) => setTweak("show_faq", v)} />
          <TweakToggle label="CTA + Footer"  checked={tweaks.show_cta}      onChange={(v) => setTweak("show_cta", v)} />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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