// ========================================
// PRISM SALES — Shared UI components
// ========================================

const { useState, useEffect, useRef, useMemo } = React;

// ---------- NAV ----------
function Nav({ route, setRoute, theme, setTheme }) {
  const [menuOpen, setMenuOpen] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Close mobile menu on route change
  useEffect(() => { setMobileOpen(false); }, [route]);

  const nav = [
    { id: "home",           label: "Home" },
    { id: "catalog",        label: "Catalog" },
    { id: "about",          label: "About" },
    { id: "group",          label: "Group" },
    { id: "certifications", label: "Certifications" },
    { id: "careers",        label: "Careers" },
    { id: "contact",        label: "Contact" },
  ];

  return (
    <>
      <div className="nav-bar-sticky" style={{
        position: "sticky", top: 0, zIndex: 40,
        background: scrolled ? "color-mix(in oklch, var(--bg) 82%, transparent)" : "transparent",
        backdropFilter: scrolled ? "blur(20px) saturate(1.2)" : "none",
        borderBottom: scrolled ? "1px solid var(--border)" : "1px solid transparent",
        transition: "all 0.3s ease",
      }}>
        <div className="container" style={{
          display: "flex", alignItems: "center", justifyContent: "space-between",
          padding: "18px 48px",
        }}>
          {/* Logo */}
          <div style={{ display:"flex", alignItems:"center", gap:14, cursor:"pointer" }}
            onClick={() => setRoute("home")}>
            <span className="logo-mark" style={{ width:54, height:54 }} />
            <div className="nav-logo-text">
              <div style={{ fontFamily:"Cambria, Georgia, serif", fontSize:22, fontWeight:700, letterSpacing:"0.04em", lineHeight:1, color:"var(--ink)", textTransform:"uppercase", whiteSpace:"nowrap" }}>
                Prism Sales Corporation<sup style={{ fontSize:11, marginLeft:2, fontFamily:"sans-serif", fontWeight:400 }}>®</sup>
              </div>
              <div className="mono" style={{ fontSize:9, color:"var(--ink-soft)", letterSpacing:"0.18em", marginTop:4 }}>
                <span style={{ fontStyle:"italic", letterSpacing:"0.04em", fontWeight:800, fontSize:9, textTransform:"none" }}>Powering Trust, Delivering Quality.</span>
              </div>
            </div>
          </div>

          {/* Desktop nav */}
          <div className="nav-links">
            {nav.map(n => (
              <button key={n.id} onClick={() => setRoute(n.id)} className="mono"
                style={{ padding:"10px 16px", fontSize:13, fontWeight:800, color: route===n.id ? "var(--ink)" : "var(--ink-dim)", position:"relative" }}>
                {route===n.id && <span style={{ position:"absolute", left:16, right:16, bottom:4, height:1, background:"var(--accent)" }} />}
                {n.label}
              </button>
            ))}
            <div style={{ width:1, height:18, background:"var(--border-strong)", margin:"0 12px" }} />
            <button onClick={() => setTheme && setTheme(theme==="dark" ? "light" : "dark")}
              style={{ width:32, height:32, display:"grid", placeItems:"center", border:"1px solid var(--border-strong)", borderRadius:999, cursor:"pointer", color:"var(--ink-dim)", marginRight:8, transition:"all 0.2s" }}
              onMouseEnter={e => { e.currentTarget.style.borderColor="var(--ink)"; e.currentTarget.style.color="var(--ink)"; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor="var(--border-strong)"; e.currentTarget.style.color="var(--ink-dim)"; }}>
              <span style={{ fontSize:13, lineHeight:1 }}>{theme==="dark" ? "☼" : "☾"}</span>
            </button>
            <button className="mono" style={{ padding:"10px 16px", fontSize:11, color:"var(--ink-dim)" }}
              onClick={() => setMenuOpen(!menuOpen)}>⌘ Index</button>
            <button className="btn btn-primary" onClick={() => setRoute("contact")}>
              Request Quote <span>→</span>
            </button>
          </div>

          {/* Mobile: theme toggle + hamburger */}
          <div className="nav-burger">
            <button onClick={() => setTheme && setTheme(theme==="dark" ? "light" : "dark")}
              style={{ width:36, height:36, display:"grid", placeItems:"center", border:"1px solid var(--border-strong)", borderRadius:999, cursor:"pointer", color:"var(--ink-dim)", background:"none" }}>
              <span style={{ fontSize:14 }}>{theme==="dark" ? "☼" : "☾"}</span>
            </button>
            <button onClick={() => setMobileOpen(true)}
              style={{ display:"flex", flexDirection:"column", gap:5, background:"none", border:"none", cursor:"pointer", padding:4 }}>
              <span style={{ display:"block", width:24, height:2, background:"var(--ink)", borderRadius:2 }} />
              <span style={{ display:"block", width:24, height:2, background:"var(--ink)", borderRadius:2 }} />
              <span style={{ display:"block", width:16, height:2, background:"var(--ink)", borderRadius:2 }} />
            </button>
          </div>
        </div>
      </div>

      {/* Mobile full-screen nav */}
      <div className={`mob-nav${mobileOpen ? " open" : ""}`}>
        <button className="mob-nav-close" onClick={() => setMobileOpen(false)}>✕ Close</button>
        <div className="mono" style={{ fontSize:9, color:"var(--ink-soft)", letterSpacing:"0.2em", marginBottom:24 }}>
          PRISM SALES · NAVIGATION
        </div>
        {nav.map(n => (
          <button key={n.id} className="mob-nav-item" onClick={() => { setRoute(n.id); setMobileOpen(false); }}>
            {n.label}
            <span style={{ fontSize:"0.5em", color:"var(--accent)" }}>→</span>
          </button>
        ))}
        <div style={{ marginTop:"auto", paddingTop:32, borderTop:"1px solid var(--border)" }}>
          <button className="btn btn-primary" style={{ width:"100%", justifyContent:"center", padding:"16px" }}
            onClick={() => { setRoute("contact"); setMobileOpen(false); }}>
            Request Quote →
          </button>
          <div className="mono" style={{ fontSize:9, color:"var(--ink-soft)", marginTop:20, lineHeight:1.8 }}>
            +91 98256 16352<br/>
            +91 99787 76113<br/>
            +91 74054 84881<br/>
            info@prismsalescorp.com<br/>
            Mon–Sat · 10:30–18:30
          </div>
        </div>
      </div>

      {menuOpen && <MegaMenu close={() => setMenuOpen(false)} setRoute={setRoute} />}
    </>
  );
}

