// Viyu Partners — Navbar + Footer + shared chrome
const { Button } = window.ViyuPartnersDesignSystem_8838e3;

const NAV_SERVICES = [
  { label: "Workflow Automation", key: "workflow-automation" },
  { label: "AI and Agent Build", key: "ai-agent-build" },
  { label: "CRM Implementation", key: "crm-implementation" },
  { label: "Cybersecurity and API", key: "cybersecurity-api" },
  { label: "Managed Services Provider", key: "managed-services-provider" },
  { label: "Development Partner", key: "development-partner" },
  { label: "Value Management Partnership", key: "value-management-partnership" },
];

const NAV_LINKS = [
  { label: "Home", page: "home" },
  { label: "About", page: "about" },
  { label: "Industries Served", page: "industries" },
  { label: "Insights", page: "insights" },
  { label: "Let's Connect", page: "book" },
];

function Wordmark({ onClick }) {
  return (
    <a onClick={onClick} style={{ display: "flex", alignItems: "center", gap: "12px", cursor: "pointer", flexShrink: 0 }}>
      <img src={window.VIYU_LOGO} alt="Viyu Partners" width="40" height="40" style={{ display: "block", flexShrink: 0 }} />
      <span style={{ display: "flex", flexDirection: "column", lineHeight: 1, whiteSpace: "nowrap" }}>
        <span style={{ fontWeight: 700, fontSize: "19px", letterSpacing: "0.14em", color: "#fff" }}>VIYU</span>
        <span style={{ fontWeight: 500, fontSize: "10px", letterSpacing: "0.42em", color: "var(--gray-300)", marginTop: "3px" }}>PARTNERS</span>
      </span>
    </a>
  );
}

function Navbar({ page, navigate, transparentAtTop = true }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [servicesOpen, setServicesOpen] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const [isMobile, setIsMobile] = React.useState(false);
  const isHome = page === "home";

  React.useEffect(() => {
    const onResize = () => setIsMobile(window.innerWidth < 1024);
    onResize();
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);

  React.useEffect(() => { setMobileOpen(false); }, [page]);

  React.useEffect(() => {
    const root = document.getElementById("viyu-scroll") || window;
    const onScroll = () => {
      const y = root === window ? window.scrollY : root.scrollTop;
      setScrolled(y > 50);
    };
    root.addEventListener("scroll", onScroll);
    return () => root.removeEventListener("scroll", onScroll);
  }, []);

  const solid = scrolled || !isHome || !transparentAtTop;

  return (
    <nav style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
      transition: "background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out)",
      background: solid ? "rgba(8,21,34,0.82)" : "transparent",
      backdropFilter: solid ? "blur(16px) saturate(140%)" : "none",
      WebkitBackdropFilter: solid ? "blur(16px) saturate(140%)" : "none",
      borderBottom: solid ? "1px solid var(--border-subtle)" : "1px solid transparent",
      color: "#fff",
    }}>
      <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "0 24px" }}>
        <div style={{ height: "80px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <Wordmark onClick={() => navigate("home")} />

          {isMobile ? (
            <button aria-label="Menu" onClick={() => setMobileOpen((v) => !v)}
              style={{ background: "transparent", border: "none", color: "#fff", cursor: "pointer", padding: "8px", display: "inline-flex" }}
              dangerouslySetInnerHTML={{ __html: lucide.createElement(mobileOpen ? lucide.X : lucide.Menu, { width: 26, height: 26 }).outerHTML }} />
          ) : (
          <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
            <NavItem label="Home" onClick={() => navigate("home")} />
            <NavItem label="About" onClick={() => navigate("about")} />
            <div
              style={{ position: "relative" }}
              onMouseEnter={() => setServicesOpen(true)}
              onMouseLeave={() => setServicesOpen(false)}
            >
              <button style={navItemStyle} onClick={() => navigate("services")}>
                Services
                <span style={{ display: "inline-flex", marginLeft: "2px", transform: servicesOpen ? "rotate(180deg)" : "none", transition: "transform var(--dur-base)" }}
                  dangerouslySetInnerHTML={{ __html: lucide.createElement(lucide.ChevronDown, { width: 14, height: 14 }).outerHTML }} />
              </button>
              {servicesOpen && (
                <div style={{
                  position: "absolute", left: 0, top: "100%", width: "300px",
                  background: "rgba(8,21,34,0.98)", backdropFilter: "blur(20px)",
                  border: "1px solid var(--border-subtle)",
                  boxShadow: "var(--shadow-2xl)", padding: "8px 0", overflow: "hidden",
                }}>
                  {NAV_SERVICES.map((s) => (
                    <a key={s.key} onClick={() => { navigate("service", s.key); setServicesOpen(false); }}
                      style={{ display: "block", padding: "12px 20px", fontSize: "14px", color: "var(--gray-300)", cursor: "pointer" }}
                      onMouseEnter={(e) => { e.currentTarget.style.background = "var(--glass-10)"; e.currentTarget.style.color = "#fff"; }}
                      onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "var(--gray-300)"; }}>
                      {s.label}
                    </a>
                  ))}
                </div>
              )}
            </div>
            <NavItem label="Industries Served" onClick={() => navigate("industries")} />
            <NavItem label="Insights" onClick={() => navigate("insights")} />
            <div style={{ marginLeft: "12px" }}>
              <Button variant="primary" size="sm" onClick={() => navigate("book")}>Book a Diagnosis</Button>
            </div>
          </div>
          )}
        </div>
      </div>

      {isMobile && mobileOpen && (
        <div style={{ background: "rgba(8,21,34,0.99)", backdropFilter: "blur(16px)", borderTop: "1px solid var(--border-subtle)", padding: "12px 24px 28px", maxHeight: "calc(100vh - 80px)", overflowY: "auto" }}>
          <MobileLink label="Home" onClick={() => navigate("home")} />
          <MobileLink label="About" onClick={() => navigate("about")} />
          <MobileLink label="Services" onClick={() => navigate("services")} />
          <div style={{ paddingLeft: "16px" }}>
            {NAV_SERVICES.map((s) => (
              <a key={s.key} onClick={() => navigate("service", s.key)}
                style={{ display: "block", padding: "10px 0", fontSize: "14px", color: "var(--gray-400)", cursor: "pointer" }}>
                {s.label}
              </a>
            ))}
          </div>
          <MobileLink label="Industries Served" onClick={() => navigate("industries")} />
          <MobileLink label="Insights" onClick={() => navigate("insights")} />
          <div style={{ marginTop: "16px" }}>
            <Button variant="primary" fullWidth onClick={() => navigate("book")}>Let's Connect, Book an Appointment</Button>
          </div>
        </div>
      )}
    </nav>
  );
}

