// App.jsx — composition + Tweaks panel
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "glow": 1,
  "rhythm": "alternating",
  "mobShowcase": "stack",
  "mobPricing": "stack"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [estimate, setEstimate] = useState(null);

  useEffect(() => {
    document.documentElement.style.setProperty("--glow-mult", t.glow);
  }, [t.glow]);
  useEffect(() => {
    document.body.classList.toggle("rhythm-flat", t.rhythm === "flat");
  }, [t.rhythm]);
  // mobile showcase layout variation (CSS reads the body class at ≤760px)
  useEffect(() => {
    const b = document.body;
    b.classList.toggle("mob-sw-swipe", t.mobShowcase === "swipe");
    b.classList.toggle("mob-sw-compact", t.mobShowcase === "compact");
  }, [t.mobShowcase]);
  // mobile pricing layout variation
  useEffect(() => {
    const b = document.body;
    b.classList.toggle("mob-pr-swipe", t.mobPricing === "swipe");
    b.classList.toggle("mob-pr-compact", t.mobPricing === "compact");
  }, [t.mobPricing]);

  // safety net: only force-reveal blocks that are already in (or above) the
  // first viewport, so below-fold sections still wait for their own scroll
  // observer (useReveal) and play their entrance only once the user sees them.
  useEffect(() => {
    const id = setTimeout(() => {
      const vh = window.innerHeight || 0;
      document.querySelectorAll(".reveal:not(.in)").forEach((el) => {
        if (el.getBoundingClientRect().top < vh * 0.9) el.classList.add("in");
      });
    }, 1800);
    return () => clearTimeout(id);
  }, []);

  // cursor-following light on primary/secondary buttons (delegated)
  useEffect(() => {
    const onMove = (e) => {
      const btn = e.target.closest(".btn-primary, .btn-secondary");
      if (btn) {
        const r = btn.getBoundingClientRect();
        btn.style.setProperty("--mx", `${((e.clientX - r.left) / r.width) * 100}%`);
        btn.style.setProperty("--my", `${((e.clientY - r.top) / r.height) * 100}%`);
      }
      const card = e.target.closest(".tsx-card, .worker-card, .pay-card--year");
      if (card) {
        const r = card.getBoundingClientRect();
        card.style.setProperty("--hx", `${((e.clientX - r.left) / r.width) * 100}%`);
        card.style.setProperty("--hy", `${((e.clientY - r.top) / r.height) * 100}%`);
      }
    };
    document.addEventListener("pointermove", onMove);
    return () => document.removeEventListener("pointermove", onMove);
  }, []);

  // Primary site CTAs open Beacon directly. Pricing card CTAs keep their own
  // estimate handoff behavior in Pricing.jsx.
  useEffect(() => {
    const onClick = (e) => {
      const a = e.target.closest('a[href="#cta"], a[href="#request"]');
      if (!a) return;

      const isPrimarySiteCta = a.matches(".btn-primary, .worker-card__toggle");
      if (!isPrimarySiteCta) return;

      e.preventDefault();
      window.dispatchEvent(new CustomEvent("siteworks:open-beacon"));
      if (window.__beaconOpen) window.__beaconOpen();
    };
    document.addEventListener("click", onClick);
    return () => document.removeEventListener("click", onClick);
  }, []);

  return (
    <BeaconChatProvider estimate={estimate}>
      <Nav />
      <Hero />
      <TrustStrip />
      <WorkSection />
      <ConvertSection />
      <Managed />
      <Showcase />
      <WorkerCards />
      <Process />
      <Testimonials />
      <Pricing onSelect={setEstimate} />
      <Founder />
      <FAQ />
      <SolChat />
      <Footer />

      <BeaconLauncher />
      <BeaconFullscreen />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Light & glow" />
        <TweakSlider label="Solar glow intensity" value={t.glow} min={0.4} max={1.6} step={0.1}
          onChange={(v) => setTweak("glow", v)} />
        <TweakSection label="Layout" />
        <TweakRadio label="Section rhythm" value={t.rhythm} options={["alternating", "flat"]}
          onChange={(v) => setTweak("rhythm", v)} />
        <TweakSection label="Mobile layout" />
        <TweakRadio label="Showcase (on phones)" value={t.mobShowcase} options={["stack", "swipe", "compact"]}
          onChange={(v) => setTweak("mobShowcase", v)} />
        <TweakRadio label="Pricing (on phones)" value={t.mobPricing} options={["stack", "swipe", "compact"]}
          onChange={(v) => setTweak("mobPricing", v)} />
      </TweaksPanel>
    </BeaconChatProvider>
  );
}

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