tvone/app/components/tvone-site-nav.tsx

"use client";

import Link from "next/link";
import { useCallback, useEffect, useId, useRef, useState } from "react";
import Image from "next/image";
import { useTheme } from "next-themes";
import { Moon, Sun } from "lucide-react";

const primaryNav = [
  { label: "Música", href: "#" },
  { label: "Atualidade", href: "#" },
  { label: "Cultura", href: "#" },
  { label: "Lifestyle", href: "#" },
  { label: "Entrevistas", href: "#" },
  { label: "Girl Power", href: "#" },
  { label: "Desporto", href: "#" },
  { label: "Contactos", href: "#" },
];

const secondaryNav = [
  { label: "Opinião", href: "#" },
  { label: "Programas", href: "#" },
  { label: "Vídeo", href: "#" },
  { label: "Podcasts", href: "#" },
  { label: "Especiais", href: "#" },
  { label: "Verificação de factos", href: "#" },
];

function SearchIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
      <circle cx="11" cy="11" r="8" />
      <path d="m21 21-4.5-4.5" />
    </svg>
  );
}

function MenuIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
      <path d="M4 7h16M4 12h16M4 17h16" />
    </svg>
  );
}

function CloseIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
      <path d="M6 6l12 12M18 6L6 18" />
    </svg>
  );
}

function ChevronDown({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
      <path d="M6 9l6 6 6-6" />
    </svg>
  );
}

/**
 * Euronews-style navigation: primary row + secondary topic row (desktop),
 * sticky with shadow when docked, mobile sheet menu.
 */
