// Main app — routing, tweaks integration
const { useState: useS_a, useEffect: useE_a, useContext: useC_a } = React;

function App() {
  const { route: rawRoute } = useC_a(RouterCtx);
  const route = (rawRoute || '').split('?')[0];

  const tweaks = useTweaks(/*EDITMODE-BEGIN*/{
    "primary": "#E2231A",
    "density": 1,
    "fontDisplay": "Bebas Neue",
    "fontSans": "Inter Tight",
    "heroLayout": "split",
    "brandShowcase": "cycling",
    "animationIntensity": 1
  }/*EDITMODE-END*/);
  const [t, setT] = tweaks;

  // Apply tweaks to CSS vars
  useE_a(() => {
    const r = document.documentElement;
    r.style.setProperty('--mm-red', t.primary);
    r.style.setProperty('--density', t.density);
    r.style.setProperty('--section-pad', `calc(120px * ${t.density})`);
  }, [t.primary, t.density]);

  // Inject Google fonts dynamically
  useE_a(() => {
    const id = 'gf-dyn';
    const old = document.getElementById(id);
    if (old) old.remove();
    const link = document.createElement('link');
    link.id = id;
    link.rel = 'stylesheet';
    const fams = [t.fontDisplay, t.fontSans].map(f => `family=${encodeURIComponent(f)}:wght@400;500;600;700&display=swap`).join('&');
    link.href = `https://fonts.googleapis.com/css2?${fams}`;
    document.head.appendChild(link);
    document.documentElement.style.setProperty('--font-display', `'${t.fontDisplay}', Impact, sans-serif`);
    document.documentElement.style.setProperty('--font-sans', `'${t.fontSans}', -apple-system, sans-serif`);
  }, [t.fontDisplay, t.fontSans]);

  let page;
  switch (route) {
    case 'brands': page = <BrandsPage/>; break;
    case 'fuel': page = <FuelPage/>; break;
    case 'wash': page = <WashPage/>; break;
    case 'locations': page = <LocationsPage/>; break;
    case 'rewards': page = <RewardsPage/>; break;
    case 'distribution': page = <DistributionPage/>; break;
    case 'careers': page = <CareersPage/>; break;
    case 'about': page = <AboutPage/>; break;
    default: page = <HomePage/>;
  }

  return (
    <>
      <Nav/>
      {React.cloneElement(page, { key: rawRoute })}
      <Footer/>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Brand" defaultOpen>
          <TweakColor label="Primary red" value={t.primary} onChange={(v) => setT('primary', v)}/>
        </TweakSection>
        <TweakSection title="Typography" defaultOpen>
          <TweakSelect label="Display font" value={t.fontDisplay} onChange={(v) => setT('fontDisplay', v)}
            options={[
              { value: 'Bebas Neue', label: 'Bebas Neue' },
              { value: 'Anton', label: 'Anton' },
              { value: 'Archivo Black', label: 'Archivo Black' },
              { value: 'Oswald', label: 'Oswald' },
              { value: 'Playfair Display', label: 'Playfair Display' },
              { value: 'Familjen Grotesk', label: 'Familjen Grotesk' },
            ]}/>
          <TweakSelect label="Body font" value={t.fontSans} onChange={(v) => setT('fontSans', v)}
            options={[
              { value: 'Inter Tight', label: 'Inter Tight' },
              { value: 'Manrope', label: 'Manrope' },
              { value: 'DM Sans', label: 'DM Sans' },
              { value: 'Geist', label: 'Geist' },
              { value: 'Space Grotesk', label: 'Space Grotesk' },
            ]}/>
        </TweakSection>
        <TweakSection title="Layout" defaultOpen>
          <TweakSlider label="Density" value={t.density} onChange={(v) => setT('density', v)}
            min={0.6} max={1.4} step={0.05} suffix="×"/>
          <TweakRadio label="Animation intensity" value={t.animationIntensity} onChange={(v) => setT('animationIntensity', v)}
            options={[{value: 0, label: 'Off'}, {value: 0.5, label: 'Mild'}, {value: 1, label: 'Full'}]}/>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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