import Link from "next/link";
import { getSiteSettings } from "@/lib/api";
import Container from "@/components/ui/Container";
import { ButtonLink } from "@/components/ui/Button";
import SocialIcon from "@/components/ui/SocialIcon";
import MobileNav from "./MobileNav";
import NavItem from "./NavItem";

export default async function Header() {
  const site = await getSiteSettings();

  return (
    <header className="sticky top-0 z-50 bg-white/95 backdrop-blur border-b border-neutral-200">
      {/* Top contact strip */}
      <div className="hidden lg:block border-b border-neutral-100">
        <Container className="flex items-center justify-between py-2 text-xs text-neutral-500">
          <span>{site.address}</span>
          <div className="flex items-center gap-6">
            <a href={`tel:${site.phone}`} className="hover:text-neutral-900">{site.phone}</a>
            <a href={`mailto:${site.email}`} className="hover:text-neutral-900">{site.email}</a>
            <div className="flex items-center gap-3">
              {site.social.map((s) => (
                <a
                  key={s.platform}
                  href={s.url}
                  target="_blank"
                  rel="noreferrer"
                  className="hover:text-accent-500"
                  aria-label={s.platform}
                >
                  <SocialIcon platform={s.platform} className="h-3.5 w-3.5" />
                </a>
              ))}
            </div>
          </div>
        </Container>
      </div>

      <Container className="flex items-center justify-between py-4">
        <Link href="/" className="font-display text-2xl tracking-wide text-neutral-900">
          LAR<span className="text-accent-500">CARE</span>
          <span className="block text-[10px] tracking-[0.4em] text-neutral-400 font-body">SERVICES</span>
        </Link>

        <nav className="hidden lg:flex items-center gap-4 xl:gap-8">
          {site.primaryNav.map((item) => (
            <NavItem key={item.href} item={item} />
          ))}
        </nav>

        <div className="hidden lg:block">
          <ButtonLink href="/about-us/contact-us">Contact Us</ButtonLink>
        </div>

        <MobileNav nav={site.primaryNav} />
      </Container>
    </header>
  );
}