export function TvoneSiteNav() {
  const sentinelRef = useRef<HTMLDivElement>(null);
  const [navIsStuck, setNavIsStuck] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const menuId = useId();

  const closeMenu = useCallback(() => setMenuOpen(false), []);
  const toggleMenu = useCallback(() => setMenuOpen((o) => !o), []);
  const { theme, setTheme } = useTheme();
  const [mounted, setMounted] = useState(false);
  

  useEffect(() => {
    const el = sentinelRef.current;
    if (!el) return;

    const sync = () => {
      const rect = el.getBoundingClientRect();
      setNavIsStuck(rect.bottom < 0);
    };

    sync();
    window.addEventListener("scroll", sync, { passive: true });
    window.addEventListener("resize", sync);
    setMounted(true);
    return () => {
      window.removeEventListener("scroll", sync);
      window.removeEventListener("resize", sync);
    };
  }, []);

  
  useEffect(() => {
    if (!menuOpen) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") closeMenu();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [menuOpen, closeMenu]);

  useEffect(() => {
    if (!menuOpen) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = prev;
    };
  }, [menuOpen]);

  useEffect(() => {
    const onResize = () => {
      if (window.matchMedia("(min-width: 1024px)").matches) setMenuOpen(false);
    };
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);

  return (
    <>
      <div ref={sentinelRef} className="pointer-events-none h-px w-full" aria-hidden />

      <div className="sticky top-0 z-50">
        <nav
          className={`border-b border-white/15 bg-[#0066d3] pt-[env(safe-area-inset-top)] text-white transition-shadow duration-200 ${
            navIsStuck ? "shadow-[0_4px_16px_rgba(0,0,0,0.18)]" : "shadow-none"
          }`}
          aria-label="Navegação principal"
        >
          {/* Row 1 — Euronews-style main bar */}
          <div className="mx-auto flex h-[52px] w-full max-w-[1280px] items-center gap-2 px-3 sm:h-[58px] sm:gap-3 sm:px-4 md:h-[64px] md:px-6">
            <button
              type="button"
              className="flex h-11 w-11 shrink-0 items-center justify-center rounded-md hover:bg-white/10 lg:hidden"
              aria-expanded={menuOpen}
              aria-controls={menuId}
              aria-label={menuOpen ? "Fechar menu" : "Abrir menu"}
              onClick={toggleMenu}
            >
              {menuOpen ? <CloseIcon className="h-6 w-6" /> : <MenuIcon className="h-6 w-6" />}
            </button>

            <Link href="/" className="flex shrink-0 items-center gap-2 py-1.5 text-white" onClick={closeMenu}>
            <div className="relative h-6 w-25 sm:h-10 sm:w-30 md:h-10 md:w-40">
              <Image
                src="/logo1.png" // put your image in /public
                alt="tvone logo"
                fill
                className="rounded-2xl object-cover"
              />
            </div>
            </Link>

            <ul className="hidden min-w-0 flex-1 items-center justify-center gap-4 lg:flex xl:gap-4">
              {primaryNav.map((item) => (
                <li key={item.label}>
                  <Link
                    href={item.href}
                    className="block whitespace-nowrap rounded-md px-2 py-2.5 text-[10px] font-semibold uppercase tracking-wide text-white/95 transition hover:bg-white/10 xl:px-2.5 xl:text-[14px]"
                  >
                    {item.label}
                  </Link>
                </li>
              ))}
            </ul>

            <div className="ml-auto flex shrink-0 items-center gap-1 sm:gap-2">
              {/* Theme Toggle */}
              {mounted && (
                <button
                  onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
                  className="flex h-10 w-10 items-center justify-center rounded-md hover:bg-white/10"
                >
                  {theme === "dark" ? <Moon size={18} /> : <Sun size={18} />}
                </button>
              )}

              <button
                type="button"
                className="flex h-10 w-10 items-center justify-center rounded-md hover:bg-white/10 sm:h-11 sm:w-11"
                aria-label="Pesquisar"
              >
                <SearchIcon className="h-5 w-5 text-white sm:h-[22px] sm:w-[22px]" />
              </button>

            </div>
          </div>

          {/* Row 2 — secondary topics (desktop), Euronews-style strip */}
          {/* <div className="hidden border-t border-white/10 bg-[#002f5e] lg:block">
            <div className="mx-auto flex max-w-[1280px] items-center gap-1 px-4 py-2.5 md:px-6">
              <span className="flex shrink-0 items-center gap-1 pr-2 text-[11px] font-bold uppercase tracking-wider text-white/55">
                <ChevronDown className="h-3 w-3" aria-hidden />
                Tópicos
              </span>
              <ul className="flex min-w-0 flex-1 flex-wrap items-center gap-x-4 gap-y-1">
                {secondaryNav.map((item) => (
                  <li key={item.label}>
                    <Link
                      href={item.href}
                      className="text-[13px] font-medium text-white/90 transition hover:text-white hover:underline"
                    >
                      {item.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          </div> */}
        </nav>

        {/* Mobile: menu is fixed + height from content only (no full-screen empty panel). */}
        {menuOpen ? (
          <>
            <button
              type="button"
              className="fixed right-0 bottom-0 left-0 z-40 bg-black/25 top-[calc(env(safe-area-inset-top,0px)+52px)] sm:top-[calc(env(safe-area-inset-top,0px)+58px)] md:top-[calc(env(safe-area-inset-top,0px)+64px)] lg:hidden"
              aria-label="Fechar menu"
              onClick={closeMenu}
            />
            <div
              id={menuId}
              className="fixed right-0 left-0 z-50 max-h-[min(75dvh,calc(100dvh-52px-env(safe-area-inset-top,0px)))] overflow-y-auto rounded-b-xl border-b border-white/15 bg-[#0066d3] shadow-xl top-[calc(env(safe-area-inset-top,0px)+52px)] sm:top-[calc(env(safe-area-inset-top,0px)+58px)] sm:max-h-[min(75dvh,calc(100dvh-58px-env(safe-area-inset-top,0px)))] md:top-[calc(env(safe-area-inset-top,0px)+64px)] md:max-h-[min(75dvh,calc(100dvh-64px-env(safe-area-inset-top,0px)))] lg:hidden"
              role="dialog"
              aria-modal="true"
              aria-label="Menu"
            >
              <div className="border-b border-white/10 px-2 py-2 sm:px-2.5 sm:py-2.5">
                <p className="px-2.5 text-[10px] font-bold uppercase tracking-wider text-white/50 sm:px-3">Secções</p>
                <ul className="mt-0.5">
                  {primaryNav.map((item) => (
                    <li key={item.label}>
                      <Link
                        href={item.href}
                        className="block rounded-md px-2.5 py-2 text-[14px] font-semibold uppercase tracking-wide text-white sm:px-3 sm:py-2.5 sm:text-[15px]"
                        onClick={closeMenu}
                      >
                        {item.label}
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>
              

            </div>
          </>
        ) : null}
      </div>
    </>
  );
}