// ---------- MEGA MENU ----------
function MegaMenu({ close, setRoute }) {
  return (
    <div style={{
      position: "fixed", inset: 0, zIndex: 50,
      background: "color-mix(in oklch, var(--bg) 92%, transparent)",
      backdropFilter: "blur(28px)",
      animation: "fadeUp 0.35s"
    }} onClick={close}>
      <div className="mm-inner" style={{
        maxWidth: 1440, margin: "0 auto", padding: "120px 48px 48px"
      }} onClick={(e) => e.stopPropagation()}>
        <div className="mm-grid" style={{ display: "grid", gridTemplateColumns: "1fr 2fr 1fr", gap: 60 }}>
          <div className="mm-desc">
            <div className="eyebrow" style={{ marginBottom: 20 }}>Index · 00</div>
            <div style={{ fontFamily: "var(--f-display)", fontSize: 48, lineHeight: 0.95, letterSpacing: "-0.02em" }}>
              Various product<br />categories.<br />
              <span style={{ fontStyle: "italic", color: "var(--accent)" }}>One catalog.</span>
            </div>
          </div>

          <div className="mm-cats" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "2px 32px" }}>
            {window.CATEGORIES.map((c, i) =>
            <button key={c.id} className="mm-row"
            onClick={() => {setRoute("catalog");close();}}
            style={{
              display: "grid", gridTemplateColumns: "40px 1fr auto auto", gap: 20, alignItems: "center",
              padding: "18px 0", borderTop: "1px solid var(--border)",
              textAlign: "left", cursor: "pointer"
            }}>
                <span className="mono" style={{ color: "var(--ink-soft)" }}>{String(i + 1).padStart(2, "0")}</span>
                <span style={{ fontFamily: "var(--f-display)", fontSize: 24, letterSpacing: "-0.01em" }}>
                  {c.name}
                </span>
                <span className="mono" style={{ color: "var(--ink-dim)" }}>{c.count} SKUs</span>
                <span style={{ color: "var(--accent)", fontSize: 20 }}>→</span>
              </button>
            )}
          </div>

          <div className="mm-contact">
            <div className="eyebrow" style={{ marginBottom: 20 }}>Reach us</div>
            <div style={{ fontSize: 14, lineHeight: 1.7, color: "var(--ink-dim)" }}>
              <div style={{ color: "var(--ink)", marginBottom: 4 }}>Jay Somnath Farm</div>
              Nr Tatvamasi School, Ognaj<br />
              Ahmedabad — 380060<br />
              <br />
              <div className="mono" style={{ color: "var(--ink)" }}>+91 98256 16352</div>
              <div className="mono" style={{ color: "var(--ink)" }}>+91 99787 76113</div>
              <div className="mono" style={{ color: "var(--ink)" }}>+91 74054 84881</div>
              <div className="mono">info@prismsalescorp.com</div>
              <br />
              <div className="mono" style={{ fontSize: 10 }}>Mon–Sat · 10:30–18:30</div>
            </div>
          </div>
        </div>

        <button className="btn" onClick={close}
        style={{ position: "absolute", top: 40, right: 48 }}>
          <span>✕</span> Close
        </button>
      </div>
    </div>);

}

