// ExecuJet ME — root app

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#C2A05A",
  "displayFont": "Inter (modern grotesque)",
  "italicAccent": true,
  "heroImage": "DWC exterior at dusk",
  "density": "Cinematic"
}/*EDITMODE-END*/;

const ACCENTS = {
  '#C2A05A': { gold:'#C2A05A', gold2:'#A78445', signal:'#E6D9B9' }, // gold
  '#3D8FB8': { gold:'#3D8FB8', gold2:'#1E5C7C', signal:'#A8D1E5' }, // azure
  '#B86F3E': { gold:'#B86F3E', gold2:'#8E5430', signal:'#E8B98F' }, // bronze
  '#C8CED4': { gold:'#C8CED4', gold2:'#9099A1', signal:'#E8ECEE' }, // silver
};
const DISPLAYS = {
  "Inter (modern grotesque)": '"Inter", -apple-system, "Helvetica Neue", Arial, sans-serif',
  "Instrument Serif": '"Instrument Serif", "Cormorant Garamond", Georgia, serif',
  "Cormorant Garamond": '"Cormorant Garamond", Georgia, serif',
};
const HERO_IMGS = {
  "DWC exterior at dusk": 'media/dwc-terminal-exterior-dusk.webp',
  "DWC night terminal": 'media/dwc-terminal-night-x.webp',
  "DXB apron at dusk": 'media/dxb-apron-jet-dusk.webp',
  "DWC lounge — Majlis": 'media/dwc-lounge-art.webp',
  "Brand · vision": 'media/brand-vision-mission.webp',
};

function applyTweaks(t){
  const root = document.documentElement;
  const a = ACCENTS[t.accent] || ACCENTS['#C2A05A'];
  root.style.setProperty('--gold', a.gold);
  root.style.setProperty('--gold-2', a.gold2);
  root.style.setProperty('--signal', a.signal);
  root.style.setProperty('--font-display', DISPLAYS[t.displayFont] || DISPLAYS["Inter (modern grotesque)"]);
  if (t.density === 'Compact'){
    root.style.setProperty('--gutter', 'clamp(16px, 3vw, 36px)');
  } else if (t.density === 'Editorial'){
    root.style.setProperty('--gutter', 'clamp(28px, 6vw, 88px)');
  } else {
    root.style.setProperty('--gutter', 'clamp(20px, 4vw, 56px)');
  }
}

function App(){
  const [page, setPage] = React.useState('home');
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [editMode, setEditMode] = React.useState(false);

  React.useEffect(()=>{ applyTweaks(tweaks); }, [tweaks]);

  // Pull hash on load
  React.useEffect(()=>{
    const fromHash = (window.location.hash || '').replace('#','');
    if (fromHash && /^[a-z-]+$/.test(fromHash)) setPage(fromHash);
  }, []);

  // Sync hash + scroll-top on nav
  const goto = (p) => {
    setPage(p);
    window.location.hash = p;
    window.scrollTo({top:0, behavior:'instant'});
  };

  // Listen for edit-mode messages
  React.useEffect(()=>{
    const onMsg = (e)=>{
      if (!e.data) return;
      if (e.data.type === '__activate_edit_mode') setEditMode(true);
      else if (e.data.type === '__deactivate_edit_mode') setEditMode(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({type:'__edit_mode_available'}, '*');
    return ()=>window.removeEventListener('message', onMsg);
  }, []);

  // Override the hero image only on home
  React.useEffect(()=>{
    if (page !== 'home') return;
    const hb = document.querySelector('.hero .hero-bg');
    if (hb) hb.style.backgroundImage = `url(${HERO_IMGS[tweaks.heroImage] || HERO_IMGS["DWC exterior at dusk"]})`;
  }, [tweaks.heroImage, page]);

  // Toggle italic accents
  React.useEffect(()=>{
    document.body.classList.toggle('no-italic', !tweaks.italicAccent);
  }, [tweaks.italicAccent]);

  let Page;
  switch(page){
    case 'fbo': Page = <FboHubPage goto={goto} />; break;
    case 'fbo-dwc': Page = <DwcPage goto={goto} />; break;
    case 'fbo-dxb': Page = <DxbPage goto={goto} />; break;
    case 'charter': Page = <CharterPage goto={goto} />; break;
    case 'management': Page = <ManagementPage goto={goto} />; break;
    case 'mro': Page = <MroPage goto={goto} />; break;
    case 'about': Page = <AboutPage goto={goto} />; break;
    case 'contact': Page = <ContactPage goto={goto} />; break;
    case 'home':
    default: Page = <HomePage goto={goto} />;
  }

  const lang = 'EN';

  return (
    <React.Fragment>
      <TopBar lang={lang} onLang={()=>{}} />
      <Navbar page={page} goto={goto} />
      <main key={page} className="fade-in">{Page}</main>
      <Footer goto={goto} />
      <StickyBar goto={goto} />
      {editMode && (
        <TweaksPanel title="Tweaks · ExecuJet ME">
          <TweakSection title="Accent">
            <TweakColor
              label="Accent color"
              value={tweaks.accent}
              onChange={v=>setTweak('accent', v)}
              options={['#C2A05A', '#3D8FB8', '#B86F3E', '#C8CED4']}
            />
          </TweakSection>
          <TweakSection title="Type">
            <TweakSelect
              label="Display font"
              value={tweaks.displayFont}
              onChange={v=>setTweak('displayFont', v)}
              options={Object.keys(DISPLAYS)}
            />
            <TweakToggle
              label="Italic-serif accents"
              value={tweaks.italicAccent}
              onChange={v=>setTweak('italicAccent', v)}
            />
          </TweakSection>
          <TweakSection title="Layout">
            <TweakRadio
              label="Density"
              value={tweaks.density}
              onChange={v=>setTweak('density', v)}
              options={['Compact','Cinematic','Editorial']}
            />
          </TweakSection>
          <TweakSection title="Hero image (home)">
            <TweakSelect
              label="Hero photo"
              value={tweaks.heroImage}
              onChange={v=>setTweak('heroImage', v)}
              options={Object.keys(HERO_IMGS)}
            />
          </TweakSection>
        </TweaksPanel>
      )}
    </React.Fragment>
  );
}

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