// Main app

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "headlineVariant": "barrage",
  "accent": "#C66A3D",
  "density": "spacious",
  "autoRotate": true
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(DEFAULTS);
  const [route, setRoute] = React.useState(readRoute);

  React.useEffect(() => {
    const onHashChange = () => setRoute(readRoute());
    window.addEventListener("hashchange", onHashChange);
    return () => window.removeEventListener("hashchange", onHashChange);
  }, []);

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

  React.useEffect(() => {
    document.documentElement.style.setProperty(
      "--pad",
      tweaks.density === "tight" ? "clamp(16px,3vw,32px)" : "clamp(20px,4vw,56px)"
    );
  }, [tweaks.density]);

  React.useEffect(() => {
    const page = route.page ? CONTENT_PAGES[route.page] : null;
    document.title = page
      ? `${page.navTitle} - Barrage`
      : "Barrage — Websites for local businesses";
  }, [route.page]);

  React.useEffect(() => {
    if (route.page || route.anchor === "top") {
      window.scrollTo({ top: 0, behavior: "smooth" });
      return;
    }

    window.requestAnimationFrame(() => {
      const target = document.getElementById(route.anchor);
      if (target) target.scrollIntoView({ behavior: "smooth", block: "start" });
    });
  }, [route.page, route.anchor]);

  const activePage = route.page ? CONTENT_PAGES[route.page] : null;

  return (
    <>
      <Nav />

      {activePage ? (
        <ContentPage page={activePage} />
      ) : (
        <HomePage tweaks={tweaks} />
      )}

      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Brand">
          <TweakColor
            label="Accent"
            value={tweaks.accent}
            onChange={(v) => setTweak("accent", v)}
            options={["#C66A3D", "#4A6B58", "#6B2737", "#2C3A33", "#3A6B8A"]}
          />
        </TweakSection>

        <TweakSection label="Hero">
          <TweakSelect
            label="Headline"
            value={tweaks.headlineVariant}
            onChange={(v) => setTweak("headlineVariant", v)}
            options={[
              { value: "barrage",    label: "Brand & web, delivered relentlessly" },
              { value: "neighbors",  label: "Bring more neighbors through your door" },
              { value: "relentless", label: "Websites that work as hard as you do" },
            ]}
          />
          <TweakToggle
            label="Auto-rotate showcase"
            value={tweaks.autoRotate}
            onChange={(v) => setTweak("autoRotate", v)}
          />
        </TweakSection>

        <TweakSection label="Layout">
          <TweakRadio
            label="Density"
            value={tweaks.density}
            onChange={(v) => setTweak("density", v)}
            options={[
              { value: "spacious", label: "Spacious" },
              { value: "tight",    label: "Tight" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

function readRoute() {
  const slug = window.location.hash.replace(/^#\/?/, "") || "top";
  if (CONTENT_PAGES[slug]) return { page: slug, anchor: "top" };
  return { page: null, anchor: slug };
}

function HomePage({ tweaks }) {
  return (
    <>
      <Hero tweaks={tweaks} />
      <Marquee />
      <FeatureRow />
      <Logos />
      <Bento />
      <Packages />
      <Capabilities />
      <Testimonial />
      <Pricing />
      <FAQ />
      <CTA />
    </>
  );
}

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