function MobileLink({ label, onClick }) {
  return (
    <button onClick={onClick}
      style={{ display: "block", width: "100%", textAlign: "left", background: "transparent", border: "none", borderBottom: "1px solid var(--border-faint)", color: "#fff", fontFamily: "var(--font-sans)", fontSize: "16px", fontWeight: 500, padding: "14px 0", cursor: "pointer" }}>
      {label}
    </button>
  );
}

const navItemStyle = {
  display: "inline-flex", alignItems: "center",
  background: "transparent", border: "none", cursor: "pointer",
  padding: "8px 9px", fontSize: "13px", fontWeight: 500, color: "#fff",
  fontFamily: "var(--font-sans)", transition: "color var(--dur-base)", whiteSpace: "nowrap",
};

function NavItem({ label, onClick }) {
  return (
    <button style={navItemStyle} onClick={onClick}
      onMouseEnter={(e) => (e.currentTarget.style.color = "var(--gray-400)")}
      onMouseLeave={(e) => (e.currentTarget.style.color = "#fff")}>
      {label}
    </button>
  );
}

function SocialIcon({ label, svg, href }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a href={href} aria-label={label} title={label}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        width: "40px", height: "40px", borderRadius: "var(--radius-full)",
        display: "inline-flex", alignItems: "center", justifyContent: "center", cursor: "pointer",
        background: hover ? "var(--white)" : "var(--surface-glass)",
        color: hover ? "var(--black)" : "var(--gray-300)",
        border: `1px solid ${hover ? "var(--white)" : "var(--border-subtle)"}`,
        transition: "background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out)",
      }}
      dangerouslySetInnerHTML={{ __html: svg }} />
  );
}

const LINKEDIN_SVG = '<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M20.45 20.45h-3.56v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.34V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z"/></svg>';