// ---------- PRODUCT IMAGE PLACEHOLDER ----------
function ProductImage({ cat, sku, img, aspect = "4/5", accent }) {
  const icons = {
    conduit: "CONDUIT PIPE", wires: "COPPER CORE", switches: "SWITCH MODULE",
    mcb: "CIRCUIT BREAKER", trays: "CABLE TRAY", enclosures: "METAL BOX",
    accessories: "ACCESSORY"
  };

  if (img) {
    return (
      <div className="product-img" style={{ aspectRatio: aspect, background: "var(--surface)" }}>
        <img src={img} alt={sku} loading="lazy" decoding="async" style={{
          width: "100%", height: "100%", objectFit: "contain",
          display: "block", padding: 8,
        }} />
      </div>
    );
  }

  return (
    <div className="product-img" style={{ aspectRatio: aspect }}>
      <span style={{ position: "absolute", top: 10, left: 10, fontFamily: "var(--f-mono)", fontSize: 9, color: "var(--ink-soft)", letterSpacing: "0.1em" }}>◢</span>
      <span style={{ position: "absolute", bottom: 10, left: 10, fontFamily: "var(--f-mono)", fontSize: 9, color: "var(--ink-soft)" }}>{icons[cat] || "PRODUCT"}</span>
      <span style={{ position: "absolute", bottom: 10, right: 10, fontFamily: "var(--f-mono)", fontSize: 9, color: "var(--ink-soft)" }}>◣</span>
      <CategorySilhouette cat={cat} accent={accent} />
      <span className="label" style={{ position: "absolute", bottom: 36, left: "50%", transform: "translateX(-50%)" }}>
        studio photo placeholder
      </span>
    </div>
  );
}

// Simple geometric silhouette per category — placeholder only, not a real icon
function CategorySilhouette({ cat, accent = "var(--accent-orange)" }) {
  const style = { position: "relative", zIndex: 1, opacity: 0.4 };

  const dim = "var(--ink-dim)";
  const strong = "var(--border-strong)";
  const surf = "var(--surface-2)";
  const ink = "var(--ink)";

  if (cat === "conduit") {
    return <div style={{ ...style, width: "50%", height: "12%", background: `linear-gradient(90deg, ${strong}, ${dim}, ${strong})`, borderRadius: 4, border: `1px solid ${strong}` }}></div>;
  }
  if (cat === "wires") {
    return <div style={{ ...style, width: "60%", height: "8%", borderRadius: 100, background: `linear-gradient(90deg, ${accent}, color-mix(in oklch, ${accent} 70%, black))`, boxShadow: `0 0 40px color-mix(in oklch, ${accent} 40%, transparent)` }}></div>;
  }
  if (cat === "switches") {
    return <div style={{ ...style, width: "45%", aspectRatio: "3/5", background: surf, border: `1px solid ${strong}`, borderRadius: 4, display: "grid", placeItems: "center" }}>
      <div style={{ width: "60%", height: "30%", background: ink, borderRadius: 2, opacity: 0.35 }}></div>
    </div>;
  }
  if (cat === "mcb") {
    return <div style={{ ...style, width: "35%", aspectRatio: "2/3", background: "var(--surface)", border: `1px solid ${strong}`, borderRadius: 3, display: "grid", placeItems: "center" }}>
      <div style={{ width: "40%", height: "10%", background: ink, borderRadius: 1, opacity: 0.5 }}></div>
    </div>;
  }
  if (cat === "trays") {
    return <div style={{ ...style, width: "60%", height: "20%", border: `2px solid ${strong}`, borderTop: 0, display: "flex", justifyContent: "space-around", alignItems: "center" }}>
      {[1, 2, 3, 4, 5].map((i) => <div key={i} style={{ width: 4, height: "100%", background: strong }}></div>)}
    </div>;
  }
  if (cat === "enclosures") {
    return <div style={{ ...style, width: "45%", aspectRatio: "1", background: `linear-gradient(145deg, ${surf}, var(--surface))`, border: `1px solid ${strong}` }}></div>;
  }
  if (cat === "accessories") {
    return <div style={{ ...style, width: "35%", aspectRatio: "1", borderRadius: "50%", background: surf, border: `3px solid ${strong}` }}></div>;
  }
  return null;
}

