// Brown Ocean — App shell, router, tweaks

const { useState: uS, useEffect: uE } = React;

const PAGE_META = {
  home:     { title: "Brown Ocean Exports — Premium Makhana (Fox Nut) from Bihar, India",
              desc:  "Brown Ocean Exports by Ascendance Agro Pvt Ltd — premium single-origin makhana from Bihar's Purnia and Katihar wetlands. FSSAI · APEDA · ZED · RCMC certified. B2B exporter to 12+ countries.",
              path:  "/" },
  products: { title: "Products — Eleven Flavours, Two Formats | Brown Ocean Exports",
              desc:  "Explore raw bulk makhana and roasted flavoured fox nut. 11 variants including Himalayan Salt, Masala, Black Pepper and more. APEDA certified export quality.",
              path:  "/products" },
  process:  { title: "Our Process — Pond to Port | Brown Ocean Exports",
              desc:  "From Purnia and Katihar wetland sourcing to nitrogen-flushed export packaging. See how Brown Ocean Exports ensures export-grade makhana quality at every step.",
              path:  "/process" },
  exports:  { title: "Export Markets — 12 Countries | Brown Ocean Exports",
              desc:  "Brown Ocean Exports supplies premium makhana to buyers in the USA, UK, UAE, Canada, Australia and 7 more markets. RCMC certified B2B exporter.",
              path:  "/exports" },
  contact:  { title: "Request an Export Quote | Brown Ocean Exports",
              desc:  "Get bulk makhana pricing, samples and B2B supply agreements. Contact Brown Ocean Exports at +91 91364 79617 or vishal@ascendanceagro.com.",
              path:  "/contact" }
};

function applyMeta(id) {
  const meta = PAGE_META[id] || PAGE_META.home;
  const base = "https://brownoceanexports.com";
  document.title = meta.title;
  document.querySelector('meta[name="description"]').setAttribute("content", meta.desc);
  document.getElementById("canonical").setAttribute("href", base + meta.path);
  document.querySelector('meta[property="og:url"]').setAttribute("content", base + meta.path);
  document.querySelector('meta[property="og:title"]').setAttribute("content", meta.title);
  document.querySelector('meta[property="og:description"]').setAttribute("content", meta.desc);
  if (window.gtag) {
    window.gtag("event", "page_view", {
      page_title: meta.title,
      page_location: base + meta.path
    });
  }
}

const ROUTES = {
  home: HomePage,
  products: ProductsPage,
  process: ProcessPage,
  exports: ExportsPage,
  contact: ContactPage
};

function App() {
  const [route, setRoute] = uS(() => {
    const h = window.location.pathname.slice(1);
    return ROUTES[h] ? h : "home";
  });
  const [quoteOpen, setQuoteOpen] = uS(false);
  const [quoteProduct, setQuoteProduct] = uS("");

  const tweakDefaults = window.__BO_TWEAKS;
  const [tweaks, setTweak] = useTweaks(tweakDefaults);

  uE(() => {
    const onPop = () => {
      const h = window.location.pathname.slice(1) || "home";
      if (ROUTES[h]) setRoute(h);
    };
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);

  uE(() => {
    const onClick = (e) => {
      const a = e.target.closest("a[href]");
      if (!a) return;
      const path = a.getAttribute("href").replace(/^\//, "") || "home";
      if (ROUTES[path]) { e.preventDefault(); navigate(path); }
    };
    document.addEventListener("click", onClick);
    return () => document.removeEventListener("click", onClick);
  }, []);

  uE(() => {
    document.documentElement.dataset.theme = tweaks.colorTheme;
    document.documentElement.dataset.type = tweaks.typePairing;
  }, [tweaks.colorTheme, tweaks.typePairing]);

  uE(() => { applyMeta(route); }, []);

  const navigate = (id) => {
    setRoute(id);
    history.pushState({}, "", id === "home" ? "/" : `/${id}`);
    window.scrollTo({ top: 0, behavior: "instant" });
    applyMeta(id);
  };

  const openQuote = (productId) => {
    const pid = typeof productId === "string" ? productId : "general";
    setQuoteProduct(pid === "general" ? "" : pid);
    setQuoteOpen(true);
    if (window.gtag) window.gtag("event", "quote_request", { product_id: pid });
  };

  const Page = ROUTES[route] || HomePage;

  return (
    <>
      <Header route={route} onNavigate={navigate} onQuote={openQuote} />
      <Page tweaks={tweaks} onQuote={openQuote} />
      <Footer onNavigate={navigate} onQuote={openQuote} />
      <QuoteModal open={quoteOpen} onClose={() => setQuoteOpen(false)} initialProduct={quoteProduct} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero">
          <TweakRadio
            label="Variant"
            value={tweaks.heroVariant}
            options={[
              { value: "editorial", label: "Editorial" },
              { value: "cinematic", label: "Cinematic" },
              { value: "product", label: "Product-led" }
            ]}
            onChange={(v) => setTweak("heroVariant", v)}
          />
        </TweakSection>
        <TweakSection label="Type">
          <TweakRadio
            label="Display pairing"
            value={tweaks.typePairing}
            options={[
              { value: "serif", label: "Serif (Fraunces)" },
              { value: "sans", label: "Sans (Archivo)" }
            ]}
            onChange={(v) => setTweak("typePairing", v)}
          />
        </TweakSection>
        <TweakSection label="Color">
          <TweakRadio
            label="Theme"
            value={tweaks.colorTheme}
            options={[
              { value: "warm", label: "Warm (default)" },
              { value: "cool", label: "Cool sand" },
              { value: "contrast", label: "High-contrast dark" }
            ]}
            onChange={(v) => setTweak("colorTheme", v)}
          />
        </TweakSection>
        <TweakSection label="Decoration">
          <TweakToggle
            label="Floating leaves"
            value={tweaks.showLeaves}
            onChange={(v) => setTweak("showLeaves", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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