kovakyazilim/components/header.tsx

import Image from "next/image";
import Link from "next/link";
import { ChevronDown, Phone } from "lucide-react";
import { getSiteSettings, listServices } from "@/lib/data";
import { siteConfig } from "@/lib/site-config";
import { HeaderScrollEffect } from "@/components/header-scroll";

export async function Header() {
  const [settings, services] = await Promise.all([
    getSiteSettings(),
    listServices(),
  ]);
  const phone = settings?.contact_phone ?? siteConfig.contact.phone;
  const phoneRaw = settings?.contact_phone_raw ?? siteConfig.contact.phoneRaw;

  // Mega menu groups
  const webServices = services.filter((s) =>
    ["web-tasarim", "e-ticaret", "mobil-uygulama", "yazilim-gelistirme", "crm-sistemleri"].includes(s.slug),
  );
  const marketingServices = services.filter((s) =>
    ["seo-dijital-pazarlama", "sosyal-medya-yonetimi", "dijital-reklam"].includes(s.slug),
  );

  return (
    <>
      <HeaderScrollEffect />
      <div className="sticky top-0 z-50 w-full" id="floating-header-wrap">
        <div id="header-pill-wrap" className="transition-all duration-300 ease-out">
          <header
            id="site-header"
            className="mx-auto w-full border-b border-gray-100 bg-white/95 backdrop-blur-lg transition-all duration-300 ease-out"
          >
            <nav
              id="header-nav-bar"
              className="flex h-14 items-center justify-between px-6 transition-all duration-300 ease-out lg:grid lg:h-16 lg:grid-cols-[1fr_auto_1fr] lg:px-8"
            >
              {/* Col 1 — Logo */}
              <Link href="/" className="flex items-center gap-2.5">
                <Image
                  src="/logo.png"
                  alt={siteConfig.name}
                  width={40}
                  height={40}
                  priority
                  className="h-9 w-9 object-contain"
                />
                <span className="hidden text-sm font-semibold tracking-tight text-[var(--navy)] sm:block">
                  {siteConfig.name}
                </span>
              </Link>

              {/* Col 2 — Desktop nav */}
              <div className="hidden items-center gap-0.5 lg:flex">
                <Link
                  href="/"
                  className="inline-flex h-9 items-center justify-center whitespace-nowrap rounded-lg px-3.5 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
                >
                  Anasayfa
                </Link>

                {/* Hizmetler mega menu */}
                <div className="group relative">
                  <button
                    type="button"
                    className="inline-flex h-9 items-center justify-center gap-1 whitespace-nowrap rounded-lg px-3.5 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
                  >
                    Hizmetler
                    <ChevronDown className="size-3 transition-transform duration-200 group-hover:rotate-180" />
                  </button>
                  <div className="pointer-events-none invisible absolute left-1/2 top-full z-50 w-[480px] -translate-x-1/2 pt-2 opacity-0 transition-all duration-150 ease-out group-hover:pointer-events-auto group-hover:visible group-hover:opacity-100">
                    <div className="translate-y-1 rounded-2xl border border-gray-100 bg-white p-4 shadow-xl transition-transform duration-150 group-hover:translate-y-0">
                      <div className="grid grid-cols-2 gap-x-3">
                        <div>
                          <p className="px-3 pb-1.5 text-[10px] font-semibold uppercase tracking-wider text-gray-400">
                            Web & Yazılım
                          </p>
                          {webServices.map((s) => (
                            <Link
                              key={s.slug}
                              href={`/hizmetler/${s.slug}`}
                              className="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm text-gray-700 transition-colors hover:bg-blue-50 hover:text-[var(--navy)]"
                            >
                              {s.title}
                            </Link>
                          ))}
                        </div>
                        <div>
                          <p className="px-3 pb-1.5 text-[10px] font-semibold uppercase tracking-wider text-gray-400">
                            Dijital Pazarlama
                          </p>
                          {marketingServices.map((s) => (
                            <Link
                              key={s.slug}
                              href={`/hizmetler/${s.slug}`}
                              className="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm text-gray-700 transition-colors hover:bg-blue-50 hover:text-[var(--navy)]"
                            >
                              {s.title}
                            </Link>
                          ))}
                        </div>
                      </div>
                      <div className="mt-3 border-t border-gray-100 pt-3">
                        <Link
                          href="/hizmetler"
                          className="block rounded-xl px-3 py-2 text-center text-xs font-semibold text-[var(--navy)] hover:bg-blue-50"
                        >
                          Tüm hizmetleri gör →
                        </Link>
                      </div>
                    </div>
                  </div>
                </div>

                <Link
                  href="/projeler"
                  className="inline-flex h-9 items-center justify-center whitespace-nowrap rounded-lg px-3.5 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
                >
                  Projeler
                </Link>
                <Link
                  href="/blog"
                  className="inline-flex h-9 items-center justify-center whitespace-nowrap rounded-lg px-3.5 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
                >
                  Blog
                </Link>
                <Link
                  href="/hakkimizda"
                  className="inline-flex h-9 items-center justify-center whitespace-nowrap rounded-lg px-3.5 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
                >
                  Hakkımızda
                </Link>
                <Link
                  href="/iletisim"
                  className="inline-flex h-9 items-center justify-center whitespace-nowrap rounded-lg px-3.5 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
                >
                  İletişim
                </Link>
              </div>

              {/* Col 3 — CTA */}
              <div className="flex items-center justify-end gap-2">
                <a
                  href={`tel:${phoneRaw}`}
                  className="hidden lg:inline-flex h-9 items-center gap-1.5 rounded-lg px-3 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
                >
                  <Phone className="size-3.5" />
                  <span className="hidden xl:inline">{phone}</span>
                </a>
                <Link
                  href="/iletisim"
                  className="inline-flex h-9 items-center justify-center rounded-lg bg-[var(--navy)] px-4 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-[var(--navy-700)]"
                >
                  Ücretsiz Teklif
                </Link>
              </div>
            </nav>
          </header>
        </div>
      </div>
    </>
  );
}