'use client'

import Link from 'next/link'
import { Button } from '@/components/ui/button'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { ChevronDown } from 'lucide-react'
import { LanguageSwitcher } from '@/components/i18n/LanguageSwitcher'

export function Header() {
  return (
    <header className="sticky top-0 z-50 w-full border-b border-studio-medium bg-studio-black/95 backdrop-blur-safari supports-[backdrop-filter]:bg-studio-black/60">
      <div className="container flex h-16 items-center">
        <Link href="/" className="mr-6 flex items-center space-x-2">
          <span className="text-xl font-bold bg-gradient-to-r from-phoenix-fire to-sankofa-gold bg-clip-text text-transparent">
            Sankofa's Phoenix Nexus
          </span>
        </Link>
        <nav className="flex flex-1 items-center space-x-6 text-sm font-medium">
          {/* Products / Platform */}
          <DropdownMenu>
            <DropdownMenuTrigger className="flex items-center gap-1 transition-colors hover:text-phoenix-fire">
              Products <ChevronDown className="h-4 w-4" />
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start" className="w-64">
              <DropdownMenuItem asChild>
                <Link href="/products">All Products</Link>
              </DropdownMenuItem>
              <div className="border-t border-studio-medium my-1" />
              <DropdownMenuItem asChild>
                <Link href="/products/core-infrastructure">Core Infrastructure</Link>
              </DropdownMenuItem>
              <DropdownMenuItem asChild>
                <Link href="/products/data">Data Services</Link>
              </DropdownMenuItem>
              <DropdownMenuItem asChild>
                <Link href="/products/security">Security</Link>
              </DropdownMenuItem>
              <DropdownMenuItem asChild>
                <Link href="/products/ai-ml">AI & Machine Learning</Link>
              </DropdownMenuItem>
              <DropdownMenuItem asChild>
                <Link href="/products/networking">Networking</Link>
              </DropdownMenuItem>
              <DropdownMenuItem asChild>
                <Link href="/products/identity">Identity</Link>
              </DropdownMenuItem>
              <DropdownMenuItem asChild>
                <Link href="/products/developer">Developer Services</Link>
              </DropdownMenuItem>
              <DropdownMenuItem asChild>
                <Link href="/products/management">Management</Link>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>

          {/* Solutions - Enterprise focused */}
          <DropdownMenu>
            <DropdownMenuTrigger className="flex items-center gap-1 transition-colors hover:text-phoenix-fire">
              Solutions <ChevronDown className="h-4 w-4" />
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start" className="w-64">
              <DropdownMenuItem asChild>
                <Link href="/solutions/enterprise">Enterprise</Link>
              </DropdownMenuItem>
              <DropdownMenuItem asChild>
                <Link href="/solutions/government">Government</Link>
              </DropdownMenuItem>
              <DropdownMenuItem asChild>
                <Link href="/solutions/institutional">Institutional</Link>
              </DropdownMenuItem>
              <DropdownMenuItem asChild>
                <Link href="/solutions/sovereignty">Sovereignty & Compliance</Link>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>

          {/* Developers */}
          <Link href="/developers" className="transition-colors hover:text-phoenix-fire">
            Developers
          </Link>

          {/* Partners */}
          <Link href="/partners" className="transition-colors hover:text-phoenix-fire">
            Partners
          </Link>

          {/* Company */}
          <DropdownMenu>
            <DropdownMenuTrigger className="flex items-center gap-1 transition-colors hover:text-phoenix-fire">
              Company <ChevronDown className="h-4 w-4" />
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start" className="w-48">
              <DropdownMenuItem asChild>
                <Link href="/about">About</Link>
              </DropdownMenuItem>
              <DropdownMenuItem asChild>
                <Link href="/manifesto">Manifesto</Link>
              </DropdownMenuItem>
              <DropdownMenuItem asChild>
                <Link href="/company/trust">Trust & Compliance</Link>
              </DropdownMenuItem>
              <DropdownMenuItem asChild>
                <Link href="/company/security">Security</Link>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>

          {/* Support */}
          <Link href="/support" className="transition-colors hover:text-phoenix-fire">
            Support
          </Link>
        </nav>
        <div className="flex items-center space-x-2">
          <LanguageSwitcher />
          <Button 
            variant="outline" 
            size="sm"
            asChild
          >
            <Link href="/portal">Sign In</Link>
          </Button>
          <Button variant="phoenix" size="sm" asChild>
            <Link href="/portal">Get Started</Link>
          </Button>
        </div>
      </div>
    </header>
  )
}

