'use client';

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

import { BrandLockup } from '@/components/brand';
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-sovereign-bronze/20 bg-sovereign-obsidian/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">
        <div className="flex shrink-0 items-center gap-3 sm:gap-4">
          <Link href="/" className="group no-underline">
            <BrandLockup size="sm" />
          </Link>

          <span className="hidden h-5 w-px bg-sovereign-bronze/40 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-sovereign-gold no-underline transition-colors hover:bg-sovereign-gold/10 hover:text-sovereign-ivory"
          >
            <LogIn className="h-4 w-4" aria-hidden />
            <span>Sign in</span>
          </Link>
        </div>

        <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-sovereign-ivory/70 no-underline transition-colors hover:bg-sovereign-midnight hover:text-sovereign-ivory"
            >
              {item.label}
            </Link>
          ))}
        </nav>

        <div className="ml-auto hidden items-center gap-2 lg:flex">
          <Link
            href="/brand"
            className="rounded-md px-3 py-2 text-sm font-medium text-sovereign-ivory/70 no-underline transition-colors hover:text-sovereign-ivory"
          >
            Brand
          </Link>
          <Link
            href="https://portal.sankofa.nexus"
            className="rounded-md px-3 py-2 text-sm font-medium text-sovereign-ivory/70 no-underline transition-colors hover:text-sovereign-ivory"
          >
            Contact sales
          </Link>
          <Link
            href="https://phoenix.sankofa.nexus"
            className="rounded-lg border border-sovereign-gold/40 bg-sovereign-gold px-4 py-2 text-sm font-semibold text-sovereign-obsidian no-underline transition hover:bg-sovereign-ivory"
          >
            Get started
          </Link>
        </div>

        <button
          type="button"
          className="ml-auto inline-flex items-center justify-center rounded-md p-2 text-sovereign-ivory/60 hover:bg-sovereign-midnight hover:text-sovereign-ivory 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>

      <div
        className={cn(
          'border-t border-sovereign-bronze/20 bg-sovereign-obsidian lg:hidden',
          mobileOpen ? 'block' : 'hidden'
        )}
      >
        <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-sovereign-ivory no-underline hover:bg-sovereign-midnight"
              onClick={() => setMobileOpen(false)}
            >
              {item.label}
              <ChevronDown className="-rotate-90 h-4 w-4 text-sovereign-bronze" aria-hidden />
            </Link>
          ))}
          <div className="mt-2 flex flex-col gap-2 border-t border-sovereign-bronze/20 pt-3">
            <Link
              href={ECOSYSTEM_SIGN_IN_PATH}
              className="inline-flex items-center justify-center gap-2 rounded-lg border border-sovereign-bronze/40 px-4 py-2.5 text-sm font-medium text-sovereign-ivory no-underline hover:bg-sovereign-midnight"
              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-sovereign-gold px-4 py-2.5 text-sm font-semibold text-sovereign-obsidian no-underline"
              onClick={() => setMobileOpen(false)}
            >
              Get started with Phoenix
            </Link>
          </div>
        </nav>
      </div>
    </header>
  );
}
