"use client";

import Image from "next/image";
import Link from "next/link";
import { Menu } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import { siteContent } from "@/app/content";

type HeaderContent = Pick<typeof siteContent, "brand" | "contact">;

const navigation = [
  ["دوره‌ها", "/courses"],
  ["کوچینگ", "/coaching"],
  ["ابزارها", "/tools"],
  ["دانشنامه", "/knowledge"],
  ["درباره ما", "/about"],
];

export function SiteHeader({ content = siteContent }: { content?: HeaderContent }) {
  const { contact, brand } = content;

  return (
    <>
      <div className="bg-[#062f21] px-5 py-2 text-center text-xs leading-6 text-emerald-50/80 sm:text-sm">
        معامله‌گری در بازارهای مالی با ریسک همراه است؛ آموزش جایگزین مدیریت ریسک نیست.
      </div>
      <header className="relative z-30 border-b border-emerald-950/10 bg-[#f7f8f5]/95 backdrop-blur-xl">
        <div className="mx-auto flex h-[86px] max-w-[1240px] items-center justify-between px-5 lg:px-8">
          <Link href="/" className="flex items-center gap-3" aria-label="صفحه اصلی مرکز معاملات آل عصفور">
            <Image src="/alstc-logo.webp" alt="نشان مرکز معاملات آل عصفور" width={58} height={58} priority className="h-[58px] w-[58px] rounded-full object-cover shadow-[0_8px_24px_rgba(4,69,47,.15)]" />
            <span className="hidden sm:block">
              <strong className="block text-[15px] font-black">{brand.name}</strong>
              <span className="mt-0.5 block text-[10px] font-semibold tracking-[.18em] text-[#b58422]" dir="ltr">ALASFOOR TRADING CENTER</span>
            </span>
          </Link>

          <nav className="hidden items-center gap-7 text-sm font-semibold lg:flex" aria-label="منوی اصلی">
            {navigation.map(([label, href]) => <Link key={href} className="nav-link" href={href}>{label}</Link>)}
          </nav>

          <div className="flex items-center gap-2">
            <Button asChild variant="ghost" className="hidden text-[#0c5038] md:inline-flex">
              <a href={contact.portalHref} target="_blank" rel="noreferrer">ورود دانش‌پذیران</a>
            </Button>
            <Button asChild className="hidden h-11 rounded-full bg-[#0a5a3c] px-5 text-white hover:bg-[#084c33] sm:inline-flex">
              <Link href="/contact">دریافت مشاوره</Link>
            </Button>
            <Sheet>
              <SheetTrigger asChild>
                <Button variant="outline" size="icon" className="rounded-full border-emerald-900/15 bg-white lg:hidden" aria-label="بازکردن منو"><Menu /></Button>
              </SheetTrigger>
              <SheetContent side="right" className="w-[88%] border-emerald-950/10 bg-[#f7f8f5] sm:max-w-sm" dir="rtl">
                <SheetHeader className="border-b border-emerald-950/10 p-6 text-right">
                  <SheetTitle className="text-xl font-black text-[#0a4a34]">مرکز معاملات آل عصفور</SheetTitle>
                  <SheetDescription>دسترسی سریع به بخش‌های سایت</SheetDescription>
                </SheetHeader>
                <nav className="grid gap-1 p-5 text-base font-bold" aria-label="منوی موبایل">
                  {navigation.map(([label, href]) => (
                    <SheetClose asChild key={href}><Link href={href} className="rounded-xl px-4 py-3 hover:bg-emerald-900/5">{label}</Link></SheetClose>
                  ))}
                </nav>
                <div className="mt-auto grid gap-3 border-t border-emerald-950/10 p-5">
                  <Button asChild variant="outline" className="h-12 rounded-full"><a href={contact.portalHref} target="_blank" rel="noreferrer">ورود دانش‌پذیران</a></Button>
                  <SheetClose asChild><Button asChild className="h-12 rounded-full bg-[#0a5a3c] text-white"><Link href="/contact">دریافت مشاوره</Link></Button></SheetClose>
                </div>
              </SheetContent>
            </Sheet>
          </div>
        </div>
      </header>
    </>
  );
}