import Image from "next/image";
import Link from "next/link";

export function Header() {
  return (
    <header
      id="header"
      className="w-full h-[80px] px-6 lg:px-[352px] py-[24px] flex items-center justify-between z-30 relative"
    >
      {/* Logo (Icon_4178_61387: w: 118, h: 32) */}
      <Link
        href="/"
        className="flex items-center gap-[6px] hover:opacity-90 transition-opacity"
        id="nav-logo"
      >
        <div className="relative w-[32px] h-[32px] flex items-center justify-center">
          <Image
            src="/assets/images/logo_icon.svg"
            alt="TeamBy.ai Logo"
            width={32}
            height={32}
            priority
            unoptimized
            className="w-[32px] h-[32px] object-contain"
          />
        </div>
        <span className="text-[#ffffff] text-[16px] font-medium tracking-tight">
          TeamBy.ai
        </span>
      </Link>

      {/* Navigation Links (Navigation_4178_61394: gap: 40px) */}
      <nav
        className="hidden md:flex items-center gap-[40px]"
        id="nav-menu"
        aria-label="Main Navigation"
      >
        <Link
          href="#home"
          id="nav-link-home"
          className="text-[#f1eefd] text-[14px] font-normal hover:text-white transition-colors"
        >
          Home
        </Link>
        <Link
          href="#products"
          id="nav-link-products"
          className="text-[#f1eefd] text-[14px] font-normal hover:text-white transition-colors"
        >
          Products
        </Link>
        <Link
          href="#learn"
          id="nav-link-learn"
          className="text-[#f1eefd] text-[14px] font-normal hover:text-white transition-colors"
        >
          Learn
        </Link>
        <Link
          href="#how-it-works"
          id="nav-link-how-it-works"
          className="text-[#f1eefd] text-[14px] font-normal hover:text-white transition-colors"
        >
          How It Work
        </Link>
      </nav>

      {/* CTA Header Button (Button_4178_61400: w: 118, h: 28, radius: 8) */}
      <Link
        href="#start"
        id="header-cta-button"
        className="btn-primary-gradient w-[118px] h-[28px] rounded-[8px] px-[10px] py-[4px] flex items-center justify-center text-[16px] leading-[20px] font-normal text-white hover:brightness-110 active:scale-95 transition-all"
      >
        <span className="relative z-10">Start for free</span>
      </Link>
    </header>
  );
}