// =========================================================================
// Site chrome — Nav, Footer
// =========================================================================
const { useState: useStateChrome, useEffect: useEffectChrome } = React;

function LocalTime() {
  const [time, setTime] = useStateChrome("");
  const { lang } = React.useContext(window.LangContext);
  useEffectChrome(() => {
    const fmt = () => {
      // Hard-code İzmir (UTC+3, no DST)
      const now = new Date();
      const utc = now.getTime() + now.getTimezoneOffset() * 60_000;
      const izmir = new Date(utc + 3 * 60 * 60_000);
      const h = String(izmir.getHours()).padStart(2, "0");
      const m = String(izmir.getMinutes()).padStart(2, "0");
      setTime(`${h}:${m}`);
    };
    fmt();
    const i = setInterval(fmt, 30_000);
    return () => clearInterval(i);
  }, []);
  return (
    <span
      style={{
        fontFamily: "var(--font-mono)",
        fontSize: 11,
        letterSpacing: "0.1em",
        color: "var(--volt-500)",
        display: "inline-flex",
        alignItems: "center",
        gap: 8,
        textTransform: "uppercase",
      }}
    >
      <span
        style={{
          width: 6,
          height: 6,
          background: "var(--volt-500)",
          borderRadius: "50%",
          boxShadow: "0 0 0 3px rgba(178,245,0,0.18)",
          animation: "voltPulse 2s ease-in-out infinite",
        }}
      />
      {lang === "en" ? "Turkey" : "Türkiye"} · {time || "—"}
    </span>
  );
}

