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

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({ lang = "tr" }: { lang?: string }) {
  const isEn = lang === "en";
  const quickLinks = isEn ? [
    { name: "Home",        href: "/en"           },
    { name: "Rooms",       href: "/en/odalar"    },
    { name: "Activities",  href: "/en/aktiviteler"},
    { name: "Restaurant",  href: "/en/restoran"  },
    { name: "Events",      href: "/en/etkinlikler"},
    { name: "Gallery",     href: "/en/galeri"    },
    { name: "About Us",    href: "/en/hakkimizda" },
  ] : [
    { name: "Ana Sayfa",   href: "/tr"           },
    { name: "Odalar",      href: "/tr/odalar"    },
    { name: "Aktiviteler", href: "/tr/aktiviteler"},
    { name: "Restoran",    href: "/tr/restoran"  },
    { name: "Etkinlikler", href: "/tr/etkinlikler"},
    { name: "Galeri",      href: "/tr/galeri"    },
    { name: "Hakkımızda",  href: "/tr/hakkimizda" },
  ];

  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={isEn ? "/en" : "/tr"} className="inline-block mb-5">
              <Image 
                src="/logo.png" 
                alt="Kite Beach Logo" 
                width={160} 
                height={55} 
                className="object-contain brightness-0 invert opacity-90 hover:opacity-100 transition-opacity" 
              />
            </Link>
            <p className="text-white/40 text-[13px] leading-relaxed mb-7 max-w-xs">
              {isEn 
                ? "The tranquility of the river, the energy of the sea — in one place. A boutique escape in the heart of Akyaka."
                : "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">
              {isEn ? "Pages" : "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">
              {isEn ? "Contact" : "İ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">
                  {isEn ? (
                    <>Akyaka District, Akcapinar Location<br />Mugla, Turkey</>
                  ) : (
                    <>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:+905445040310"
                  className="text-white/50 hover:text-white transition-colors text-[13px]"
                >
                  +90 544 504 03 10
                </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">
            {isEn ? "© 2026 Kite Beach Akyaka. All rights reserved." : "© 2026 Kite Beach Akyaka. Tüm hakları saklıdır."}
          </p>
          <div className="flex gap-6">
            {[
              { name: "KVKK", href: "/kvkk" }, 
              { name: isEn ? "Privacy Policy" : "Gizlilik Politikası", href: "/gizlilik" }, 
              { name: isEn ? "Cookie Policy" : "Çerez Politikası", href: "/cerez" }
            ].map((item) => (
              <Link
                key={item.name}
                href={isEn ? `/en${item.href}` : `/tr${item.href}`}
                className="text-white/25 hover:text-white/60 transition-colors text-xs"
              >
                {item.name}
              </Link>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}