"use client";

import Link from "next/link";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { SagLogoMark } from "@/components/shared/logo-mark";

export function SiteHeader() {
  const [open, setOpen] = useState(false);
  return (
    <header className="sticky top-0 z-40 w-full border-b bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container mx-auto flex h-16 items-center justify-between px-6 max-w-7xl">
        <Link href="/" className="flex items-center gap-2.5" onClick={() => setOpen(false)}>
          <SagLogoMark size={28} />
          <span className="text-xl font-semibold tracking-tight text-foreground">
            South Armz <span className="text-[var(--sag-brand)]">Global</span>
          </span>
        </Link>
        <nav className="hidden md:flex items-center gap-7 text-sm font-medium text-muted-foreground">
          <Link href="/portfolio" className="hover:text-foreground transition-colors">Portfolio</Link>
          <Link href="/about" className="hover:text-foreground transition-colors">About</Link>
          <Link href="/investors" className="hover:text-foreground transition-colors">Investors</Link>
          <Link href="/contact" className="hover:text-foreground transition-colors">Contact</Link>
        </nav>
        <div className="hidden md:flex items-center gap-2">
          <Button asChild variant="ghost" size="sm">
            <Link href="/login">Sign in</Link>
          </Button>
          <Button asChild size="sm" variant="brand">
            <Link href="/app">Open app</Link>
          </Button>
        </div>
        <button
          aria-label="Toggle menu"
          aria-expanded={open}
          onClick={() => setOpen((v) => !v)}
          className="md:hidden inline-flex items-center justify-center rounded-md p-2 hover:bg-accent"
        >
          {open ? (
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <line x1="18" y1="6" x2="6" y2="18" />
              <line x1="6" y1="6" x2="18" y2="18" />
            </svg>
          ) : (
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <line x1="3" y1="6" x2="21" y2="6" />
              <line x1="3" y1="12" x2="21" y2="12" />
              <line x1="3" y1="18" x2="21" y2="18" />
            </svg>
          )}
        </button>
      </div>
      {open && (
        <div className="md:hidden border-t bg-background">
          <nav className="container mx-auto max-w-7xl px-6 py-4 flex flex-col gap-1 text-sm">
            <MobileLink href="/portfolio" onClick={() => setOpen(false)}>Portfolio</MobileLink>
            <MobileLink href="/about" onClick={() => setOpen(false)}>About</MobileLink>
            <MobileLink href="/investors" onClick={() => setOpen(false)}>Investors</MobileLink>
            <MobileLink href="/contact" onClick={() => setOpen(false)}>Contact</MobileLink>
            <div className="mt-2 pt-2 border-t flex gap-2">
              <Button asChild variant="outline" size="sm" className="flex-1">
                <Link href="/login" onClick={() => setOpen(false)}>Sign in</Link>
              </Button>
              <Button asChild size="sm" variant="brand" className="flex-1">
                <Link href="/app" onClick={() => setOpen(false)}>Open app</Link>
              </Button>
            </div>
          </nav>
        </div>
      )}
    </header>
  );
}

function MobileLink({ href, children, onClick }: { href: string; children: React.ReactNode; onClick: () => void }) {
  return (
    <Link
      href={href}
      onClick={onClick}
      className="py-2.5 px-2 rounded-md hover:bg-accent text-foreground font-medium"
    >
      {children}
    </Link>
  );
}