import Image from "next/image";
import Link from "next/link";
import { siteConfig } from "@/lib/site-config";
import { Mail, MapPin, Phone } from "lucide-react";
import { LinkedinIcon, InstagramIcon, TwitterIcon } from "@/components/social-icons";

export function Footer() {
  return (
    <footer className="mt-24 border-t border-[var(--border)] bg-[var(--navy)] text-white">
      <div className="mx-auto grid max-w-7xl gap-10 px-6 py-14 md:grid-cols-4">
        <div>
          <div className="flex items-center gap-3">
            <Image
              src="/logo.png"
              alt={siteConfig.name}
              width={48}
              height={48}
              className="brightness-0 invert"
            />
            <span className="text-lg font-semibold">{siteConfig.name}</span>
          </div>
          <p className="mt-4 text-sm leading-relaxed text-white/70">
            {siteConfig.tagline}
          </p>
        </div>

        <div>
          <h3 className="text-sm font-semibold uppercase tracking-wider text-white/80">
            Hizmetler
          </h3>
          <ul className="mt-4 space-y-2 text-sm text-white/70">
            {siteConfig.fallbackServices.slice(0, 5).map((s) => (
              <li key={s.slug}>
                <Link href={`/hizmetler#${s.slug}`} className="hover:text-white">
                  {s.title}
                </Link>
              </li>
            ))}
          </ul>
        </div>

        <div>
          <h3 className="text-sm font-semibold uppercase tracking-wider text-white/80">
            İletişim
          </h3>
          <ul className="mt-4 space-y-3 text-sm text-white/70">
            <li className="flex items-start gap-2">
              <MapPin className="mt-0.5 size-4 shrink-0" />
              <span>{siteConfig.contact.address}</span>
            </li>
            <li className="flex items-center gap-2">
              <Phone className="size-4 shrink-0" />
              <a href={`tel:${siteConfig.contact.phoneRaw}`} className="hover:text-white">
                {siteConfig.contact.phone}
              </a>
            </li>
            <li className="flex items-center gap-2">
              <Mail className="size-4 shrink-0" />
              <a href={`mailto:${siteConfig.contact.email}`} className="hover:text-white">
                {siteConfig.contact.email}
              </a>
            </li>
          </ul>
        </div>

        <div>
          <h3 className="text-sm font-semibold uppercase tracking-wider text-white/80">
            Sosyal Medya
          </h3>
          <div className="mt-4 flex gap-3">
            <a
              href={siteConfig.social.linkedin}
              aria-label="LinkedIn"
              className="flex size-9 items-center justify-center rounded-full bg-white/10 transition hover:bg-white/20"
            >
              <LinkedinIcon className="size-4" />
            </a>
            <a
              href={siteConfig.social.instagram}
              aria-label="Instagram"
              className="flex size-9 items-center justify-center rounded-full bg-white/10 transition hover:bg-white/20"
            >
              <InstagramIcon className="size-4" />
            </a>
            <a
              href={siteConfig.social.twitter}
              aria-label="Twitter"
              className="flex size-9 items-center justify-center rounded-full bg-white/10 transition hover:bg-white/20"
            >
              <TwitterIcon className="size-4" />
            </a>
          </div>
        </div>
      </div>

      <div className="border-t border-white/10">
        <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-2 px-6 py-5 text-xs text-white/60 md:flex-row">
          <p>© {new Date().getFullYear()} {siteConfig.name}. Tüm hakları saklıdır.</p>
          <p>Kocaeli, Türkiye</p>
        </div>
      </div>
    </footer>
  );
}