function Nav({
  active = "work",
  onNav,
  theme,
  onThemeToggle,
  lang,
  onLangToggle,
}) {
  const [scrolled, setScrolled] = useStateChrome(false);
  const [menuOpen, setMenuOpen] = useStateChrome(false);
  const isMobile = window.useIsMobile();
  const { t } = React.useContext(window.LangContext);

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

  const items = [
    { id: "work", labelKey: "nav.work" },
    { id: "projects", labelKey: "nav.projects" },
    { id: "about", labelKey: "nav.about" },
    { id: "stack", labelKey: "nav.stack" },
    { id: "contact", labelKey: "nav.contact" },
  ];

  const btnBase = {
    background: "transparent",
    border: "1px solid var(--border)",
    color: "var(--fg-muted)",
    padding: "6px 10px",
    borderRadius: "var(--radius-2)",
    fontFamily: "var(--font-mono)",
    fontSize: 11,
    letterSpacing: "0.1em",
    textTransform: "uppercase",
    cursor: "pointer",
    transition: "color 200ms, border-color 200ms",
  };

  const navBg =
    scrolled || menuOpen
      ? "color-mix(in oklab, var(--bg) 92%, transparent)"
      : "transparent";

  return (
    <>
      <nav
        style={{
          position: "fixed",
          top: 0,
          left: 0,
          right: 0,
          zIndex: 100,
          padding: scrolled
            ? "12px clamp(16px, 4vw, 56px)"
            : "20px clamp(16px, 4vw, 56px)",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          background: navBg,
          backdropFilter: scrolled || menuOpen ? "blur(16px)" : "none",
          WebkitBackdropFilter: scrolled || menuOpen ? "blur(16px)" : "none",
          borderBottom:
            scrolled || menuOpen
              ? "var(--border-hairline)"
              : "1px solid transparent",
          transition:
            "padding 320ms cubic-bezier(0.16,1,0.3,1), background 320ms, border-color 320ms",
        }}
      >
        {/* Logo */}
        <a
          href="#top"
          onClick={(e) => {
            e.preventDefault();
            onNav && onNav("top");
            setMenuOpen(false);
          }}
          style={{
            display: "flex",
            alignItems: "center",
            gap: 10,
            fontFamily: "var(--font-display)",
            fontWeight: 700,
            fontSize: 20,
            letterSpacing: "-0.025em",
            color: "var(--fg)",
          }}
        >
          Ege Turanoğlu
          <span
            style={{
              color: "var(--accent)",
              display: "inline-block",
              transform: "translateY(2px)",
            }}
          >
            .
          </span>
        </a>

        {/* Desktop nav links */}
        {!isMobile && (
          <div
            style={{
              display: "flex",
              gap: 28,
              fontFamily: "var(--font-mono)",
              fontSize: 12,
              letterSpacing: "0.1em",
              textTransform: "uppercase",
            }}
          >
            {items.map((it, i) => (
              <a
                key={it.id}
                href={`#${it.id}`}
                onClick={(e) => {
                  e.preventDefault();
                  onNav && onNav(it.id);
                }}
                style={{
                  color: active === it.id ? "var(--accent)" : "var(--fg-muted)",
                  borderBottom:
                    active === it.id
                      ? "1px solid var(--accent)"
                      : "1px solid transparent",
                  paddingBottom: 2,
                  transition: "color 200ms ease, border-color 200ms ease",
                }}
                onMouseEnter={(e) => {
                  if (active !== it.id)
                    e.currentTarget.style.color = "var(--fg)";
                }}
                onMouseLeave={(e) => {
                  if (active !== it.id)
                    e.currentTarget.style.color = "var(--fg-muted)";
                }}
              >
                <span style={{ color: "var(--fg-faint)", marginRight: 8 }}>
                  {String(i + 1).padStart(2, "0")}
                </span>
                {t(it.labelKey)}
              </a>
            ))}
          </div>
        )}

        {/* Controls */}
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          {!isMobile && (
            <button
              onClick={onThemeToggle}
              aria-label="Toggle theme"
              style={btnBase}
              onMouseEnter={(e) => {
                e.currentTarget.style.color = "var(--fg)";
                e.currentTarget.style.borderColor = "var(--border-loud)";
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.color = "var(--fg-muted)";
                e.currentTarget.style.borderColor = "var(--border)";
              }}
            >
              {theme === "light" ? t("nav.theme.dark") : t("nav.theme.light")}
            </button>
          )}

          <button
            onClick={onLangToggle}
            aria-label="Toggle language"
            style={{
              ...btnBase,
              color: "var(--accent)",
              borderColor: "var(--accent)",
              fontWeight: 600,
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.background = "var(--accent)";
              e.currentTarget.style.color = "var(--accent-fg)";
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.background = "transparent";
              e.currentTarget.style.color = "var(--accent)";
            }}
          >
            {lang === "en" ? "TR" : "EN"}
          </button>

          {!isMobile && <LocalTime />}

          {/* Hamburger */}
          {isMobile && (
            <button
              onClick={() => setMenuOpen((o) => !o)}
              aria-label="Toggle menu"
              style={{
                ...btnBase,
                padding: "6px 10px",
                fontSize: 16,
                lineHeight: 1,
                color: menuOpen ? "var(--accent)" : "var(--fg-muted)",
                borderColor: menuOpen ? "var(--accent)" : "var(--border)",
              }}
            >
              {menuOpen ? "✕" : "☰"}
            </button>
          )}
        </div>
      </nav>

      {/* Mobile dropdown menu */}
      {isMobile && (
        <div
          style={{
            position: "fixed",
            top: scrolled ? 52 : 60,
            left: 0,
            right: 0,
            zIndex: 99,
            background: "color-mix(in oklab, var(--bg) 96%, transparent)",
            backdropFilter: "blur(20px)",
            WebkitBackdropFilter: "blur(20px)",
            borderBottom: menuOpen ? "var(--border-hairline)" : "none",
            overflow: "hidden",
            maxHeight: menuOpen ? 500 : 0,
            transition:
              "max-height 360ms cubic-bezier(0.16,1,0.3,1), border-color 200ms",
          }}
        >
          <div style={{ padding: "8px 24px 20px" }}>
            {items.map((it, i) => (
              <a
                key={it.id}
                href={`#${it.id}`}
                onClick={(e) => {
                  e.preventDefault();
                  onNav && onNav(it.id);
                  setMenuOpen(false);
                }}
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: 14,
                  padding: "13px 0",
                  borderBottom: "var(--border-hairline)",
                  fontFamily: "var(--font-mono)",
                  fontSize: 13,
                  letterSpacing: "0.1em",
                  textTransform: "uppercase",
                  color: active === it.id ? "var(--accent)" : "var(--fg-muted)",
                  transition: "color 200ms",
                }}
              >
                <span style={{ color: "var(--fg-faint)", fontSize: 11 }}>
                  {String(i + 1).padStart(2, "0")}
                </span>
                {t(it.labelKey)}
                {active === it.id && (
                  <span
                    style={{
                      marginLeft: "auto",
                      color: "var(--accent)",
                      fontSize: 10,
                    }}
                  >
                    ●
                  </span>
                )}
              </a>
            ))}
            {/* Theme toggle in menu */}
            <div style={{ display: "flex", gap: 10, marginTop: 16 }}>
              <button
                onClick={() => {
                  onThemeToggle();
                }}
                style={{
                  ...btnBase,
                  flex: 1,
                  textAlign: "center",
                  justifyContent: "center",
                  display: "flex",
                }}
              >
                {theme === "light" ? t("nav.theme.dark") : t("nav.theme.light")}
              </button>
              <LocalTime />
            </div>
          </div>
        </div>
      )}
    </>
  );
}

