// ========================================
// PRISM SALES — App root + tweaks wiring
// ========================================

const { useState, useEffect } = React;

const ROUTE_META = {
  home:           { title: "Prism Sales Corporation · Certified Electrical Materials Distributor, Ahmedabad", desc: "Authorized distributor of Schneider Electric, Polycab, C&S Electric and RR Cables. ISI-certified wires, MCBs, conduit pipes, switchgear and fans. Ahmedabad, Gujarat." },
  catalog:        { title: "Product Catalog · Prism Sales Corporation", desc: "Browse ISI-certified wires, MCBs, conduit pipes, switchgear, cable trays, fans and accessories from Prism Sales Corporation, Ahmedabad." },
  product:        { title: "Product Details · Prism Sales Corporation", desc: "Detailed specifications and pricing for certified electrical materials from Prism Sales Corporation." },
  about:          { title: "About Us · Prism Sales Corporation", desc: "Established 2020 in Ahmedabad. Prism Sales Corporation delivers quality, reliability and timely supply of certified electrical materials across Gujarat." },
  group:          { title: "Group Companies · Prism Sales Corporation", desc: "Learn about the Prism Sales group of companies and our network of electrical distribution partners in Gujarat." },
  contact:        { title: "Contact Us · Prism Sales Corporation", desc: "Get in touch with Prism Sales Corporation. Call +91 98256 16352, email info@prismsalescorp.com or visit us in Ahmedabad. Open Mon–Sat 10:30–18:30." },
  certifications: { title: "Certifications · Prism Sales Corporation", desc: "Prism Sales Corporation holds authorizations from Schneider Electric, Polycab, C&S Electric and RR Kabel, plus MSME registration and company certificates." },
  careers:        { title: "Careers · Prism Sales Corporation", desc: "Join Prism Sales Corporation. Explore career opportunities at a fast-growing certified electrical materials distributor in Ahmedabad, Gujarat." },
};

function setRouteMeta(route) {
  const m = ROUTE_META[route] || ROUTE_META.home;
  document.title = m.title;
  let el = document.querySelector('meta[name="description"]');
  if (el) el.setAttribute("content", m.desc);
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "orange",
  "heroVariant": "scroll"
}/*EDITMODE-END*/;

function App() {
  const [route, setRoute] = useState("home");
  const [selectedProduct, setSelectedProduct] = useState(window.PRODUCTS[0]);
  const [tweaks, setTweak] = window.useTweaks
    ? window.useTweaks(TWEAK_DEFAULTS)
    : [TWEAK_DEFAULTS, () => {}];

  // Apply theme + accent
  useEffect(() => {
    document.documentElement.setAttribute("data-theme", tweaks.theme || "light");
    const map = {
      orange: "var(--accent-orange)",
      violet: "var(--accent-violet)",
      lime:   "var(--accent-lime)",
      amber:  "var(--accent-amber)",
      red:    "var(--accent-red)",
    };
    document.documentElement.style.setProperty("--accent", map[tweaks.accent] || map.orange);
  }, [tweaks.theme, tweaks.accent]);

  useEffect(() => {
    window.scrollTo({ top: 0, behavior: "instant" });
    setRouteMeta(route);
  }, [route]);

  return (
    <>
      <Nav route={route} setRoute={setRoute} theme={tweaks.theme} setTheme={(v) => setTweak('theme', v)} />
      <main>
        {route === "home"    && <HomePage    setRoute={setRoute} setSelectedProduct={setSelectedProduct} heroVariant={tweaks.heroVariant} />}
        {route === "catalog" && <CatalogPage setRoute={setRoute} setSelectedProduct={setSelectedProduct} />}
        {route === "product" && <ProductPage product={selectedProduct} setRoute={setRoute} setSelectedProduct={setSelectedProduct} />}
        {route === "about"   && <AboutPage   setRoute={setRoute} />}
        {route === "group"   && <GroupPage   setRoute={setRoute} />}
        {route === "contact"       && <ContactPage       setRoute={setRoute} />}
        {route === "certifications" && <CertificationsPage setRoute={setRoute} />}
        {route === "careers"        && <CareersPage        setRoute={setRoute} />}
      </main>
      <Footer setRoute={setRoute} />

      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection label="Theme" />
          <window.TweakRadio
            label="Mode"
            value={tweaks.theme}
            onChange={v => setTweak('theme', v)}
            options={["light", "dark"]} />

          <window.TweakSection label="Home Hero" />
          <window.TweakRadio
            label="Variant"
            value={tweaks.heroVariant}
            onChange={v => setTweak('heroVariant', v)}
            options={["scroll", "ledger", "headline", "grid", "datasheet"]} />

          <window.TweakSection label="Accent" />
          <window.TweakRadio
            label="Hue"
            value={tweaks.accent}
            onChange={v => setTweak('accent', v)}
            options={["orange", "red", "amber", "lime", "violet"]} />
        </window.TweaksPanel>
      )}
    </>
  );
}

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