/* ─── Hoopoetech App root ─────────────────────────────────────── */

function App() {
  const [tweaks, setTweak] = useTweaks(window.HOOPOE_TWEAKS);
  const [quoteOpen, setQuoteOpen] = React.useState(false);
  const [initialService, setInitialService] = React.useState(null);

  // Apply accent live
  React.useEffect(() => {
    document.documentElement.style.setProperty('--accent', tweaks.accent);
  }, [tweaks.accent]);

  const openQuote = (serviceId) => {
    setInitialService(typeof serviceId === 'string' ? serviceId : null);
    setQuoteOpen(true);
  };

  return (
    <>
      <Nav onQuote={openQuote}/>
      <Hero
        onQuote={openQuote}
        headline={tweaks.heroHeadline}
        showMarquee={tweaks.showMarquee}
      />
      <About onQuote={openQuote}/>
      <Services onQuote={openQuote}/>
      <Gallery/>
      <Products onQuote={openQuote}/>
      <DesignSupport/>
      <WhyChooseUs/>
      <CaseStudies count={4}/>
      <Clients/>
      <FAQs/>
      <Contact onQuote={openQuote}/>
      <FinalCTA onQuote={openQuote}/>
      <Footer/>
      <WhatsAppButton/>

      <QuoteModal
        open={quoteOpen}
        onClose={() => setQuoteOpen(false)}
        initialService={initialService}
      />

      <TweaksPanel title="Tweaks · Hoopoetech">
        <TweakSection label="Brand">
          <TweakColor
            label="Accent color"
            value={tweaks.accent}
            options={['#FFE135', '#FAD201', '#F4D03F', '#FFD700', '#F0C808']}
            onChange={(v) => setTweak('accent', v)}
          />
        </TweakSection>

        <TweakSection label="Hero">
          <TweakToggle
            label="Show services marquee"
            value={tweaks.showMarquee}
            onChange={(v) => setTweak('showMarquee', v)}
          />
        </TweakSection>

        <TweakSection label="Actions">
          <TweakButton label="Open Quote Wizard" onClick={() => openQuote()}/>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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