// ====== Ace Home Solutions — App root ======
const { useState: useSt, useEffect: useEf } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#b94100",
  "showTrustBar": true,
  "heroVariant": "Diagonal"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [quoteOpen, setQuoteOpen] = useSt(false);
  const [quoteSvc, setQuoteSvc] = useSt(null);
  const [mobileOpen, setMobileOpen] = useSt(false);
  const [lbOpen, setLbOpen] = useSt(false);
  const [lbIdx, setLbIdx] = useSt(0);
  const [lbItems, setLbItems] = useSt(PROJECTS);
  const [activeSection, setActiveSection] = useSt("home");

  // Apply accent color tweak live
  useEf(() => {
    document.documentElement.style.setProperty("--orange", t.accent);
    // darken slightly for hover
    document.documentElement.style.setProperty("--orange-2", t.accent);
  }, [t.accent]);

  // Apply hero variant
  useEf(() => {
    document.documentElement.dataset.heroVariant = t.heroVariant;
  }, [t.heroVariant]);

  // Toggle trust bar
  useEf(() => {
    document.documentElement.classList.toggle("hide-trust", !t.showTrustBar);
  }, [t.showTrustBar]);

  // Active nav section via IntersectionObserver
  useEf(() => {
    const ids = ["home", "services", "about", "gallery", "service-areas", "contact"];
    const els = ids.map(id => document.getElementById(id)).filter(Boolean);
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) setActiveSection(e.target.id);
      });
    }, { rootMargin: "-40% 0px -50% 0px" });
    els.forEach(el => obs.observe(el));
    return () => obs.disconnect();
  }, []);

  const openQuote = (svc) => {
    setQuoteSvc(typeof svc === "string" ? svc : null);
    setQuoteOpen(true);
  };

  const openLB = (items, idx) => {
    setLbItems(items);
    setLbIdx(idx);
    setLbOpen(true);
  };

  const onLearn = (svc) => {
    openQuote(svc.id);
  };

  return (
    <React.Fragment>
      <Header
        tweaks={t}
        onQuote={() => openQuote()}
        onMenu={() => setMobileOpen(true)}
        activeSection={activeSection}
      />
      <main>
        <Hero
          onQuote={() => openQuote()}
          onTileClick={(i) => openLB(HERO_TILES.map(x => ({tone: x.tone, label: x.label, img: x.img, w: x.w, h: x.h})), i)}
        />
        <Services onLearn={onLearn}/>
        <Why/>
        <Gallery onImage={(i) => openLB(PROJECTS, i)}/>
        <BottomBand/>
      </main>
      <Footer onQuote={() => openQuote()}/>

      <QuoteModal
        open={quoteOpen}
        onClose={() => setQuoteOpen(false)}
        defaultService={quoteSvc}
      />
      <Lightbox
        open={lbOpen}
        idx={lbIdx}
        items={lbItems}
        onClose={() => setLbOpen(false)}
        onPrev={() => setLbIdx((lbIdx - 1 + lbItems.length) % lbItems.length)}
        onNext={() => setLbIdx((lbIdx + 1) % lbItems.length)}
      />
      <MobileMenu
        open={mobileOpen}
        onClose={() => setMobileOpen(false)}
        onQuote={() => openQuote()}
      />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Brand">
          <TweakColor
            label="Accent color"
            value={t.accent}
            options={["#b94100", "#9d3700", "#D9482E", "#2EB67D", "#3B6FE0"]}
            onChange={v => setTweak("accent", v)}
          />
        </TweakSection>
        <TweakSection title="Hero">
          <TweakRadio
            label="Image layout"
            value={t.heroVariant}
            options={["Diagonal", "Straight"]}
            onChange={v => setTweak("heroVariant", v)}
          />
          <TweakToggle
            label="Show trust badges"
            value={t.showTrustBar}
            onChange={v => setTweak("showTrustBar", v)}
          />
        </TweakSection>
        <TweakSection title="Actions">
          <TweakButton onClick={() => openQuote()}>Open quote form</TweakButton>
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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