/**
 * Navbar Server Component
 * 
 * Renders static navigation structure server-side
 * - Logo
 * - Navigation links
 * - CTA button
 * 
 * Animations are handled by NavbarClient wrapper
 */

import Link from "next/link";
import { Logo } from "../logo";
import type { NavigationItem } from "./navbar.types";
import { CalButton } from "../cal-button";

interface NavbarServerProps {
  navItems: NavigationItem[];
}

export function NavbarServer({ navItems }: NavbarServerProps) {
  return (
    <div className="w-full fixed top-2 inset-x-0 z-50">
      {/* Desktop Navigation */}
      <div className="hidden lg:flex flex-row self-center items-center justify-between py-3 mx-auto px-8 rounded-full relative z-[100] w-4/5 backdrop-blur-md bg-white/50">
        <Logo />
        
        <div className="lg:flex flex-row flex-1 items-center justify-center space-x-2 text-sm">
          {navItems.map((navItem, idx) => (
            <div key={`nav-item-${idx}`} className="relative group">
              {navItem.children ? (
                // Dropdown menu item
                <div className="relative">
                  <button className="text-gray-900 font-semibold relative px-3 py-1.5 transition-colors flex items-center gap-1">
                    <span className="relative z-10">{navItem.label}</span>
                  </button>
                  
                  {/* Dropdown content (will be enhanced by client) */}
                  <div className="hidden group-hover:block absolute left-1/2 -translate-x-1/2 top-full mt-2 w-64 bg-white backdrop-blur-xl rounded-2xl shadow-lg overflow-hidden">
                    {navItem.children.map((child, childIdx) => (
                      <Link
                        key={`child-${idx}-${childIdx}`}
                        href={child.href || "#"}
                        className="block px-4 py-3 hover:bg-gray-50 transition-colors border-b border-gray-100 last:border-b-0"
                      >
                        <div className="font-semibold text-gray-900">
                          {child.label}
                        </div>
                        {child.description && (
                          <div className="text-xs text-gray-700 mt-1">
                            {child.description}
                          </div>
                        )}
                      </Link>
                    ))}
                  </div>
                </div>
              ) : (
                // Direct link item
                <Link
                  className="text-gray-900 font-semibold relative px-3 py-1.5 transition-colors block"
                  href={navItem.href || "#"}
                >
                  <span className="relative z-10">{navItem.label}</span>
                </Link>
              )}
            </div>
          ))}
        </div>

        {/* CTA Button */}
        <CalButton location="navbar" className="px-5 py-2.5">
          Prendre rendez-vous
        </CalButton>
      </div>

      {/* Mobile Navigation */}
      <div className="flex lg:hidden relative flex-col w-11/12 justify-between items-center max-w-[calc(100vw-2rem)] mx-auto z-50 backdrop-blur-md bg-white/80 rounded-full p-3">
        <div className="flex flex-row justify-between items-center w-full">
          <Logo />
          {/* Mobile menu will be enhanced by client */}
        </div>
      </div>
    </div>
  );
}