/* App root: nav, tweaks, mount */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#10B981",
  "showFloats": true,
  "phoneAnimate": true,
  "lang": "en"
}/*EDITMODE-END*/;

/* ScrollRig removed — kept in v2-scrollytelling branch */

function useReveal() {
  React.useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.1, rootMargin: '0px 0px -80px 0px' });
    document.querySelectorAll('.reveal:not(.in)').forEach(el => obs.observe(el));
    return () => obs.disconnect();
  });
}

const Nav = ({ t, lang, setLang }) => (
  <nav className="nav">
    <div className="wrap nav-inner">
      <div className="brand">
        <img src="uploads/logo_onbars.png" alt="Onbars" className="brand-logo"/>
        <span>Onbars</span>
      </div>
      <div className="nav-links">
        <a href="#features">{t.nav.features}</a>
        <a href="#score">{t.nav.score}</a>
        <a href="#profile-public">Profile</a>
      </div>
      <div className="nav-right">
        <div className="lang-toggle">
          {['en','fr','es'].map(l => (
            <button key={l} className={lang===l ? 'active' : ''} onClick={()=>setLang(l)}>{l.toUpperCase()}</button>
          ))}
        </div>
        <span className="cta-btn coming-soon" aria-disabled="true">Coming soon</span>
      </div>
    </div>
  </nav>
);

const Tweaks = ({ tweaks, setTweak }) => {
  if (!window.TweaksPanel) return null;
  const { TweaksPanel, TweakSection, TweakColor, TweakToggle, TweakSelect } = window;
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Brand">
        <TweakColor
          label="Accent"
          value={tweaks.accent}
          onChange={(v) => setTweak('accent', v)}
          options={['#10B981', '#22D3EE', '#F59E0B', '#A855F7']}
        />
      </TweakSection>
      <TweakSection title="Hero">
        <TweakToggle label="Floating cards" value={tweaks.showFloats} onChange={(v) => setTweak('showFloats', v)} />
        <TweakToggle label="Phone screen cycle" value={tweaks.phoneAnimate} onChange={(v) => setTweak('phoneAnimate', v)} />
      </TweakSection>
      <TweakSection title="Language">
        <TweakSelect
          label="Default"
          value={tweaks.lang}
          onChange={(v) => setTweak('lang', v)}
          options={[{value:'en', label:'English'}, {value:'fr', label:'Français'}, {value:'es', label:'Español'}]}
        />
      </TweakSection>
    </TweaksPanel>
  );
};

const App = () => {
  const [tweaks, setTweaks] = React.useState(TWEAK_DEFAULTS);
  const [lang, setLang] = React.useState(TWEAK_DEFAULTS.lang);

  const setTweak = (k, v) => {
    const next = (typeof k === 'object') ? {...tweaks, ...k} : {...tweaks, [k]: v};
    setTweaks(next);
    if (next.lang !== lang) setLang(next.lang);
    window.parent.postMessage({type:'__edit_mode_set_keys', edits: (typeof k === 'object') ? k : {[k]: v}}, '*');
  };

  React.useEffect(() => {
    document.documentElement.style.setProperty('--emerald', tweaks.accent);
    // recompute glow + dim
    document.documentElement.style.setProperty('--emerald-glow', tweaks.accent + '59');
    document.documentElement.style.setProperty('--emerald-dim', tweaks.accent + '1f');
  }, [tweaks.accent]);

  React.useEffect(() => {
    if (!tweaks.showFloats) document.body.classList.add('no-floats');
    else document.body.classList.remove('no-floats');
  }, [tweaks.showFloats]);

  React.useEffect(() => {
    if (!tweaks.phoneAnimate) document.body.classList.add('no-phone-anim');
    else document.body.classList.remove('no-phone-anim');
  }, [tweaks.phoneAnimate]);

  useReveal();
  const t = window.I18N[lang];

  return (
    <>
      <div className="bg-glow"></div>
      <div className="bg-grid"></div>
      <Nav t={t} lang={lang} setLang={(l)=>{setLang(l); setTweak('lang', l);}} />
      <main>
        <Hero t={t} />
        <AppIntro t={t} />
        <FeaturesOverview t={t} />
        <CompeteDeepDive />
        <MapDeepDive />
        <WorkoutDeepDive />
        <GTWDeepDive />
        <AnalyzeDeepDive />
        <Score t={t} />
        <ProfilePublicDeepDive t={t} />
        <ProfileDashboardDeepDive t={t} />
        {/* Hidden — to revisit later (confusing to explain):
            <CertVsBadge />
            <CertDeepDive />
            <BadgeDeepDive />
            <Cert t={t} /> */}
        {/* Removed permanently: Community ("The Movement" — fake stats), Footer */}
      </main>
      <Tweaks tweaks={tweaks} setTweak={setTweak} />
    </>
  );
};

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