// ev-nav-footer.jsx — Site chrome: top navigation + footer.

function Nav() {
  const t = useTheme();
  const v = useViewport();
  const navigate = useNavigate();
  const currentPage = useCurrentPage();
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

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

  // Close hamburger when switching to larger viewport
  React.useEffect(() => {
    if (!v.isMobile && menuOpen) setMenuOpen(false);
  }, [v.isMobile, menuOpen]);

  // Lock body scroll while overlay open
  React.useEffect(() => {
    if (menuOpen) {
      const prev = document.body.style.overflow;
      document.body.style.overflow = "hidden";
      return () => { document.body.style.overflow = prev; };
    }
  }, [menuOpen]);

  const links = [
    { id: "about", label: "About" },
    { id: "services", label: "Services" },
    { id: "lyflabs", label: "LYF Labs" },
    { id: "casestudies", label: "Case Studies" },
    { id: "team", label: "Team" },
    { id: "insights", label: "Insights" },
  ];

  // On tablet we keep the inline nav but cut the labels to a shorter set if it
  // would overflow. The full 6 + Contact button does fit at 768+ for the long
  // theme labels (Summit's uppercase is widest) so we keep all six.
  const navHeight = v.isMobile ? 64 : 76;
  const navStyle = {
    position: "fixed",
    top: 0,
    left: 0,
    right: 0,
    zIndex: 100,
    background: scrolled || menuOpen ? "rgba(255,255,255,0.92)" : t.c.bg,
    backdropFilter: scrolled || menuOpen ? "saturate(180%) blur(12px)" : "none",
    WebkitBackdropFilter: scrolled || menuOpen ? "saturate(180%) blur(12px)" : "none",
    borderBottom: scrolled ? `1px solid ${t.c.line}` : "1px solid transparent",
    transition: "background 0.25s ease, border-color 0.25s ease",
    fontFamily: t.fonts.body,
  };

  const go = (id) => {
    navigate(id);
    setMenuOpen(false);
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  return (
    <>
      <nav style={navStyle}>
        <div
          style={{
            maxWidth: 1400,
            margin: "0 auto",
            padding: v.isMobile ? "0 20px" : v.isTablet ? "0 28px" : "0 40px",
            height: navHeight,
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            gap: v.isTablet ? 12 : 24,
          }}
        >
          <Logo onClick={() => go("home")} size={v.isMobile ? 0.9 : 1} />

          {v.isMobile ? (
            <button
              onClick={() => setMenuOpen((s) => !s)}
              aria-label={menuOpen ? "Close menu" : "Open menu"}
              aria-expanded={menuOpen}
              style={{
                width: 44,
                height: 44,
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
                justifyContent: "center",
                gap: 5,
                background: "transparent",
                border: "none",
                cursor: "pointer",
                padding: 0,
              }}
            >
              <span style={{ display: "block", width: 22, height: 1.6, background: t.c.ink, transition: "transform 0.25s, opacity 0.2s", transformOrigin: "center", transform: menuOpen ? "translateY(6.6px) rotate(45deg)" : "none" }} />
              <span style={{ display: "block", width: 22, height: 1.6, background: t.c.ink, transition: "opacity 0.2s", opacity: menuOpen ? 0 : 1 }} />
              <span style={{ display: "block", width: 22, height: 1.6, background: t.c.ink, transition: "transform 0.25s", transformOrigin: "center", transform: menuOpen ? "translateY(-6.6px) rotate(-45deg)" : "none" }} />
            </button>
          ) : (
            <div style={{ display: "flex", gap: v.isTablet ? 0 : 4, alignItems: "center", flexWrap: "nowrap" }}>
              {links.map((link) => {
                const active = currentPage === link.id;
                return (
                  <span
                    key={link.id}
                    onClick={() => go(link.id)}
                    onMouseEnter={(e) => {
                      if (!active) e.currentTarget.style.color = t.c.primary;
                    }}
                    onMouseLeave={(e) => {
                      if (!active) e.currentTarget.style.color = t.c.inkMid;
                    }}
                    style={{
                      fontFamily: t.fonts.body,
                      fontWeight: t.nav.weight,
                      fontSize: v.isTablet ? "0.78rem" : t.nav.size,
                      letterSpacing: t.nav.ls,
                      textTransform: t.nav.tt,
                      color: active ? t.c.primary : t.c.inkMid,
                      padding: v.isTablet ? "12px 9px" : "12px 14px",
                      cursor: "pointer",
                      transition: "color 0.2s",
                      whiteSpace: "nowrap",
                      position: "relative",
                    }}
                  >
                    {link.label}
                    {active && (
                      <span
                        style={{
                          position: "absolute",
                          left: v.isTablet ? 9 : 14,
                          right: v.isTablet ? 9 : 14,
                          bottom: 6,
                          height: 1.5,
                          background: t.c.primary,
                        }}
                      />
                    )}
                  </span>
                );
              })}
              <Button variant="primary" onClick={() => go("contact")} style={{ marginLeft: v.isTablet ? 6 : 12, padding: v.isTablet ? "11px 18px" : "14px 28px" }}>
                Contact
              </Button>
            </div>
          )}
        </div>
      </nav>

      {/* Mobile overlay menu */}
      {v.isMobile && (
        <div
          style={{
            position: "fixed",
            top: navHeight,
            left: 0,
            right: 0,
            bottom: 0,
            zIndex: 99,
            background: t.c.bg,
            transform: menuOpen ? "translateX(0)" : "translateX(100%)",
            transition: "transform 0.28s cubic-bezier(.4,.0,.2,1)",
            display: "flex",
            flexDirection: "column",
            padding: "24px 20px 40px",
            overflowY: "auto",
            pointerEvents: menuOpen ? "auto" : "none",
          }}
          aria-hidden={!menuOpen}
        >
          <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
            {[{ id: "home", label: "Home" }, ...links].map((link) => {
              const active = currentPage === link.id;
              return (
                <span
                  key={link.id}
                  onClick={() => go(link.id)}
                  style={{
                    fontFamily: t.fonts.display,
                    fontWeight: t.h.weight,
                    fontSize: "1.8rem",
                    letterSpacing: t.h.ls,
                    color: active ? t.c.primary : t.c.ink,
                    padding: "18px 4px",
                    cursor: "pointer",
                    borderBottom: `1px solid ${t.c.line}`,
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "space-between",
                    minHeight: 56,
                  }}
                >
                  {link.label}
                  <span style={{ fontSize: "0.85rem", color: active ? t.c.primary : t.c.inkLight }}>→</span>
                </span>
              );
            })}
          </div>
          <div style={{ marginTop: 32 }}>
            <Button onClick={() => go("contact")} style={{ width: "100%", padding: "18px 28px", fontSize: "0.95rem" }}>
              Begin the Conversation →
            </Button>
          </div>
          <div style={{ marginTop: "auto", paddingTop: 32, fontFamily: t.fonts.body, fontSize: "0.8rem", color: t.c.inkLight, lineHeight: 1.6 }}>
            <div>hello@evergreen.international</div>
            <div style={{ marginTop: 6 }}>© 2026 Evergreen International</div>
          </div>
        </div>
      )}
    </>
  );
}

function Logo({ onClick, dark = false, size = 1 }) {
  const t = useTheme();
  const inkColor = dark ? "#fff" : t.c.ink;
  const subColor = dark ? "rgba(255,255,255,0.55)" : t.c.inkMid;
  return (
    <div
      onClick={onClick}
      style={{
        cursor: onClick ? "pointer" : "default",
        display: "flex",
        alignItems: "center",
        gap: 12,
      }}
    >
      <Mark color={t.c.primary} size={32 * size} />
      <div style={{ display: "flex", flexDirection: "column", lineHeight: 1 }}>
        <span
          style={{
            fontFamily: t.fonts.display,
            fontWeight: t.h.weight,
            fontSize: `${1.05 * size}rem`,
            letterSpacing: "-0.01em",
            color: inkColor,
          }}
        >
          Evergreen
        </span>
        <span
          style={{
            fontFamily: t.fonts.body,
            fontSize: `${0.58 * size}rem`,
            fontWeight: 400,
            letterSpacing: "0.18em",
            textTransform: "uppercase",
            color: subColor,
            marginTop: 4,
          }}
        >
          International
        </span>
      </div>
    </div>
  );
}

// Brand mark — the official Evergreen sunflower logo. The `color` prop is
// accepted for API compatibility but ignored; the artwork is multi-color.
function Mark({ color, size = 32 }) {
  return (
    <img
      src="assets/logo.svg"
      alt="Evergreen logo"
      width={size}
      height={size}
      style={{ display: "block", width: size, height: size, objectFit: "contain" }}
    />
  );
}

function Footer() {
  const t = useTheme();
  const v = useViewport();
  const navigate = useNavigate();

  const go = (id) => {
    navigate(id);
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  const linkStyle = {
    display: "block",
    color: "rgba(255,255,255,0.55)",
    fontSize: "0.92rem",
    marginBottom: 14,
    cursor: "pointer",
    transition: "color 0.2s",
    fontFamily: t.fonts.body,
    fontWeight: t.id === "canopy" ? 300 : 400,
    padding: "4px 0", // hit target buffer on mobile
  };

  const sectionTitle = {
    color: "rgba(255,255,255,0.95)",
    fontSize: "0.7rem",
    fontWeight: 600,
    letterSpacing: "0.14em",
    textTransform: "uppercase",
    marginBottom: 22,
    fontFamily: t.fonts.body,
  };

  return (
    <footer
      style={{
        background: t.c.bgDark,
        color: "#fff",
        fontFamily: t.fonts.body,
        padding: rv(v, "64px 0 32px", "80px 0 36px", "100px 0 40px"),
        position: "relative",
        overflow: "hidden",
      }}
    >
      <div
        style={{
          position: "absolute",
          top: -200,
          right: -150,
          width: rv(v, 360, 460, 600),
          height: rv(v, 360, 460, 600),
          background: t.c.primary,
          opacity: 0.12,
          filter: "blur(100px)",
          borderRadius: "50%",
          pointerEvents: "none",
        }}
      />
      <Container max={1400} style={{ position: "relative" }}>
        {/* CTA band */}
        <div
          style={{
            display: "grid",
            gridTemplateColumns: rcols(v, "1fr", "1fr", "1.4fr 1fr"),
            gap: rv(v, 32, 40, 80),
            paddingBottom: rv(v, 48, 60, 80),
            borderBottom: `1px solid rgba(255,255,255,0.1)`,
            marginBottom: rv(v, 40, 52, 64),
            alignItems: v.isDesktop ? "end" : "start",
          }}
        >
          <div>
            <div
              style={{
                fontSize: "0.7rem",
                fontWeight: 600,
                letterSpacing: "0.14em",
                textTransform: "uppercase",
                color: t.c.primaryLt,
                marginBottom: 20,
              }}
            >
              Begin the Conversation
            </div>
            <h2
              style={{
                fontFamily: t.fonts.display,
                fontWeight: t.h.weight,
                fontSize: "clamp(1.6rem, 5.4vw, 3.4rem)",
                lineHeight: 1.1,
                letterSpacing: t.h.ls,
                color: "#fff",
                margin: 0,
                maxWidth: 600,
                textWrap: "balance",
              }}
            >
              Share your vision.<br />Receive one free idea.
            </h2>
          </div>
          <div style={{ display: "flex", justifyContent: v.isDesktop ? "flex-end" : "flex-start" }}>
            <Button variant="light" onClick={() => go("contact")} style={{ padding: "16px 32px", fontSize: "0.95rem" }}>
              Get in Touch →
            </Button>
          </div>
        </div>

        {/* Nav grid */}
        <div
          style={{
            display: "grid",
            gridTemplateColumns: rcols(v, "1fr", "1fr 1fr", "2fr 1fr 1fr 1.2fr"),
            gap: rv(v, 36, 40, 48),
            paddingBottom: rv(v, 40, 52, 64),
            borderBottom: `1px solid rgba(255,255,255,0.1)`,
            marginBottom: 32,
          }}
        >
          <div style={{ gridColumn: v.isTablet ? "span 2" : "auto" }}>
            <div style={{ marginBottom: 24 }}>
              <Logo dark />
            </div>
            <p
              style={{
                color: "rgba(255,255,255,0.55)",
                fontSize: "0.92rem",
                lineHeight: 1.7,
                maxWidth: 360,
                margin: 0,
                fontWeight: t.id === "canopy" ? 300 : 400,
              }}
            >
              Adaptive expertise, pragmatic innovation, and cross-boundary collaboration for a world that needs solutions made real.
            </p>
          </div>
          <div>
            <div style={sectionTitle}>Company</div>
            {[
              { id: "about", label: "About" },
              { id: "services", label: "Services" },
              { id: "team", label: "Team" },
              { id: "contact", label: "Contact" },
            ].map((p) => (
              <span key={p.id} style={linkStyle} onClick={() => go(p.id)} onMouseEnter={(e) => (e.currentTarget.style.color = "#fff")} onMouseLeave={(e) => (e.currentTarget.style.color = "rgba(255,255,255,0.55)")}>
                {p.label}
              </span>
            ))}
          </div>
          <div>
            <div style={sectionTitle}>Work</div>
            {[
              { id: "lyflabs", label: "LYF Labs" },
              { id: "casestudies", label: "Case Studies" },
              { id: "insights", label: "Insights" },
            ].map((p) => (
              <span key={p.id} style={linkStyle} onClick={() => go(p.id)} onMouseEnter={(e) => (e.currentTarget.style.color = "#fff")} onMouseLeave={(e) => (e.currentTarget.style.color = "rgba(255,255,255,0.55)")}>
                {p.label}
              </span>
            ))}
          </div>
          <div>
            <div style={sectionTitle}>Connect</div>
            <div style={{ color: "rgba(255,255,255,0.55)", fontSize: "0.92rem", lineHeight: 1.7 }}>
              <div>hello@evergreen.international</div>
              <div style={{ marginTop: 4 }}>evergreen.international</div>
            </div>
            <div style={{ display: "flex", gap: 12, marginTop: 24 }}>
              {["Li", "X", "@"].map((s) => (
                <span
                  key={s}
                  style={{
                    width: 44,
                    height: 44,
                    borderRadius: t.r.card,
                    border: "1px solid rgba(255,255,255,0.15)",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    fontSize: "0.8rem",
                    color: "rgba(255,255,255,0.6)",
                    cursor: "pointer",
                    transition: "all 0.2s",
                  }}
                  onMouseEnter={(e) => {
                    e.currentTarget.style.borderColor = t.c.primary;
                    e.currentTarget.style.color = t.c.primaryLt;
                  }}
                  onMouseLeave={(e) => {
                    e.currentTarget.style.borderColor = "rgba(255,255,255,0.15)";
                    e.currentTarget.style.color = "rgba(255,255,255,0.6)";
                  }}
                >
                  {s}
                </span>
              ))}
            </div>
          </div>
        </div>

        <div
          style={{
            display: "flex",
            flexDirection: v.isMobile ? "column" : "row",
            justifyContent: "space-between",
            alignItems: v.isMobile ? "flex-start" : "center",
            gap: v.isMobile ? 8 : 16,
            color: "rgba(255,255,255,0.35)",
            fontSize: "0.78rem",
          }}
        >
          <span>© 2026 Evergreen International Sustainability Solutions</span>
          <span style={{ fontStyle: t.id === "canopy" ? "italic" : "normal" }}>
            Sustainability as Security.
          </span>
        </div>
      </Container>
    </footer>
  );
}

Object.assign(window, { Nav, Footer, Logo, Mark });