/* MCA, shared UI components */

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

/* ---------- Icons ---------- */
function Arrow({ size = 14 }) {
  return (
    <svg className="btn-arrow" width={size} height={size} viewBox="0 0 14 14" fill="none">
      <path d="M3 7H11M11 7L7 3M11 7L7 11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>);

}
function ArrowUpRight({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
      <path d="M4 10L10 4M10 4H5M10 4V9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>);

}

/* ---------- Theme toggle icons ---------- */
function IconSun({ size = 17 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <circle cx="12" cy="12" r="4.1" stroke="currentColor" strokeWidth="1.5" />
      <path d="M12 2.6v2.2M12 19.2v2.2M21.4 12h-2.2M4.8 12H2.6M18.6 5.4l-1.55 1.55M6.95 17.05L5.4 18.6M18.6 18.6l-1.55-1.55M6.95 6.95L5.4 5.4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
    </svg>);

}
function IconMoon({ size = 17 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path d="M20.5 14.6A8.2 8.2 0 1 1 9.4 3.5a6.4 6.4 0 0 0 11.1 11.1z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
    </svg>);

}
function ThemeToggle({ theme, onToggleTheme, className = "" }) {
  const isDark = theme === "dark";
  return (
    <button
      type="button"
      className={`nav__theme ${className}`}
      onClick={onToggleTheme}
      aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
      title={isDark ? "Light mode" : "Dark mode"}>
      <span className="nav__theme-icon" key={theme}>
        {isDark ? <IconSun /> : <IconMoon />}
      </span>
    </button>);

}

/* ---------- MCA Logo (typographic placeholder) ---------- */
function Logo({ size = 28, mono = false }) {
  return (
    <span className="nav__logo">
      <span
        className="nav__logo-mark"
        style={{
          width: size,
          height: size,
          background: mono ? "#fff" : undefined
        }}>
      </span>
      <span style={{ color: mono ? "#fff" : undefined }}>MCA</span>
    </span>);

}

/* ---------- Button ---------- */
function Button({ variant = "primary", size, children, onClick, withArrow = false, href }) {
  const cls = `btn btn--${variant}${size === "lg" ? " btn--lg" : ""}`;
  const Tag = href ? "a" : "button";
  return (
    <Tag className={cls} onClick={onClick} href={href}>
      {children}
      {withArrow && <Arrow />}
    </Tag>);

}

/* ---------- Nav ---------- */
function Nav({ route, navigate, theme, onToggleTheme }) {
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const navRef = useRef(null);

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

  // Keep --nav-h in sync with the live nav height so the mobile menu
  // (and anything else) can clear the fixed header on every device.
  useEffect(() => {
    const el = navRef.current;
    if (!el) return;
    const setVar = () => {
      const h = Math.round(el.getBoundingClientRect().height);
      document.documentElement.style.setProperty("--nav-h", h + "px");
    };
    setVar();
    let ro;
    if (typeof ResizeObserver !== "undefined") {
      ro = new ResizeObserver(setVar);
      ro.observe(el);
    }
    window.addEventListener("resize", setVar);
    window.addEventListener("orientationchange", setVar);
    return () => {
      if (ro) ro.disconnect();
      window.removeEventListener("resize", setVar);
      window.removeEventListener("orientationchange", setVar);
    };
  }, []);

  useEffect(() => {setMobileOpen(false);}, [route]);

  // Lock background scroll while the mobile menu is open.
  useEffect(() => {
    document.body.classList.toggle("menu-open", mobileOpen);
    if (mobileOpen) {
      const prev = document.body.style.overflow;
      document.body.style.overflow = "hidden";
      return () => { document.body.style.overflow = prev; };
    }
  }, [mobileOpen]);

  const link = (to, label) =>
  <a
    className={`nav__link ${route === to ? "nav__link--active" : ""}`}
    onClick={(e) => {e.preventDefault();navigate(to);}}
    href={"#" + to}>
    {label}</a>;


  return (
    <React.Fragment>
      <nav ref={navRef} className={`nav nav--dark ${scrolled ? "nav--dark-scrolled" : ""}`}>
        <div className="nav__inner">
          <a className="nav__logo nav__logo--img" href="#/" onClick={(e) => {e.preventDefault();navigate("/");}}>
            <img src="assets/mca-logo.png" alt="MCA · MultiChain Advisors" style={{ width: "119.773px", height: "105px" }} />
          </a>
          <div className="nav__links">
            <span className="nav__link-wrap" style={{ position: "relative" }}>
              <a className={`nav__link ${route?.startsWith("/services") ? "nav__link--active" : ""}`}
              onClick={(e) => e.preventDefault()} href="#">Services ▾</a>
              <div className="nav__dropdown">
                <a className="nav__dd-item" onClick={() => navigate("/services/ai-solutions")}>
                  <div className="nav__dd-title">AI Solutions</div>
                  <div className="nav__dd-desc">Intelligent systems across sales, marketing, ops & finance</div>
                </a>
                <a className="nav__dd-item" onClick={() => navigate("/services/growth-scale")}>
                  <div className="nav__dd-title">Growth & Scale</div>
                  <div className="nav__dd-desc">GTM, positioning, ecosystem & community growth</div>
                </a>
              </div>
            </span>
            {link("/team", "About Us")}
            {link("/case-studies", "Case Studies")}
            {link("/reports", "Reports")}
          </div>
          <div className="nav__cta">
            <ThemeToggle theme={theme} onToggleTheme={onToggleTheme} />
            <Button variant="primary" onClick={() => window.open("https://form.typeform.com/to/j6nKhXw5", "_blank", "noopener")} withArrow>
              Schedule a Call
            </Button>
          </div>
          <button className="nav__hamburger" onClick={() => setMobileOpen((v) => !v)} aria-label={mobileOpen ? "Close menu" : "Open menu"} aria-expanded={mobileOpen}>
            {mobileOpen ? (
              <svg width="16" height="16" viewBox="0 0 16 16">
                <path d="M2 2L14 14M14 2L2 14" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
              </svg>
            ) : (
              <svg width="16" height="12" viewBox="0 0 16 12">
                <path d="M0 1H16M0 6H16M0 11H16" stroke="currentColor" strokeWidth="1.5" />
              </svg>
            )}
          </button>
        </div>
      </nav>
      <div className={`mobile-menu ${mobileOpen ? "mobile-menu--open" : ""}`}>
        <a onClick={() => navigate("/services/ai-solutions")}>AI Solutions</a>
        <a onClick={() => navigate("/services/growth-scale")}>Growth & Scale</a>
        <a onClick={() => navigate("/team")}>About Us</a>
        <a onClick={() => navigate("/case-studies")}>Case Studies</a>
        <a onClick={() => navigate("/reports")}>Reports</a>
        <a onClick={() => window.open("https://form.typeform.com/to/j6nKhXw5", "_blank", "noopener")}>Schedule a Call →</a>
        <button type="button" className="mobile-menu__theme" onClick={onToggleTheme}>
          <span className="nav__theme-icon" key={theme}>{theme === "dark" ? <IconSun /> : <IconMoon />}</span>
          <span>{theme === "dark" ? "Light mode" : "Dark mode"}</span>
        </button>
      </div>
    </React.Fragment>);

}

/* ---------- Footer ---------- */
function Footer({ navigate }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__top">
          <div className="footer__brand">
            <div className="footer__brand-name">
              <img src="assets/mca-logo-footer.png" alt="MCA · MultiChain Advisors"
              style={{ height: 44, width: "auto", display: "block" }} />
            </div>
            <p className="footer__brand-desc">
              Your trusted partner in AI, growth, and capital markets, building and executing
              high-impact strategies that scale your business and strengthen your moat.
            </p>
            <div style={{ marginTop: 24 }}>
              <Button variant="teal" onClick={() => window.open("https://form.typeform.com/to/j6nKhXw5", "_blank", "noopener")} withArrow>
                Schedule a Free Consultation
              </Button>
            </div>
          </div>

          <div className="footer__col">
            <div className="footer__col-title">Services</div>
            <ul>
              <li><a onClick={() => navigate("/services/ai-solutions")} href="#">AI-Powered Solutions</a></li>
              <li><a onClick={() => navigate("/services/growth-scale")} href="#">Strategy, Growth & Scale</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <div className="footer__col-title">Resources</div>
            <ul>
              <li><a onClick={() => navigate("/case-studies")} href="#">Case Studies</a></li>
              <li><a onClick={() => navigate("/reports")} href="#">Reports</a></li>
              <li><a onClick={() => navigate("/team")} href="#">About Us</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <div className="footer__col-title">Connect</div>
            <ul>
              <li><a href="https://www.linkedin.com/company/multichainadv/" target="_blank" rel="noopener">LinkedIn</a></li>
              <li><a href="https://x.com/Multichain" target="_blank" rel="noopener">X / Twitter</a></li>
              <li><a href="#">Telegram</a></li>
            </ul>
          </div>
        </div>
        <div className="footer__bottom">
          <span>© 2026 MultiChain Advisors</span>
          <span>North America · Asia · Europe · Australia</span>
        </div>
      </div>
    </footer>);

}

/* ---------- Video / Media slot ---------- */
function VideoSlot({ label = "Drop video here", dark = false, style }) {
  return (
    <div className={`video-slot ${dark ? "video-slot--dark" : ""}`} style={style}>
      <span className="video-slot__label">▶ {label}</span>
    </div>);

}

/* ---------- Social buttons (team cards) ---------- */
function IconLinkedIn({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.36V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.38-1.85 3.61 0 4.28 2.38 4.28 5.47v6.27zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z" />
    </svg>);

}
function IconX({ size = 13 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231zm-1.161 17.52h1.833L7.084 4.126H5.117l11.966 15.644z" />
    </svg>);

}
function MemberSocials({ linkedin, x, name }) {
  if (!linkedin && !x) return null;
  const stop = (e) => e.stopPropagation();
  return (
    <div className="member__socials" onClick={stop}>
      {linkedin && (
        <a href={linkedin} target="_blank" rel="noopener noreferrer"
           className="member__social member__social--li"
           aria-label={`${name} on LinkedIn`} title="LinkedIn">
          <IconLinkedIn />
        </a>
      )}
      {x && (
        <a href={x} target="_blank" rel="noopener noreferrer"
           className="member__social member__social--x"
           aria-label={`${name} on X`} title="X / Twitter">
          <IconX />
        </a>
      )}
    </div>);

}

Object.assign(window, {
  Arrow, ArrowUpRight, Logo, Button, Nav, Footer, VideoSlot,
  IconLinkedIn, IconX, MemberSocials, IconSun, IconMoon, ThemeToggle
});