// Sahh — main app shell
const App = () => {
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "lang": "en",
    "tagline": "smart"
  }/*EDITMODE-END*/;
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [scrolled, setScrolled] = React.useState(false);

  const dir = tweaks.lang === "ar" ? "rtl" : "ltr";
  const t = STR[tweaks.lang] || STR.en;
  const sample = t.sample;

  React.useEffect(() => {
    document.documentElement.dir = dir;
    document.documentElement.lang = tweaks.lang;
  }, [dir, tweaks.lang]);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <>
      {/* NAV */}
      <div className={`nav-wrap ${scrolled ? "scrolled" : ""}`}>
        <div className="nav">
          <SahhNavMark />
          <div className="nav-links" style={{ marginInlineStart: 32 }}>
            <a href="#score" className="nav-link">{t.nav.score}</a>
            <a href="#dash" className="nav-link">{t.nav.product}</a>
            <a href="#analytics" className="nav-link">{t.nav.analytics}</a>
            <a href="#pricing" className="nav-link">{t.nav.pricing}</a>
            <a href="#" className="nav-link">{t.nav.docs}</a>
          </div>
          <div className="nav-right">
            <div style={{
              display: "inline-flex",
              background: "var(--paper-2)",
              borderRadius: 999,
              padding: 3,
              gap: 0,
            }}>
              <button onClick={() => setTweak("lang", "en")} style={{
                padding: "5px 12px", borderRadius: 999, fontSize: 11, fontWeight: 600,
                background: tweaks.lang === "en" ? "var(--ink)" : "transparent",
                color: tweaks.lang === "en" ? "var(--paper)" : "var(--ink-3)",
              }}>EN</button>
              <button onClick={() => setTweak("lang", "ar")} style={{
                padding: "5px 12px", borderRadius: 999, fontSize: 11, fontWeight: 600,
                background: tweaks.lang === "ar" ? "var(--ink)" : "transparent",
                color: tweaks.lang === "ar" ? "var(--paper)" : "var(--ink-3)",
              }}>عربي</button>
            </div>
            <button className="btn btn-ghost btn-sm">{t.nav.signin}</button>
            <button className="btn btn-primary btn-sm">{t.nav.start}<Icon name="arrow" size={13}/></button>
          </div>
        </div>
      </div>

      <Hero t={t} dir={dir} sample={sample} />
      <LogoStrip t={t} />
      <div id="score"><ScoreSection t={t} dir={dir} sample={sample} /></div>
      <CalculatorSection t={t} dir={dir} sample={sample} />
      <QRSection t={t} dir={dir} sample={sample} />
      <div id="dash"><DashboardSection t={t} dir={dir} /></div>
      <MobileSection t={t} dir={dir} sample={sample} />
      <div id="analytics"><AnalyticsSection t={t} dir={dir} /></div>
      <EngineDemoSection t={t} dir={dir} />
      <AuthSection t={t} dir={dir} />
      <BadgeLifecycleSection t={t} dir={dir} />
      <RetentionSection t={t} dir={dir} />
      <PricingSection t={t} dir={dir} />
      <OnboardingStrip t={t} dir={dir} />
      <FinalCTA t={t} dir={dir} />
      <Footer t={t} dir={dir} />

      <TweaksPanel title={dir === "rtl" ? "إعدادات" : "Tweaks"}>
        <TweakSection title={dir === "rtl" ? "اللغة" : "Language"}>
          <TweakRadio
            value={tweaks.lang}
            onChange={v => setTweak("lang", v)}
            options={[
              { value: "en", label: "English" },
              { value: "ar", label: "العربية" },
            ]}
          />
        </TweakSection>
        <TweakSection title={dir === "rtl" ? "الشعار الفرعي" : "Tagline test"}>
          <TweakRadio
            value={tweaks.tagline}
            onChange={v => setTweak("tagline", v)}
            options={[
              { value: "smart", label: "Smart nutrition menus" },
              { value: "trusted", label: "Trusted nutrition experience" },
              { value: "intel", label: "Menu intelligence — certified" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

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