/* Gaung AI — App root, routing, Tweaks */

function App() {
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "lang": "id",
    "accent": "gradient",
    "heroVariant": "A"
  }/*EDITMODE-END*/;

  const [lang, setLang] = useState(() => localStorage.getItem('gaung_lang') || TWEAK_DEFAULTS.lang);
  const [accent, setAccent] = useState(TWEAK_DEFAULTS.accent);
  const [heroVariant, setHeroVariant] = useState(TWEAK_DEFAULTS.heroVariant);
  const [route, setRoute] = useState(() => {
    const h = window.location.hash.replace('#', '');
    return ['home','how','services','cases','pricing','blog','contact'].includes(h) ? h : 'home';
  });
  const [tweaksOpen, setTweaksOpen] = useState(false);

  useEffect(() => { localStorage.setItem('gaung_lang', lang); document.documentElement.lang = lang; }, [lang]);
  useEffect(() => {
    document.body.dataset.accent = accent === 'gradient' ? '' : accent;
  }, [accent]);

  // Update URL hash on route change & scroll to top
  useEffect(() => {
    if (window.location.hash.replace('#','') !== route) {
      window.history.replaceState(null, '', '#' + route);
    }
    window.scrollTo({ top: 0, behavior: 'instant' });
  }, [route]);

  // Tweaks protocol
  useEffect(() => {
    const handler = (e) => {
      if (!e.data || typeof e.data !== 'object') return;
      if (e.data.type === '__activate_edit_mode') setTweaksOpen(true);
      if (e.data.type === '__deactivate_edit_mode') setTweaksOpen(false);
    };
    window.addEventListener('message', handler);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

  const persist = (edits) => {
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits }, '*');
  };

  const langCtx = useMemo(() => ({ lang, setLang }), [lang]);

  return (
    <LangCtx.Provider value={langCtx}>
      <Nav route={route} setRoute={setRoute}/>

      {route === 'home' && (
        <>
          <Hero variant={heroVariant} setRoute={setRoute}/>
          <MarqueeStrip/>
          <ProblemSection/>
          <OfficeSection/>
          <EnginesSection/>
          <NumbersSection/>
          <FinalCTA setRoute={setRoute}/>
        </>
      )}
      {route === 'how' && <HowPage setRoute={setRoute}/>}
      {route === 'services' && <ServicesPage setRoute={setRoute}/>}
      {route === 'cases' && <CasesPage setRoute={setRoute}/>}
      {route === 'pricing' && <PricingPage setRoute={setRoute}/>}
      {route === 'blog' && <BlogPage setRoute={setRoute}/>}
      {route === 'contact' && <ContactPage/>}

      <Footer setRoute={setRoute}/>

      {tweaksOpen && (
        <div className="tweaks-panel show">
          <h6>Tweaks</h6>
          <div className="tweaks-row">
            <div style={{fontSize:12,color:'var(--muted)'}}>Hero headline variant</div>
            <div className="tweaks-btns">
              {['A','B','C'].map(v => (
                <button key={v}
                  className={`tweaks-btn ${heroVariant===v?'active':''}`}
                  onClick={() => { setHeroVariant(v); persist({ heroVariant: v }); }}>
                  {v}
                </button>
              ))}
            </div>
          </div>
          <div className="tweaks-row">
            <div style={{fontSize:12,color:'var(--muted)'}}>Accent treatment</div>
            <div className="tweaks-btns">
              {[['gradient','Gradient'],['solid','Solid magenta'],['duo','Magenta + violet']].map(([v,l]) => (
                <button key={v}
                  className={`tweaks-btn ${accent===v?'active':''}`}
                  onClick={() => { setAccent(v); persist({ accent: v }); }}>
                  {l}
                </button>
              ))}
            </div>
          </div>
          <div className="tweaks-row">
            <div style={{fontSize:12,color:'var(--muted)'}}>Language</div>
            <div className="tweaks-btns">
              {[['id','Bahasa'],['en','English']].map(([v,l]) => (
                <button key={v}
                  className={`tweaks-btn ${lang===v?'active':''}`}
                  onClick={() => { setLang(v); persist({ lang: v }); }}>
                  {l}
                </button>
              ))}
            </div>
          </div>
          <div style={{fontSize:11,color:'var(--muted)',borderTop:'1px solid var(--line)',paddingTop:10,lineHeight:1.45}}>
            Changes persist. Hero variants only show on Home.
          </div>
        </div>
      )}
    </LangCtx.Provider>
  );
}

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