// app.jsx — root, tweaks, router. Loaded last.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "accent": "#7C3AED",
  "fontPairing": "geist",
  "heroVariant": "centered",
  "density": "regular",
  "animationIntensity": 60
}/*EDITMODE-END*/;

const FONT_PAIRS = {
  geist:    { sans: "'Geist', 'Inter', system-ui, sans-serif", mono: "'Geist Mono', ui-monospace, monospace", display: "'Geist', 'Inter', system-ui, sans-serif" },
  editorial:{ sans: "'Inter Tight', system-ui, sans-serif",     mono: "'JetBrains Mono', ui-monospace, monospace", display: "'Instrument Serif', Georgia, serif" },
  techno:   { sans: "'Space Grotesk', system-ui, sans-serif",   mono: "'JetBrains Mono', ui-monospace, monospace", display: "'Space Grotesk', system-ui, sans-serif" },
};

const ACCENT_OPTIONS = ["#7C3AED", "#FF5B2E", "#0A66FF", "#16A34A", "#C8A24B", "#111111"];

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const route = useRoute();

  // Pause CSS animations when the tab is backgrounded — saves CPU + battery.
  useEffect(() => {
    const onVis = () => {
      document.documentElement.dataset.visibility = document.hidden ? "hidden" : "visible";
    };
    document.addEventListener("visibilitychange", onVis);
    onVis();
    return () => document.removeEventListener("visibilitychange", onVis);
  }, []);

  // SEO: update document.title per route for crawler clarity + share previews
  useEffect(() => {
    const titles = {
      home:         "Digital Jaao — AI-Powered Growth Systems For Modern Brands | Jaipur",
      services:     "Services — AI Agents, Automation, Paid Media & AI SEO | Digital Jaao",
      "case-studies":"Case Studies — Real systems. Real numbers. | Digital Jaao",
      case:         "Case Study | Digital Jaao",
      portfolio:    "Live Portfolio — Brands across 20 niches | Digital Jaao",
      testimonials: "Client Feedback — Founders on the record | Digital Jaao",
      blog:         "Field Notes — AI marketing & automation writing | Digital Jaao",
      about:        "About — India's AI-first growth company | Digital Jaao",
      book:         "Book a 1-on-1 consult | Digital Jaao",
      contact:      "Contact — hello@digitaljaao.com | Digital Jaao",
    };
    document.title = titles[route.path] || titles.home;
  }, [route.path, route.params[0]]);

  // Apply theme variables to :root
  useEffect(() => {
    const root = document.documentElement;
    root.dataset.theme = t.theme || "dark";
    root.style.setProperty("--accent", t.accent);
    const pair = FONT_PAIRS[t.fontPairing] || FONT_PAIRS.geist;
    root.style.setProperty("--font-sans", pair.sans);
    root.style.setProperty("--font-mono", pair.mono);
    root.style.setProperty("--font-display", pair.display);
    root.dataset.density = t.density;
    root.style.setProperty("--motion", String(t.animationIntensity / 60));
  }, [t.theme, t.accent, t.fontPairing, t.density, t.animationIntensity]);

  // Render current page
  const renderPage = () => {
    switch (route.path) {
      case "services":     return <ServicesPage />;
      case "service":      return <ServiceDetailPage id={route.params[0]} />;
      case "case-studies": return <CaseStudiesPage />;
      case "case":         return <CaseDetailPage id={route.params[0]} />;
      case "portfolio":    return <PortfolioPage />;
      case "testimonials": return <TestimonialsPage />;
      case "blog":         return <BlogPage />;
      case "about":        return <AboutPage />;
      case "book":         return <BookPage />;
      case "contact":      return <ContactPage />;
      case "home":
      default:             return <HomePage heroVariant={t.heroVariant} />;
    }
  };

  return (
    <React.Fragment>
      <Header route={route.path} />
      <PageFrame routeKey={route.path + (route.params[0] || "")}>
        {renderPage()}
      </PageFrame>
      <Footer />

      <TweaksPanel title="Tweaks · Digital Jaao">
        <TweakSection label="Theme" />
        <TweakRadio label="Mode" value={t.theme}
          options={[
            { value: "dark",  label: "Dark" },
            { value: "light", label: "Light" },
          ]}
          onChange={(v) => setTweak("theme", v)} />

        <TweakSection label="Brand color" />
        <TweakColor label="Accent" value={t.accent} options={ACCENT_OPTIONS}
          onChange={(v) => setTweak("accent", v)} />

        <TweakSection label="Typography" />
        <TweakRadio label="Font pairing" value={t.fontPairing}
          options={[
            { value: "geist",    label: "Geist" },
            { value: "editorial",label: "Editorial" },
            { value: "techno",   label: "Techno" },
          ]}
          onChange={(v) => setTweak("fontPairing", v)} />

        <TweakSection label="Layout" />
        <TweakRadio label="Hero" value={t.heroVariant}
          options={[
            { value: "centered", label: "Centered" },
            { value: "split",    label: "Split" },
            { value: "marquee",  label: "Marquee" },
          ]}
          onChange={(v) => setTweak("heroVariant", v)} />
        <TweakRadio label="Density" value={t.density}
          options={[
            { value: "compact", label: "Compact" },
            { value: "regular", label: "Regular" },
            { value: "comfy",   label: "Comfy" },
          ]}
          onChange={(v) => setTweak("density", v)} />

        <TweakSection label="Motion" />
        <TweakSlider label="Animation intensity" value={t.animationIntensity}
          min={0} max={100} step={5} unit="%"
          onChange={(v) => setTweak("animationIntensity", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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