// Root app — routing + tour modal + tweaks
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "letterblock",
  "ctaColor": "red",
  "ribbonStyle": "ink",
  "tone": "warm"
}/*EDITMODE-END*/;

function App() {
  const [page, setPage] = useState('home');
  const [tourOpen, setTourOpen] = useState(false);
  const [tourBias, setTourBias] = useState('');
  const [lang, setLang] = useState('EN');
  const [t, setTweak] = (window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}]);

  const navigate = (id) => { setPage(id); window.scrollTo({ top: 0, behavior: 'smooth' }); };
  const openTour = (bias = '') => { setTourBias(bias); setTourOpen(true); };

  // Apply palette tweak via CSS vars
  useEffect(() => {
    const r = document.documentElement;
    const ctaMap = { red: '#E63F35', teal: '#0FA8B8', magenta: '#E2417C', ink: '#1B2641' };
    r.style.setProperty('--cta', ctaMap[t.ctaColor] || ctaMap.red);

    if (t.palette === 'letterblock') {
      r.style.setProperty('--c-magenta', '#E2417C');
      r.style.setProperty('--c-teal', '#14B6C6');
      r.style.setProperty('--c-green', '#6DBE3F');
      r.style.setProperty('--c-red', '#E63F35');
    } else if (t.palette === 'warm-sand') {
      r.style.setProperty('--c-magenta', '#D45B8C');
      r.style.setProperty('--c-teal', '#3FB1B5');
      r.style.setProperty('--c-green', '#A8C247');
      r.style.setProperty('--c-red', '#E07A4B');
    } else if (t.palette === 'muted-pastel') {
      r.style.setProperty('--c-magenta', '#D88AAA');
      r.style.setProperty('--c-teal', '#7DB8C0');
      r.style.setProperty('--c-green', '#A8C480');
      r.style.setProperty('--c-red', '#D87B6D');
    }

    if (t.tone === 'warm') {
      r.style.setProperty('--cream', '#FBF6EE');
      r.style.setProperty('--cream-2', '#F4ECDB');
    } else if (t.tone === 'cool') {
      r.style.setProperty('--cream', '#F2F5F8');
      r.style.setProperty('--cream-2', '#E6EDF2');
    } else if (t.tone === 'paper') {
      r.style.setProperty('--cream', '#FFFFFF');
      r.style.setProperty('--cream-2', '#F4F4F1');
    }
  }, [t]);

  // Post slide index changes (the deck-stage host listens; harmless otherwise)
  useEffect(() => {
    const idx = ['home','approach','programmes','facilities','admissions','about','contact'].indexOf(page);
    try { window.parent.postMessage({ slideIndexChanged: idx }, '*'); } catch (e) {}
  }, [page]);

  const Page = ({
    home: HomePage, approach: ApproachPage, programmes: ProgrammesPage,
    facilities: FacilitiesPage, admissions: AdmissionsPage, about: AboutPage, contact: ContactPage,
  })[page] || HomePage;

  return (
    <>
      <Nav current={page} navigate={navigate} openTour={() => openTour()} lang={lang} setLang={setLang} />
      <Page key={page} openTour={openTour} navigate={navigate} />
      <Footer navigate={navigate} openTour={() => openTour()} />
      <TourModal open={tourOpen} onClose={() => setTourOpen(false)} programmeBias={tourBias} />

      {/* WhatsApp FAB — disabled-but-visible per brief; tooltip explains */}
      <a className="wa-fab" href="https://wa.me/971000000000?text=Hi%20IDEA%20ELC%2C%20I%27d%20like%20to%20book%20a%20tour" target="_blank" rel="noopener" title="WhatsApp — number to be confirmed">
        <Icon.Whatsapp />
      </a>

      {/* Tweaks panel */}
      {window.TweaksPanel && (
        <TweaksPanel title="Tweaks">
          <TweakSection label="Palette">
            <TweakRadio
              value={t.palette}
              onChange={v => setTweak('palette', v)}
              options={[
                { value: 'letterblock', label: 'Letterblock' },
                { value: 'warm-sand', label: 'Warm Sand' },
                { value: 'muted-pastel', label: 'Muted Pastel' },
              ]}
            />
          </TweakSection>
          <TweakSection label="CTA color">
            <TweakColor
              value={t.ctaColor}
              onChange={v => setTweak('ctaColor', v)}
              options={['red','teal','magenta','ink']}
            />
          </TweakSection>
          <TweakSection label="Background tone">
            <TweakRadio
              value={t.tone}
              onChange={v => setTweak('tone', v)}
              options={[
                { value: 'warm', label: 'Warm' },
                { value: 'cool', label: 'Cool' },
                { value: 'paper', label: 'Paper' },
              ]}
            />
          </TweakSection>
          <TweakSection label="Jump to page">
            <TweakSelect
              value={page}
              onChange={navigate}
              options={[
                { value: 'home', label: 'Home' },
                { value: 'approach', label: 'Approach' },
                { value: 'programmes', label: 'Programmes' },
                { value: 'facilities', label: 'Facilities' },
                { value: 'admissions', label: 'Admissions' },
                { value: 'about', label: 'About' },
                { value: 'contact', label: 'Contact' },
              ]}
            />
          </TweakSection>
          <TweakSection label="Test the funnel">
            <TweakButton onClick={() => openTour()}>Open tour modal</TweakButton>
          </TweakSection>
        </TweaksPanel>
      )}
    </>
  );
}

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