// ---------- PRODUCT CARD ----------
function ProductCard({ p, onClick }) {
  const [hover, setHover] = useState(false);
  return (
    <div
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        cursor: "pointer",
        display: "flex",
        flexDirection: "column",
        gap: 14
      }}>
      <div style={{
        position: "relative",
        overflow: "hidden",
        transform: hover ? "translateY(-2px)" : "translateY(0)",
        transition: "transform 0.3s ease"
      }}>
        <ProductImage cat={p.cat} sku={p.sku} img={p.img} />
        <div style={{
          position: "absolute", top: 14, right: 14,
          padding: "6px 10px",
          background: "color-mix(in oklch, var(--bg) 75%, transparent)",
          border: "1px solid var(--border-strong)",
          fontFamily: "var(--f-mono)",
          fontSize: 10,
          letterSpacing: "0.1em",
          opacity: hover ? 1 : 0,
          transition: "opacity 0.25s"
        }}>
          VIEW →
        </div>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
        <div className="mono" style={{ color: "var(--ink-soft)", fontSize: 10 }}>
          {p.sku}
        </div>
        <div style={{ fontSize: 15, lineHeight: 1.35, color: "var(--ink)" }}>
          {p.name}
        </div>
        <div style={{ marginTop: 8 }}>
          <span className="mono" style={{ fontSize: 9, color: "var(--accent)", letterSpacing: "0.14em" }}>PRICE ON REQUEST →</span>
        </div>
      </div>
    </div>);

}

