/* global React, ReactDOM, Header, Footer, HomePage, FeaturesPage, PricingPage, AboutPage, ContactPage,
   TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakToggle, TweakSelect */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headlineVariant": "outcome",
  "theme": "dark",
  "density": "spacious",
  "showStats": true,
  "showAttackChain": true
}/*EDITMODE-END*/;

const PAGES = {
  home: HomePage,
  features: FeaturesPage,
  pricing: PricingPage,
  about: AboutPage,
  contact: ContactPage
};

const PAGE_META = {
  home: { title: "Breach Monitor — Stop credential attacks before they start", desc: "Proactive breach monitoring built by offensive security professionals. Real-time alerts when your organization's credentials appear in breach repositories." },
  features: { title: "Features — Breach Monitor", desc: "Real-time alerts, extensive datawell coverage, monthly digests, and per-user remediation guidance — built by red teamers." },
  pricing: { title: "Pricing — Breach Monitor", desc: "Honest pricing for proactive breach monitoring. Plans from $39/mo. 14-day free trial. Cancel any time." },
  about: { title: "About — Breach Monitor", desc: "We're offensive security professionals who broke into companies for a living. Now we help you defend against the same attacks." },
  contact: { title: "Contact — Breach Monitor", desc: "Get in touch about Breach Monitor — sales, support, MSP partnerships, or security disclosures." }
};

const App = () => {
  const [route, setRoute] = useState(() => (location.hash || "#home").slice(1).split("/")[0] || "home");
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    const onHash = () => {
      const r = (location.hash || "#home").slice(1).split("/")[0] || "home";
      setRoute(PAGES[r] ? r : "home");
      window.scrollTo({ top: 0, behavior: "instant" });
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  useEffect(() => {
    document.documentElement.dataset.theme = tweaks.theme;
    document.documentElement.dataset.density = tweaks.density;
    const meta = PAGE_META[route] || PAGE_META.home;
    document.title = meta.title;
    let m = document.querySelector('meta[name="description"]');
    if (!m) { m = document.createElement("meta"); m.setAttribute("name", "description"); document.head.appendChild(m); }
    m.setAttribute("content", meta.desc);
  }, [route, tweaks.theme, tweaks.density]);

  const navigate = (to) => {
    location.hash = to;
    setRoute(to);
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  const Page = PAGES[route] || HomePage;

  return (
    <>
      <Header route={route} navigate={navigate} />
      <Page navigate={navigate} headlineVariant={tweaks.headlineVariant} />
      <Footer navigate={navigate} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Hero">
          <TweakRadio
            label="Headline angle"
            value={tweaks.headlineVariant}
            onChange={(v) => setTweak("headlineVariant", v)}
            options={[
              { value: "outcome", label: "Outcome" },
              { value: "insider", label: "Insider" },
              { value: "threat", label: "Threat" },
              { value: "keep", label: "Original" }
            ]}
          />
        </TweakSection>
        <TweakSection title="Appearance">
          <TweakRadio
            label="Theme"
            value={tweaks.theme}
            onChange={(v) => setTweak("theme", v)}
            options={[
              { value: "dark", label: "Dark" },
              { value: "light", label: "Light" }
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

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