"use client";

import Link from "next/link";
import { ChevronDown, Menu, Phone, ShieldCheck, X } from "lucide-react";
import { useState } from "react";
import { products } from "@/lib/products";
import { ProductIcon } from "./ProductIcon";

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

  return (
    <header className="site-header">
      <div className="header-shell">
        <Link href="/" className="brand" aria-label="Güvence Sigorta ana sayfa">
          <span className="brand-mark"><ShieldCheck size={24} strokeWidth={2.2} /></span>
          <span>Güvence<span>Sigorta</span></span>
        </Link>

        <nav className="desktop-nav" aria-label="Ana menü">
          <Link href="/">Ana Sayfa</Link>
          <div className="nav-dropdown">
            <Link href="/urunler" className="nav-dropdown-trigger">Ürünler <ChevronDown size={15} /></Link>
            <div className="nav-dropdown-panel">
              <div className="dropdown-heading">
                <span>Tüm sigorta çözümleri</span>
                <Link href="/urunler">Tümünü gör →</Link>
              </div>
              <div className="dropdown-products">
                {products.slice(0, 8).map((product) => (
                  <Link key={product.slug} href={`/urunler/${product.slug}`}>
                    <span className="mini-icon"><ProductIcon slug={product.slug} size={18} /></span>
                    <span>{product.shortName}<small>{product.category}</small></span>
                  </Link>
                ))}
              </div>
            </div>
          </div>
          <Link href="/hasar">Hasar Anında</Link>
          <Link href="/hakkimizda">Hakkımızda</Link>
          <Link href="/iletisim">İletişim</Link>
        </nav>

        <div className="header-actions">
          <a className="header-phone" href="tel:+902125554433" aria-label="Bizi arayın">
            <Phone size={17} /><span>0212 555 44 33</span>
          </a>
          <Link className="button button-small" href="/teklif">Teklif Al</Link>
          <button className="mobile-menu-button" onClick={() => setMobileOpen((value) => !value)} aria-expanded={mobileOpen} aria-label="Menüyü aç veya kapat">
            {mobileOpen ? <X /> : <Menu />}
          </button>
        </div>
      </div>

      {mobileOpen && (
        <nav className="mobile-nav" aria-label="Mobil menü">
          <Link onClick={() => setMobileOpen(false)} href="/">Ana Sayfa</Link>
          <Link onClick={() => setMobileOpen(false)} href="/urunler">Ürünler</Link>
          <Link onClick={() => setMobileOpen(false)} href="/hasar">Hasar Anında</Link>
          <Link onClick={() => setMobileOpen(false)} href="/hakkimizda">Hakkımızda</Link>
          <Link onClick={() => setMobileOpen(false)} href="/iletisim">İletişim</Link>
          <Link onClick={() => setMobileOpen(false)} href="/teklif" className="button">Hemen Teklif Al</Link>
        </nav>
      )}
    </header>
  );
}