// Alba Cars — App shell + router + Tweaks

const { useState: useStateA, useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "Light",
  "accent": "#9E1B1B",
  "heroVariant": "Split",
  "showWhatsAppFab": true
}/*EDITMODE-END*/;

function App() {
  const [route, setRoute] = useStateA('home');
  const [vehicleId, setVehicleId] = useStateA(VEHICLES[0].id);
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply theme + accent live
  useEffectA(() => {
    document.documentElement.setAttribute('data-theme', t.theme === 'Dark' ? 'dark' : 'light');
    document.documentElement.style.setProperty('--accent', t.accent);
    const hoverMap = {
      '#9E1B1B': '#6E1414',
      '#B91C1C': '#7F1D1D',
      '#6E1414': '#4E0C0C',
      '#C8A35A': '#A57F38',
      '#1E3A5F': '#0F1F38',
    };
    document.documentElement.style.setProperty('--accent-hover', hoverMap[t.accent] || t.accent);
  }, [t.theme, t.accent]);

  // Page label for screen-label / comment context
  const screenLabel = {
    home: '01 Home',
    buy: '02 Inventory',
    vehicle: '03 Vehicle Detail',
    sell: '04 Sell Your Car',
    finance: '05 Finance',
    about: '06 About',
    contact: '07 Contact',
    brands: '08 Brands',
  }[route] || route;

  return (
    <div data-screen-label={screenLabel}>
      <Navbar route={route} setRoute={setRoute} dark={route === 'home' && t.heroVariant === 'Cinematic'} />
      <main>
        {route === 'home' && <HomePage setRoute={setRoute} setVehicleId={setVehicleId} heroVariant={t.heroVariant === 'Cinematic' ? 'cinematic' : 'split'} />}
        {route === 'buy' && <InventoryPage setRoute={setRoute} setVehicleId={setVehicleId} />}
        {route === 'vehicle' && <VehiclePage id={vehicleId} setRoute={setRoute} setVehicleId={setVehicleId} />}
        {route === 'sell' && <SellPage setRoute={setRoute} />}
        {route === 'finance' && <FinancePage setRoute={setRoute} />}
        {route === 'about' && <AboutPage setRoute={setRoute} />}
        {route === 'contact' && <ContactPage setRoute={setRoute} />}
        {route === 'brands' && <BrandsPage setRoute={setRoute} setVehicleId={setVehicleId} />}
      </main>
      <Footer setRoute={setRoute} />
      {t.showWhatsAppFab && <WhatsAppFab />}

      <TweaksPanel title="Alba · Tweaks">
        <TweakSection label="Theme" />
        <TweakRadio label="Mode" value={t.theme} options={['Light', 'Dark']} onChange={v => setTweak('theme', v)} />

        <TweakSection label="Brand accent" />
        <TweakColor label="Accent" value={t.accent}
          options={['#9E1B1B', '#B91C1C', '#6E1414', '#C8A35A', '#1E3A5F']}
          onChange={v => setTweak('accent', v)} />

        <TweakSection label="Home hero" />
        <TweakRadio label="Layout" value={t.heroVariant} options={['Split', 'Cinematic']} onChange={v => setTweak('heroVariant', v)} />

        <TweakSection label="Floating CTA" />
        <TweakToggle label="WhatsApp button" value={t.showWhatsAppFab} onChange={v => setTweak('showWhatsAppFab', v)} />
      </TweaksPanel>
    </div>
  );
}

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