function Footer({ navigate }) {
  const QUICK = [
    { label: "Home", page: "home" }, { label: "About", page: "about" },
    { label: "Services", page: "services" }, { label: "Industries Served", page: "industries" },
    { label: "Insights", page: "insights" },
  ];
  return (
    <footer style={{ background: "var(--navy-950)", color: "var(--gray-400)", padding: "80px 0 40px", borderTop: "1px solid var(--border-subtle)" }}>
      <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "0 24px" }}>
        {/* Prominent tagline */}
        <div style={{ paddingBottom: "56px", marginBottom: "56px", borderBottom: "1px solid var(--border-faint)" }}>
          <h2 style={{ fontSize: "clamp(32px,5vw,64px)", fontWeight: 700, letterSpacing: "var(--tracking-tighter)", color: "#fff", lineHeight: 1 }}>One firm. Every <em style={{ fontStyle: "italic", fontWeight: 400, color: "var(--copper-text)" }}>sector.</em></h2>
          <p style={{ marginTop: "16px", fontFamily: "var(--font-mono)", fontSize: "13px", letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--copper-text)" }}>Enterprise intelligence, without enterprise overhead.</p>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: "48px" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: "20px", maxWidth: "320px" }}>
            <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
              <img src={window.VIYU_LOGO} alt="Viyu Partners" width="34" height="34" style={{ display: "block" }} />
              <span style={{ display: "flex", flexDirection: "column", lineHeight: 1 }}>
                <span style={{ fontWeight: 700, color: "#fff", letterSpacing: "0.12em", fontSize: "16px" }}>VIYU</span>
                <span style={{ fontWeight: 500, color: "var(--gray-400)", letterSpacing: "0.36em", fontSize: "9px", marginTop: "2px" }}>PARTNERS</span>
              </span>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: "10px", fontSize: "14px", color: "var(--gray-300)" }}>
              <a href="tel:+16099770011" style={{ cursor: "pointer", display: "flex", alignItems: "center", gap: "10px" }}>
                <span style={{ display: "inline-flex", color: "var(--copper-text)" }} dangerouslySetInnerHTML={{ __html: lucide.createElement(lucide.Phone, { width: 15, height: 15 }).outerHTML }} />
                +1 (609) 977-0011
              </a>
              <a href="mailto:hello@viyupartners.com" style={{ cursor: "pointer", display: "flex", alignItems: "center", gap: "10px" }}>
                <span style={{ display: "inline-flex", color: "var(--copper-text)" }} dangerouslySetInnerHTML={{ __html: lucide.createElement(lucide.Mail, { width: 15, height: 15 }).outerHTML }} />
                hello@viyupartners.com
              </a>
              <span style={{ display: "flex", alignItems: "center", gap: "10px", color: "var(--gray-400)" }}>
                <span style={{ display: "inline-flex", color: "var(--copper-text)" }} dangerouslySetInnerHTML={{ __html: lucide.createElement(lucide.MapPin, { width: 15, height: 15 }).outerHTML }} />
                Jersey City, NJ
              </span>
            </div>
            <div style={{ display: "flex", gap: "10px" }}>
              <SocialIcon label="LinkedIn" svg={LINKEDIN_SVG} href="#" />
            </div>
          </div>
          <div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: "11px", letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--gray-500)", marginBottom: "18px" }}>Quick links</div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "10px 40px" }}>
              {QUICK.map((q) => (
                <button key={q.label} onClick={() => navigate(q.page)} style={{ background: "transparent", border: "none", cursor: "pointer", textAlign: "left", fontFamily: "var(--font-sans)", fontSize: "14px", color: "var(--gray-300)", padding: 0 }}
                  onMouseEnter={(e) => (e.currentTarget.style.color = "#fff")} onMouseLeave={(e) => (e.currentTarget.style.color = "var(--gray-300)")}>{q.label}</button>
              ))}
            </div>
          </div>
        </div>
        <div style={{ marginTop: "56px", paddingTop: "24px", borderTop: "1px solid var(--border-faint)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: "12px", fontSize: "12px", color: "var(--gray-500)", alignItems: "center" }}>
          <span>© 2026 Viyu Partners. All rights reserved.</span>
          <div style={{ display: "flex", gap: "20px" }}>
            <a href="#" style={{ cursor: "pointer", color: "var(--gray-500)" }}>Privacy Policy</a>
            <a href="#" style={{ cursor: "pointer", color: "var(--gray-500)" }}>Terms of Service</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Navbar, Footer, Wordmark, NAV_SERVICES });