import Link from "next/link";
import Image from "next/image";

import { company, mainNavigation } from "@/lib/site-content";

export function SiteHeader() {
  return (
    <header className="sticky top-0 z-40 border-b border-alpine-100/70 bg-white/90 backdrop-blur">
      <div className="bg-alpine-900 text-alpine-50">
        <div className="container-shell flex flex-wrap items-center justify-between gap-2 py-2 text-xs sm:text-sm">
          <p>{company.region} | Persoenlicher IT- und Telekom-Service</p>
          <div className="flex flex-wrap gap-4">
            <a className="hover:text-copper-200" href={`tel:${company.phone.replace(/\s+/g, "")}`}>
              {company.phone}
            </a>
            <a className="hover:text-copper-200" href={`mailto:${company.email}`}>
              {company.email}
            </a>
          </div>
        </div>
      </div>

      <div className="container-shell flex flex-wrap items-center justify-between gap-6 py-4">
        <Link className="group inline-flex items-center gap-3" href="/">
          <Image
            alt="TeleNetSystems Logo"
            className="h-10 w-auto transition group-hover:scale-[1.02]"
            src="/assets/logo/logo-systems-9fd0db14.png"
            width={190}
            height={50}
            priority
          />
          <span className="font-heading text-sm uppercase tracking-[0.22em] text-alpine-700">
            Reutte | Tirol
          </span>
        </Link>

        <nav aria-label="Hauptnavigation" className="w-full overflow-x-auto pb-1 lg:w-auto lg:pb-0">
          <ul className="flex min-w-max items-center gap-2 text-sm font-semibold text-alpine-700">
            {mainNavigation.map((item) => (
              <li key={item.href}>
                <Link className="nav-chip" href={item.href}>
                  {item.label}
                </Link>
              </li>
            ))}
            <li>
              <Link className="btn-primary ml-2" href="/#kontakt">
                Beratung anfragen
              </Link>
            </li>
          </ul>
        </nav>
      </div>
    </header>
  );
}