/* app.jsx — root, tweaks, mounting */
const { Nav, Hero, TrustStrip, Services, HowItWorks,
        Testimonials, ServiceArea, Guarantee, FAQ, ContactSection, Footer, useReveal } = window;

const ACCENTS = {
  "#016FEF": { d: "#0156C4", t: "#E2EDFD" },   // brand blue (default)
  "#0A84FF": { d: "#0067D6", t: "#E4EFFF" },   // bright sky
  "#0047C4": { d: "#00379B", t: "#DEE6FB" },   // deep azure
  "#101922": { d: "#000000", t: "#E7E9EC" },   // charcoal
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroStyle": "B",
  "accent": "#016FEF",
  "headline": "Moving out? We haul the junk and leave it spotless.",
  "subhead": "Fast, eco-friendly junk removal plus a white-glove deep clean — in one visit. Hand over a property that's empty, gleaming, and inspection-ready.",
  "headlineBig": "Empty it. Clean it. Done in a day.",
  "ctaPrimary": "Get a free quote",
  "ctaSecondary": "Call now"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  useReveal();

  /* apply accent to CSS vars */
  React.useEffect(() => {
    const a = ACCENTS[t.accent] || ACCENTS["#016FEF"];
    const r = document.documentElement.style;
    r.setProperty("--accent", t.accent);
    r.setProperty("--accent-700", a.d);
    r.setProperty("--accent-tint", a.t);
    r.setProperty("--shadow-accent", `0 14px 30px -10px ${t.accent}73`);
  }, [t.accent]);

  /* Analytics: delegated tracking for phone / email / whatsapp links anywhere on the page */
  React.useEffect(() => {
    const onClick = (e) => {
      const a = e.target.closest && e.target.closest("a[href]");
      if (!a) return;
      const href = a.getAttribute("href") || "";
      if (href.startsWith("tel:")) window.track && window.track("contact_call", { location: "link" });
      else if (href.startsWith("mailto:")) window.track && window.track("contact_email", { location: "link" });
      else if (href.includes("wa.me")) window.track && window.track("contact_whatsapp", { location: "link" });
      else if (href.startsWith("sms:")) window.track && window.track("contact_sms", { location: "link" });
    };
    document.addEventListener("click", onClick);
    return () => document.removeEventListener("click", onClick);
  }, []);

  const onQuote = React.useCallback(() => {
    const el = document.getElementById("contact");
    if (!el) return;
    const y = el.getBoundingClientRect().top + window.scrollY - 8;
    window.scrollTo({ top: y, behavior: "smooth" });
    setTimeout(() => {
      const inp = document.getElementById("f-name");
      if (inp) inp.focus({ preventScroll: true });
    }, 650);
  }, []);

  return (
    <React.Fragment>
      <Nav onQuote={onQuote} heroDark={t.heroStyle === "B"} />
      <main>
        <Hero t={t} onQuote={onQuote} />
        <TrustStrip />
        <Services onQuote={onQuote} />
        <HowItWorks />
        <Testimonials />
        <ServiceArea onQuote={onQuote} />
        <Guarantee />
        <FAQ />
        <ContactSection />
        <Footer onQuote={onQuote} />
      </main>

      <window.TweaksPanel>
        <window.TweakSection label="Hero" />
        <window.TweakText label="Headline" value={t.headline}
          onChange={(v) => setTweak("headline", v)} />
        <window.TweakText label="Subheadline" value={t.subhead} onChange={(v) => setTweak("subhead", v)} />

        <window.TweakSection label="Calls to action" />
        <window.TweakText label="Primary button" value={t.ctaPrimary} onChange={(v) => setTweak("ctaPrimary", v)} />
        <window.TweakText label="Secondary button" value={t.ctaSecondary} onChange={(v) => setTweak("ctaSecondary", v)} />

        <window.TweakSection label="Brand accent" />
        <window.TweakColor label="Accent" value={t.accent}
          options={Object.keys(ACCENTS)}
          onChange={(v) => setTweak("accent", v)} />
      </window.TweaksPanel>
    </React.Fragment>
  );
}

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