"use client";

import Link from "next/link";
import { resortData } from "@/src/data/resort";

export default function Footer() {
  return (
    <footer className="bg-[#EAE5D8] pt-24 pb-8 px-6 overflow-hidden border-t border-black/5">
      <div className="max-w-7xl mx-auto">
        {/* Main Footer Content */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12 mb-20">
          
          {/* Column 1: Brand & Newsletter */}
          <div className="lg:col-span-1 space-y-8">
            <h2 className="text-3xl font-serif text-gray-900 tracking-tighter">SALMAKIS</h2>
            
            <div className="space-y-4">
              <div className="relative group">
                <input 
                  type="email" 
                  placeholder="E-Posta Adresiniz"
                  className="w-full bg-white border-none py-4 px-6 pr-32 text-xs tracking-widest outline-none focus:ring-1 focus:ring-gold transition-all"
                />
                <button className="absolute right-1 top-1 bottom-1 bg-[#C59D5F] text-white px-6 text-[10px] font-bold tracking-widest hover:bg-gold transition-all">
                  ABONE OL
                </button>
              </div>
              
              <label className="flex items-center gap-3 cursor-pointer group">
                <input type="checkbox" className="w-3 h-3 accent-gold border-gray-300" />
                <span className="text-[10px] text-gray-400 font-light tracking-wider group-hover:text-gray-600 transition-colors">
                  Kişisel verilerimin işlenmesini kabul ediyorum.
                </span>
              </label>
            </div>

            <div className="flex gap-4 pt-4">
              {resortData.social.map((social) => (
                <Link 
                  key={social.platform} 
                  href={social.url}
                  className="text-gray-900 hover:text-gold transition-colors text-lg"
                >
                  <i className={`fab fa-${social.platform.toLowerCase()}`}></i>
                </Link>
              ))}
            </div>
          </div>

          {/* Column 2: Salmakis */}
          <div className="space-y-6">
            <h4 className="text-[10px] font-bold tracking-[0.3em] text-gray-400 uppercase">SALMAKIS</h4>
            <ul className="space-y-3">
              {["Doğada.", "Sofrada.", "Odalarda.", "Bizimle."].map((item) => (
                <li key={item}>
                  <Link href="#" className="text-sm font-light text-gray-600 hover:text-gold transition-colors">{item}</Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Column 3: Sayfalar */}
          <div className="space-y-6">
            <h4 className="text-[10px] font-bold tracking-[0.3em] text-gray-400 uppercase">SAYFALAR</h4>
            <ul className="space-y-3">
              {["Konaklama", "S.S.S", "Sürdürülebilirlik", "Resim Galerisi", "Fiyat Listesi"].map((item) => (
                <li key={item}>
                  <Link href="#" className="text-sm font-light text-gray-600 hover:text-gold transition-colors">{item}</Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Column 4: Yasal */}
          <div className="space-y-6">
            <h4 className="text-[10px] font-bold tracking-[0.3em] text-gray-400 uppercase">VERİ KORUMA</h4>
            <ul className="space-y-3">
              {["Künye", "Gizlilik Politikası", "KVKK", "Çerez Ayarları"].map((item) => (
                <li key={item}>
                  <Link href="#" className="text-sm font-light text-gray-600 hover:text-gold transition-colors">{item}</Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Column 5: İletişim */}
          <div className="space-y-6">
            <h4 className="text-[10px] font-bold tracking-[0.3em] text-gray-400 uppercase">İLETİŞİM</h4>
            <ul className="space-y-3">
              <li><Link href="#" className="text-sm font-light text-gray-600 hover:text-gold transition-colors">Oda Rezerve Et</Link></li>
              <li><Link href="#" className="text-sm font-light text-gray-600 hover:text-gold transition-colors">Yol Tarifi Al</Link></li>
              <li><Link href="#" className="text-sm font-light text-gray-600 hover:text-gold transition-colors">İletişime Geç</Link></li>
              <li className="pt-2 text-sm text-gray-900 font-medium tracking-wider">{resortData.contact.phone}</li>
              <li className="text-sm text-gray-400 font-light">{resortData.contact.email}</li>
            </ul>
          </div>
        </div>

        {/* Brand Logos / Partners */}
        <div className="border-t border-black/5 py-16 flex flex-wrap justify-center items-center gap-12 md:gap-24 opacity-40 grayscale hover:grayscale-0 transition-all duration-700">
           {/* Placeholder Logos reflecting the style in the image */}
           <div className="text-2xl font-serif tracking-widest text-[#1a2e1e]">BODRUM</div>
           <div className="text-sm font-bold tracking-[0.4em] text-[#1a2e1e]">EGE MUTFAĞI</div>
           <div className="text-xl font-serif text-[#1a2e1e] border border-current px-2">S</div>
           <div className="text-2xl font-sans font-extralight tracking-[0.3em] text-[#1a2e1e]">BLUE FLAG</div>
        </div>

        {/* Bottom copyright area */}
        <div className="relative pt-12 flex flex-col md:flex-row justify-between items-center gap-4 text-[9px] tracking-[0.2em] font-medium text-gray-400 uppercase">
          <div>© 2026 — HER HAKKI SAKLIDIR.</div>
          
          {/* Decorative Mountain Line (SVG) */}
          <div className="absolute bottom-[-20px] left-1/2 -translate-x-1/2 w-full max-w-4xl opacity-10 -z-10">
            <svg viewBox="0 0 1000 100" className="w-full">
              <path d="M0 100 L200 60 L400 90 L600 40 L800 70 L1000 50 L1000 100 Z" fill="none" stroke="currentColor" strokeWidth="1" />
            </svg>
          </div>
          
          <div>SALMAKIS RESORT & SPA</div>
        </div>
      </div>
    </footer>
  );
}