// Root app — router switch, Tweaks panel wiring

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "ribbon"
}/*EDITMODE-END*/;

function App() {
  const route = useRoute();
  const [contactOpen, setContactOpen] = React.useState(false);
  const [contactDefaultService, setContactDefaultService] = React.useState('');
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  const openContact = (svc = '') => {
    setContactDefaultService(svc);
    setContactOpen(true);
  };
  const closeContact = () => setContactOpen(false);

  let page;
  switch (route.path) {
    case '/':                       page = <HomePage heroVariant={tweaks.heroVariant} onContact={() => openContact()} />; break;
    case '/services':               page = <ServicesPage onContact={() => openContact()} />; break;
    case '/services/networking':    page = <NetworkingPage onContact={() => openContact('networking')} />; break;
    case '/services/cameras':       page = <CamerasPage onContact={() => openContact('cameras')} />; break;
    case '/services/websites':      page = <WebsitesPage onContact={() => openContact('websites')} />; break;
    case '/services/email':         page = <EmailPage onContact={() => openContact('email')} />; break;
    case '/about':                  page = <AboutPage onContact={() => openContact()} />; break;
    case '/portfolio':              page = <PortfolioPage onContact={() => openContact()} />; break;
    case '/faq':                    page = <FAQPage onContact={() => openContact()} />; break;
    case '/contact':                page = <ContactPage defaultService={route.query.service || ''} />; break;
    default:                        page = <NotFoundPage />;
  }

  return (
    <div className="app-root">
      <Header onContact={() => openContact()} />
      {page}
      <Footer onContact={() => openContact()} />
      <ContactModal open={contactOpen} onClose={closeContact} defaultService={contactDefaultService} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero">
          <TweakSelect
            label="Hero visual"
            value={tweaks.heroVariant}
            onChange={(v) => setTweak('heroVariant', v)}
            options={[
              {value:'ribbon',  label:'Animated aurora ribbon'},
              {value:'minimal', label:'Minimal · gradient + stars'},
              {value:'photo',   label:'Photo placeholder · cinematic'},
            ]}
          />
        </TweakSection>
        <TweakSection label="Jump to page">
          <TweakButton label="Home"           onClick={() => navigate('/')} />
          <TweakButton label="All services"   onClick={() => navigate('/services')} />
          <TweakButton label="Networking"     onClick={() => navigate('/services/networking')} />
          <TweakButton label="Cameras"        onClick={() => navigate('/services/cameras')} />
          <TweakButton label="Websites"       onClick={() => navigate('/services/websites')} />
          <TweakButton label="Email & IT"     onClick={() => navigate('/services/email')} />
          <TweakButton label="About"          onClick={() => navigate('/about')} />
          <TweakButton label="Portfolio"      onClick={() => navigate('/portfolio')} />
          <TweakButton label="FAQ"            onClick={() => navigate('/faq')} />
          <TweakButton label="Contact"        onClick={() => navigate('/contact')} />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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