// Nawi Landing — App shell + Tweaks panel
// Renders the page in either English (default) or Arabic (RTL) based on `window.__lang`.

const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#6A42FF",
  "heroVariant": "single"
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = [
  '#6A42FF',  // Electric Violet (dark-mode primary) — DEFAULT
  '#4D21FC',  // Ultraviolet (light-mode primary)
  '#0EA5E9',  // Pearl Blue (info)
  '#00D084',  // Neon Mint (success)
  '#F59E0B',  // Amber
  '#EF4444',  // Coral
];

function App() {
  const lang = (window.__lang || 'en');
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  // Apply accent to the document
  useEffectApp(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
    document.documentElement.style.setProperty(
      '--accent-soft',
      `color-mix(in oklab, ${t.accent} 18%, transparent)`
    );
    document.documentElement.style.setProperty(
      '--shadow-accent',
      `0 8px 24px color-mix(in oklab, ${t.accent} 32%, transparent)`
    );
    const hexEl = document.getElementById('lp-accent-hex');
    if (hexEl) hexEl.textContent = t.accent.toUpperCase();
    if (window.__updateHero3DAccent) window.__updateHero3DAccent(t.accent);
  }, [t.accent]);

  // Lock to dark theme and apply lang/dir
  useEffectApp(() => {
    document.documentElement.dataset.theme = 'dark';
    document.documentElement.lang = lang;
    document.documentElement.dir = lang === 'ar' ? 'rtl' : 'ltr';
    document.body.classList.toggle('is-arabic', lang === 'ar');
  }, [lang]);

  // Reveal-on-scroll
  useEffectApp(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('is-visible');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12 });
    document.querySelectorAll('[data-reveal]').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, [t.heroVariant]);

  return (
    <div className="lp-root">
      <window.LPNav lang={lang} />
      <div data-reveal><window.LPHero lang={lang} variant={t.heroVariant} /></div>
      <div className="lp-divider" />
      <div data-reveal><window.LPBrandStatement lang={lang} /></div>
      <div className="lp-divider" />
      <div data-reveal><window.LPCalendars lang={lang} /></div>
      <div className="lp-divider" />
      <div data-reveal><window.LPQuickAdd lang={lang} /></div>
      <div className="lp-divider" />
      <div data-reveal><window.LPMatrix lang={lang} /></div>
      <div data-reveal><window.LPPrivacy lang={lang} /></div>
      <div data-reveal><window.LPQuote lang={lang} /></div>
      <div data-reveal><window.LPFinalCTA lang={lang} /></div>
      <window.LPFooter lang={lang} />

      <window.TweaksPanel title={lang === 'ar' ? 'تخصيص' : 'Tweaks'}>
        <window.TweakSection label={lang === 'ar' ? 'الهويّة' : 'Brand'} />
        <window.TweakColor
          label={lang === 'ar' ? 'لون التّمييز' : 'Accent color'}
          value={t.accent}
          options={ACCENT_OPTIONS}
          onChange={(v) => setTweak('accent', v)}
        />
        <window.TweakSection label={lang === 'ar' ? 'الواجهة' : 'Hero'} />
        <window.TweakSelect
          label={lang === 'ar' ? 'ترتيب الهواتف' : 'Phone arrangement'}
          value={t.heroVariant}
          options={lang === 'ar' ? [
            { value: 'single', label: 'هاتف واحد (في الوسط)' },
            { value: 'twin',   label: 'هاتفان (فاتح + داكن)' },
            { value: 'fan',    label: 'ثلاثة هواتف (مروحة)' },
          ] : [
            { value: 'single', label: 'Single phone (centered)' },
            { value: 'twin',   label: 'Two phones (light + dark)' },
            { value: 'fan',    label: 'Three phones (fan)' },
          ]}
          onChange={(v) => setTweak('heroVariant', v)}
        />
      </window.TweaksPanel>
    </div>
  );
}

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