'use client';

import { ChevronDown, LogIn, Menu, X } from 'lucide-react';
import Link from 'next/link';
import { useState } from 'react';

import { corporateNav, ECOSYSTEM_SIGN_IN_PATH } from '@/lib/corporate-site-data';
import { cn } from '@/lib/utils';

export function CorporateHeader() {
  const [mobileOpen, setMobileOpen] = useState(false);

  return (
    <header className="sticky top-0 z-50 border-b border-gray-800/80 bg-gray-950/95 backdrop-blur-md">
      <div className="mx-auto flex h-16 max-w-7xl items-center gap-4 px-4 sm:px-6 lg:px-8">
        {/* Top-left: brand + ecosystem sign-in (AWS / Microsoft pattern) */}
        <div className="flex shrink-0 items-center gap-3 sm:gap-4">
          <Link href="/" className="group flex items-center gap-2 no-underline">
            <span
              className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 to-amber-400 text-sm font-bold text-gray-950 shadow-lg shadow-orange-500/20"
              aria-hidden
            >
              S
            </span>
            <span className="hidden bg-gradient-to-r from-orange-300 to-amber-200 bg-clip-text text-lg font-semibold tracking-tight text-transparent sm:inline">
              Sankofa
            </span>
          </Link>

          <span className="hidden h-5 w-px bg-gray-700 sm:block" aria-hidden />

          <Link
            href={ECOSYSTEM_SIGN_IN_PATH}
            className="inline-flex items-center gap-1.5 rounded-md px-2 py-1.5 text-sm font-medium text-orange-300 no-underline transition-colors hover:bg-orange-500/10 hover:text-orange-200"
          >
            <LogIn className="h-4 w-4" aria-hidden />
            <span>Sign in</span>
          </Link>
        </div>

        {/* Desktop nav */}
        <nav className="hidden flex-1 items-center justify-center gap-1 lg:flex" aria-label="Primary">
          {corporateNav.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className="rounded-md px-3 py-2 text-sm font-medium text-gray-300 no-underline transition-colors hover:bg-gray-800/60 hover:text-white"
            >
              {item.label}
            </Link>
          ))}
        </nav>

        {/* Desktop CTAs */}
        <div className="ml-auto hidden items-center gap-2 lg:flex">
          <Link
            href="https://portal.sankofa.nexus"
            className="rounded-md px-3 py-2 text-sm font-medium text-gray-300 no-underline transition-colors hover:text-white"
          >
            Contact sales
          </Link>
          <Link
            href="https://phoenix.sankofa.nexus"
            className="rounded-lg bg-gradient-to-r from-orange-500 to-amber-500 px-4 py-2 text-sm font-semibold text-gray-950 no-underline shadow-md shadow-orange-500/25 transition hover:from-orange-400 hover:to-amber-400"
          >
            Get started
          </Link>
        </div>

        {/* Mobile menu toggle */}
        <button
          type="button"
          className="ml-auto inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-800 hover:text-white lg:hidden"
          aria-expanded={mobileOpen}
          aria-label={mobileOpen ? 'Close menu' : 'Open menu'}
          onClick={() => setMobileOpen((open) => !open)}
        >
          {mobileOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
        </button>
      </div>

      {/* Mobile drawer */}
      <div
        className={cn(
          'overflow-hidden border-t border-gray-800/80 bg-gray-950 lg:hidden',
          mobileOpen ? 'max-h-[28rem] opacity-100' : 'max-h-0 opacity-0'
        )}
      >
        <nav className="flex flex-col gap-1 px-4 py-3" aria-label="Mobile primary">
          {corporateNav.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className="flex items-center justify-between rounded-md px-3 py-2.5 text-sm font-medium text-gray-200 no-underline hover:bg-gray-800"
              onClick={() => setMobileOpen(false)}
            >
              {item.label}
              <ChevronDown className="-rotate-90 h-4 w-4 text-gray-500" aria-hidden />
            </Link>
          ))}
          <div className="mt-2 flex flex-col gap-2 border-t border-gray-800 pt-3">
            <Link
              href={ECOSYSTEM_SIGN_IN_PATH}
              className="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-700 px-4 py-2.5 text-sm font-medium text-white no-underline hover:bg-gray-800"
              onClick={() => setMobileOpen(false)}
            >
              <LogIn className="h-4 w-4" />
              Sign in to ecosystem
            </Link>
            <Link
              href="https://phoenix.sankofa.nexus"
              className="inline-flex items-center justify-center rounded-lg bg-gradient-to-r from-orange-500 to-amber-500 px-4 py-2.5 text-sm font-semibold text-gray-950 no-underline"
              onClick={() => setMobileOpen(false)}
            >
              Get started with Phoenix
            </Link>
          </div>
        </nav>
      </div>
    </header>
  );
}