// ---------- FOOTER ----------
function Footer({ setRoute }) {
  return (
    <footer style={{
      borderTop: "1px solid var(--border)",
      marginTop: 120,
      padding: "80px 0 40px",
      background: "var(--bg)"
    }}>
      <div className="container">
        <div className="ft-grid" style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", gap: 48, marginBottom: 80 }}>
          <div className="ft-brand">
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 24 }}>
              <span className="logo-mark" style={{ width: 54, height: 54 }}></span>
              <div>
                <div style={{ fontFamily:"Cambria, Georgia, serif", fontSize:22, fontWeight:700, letterSpacing:"0.04em", lineHeight:1, color:"var(--ink)", textTransform:"uppercase" }}>
                  Prism Sales Corporation<sup style={{ fontSize:11, marginLeft:2, fontFamily:"sans-serif", fontWeight:400 }}>®</sup>
                </div>
                <div className="mono" style={{ fontSize:9, color:"var(--ink-soft)", letterSpacing:"0.18em", marginTop:4 }}>
                  EST. 2020
                </div>
              </div>
            </div>
            <div style={{ fontSize: 14, lineHeight: 1.7, color: "var(--ink-dim)", maxWidth: 380 }}>
              Authorised trade-partner & distributor of certified electrical materials across Gujarat. Serving electricians, architects and infrastructure projects since 2020.
            </div>
            <div className="mono" style={{ marginTop: 32, color: "var(--ink-soft)", fontSize: 10 }}>GSTIN · 24AAZFP9610N1ZD  

            </div>
          </div>

          <div>
            <div className="eyebrow" style={{ marginBottom: 20 }}>Catalog</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {window.CATEGORIES.slice(0, 6).map((c) =>
              <button key={c.id} onClick={() => setRoute("catalog")}
              style={{ textAlign: "left", fontSize: 13, color: "var(--ink-dim)" }}
              onMouseEnter={(e) => e.target.style.color = "var(--ink)"}
              onMouseLeave={(e) => e.target.style.color = "var(--ink-dim)"}>
                  {c.name}
                </button>
              )}
            </div>
          </div>

          <div>
            <div className="eyebrow" style={{ marginBottom: 20 }}>Company</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 10, fontSize: 13, color: "var(--ink-dim)" }}>
              <button onClick={() => setRoute("about")} style={{ textAlign: "left", fontSize: 13, color: "var(--ink-dim)" }}>About Prism</button>
              <button onClick={() => setRoute("group")} style={{ textAlign: "left", fontSize: 13, color: "var(--ink-dim)" }}>Group Company</button>
              <button onClick={() => setRoute("certifications")} style={{ textAlign: "left", fontSize: 13, color: "var(--ink-dim)" }}>Certifications</button>
              <button onClick={() => setRoute("careers")} style={{ textAlign: "left", fontSize: 13, color: "var(--ink-dim)" }}>Careers</button>
            </div>
          </div>

          <div>
            <div className="eyebrow" style={{ marginBottom: 20 }}>Visit</div>
            <div style={{ fontSize: 13, lineHeight: 1.7, color: "var(--ink-dim)" }}>
              Jay Somnath Farm<br />
              Nr Tatvamasi School, Ognaj<br />
              Ahmedabad — 380060
            </div>
            <div className="mono" style={{ marginTop: 18, fontSize: 11 }}>
              <a href="tel:+919825616352" style={{ display:"block", color:"var(--ink)", textDecoration:"none" }}
                onMouseEnter={e=>e.target.style.color="var(--accent)"}
                onMouseLeave={e=>e.target.style.color="var(--ink)"}>+91 98256 16352</a>
              <a href="tel:+919978776113" style={{ display:"block", color:"var(--ink)", textDecoration:"none" }}
                onMouseEnter={e=>e.target.style.color="var(--accent)"}
                onMouseLeave={e=>e.target.style.color="var(--ink)"}>+91 99787 76113</a>
              <a href="tel:+917405484881" style={{ display:"block", color:"var(--ink)", textDecoration:"none" }}
                onMouseEnter={e=>e.target.style.color="var(--accent)"}
                onMouseLeave={e=>e.target.style.color="var(--ink)"}>+91 74054 84881</a>
            </div>
            <div className="mono" style={{ fontSize: 11 }}>
              <a href="mailto:info@prismsalescorp.com" style={{ color:"var(--ink-dim)", textDecoration:"none" }}
                onMouseEnter={e=>e.target.style.color="var(--accent)"}
                onMouseLeave={e=>e.target.style.color="var(--ink-dim)"}>info@prismsalescorp.com</a>
            </div>
          </div>
        </div>

        {/* Giant wordmark */}
        <div style={{
          fontFamily: "var(--f-display)",
          fontSize: "clamp(80px, 16vw, 240px)",
          lineHeight: 0.9,
          letterSpacing: "-0.04em",
          color: "var(--ink)",
          borderTop: "1px solid var(--border)",
          paddingTop: 40,
          overflow: "hidden",
          whiteSpace: "nowrap"
        }}>
          PRISM <span style={{ color: "var(--accent)" }}>Sales</span>
        </div>

        <div style={{ fontFamily: "var(--f-display)", fontSize: "clamp(16px, 1.8vw, 24px)", fontStyle: "italic", color: "var(--ink-dim)", letterSpacing: "-0.01em", marginTop: 16, marginBottom: 8 }}>
          Powering Trust, Delivering Quality.
        </div>

        <div style={{
          marginTop: 40,
          display: "flex", justifyContent: "space-between", alignItems: "center",
          paddingTop: 24, borderTop: "1px solid var(--border)",
          fontFamily: "var(--f-mono)", fontSize: 10, color: "var(--ink-soft)", letterSpacing: "0.1em"
        }}>
          <div>© 2026 PRISM SALES CORPORATION · ALL RIGHTS RESERVED</div>
          <a href="https://sanjivanidevworks.com" target="_blank" rel="noopener noreferrer"
            style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              color: "var(--ink-dim)", textDecoration: "none",
              letterSpacing: "0.12em", fontWeight: 700,
              padding: "6px 12px",
              border: "1px solid var(--border)",
              transition: "all 0.2s"
            }}
            onMouseEnter={e => {
              e.currentTarget.style.color = "var(--accent)";
              e.currentTarget.style.borderColor = "var(--accent)";
              e.currentTarget.style.background = "color-mix(in srgb, var(--accent) 8%, transparent)";
            }}
            onMouseLeave={e => {
              e.currentTarget.style.color = "var(--ink-dim)";
              e.currentTarget.style.borderColor = "var(--border)";
              e.currentTarget.style.background = "transparent";
            }}>
            <span style={{ fontSize: 9, opacity: 0.6 }}>✦</span>
            DESIGNED BY SANJIVANI DEVWORKS
            <span style={{ fontSize: 9, opacity: 0.6 }}>↗</span>
          </a>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { Nav, ProductImage, ProductCard, Footer, CategorySilhouette });