/* global React, ReactDOM */
(function(){
const { useState, useEffect } = React;
const D = window.JETEX_DATA;
const { Nav, Hero, OpsTicker, Arrow, WhatsIcon } = window.JetexUI1;
const { Services, NetworkSection, FeaturedTerminal, SectionHead } = window.JetexUI2;
const { FounderSection, AwardsStrip, ContactSection, Footer, StickyCTAs } = window.JetexUI3;
const { QuoteModal, TweaksPanel } = window.JetexUI4;

/* ─────────────── TWEAKS ─────────────── */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "en",
  "theme": "noir",
  "accent": "#FF6900",
  "displayFont": "Fraunces",
  "showTechnicals": true
}/*EDITMODE-END*/;

function useTweaks(defaults){
  const [t, setT] = useState(defaults);
  const setTweak = (k, v) => {
    const edits = typeof k === 'object' ? k : { [k]: v };
    setT(prev => ({ ...prev, ...edits }));
    try { window.parent.postMessage({ type:'__edit_mode_set_keys', edits }, '*'); } catch(e){}
  };
  useEffect(()=>{
    const handler = (e)=>{
      if(e.data?.type === '__activate_edit_mode') setShowTweaks(true);
      if(e.data?.type === '__deactivate_edit_mode') setShowTweaks(false);
    };
    window.addEventListener('message', handler);
    try { window.parent.postMessage({type:'__edit_mode_available'},'*'); } catch(e){}
    return ()=> window.removeEventListener('message', handler);
  }, []);
  const [showTweaks, setShowTweaks] = useState(false);
  return { t, setTweak, showTweaks, setShowTweaks };
}

/* ─────────────── ROOT ─────────────── */
function App(){
  const { t, setTweak, showTweaks, setShowTweaks } = useTweaks(TWEAK_DEFAULTS);
  const lang = t.lang || 'en';
  const i = D.i18n[lang];
  const dir = i.dir;

  const [quoteOpen, setQuoteOpen] = useState(false);
  const [quoteSeed, setQuoteSeed] = useState({});

  useEffect(()=>{
    document.documentElement.lang = i.lang;
    document.documentElement.dir = dir;
    document.documentElement.dataset.theme = t.theme;
    document.documentElement.style.setProperty('--accent', t.accent);
    document.documentElement.style.setProperty('--display-font',
      t.displayFont === 'Fraunces' ? `'Fraunces', 'Cormorant Garamond', serif` :
      t.displayFont === 'Cormorant' ? `'Cormorant Garamond', 'Fraunces', serif` :
      t.displayFont === 'Manrope' ? `'Manrope', 'Inter', sans-serif` :
      `'Fraunces', serif`
    );
  }, [lang, t.theme, t.accent, t.displayFont, dir]);

  const openQuote = (seed={}) => { setQuoteSeed(seed); setQuoteOpen(true); };

  return (
    <div className="page" dir={dir} data-lang={lang}>
      <Nav i={i} lang={lang} setLang={(v)=>setTweak('lang', v)} onQuote={()=>openQuote()} />
      <Hero i={i} lang={lang} onQuote={()=>openQuote()} showTech={t.showTechnicals} />
      <OpsTicker i={i} />
      <Services i={i} onQuote={(s)=>openQuote({service:s.name})} />
      <NetworkSection i={i} lang={lang} onContactFBO={(term)=>openQuote({terminal: term.city + ' (' + term.iata + ')'})} />
      <FeaturedTerminal i={i} onContactFBO={()=>openQuote({terminal:'Dubai (DWC)'})} />
      <FounderSection i={i} />
      <AwardsStrip i={i} />
      <ContactSection i={i} onQuote={()=>openQuote()} />
      <Footer i={i} />

      <StickyCTAs i={i} onQuote={()=>openQuote()} />
      {quoteOpen && <QuoteModal i={i} seed={quoteSeed} onClose={()=>setQuoteOpen(false)} />}

      {showTweaks && (
        <TweaksPanel t={t} setTweak={setTweak} onClose={()=>{
          setShowTweaks(false);
          try { window.parent.postMessage({type:'__edit_mode_dismissed'},'*'); } catch(e){}
        }} />
      )}
    </div>
  );
}

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