function Footer() {
  const { t } = React.useContext(window.LangContext);
  const isMobile = window.useIsMobile();

  const footerLinks = [
    ["GitHub ↗", "https://github.com/egeturanoglu"],
    ["LinkedIn ↗", "https://linkedin.com/in/ege-turanoğlu-370370285/"],
    ["Email →", "mailto:egeturanoglu@gmail.com"],
    ["CV (PDF) ↓", "../../assets/EgeTuranoglu_CV.pdf"],
  ];

  return (
    <footer
      style={{
        borderTop: "var(--border-hairline)",
        padding: "72px clamp(20px, 4vw, 56px) 40px",
        marginTop: 80,
      }}
    >
      {/* ── Main row: 3 columns ── */}
      <div
        style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "1fr auto auto",
          gap: isMobile ? 40 : "clamp(40px, 6vw, 96px)",
          alignItems: "start",
          marginBottom: 64,
          maxWidth: "var(--max-content)",
          marginInline: "auto",
          width: "100%",
        }}
      >
        {/* Sign-off — large display text */}
        <div>
          <div className="eyebrow" style={{ marginBottom: 20 }}>
            SIGN-OFF
          </div>
          <Reveal>
            <div
              style={{
                fontFamily: "var(--font-display)",
                fontWeight: 600,
                fontSize: "clamp(36px, 4.5vw, 64px)",
                lineHeight: 1.08,
                letterSpacing: "-0.025em",
                textWrap: "balance",
              }}
            >
              {t("footer.signoff.line1")}
              <br />
              {t("footer.signoff.line2")}
              <span style={{ color: "var(--accent)" }}>.</span>
            </div>
          </Reveal>
        </div>

        {/* Elsewhere — link list */}
        <div style={{ paddingTop: 2 }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>
            {t("footer.elsewhere")}
          </div>
          <ul
            style={{
              listStyle: "none",
              padding: 0,
              margin: 0,
              display: "flex",
              flexDirection: "column",
              gap: 2,
            }}
          >
            {footerLinks.map(([label, href]) => (
              <li key={label}>
                <a
                  href={href}
                  target="_blank"
                  style={{
                    display: "inline-block",
                    fontFamily: "var(--font-mono)",
                    fontSize: 13,
                    letterSpacing: "0.04em",
                    padding: "5px 0",
                    color: "var(--fg-muted)",
                    borderBottom: "1px solid transparent",
                    transition: "border-color 200ms, color 200ms",
                    whiteSpace: "nowrap",
                  }}
                  onMouseEnter={(e) => {
                    e.currentTarget.style.borderColor = "var(--accent)";
                    e.currentTarget.style.color = "var(--accent)";
                  }}
                  onMouseLeave={(e) => {
                    e.currentTarget.style.borderColor = "transparent";
                    e.currentTarget.style.color = "var(--fg-muted)";
                  }}
                >
                  {label}
                </a>
              </li>
            ))}
          </ul>
        </div>

        {/* Currently */}
        <div style={{ paddingTop: 2 }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>
            {t("footer.currently.title")}
          </div>
          <div
            style={{
              fontFamily: "var(--font-mono)",
              fontSize: 13,
              color: "var(--fg-muted)",
              letterSpacing: "0.02em",
              lineHeight: 1.7,
              whiteSpace: "nowrap",
            }}
          >
            {t("footer.currently.line1")}
            <br />
            {t("footer.currently.line2")}
          </div>
        </div>
      </div>

      {/* ── Bottom meta row ── */}
      <div
        style={{
          borderTop: "var(--border-hairline)",
          paddingTop: 24,
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr 1fr",
          alignItems: "center",
          fontFamily: "var(--font-mono)",
          fontSize: 11,
          letterSpacing: "0.1em",
          color: "var(--fg-faint)",
          textTransform: "uppercase",
          maxWidth: "var(--max-content)",
          marginInline: "auto",
          width: "100%",
        }}
      >
        <span>{t("footer.legal")}</span>
        {!isMobile && (
          <span style={{ textAlign: "center" }}>{t("footer.nocookies")}</span>
        )}
        <span style={{ textAlign: isMobile ? "left" : "right" }}>
          {t("footer.version")}
        </span>
      </div>
    </footer>
  );
}

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