// App — composes the marketing page. Mobile-first section order + tweaks.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primary":         "#5B1619",
  "accent":          "#C8A15A",
  "heroHeadline":    "Fort Wayne home cleaning, quoted in sixty seconds.",
  "heroSub":         "Move-out clean by Friday afternoon? A deep reset before guests? Tell us the job — you'll have a real price before we know your door code. Serving Fort Wayne and the surrounding areas.",
  "ctaLabel":        "Get a 60-second Quote",
  "showHeroReviews": true,
  "showCareers":     true,
  "showStickyCTA":   true
}/*EDITMODE-END*/;

function useTweaks(defaults) {
  const [value, setValue] = React.useState(defaults);
  return [value, setValue];
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [quoteOpen, setQuoteOpen] = React.useState(false);
  const openQuote = () => setQuoteOpen(true);
  const closeQuote = () => setQuoteOpen(false);

  // Apply primary + accent tweaks at the document root so every burgundy/gold
  // surface in the kit picks them up via the CSS custom properties.
  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--apex-burgundy", t.primary);
    root.style.setProperty("--apex-gold", t.accent);
    // Keep Tokens in sync for inline styles that read it directly.
    window.Tokens.burgundy = t.primary;
    window.Tokens.gold = t.accent;
  }, [t.primary, t.accent]);

  // Hide the non-JS fallback once App mounts.
  React.useEffect(() => {
    window.__apexBooted = true;
    const fallback = document.getElementById("apex-fallback");
    if (fallback) {
      fallback.style.display = "none";
    }
  }, []);

  return (
    <div id="top" style={{ background: window.Tokens.ivory, minHeight: "100vh" }}>
      <Navbar onQuote={openQuote} />
      <Hero
        onQuote={openQuote}
        headline={t.heroHeadline}
        sub={t.heroSub}
        ctaLabel={t.ctaLabel}
        showReviews={t.showHeroReviews}
      />
      <TrustStrip />
      <ServicePillars />
      <HowItWorks />
      <GoogleReviews />
      <AboutUs />
      {t.showCareers && <Careers />}
      <FAQ />
      <QuoteCTA onQuote={openQuote} ctaLabel={t.ctaLabel} />
      <Footer />
      {t.showStickyCTA && <StickyMobileCTA onQuote={openQuote} />}
      <QuoteModal open={quoteOpen} onClose={closeQuote} />
    </div>
  );
}

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