/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakToggle, TweakSelect, TweakText,
   Header, Footer, MobileBar,
   HomePage, ServicesPage, DropoffPage, CollectionsPage, FaqPage, ContactPage */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "tri",
  "primary": "#E8521C",
  "primaryDeep": "#B83A12",
  "headingFont": "Archivo",
  "darkHeader": false,
  "showTrust": true,
  "heroVariant": "split"
}/*EDITMODE-END*/;

const PAGES = {
  home: HomePage,
  services: ServicesPage,
  dropoff: DropoffPage,
  collections: CollectionsPage,
  faq: FaqPage,
  contact: ContactPage,
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = React.useState(() => (location.hash || '#home').slice(1).split('?')[0] || 'home');

  // Apply tweaks to CSS vars (only when in 'orange' mode — other modes use stylesheet vars)
  React.useEffect(() => {
    const r = document.documentElement;
    if (t.accent === 'orange') {
      r.style.setProperty('--orange', t.primary);
      r.style.setProperty('--orange-deep', t.primaryDeep);
    } else {
      r.style.removeProperty('--orange');
      r.style.removeProperty('--orange-deep');
    }
  }, [t.primary, t.primaryDeep, t.accent]);

  // Set accent mode on root for CSS targeting
  React.useEffect(() => {
    document.documentElement.setAttribute('data-accent', t.accent);
  }, [t.accent]);

  React.useEffect(() => {
    const r = document.documentElement;
    const fontMap = {
      Archivo: "'Archivo', system-ui, sans-serif",
      Manrope: "'Manrope', system-ui, sans-serif",
      Inter: "'Inter', system-ui, sans-serif",
    };
    r.style.setProperty('--sans', fontMap[t.headingFont] || fontMap.Archivo);
  }, [t.headingFont]);

  // Hash routing
  React.useEffect(() => {
    const onHash = () => {
      const h = (location.hash || '#home').slice(1).split('?')[0] || 'home';
      setRoute(h);
      window.scrollTo({top: 0, behavior: 'instant'});
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  const go = (id) => {
    location.hash = id;
    setRoute(id);
    window.scrollTo({top: 0, behavior: 'instant'});
  };

  const Page = PAGES[route] || HomePage;

  return (
    <>
      <Header route={route} go={go} />
      <main>
        <Page go={go} />
      </main>
      <Footer go={go} />
      <MobileBar />

      <TweaksPanel>
        <TweakSection label="Accent mode"/>
        <TweakRadio label="Mode" value={t.accent}
          options={[
            {value:'orange', label:'Orange'},
            {value:'mono',   label:'Mono (A)'},
            {value:'tri',    label:'Tri (B)'},
          ]}
          onChange={(v) => setTweak('accent', v)} />

        <TweakSection label="Brand colour"/>
        <TweakColor label="Primary" value={t.primary} onChange={(v) => setTweak('primary', v)} />
        <TweakColor label="Primary (deep)" value={t.primaryDeep} onChange={(v) => setTweak('primaryDeep', v)} />

        <TweakSection label="Typography"/>
        <TweakSelect label="Heading font" value={t.headingFont}
          options={[
            {value:'Archivo', label:'Archivo (default)'},
            {value:'Manrope', label:'Manrope'},
            {value:'Inter',   label:'Inter'},
          ]}
          onChange={(v) => setTweak('headingFont', v)} />

        <TweakSection label="Page" />
        <TweakSelect label="Jump to page" value={route}
          options={[
            {value:'home', label:'Home'},
            {value:'services', label:'Services'},
            {value:'dropoff', label:'Drop-off'},
            {value:'collections', label:'Collections'},
            {value:'faq', label:'FAQ'},
            {value:'contact', label:'Contact'},
          ]}
          onChange={(v) => go(v)} />
      </TweaksPanel>
    </>
  );
}

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