// Top-level App \u2014 routing state + Tweaks panel wiring.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroStyle": "classic",
  "branchCardStyle": "preview",
  "characterStyle": "grid",
  "warmth": "warm"
}/*EDITMODE-END*/;

function App() {
  const [route, setRoute] = useState({ name: 'home' });
  const [tourOpen, setTourOpen] = useState(false);
  const [tourPrefill, setTourPrefill] = useState(null);
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply "warmth" tweak globally via CSS variable
  useEffect(() => {
    const map = {
      warm:    { cream: '#FBF8F0', sand: '#F2EBDD' },
      cooler:  { cream: '#F6F4ED', sand: '#E8E4D5' },
      paper:   { cream: '#FFFCF4', sand: '#F5EFE0' },
    };
    const v = map[t.warmth] || map.warm;
    document.documentElement.style.setProperty('--cream', v.cream);
    document.documentElement.style.setProperty('--sand', v.sand);
  }, [t.warmth]);

  // Navigate helper
  const navigate = (r) => {
    setRoute(r);
    window.scrollTo({ top: 0, behavior: 'instant' in window ? 'instant' : 'auto' });
  };
  const openTour = (prefill) => {
    setTourPrefill(prefill && prefill.branch ? prefill : null);
    setTourOpen(true);
  };

  let page = null;
  switch (route.name) {
    case 'home':       page = <Home navigate={navigate} openTour={openTour} tweaks={t} />; break;
    case 'approach':   page = <Approach navigate={navigate} openTour={openTour} />; break;
    case 'programmes': page = <Programmes navigate={navigate} openTour={openTour} />; break;
    case 'branches':   page = <Branches navigate={navigate} openTour={openTour} />; break;
    case 'branch':     page = <BranchPage id={route.id} navigate={navigate} openTour={openTour} />; break;
    case 'admissions': page = <Admissions navigate={navigate} openTour={openTour} />; break;
    default:           page = <Home navigate={navigate} openTour={openTour} tweaks={t} />;
  }

  return (
    <div>
      <Navbar route={route} navigate={navigate} openTour={() => openTour()} />
      {page}
      <Footer navigate={navigate} openTour={() => openTour()} />
      <FabStack />
      <TourModal open={tourOpen} close={() => setTourOpen(false)} prefill={tourPrefill} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Visual direction">
          <TweakSelect label="Hero treatment" value={t.heroStyle} onChange={v => setTweak('heroStyle', v)}
                       options={['classic', 'clover', 'editorial']} />
          <TweakRadio label="Branch picker" value={t.branchCardStyle} onChange={v => setTweak('branchCardStyle', v)}
                      options={['preview', 'list']} />
          <TweakRadio label="Seven characters" value={t.characterStyle} onChange={v => setTweak('characterStyle', v)}
                      options={['grid', 'tiles', 'pills']} />
          <TweakRadio label="Paper warmth" value={t.warmth} onChange={v => setTweak('warmth', v)}
                      options={['warm', 'cooler', 'paper']} />
        </TweakSection>

        <TweakSection label="Quick jump">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {NAV_ITEMS.map(n => (
              <button key={n.id} onClick={() => navigate({ name: n.id })}
                      style={{ textAlign: 'left', padding: '8px 12px', borderRadius: 8, background: route.name === n.id ? 'var(--dibber-green)' : 'rgba(0,0,0,0.04)', color: route.name === n.id ? 'var(--cream)' : 'var(--ink)', fontSize: 13, fontWeight: 500 }}>
                {n.label}
              </button>
            ))}
            <button onClick={() => navigate({ name: 'branch', id: 'al-barsha-south' })} style={{ textAlign: 'left', padding: '8px 12px', borderRadius: 8, background: route.name === 'branch' ? 'var(--dibber-green)' : 'rgba(0,0,0,0.04)', color: route.name === 'branch' ? 'var(--cream)' : 'var(--ink)', fontSize: 13, fontWeight: 500 }}>
              Branch \u2192 Al Barsha South
            </button>
          </div>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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