/* App — lean conversion path: Hero → trust → how it works → why us → carriers → pricing → faq → cta */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "ar",
  "accent": "brand",
  "density": "comfortable"
}/*EDITMODE-END*/;

const ACCENTS = {
  brand: { '--primary': '#2b68de', '--primary-strong': '#333062', '--lamha-500': '#2b68de', '--lamha-400': '#31d5e1' },
  navy:  { '--primary': '#333062', '--primary-strong': '#252350', '--lamha-500': '#333062', '--lamha-400': '#2b68de' },
  aqua:  { '--primary': '#1a94a8', '--primary-strong': '#2b68de', '--lamha-500': '#1a94a8', '--lamha-400': '#31d5e1' },
};

function App() {
  const tweaks = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}, false];
  const [tw, setTweak, isTweaking] = tweaks;

  const lang = tw.lang || 'ar';
  const dir = lang === 'ar' ? 'rtl' : 'ltr';
  const t = window.I18N_STRINGS[lang];

  React.useEffect(() => {
    document.documentElement.lang = lang;
    document.documentElement.dir = dir;
    document.body.setAttribute('data-lang', lang);
  }, [lang, dir]);

  React.useEffect(() => {
    const palette = ACCENTS[tw.accent] || ACCENTS.brand;
    Object.entries(palette).forEach(([k, v]) => document.documentElement.style.setProperty(k, v));
  }, [tw.accent]);

  React.useEffect(() => {
    document.documentElement.style.setProperty('--container', tw.density === 'compact' ? '1180px' : '1320px');
  }, [tw.density]);

  React.useEffect(() => {
    document.body.classList.toggle('is-tweaking', !!isTweaking);
  }, [isTweaking]);

  // Reveal once and latch — never re-hide on scroll-out. A timeout safety net
  // force-shows every element if IntersectionObserver never delivers (some
  // embedded/sandboxed webviews never fire IO callbacks), so content can
  // never render permanently blank.
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal, .reveal-stagger');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (!e.isIntersecting) return;
        e.target.classList.add('is-in');
        io.unobserve(e.target);
      });
    }, { threshold: 0.08, rootMargin: '0px 0px -6% 0px' });
    els.forEach((el) => io.observe(el));

    const fallback = setTimeout(() => {
      els.forEach((el) => el.classList.add('is-in', 'reveal-shown'));
    }, 1200);

    return () => { io.disconnect(); clearTimeout(fallback); };
  });

  const setLang = (l) => setTweak('lang', l);

  return (
    <>
      <Nav lang={lang} setLang={setLang} t={t} />
      <main>
        <Hero lang={lang} t={t} />
        <Steps t={t} />
        <Compare t={t} />
        <Integrations lang={lang} t={t} />
        <Partners lang={lang} t={t} />
        <Pricing t={t} />
        <FAQ t={t} />
        <CTA t={t} />
      </main>
      <Footer lang={lang} t={t} />

      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection title={lang === 'ar' ? 'اللغة' : 'Language'}>
            <window.TweakRadio
              tweaks={tw} setTweak={setTweak} k="lang"
              options={[{ value: 'ar', label: 'عربي' }, { value: 'en', label: 'EN' }]}
            />
          </window.TweakSection>

          <window.TweakSection title={lang === 'ar' ? 'لوحة الألوان' : 'Color palette'}>
            <window.TweakRadio
              tweaks={tw} setTweak={setTweak} k="accent"
              options={[
                { value: 'brand', label: lang === 'ar' ? 'أزرق الهوية' : 'Brand blue' },
                { value: 'navy', label: lang === 'ar' ? 'كحلي' : 'Navy' },
                { value: 'aqua', label: lang === 'ar' ? 'فيروزي' : 'Aqua' },
              ]}
            />
          </window.TweakSection>

          <window.TweakSection title={lang === 'ar' ? 'الكثافة' : 'Density'}>
            <window.TweakRadio
              tweaks={tw} setTweak={setTweak} k="density"
              options={[
                { value: 'comfortable', label: lang === 'ar' ? 'مريحة' : 'Comfortable' },
                { value: 'compact', label: lang === 'ar' ? 'مدمجة' : 'Compact' },
              ]}
            />
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </>
  );
}

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