import Link from "next/link";
import { MapPin, Phone, Mail } from "lucide-react";

const quickLinks = [
  { name: "Ana Sayfa",   href: "/"           },
  { name: "Odalar",      href: "/odalar"     },
  { name: "Aktiviteler", href: "/aktiviteler"},
  { name: "Restoran",    href: "/restoran"   },
  { name: "Etkinlikler", href: "/etkinlikler"},
  { name: "Galeri",      href: "/galeri"     },
  { name: "Hakkımızda",  href: "/hakkimizda" },
];

function InstagramIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect width="20" height="20" x="2" y="2" rx="5" ry="5"/>
      <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
      <line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/>
    </svg>
  );
}

function FacebookIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
    </svg>
  );
}

function YoutubeIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17"/>
      <path d="m10 15 5-3-5-3z"/>
    </svg>
  );
}

export default function Footer() {
  return (
    <footer className="bg-dark text-white">
      {/* Top accent line */}
      <div className="h-px bg-gradient-to-r from-transparent via-accent to-transparent opacity-40" />

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-16 pb-10">
        <div className="grid grid-cols-1 md:grid-cols-12 gap-12 mb-12">

          {/* Brand */}
          <div className="md:col-span-4">
            <Link href="/" className="inline-block mb-5">
              <div>
                <span className="font-serif text-2xl font-bold tracking-[0.08em] text-white block">
                  KITE BEACH
                </span>
                <span className="text-[9px] tracking-[0.3em] text-white/30 uppercase">Akyaka</span>
              </div>
            </Link>
            <p className="text-white/40 text-[13px] leading-relaxed mb-7 max-w-xs">
              Nehrin huzuru, denizin enerjisi — tek bir noktada. Akyaka'nın kalbinde butik bir kaçış noktası.
            </p>
            {/* Social icons */}
            <div className="flex gap-3">
              {[
                { icon: <InstagramIcon />, href: "#", label: "Instagram" },
                { icon: <FacebookIcon />,  href: "#", label: "Facebook"  },
                { icon: <YoutubeIcon />,   href: "#", label: "YouTube"   },
              ].map(({ icon, href, label }) => (
                <a
                  key={label}
                  href={href}
                  aria-label={label}
                  className="w-9 h-9 rounded-full border border-white/10 flex items-center justify-center text-white/40 hover:text-accent hover:border-accent/40 transition-all duration-300"
                >
                  {icon}
                </a>
              ))}
            </div>
          </div>

          {/* Quick Links */}
          <div className="md:col-span-3">
            <h3 className="text-[11px] font-bold tracking-[0.25em] text-white/30 uppercase mb-6">
              Sayfalar
            </h3>
            <ul className="space-y-3">
              {quickLinks.map((link) => (
                <li key={link.name}>
                  <Link
                    href={link.href}
                    className="text-[13px] text-white/50 hover:text-white transition-colors"
                  >
                    {link.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Contact */}
          <div className="md:col-span-5">
            <h3 className="text-[11px] font-bold tracking-[0.25em] text-white/30 uppercase mb-6">
              İletişim
            </h3>
            <ul className="space-y-5">
              <li className="flex items-start gap-3">
                <div className="mt-0.5 w-7 h-7 rounded-full bg-white/5 flex items-center justify-center flex-shrink-0">
                  <MapPin size={13} className="text-accent" />
                </div>
                <span className="text-white/50 text-[13px] leading-relaxed">
                  Akyaka Mahallesi, Akçapınar Mevkii<br />Muğla, Türkiye
                </span>
              </li>
              <li className="flex items-center gap-3">
                <div className="w-7 h-7 rounded-full bg-white/5 flex items-center justify-center flex-shrink-0">
                  <Phone size={13} className="text-accent" />
                </div>
                <a
                  href="tel:+905330816181"
                  className="text-white/50 hover:text-white transition-colors text-[13px]"
                >
                  +90 533 081 6181
                </a>
              </li>
              <li className="flex items-center gap-3">
                <div className="w-7 h-7 rounded-full bg-white/5 flex items-center justify-center flex-shrink-0">
                  <Mail size={13} className="text-accent" />
                </div>
                <a
                  href="mailto:info@kitebeachakyaka.com.tr"
                  className="text-white/50 hover:text-white transition-colors text-[13px]"
                >
                  info@kitebeachakyaka.com.tr
                </a>
              </li>
            </ul>
          </div>

        </div>

        {/* Bottom bar */}
        <div className="border-t border-white/8 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
          <p className="text-white/25 text-xs">
            © 2026 Kite Beach Akyaka. Tüm hakları saklıdır.
          </p>
          <div className="flex gap-6">
            {["KVKK", "Gizlilik Politikası", "Çerez Politikası"].map((item) => (
              <Link
                key={item}
                href="#"
                className="text-white/25 hover:text-white/60 transition-colors text-xs"
              >
                {item}
              </Link>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}