ayrisapart/components/Footer.tsx

'use client'

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

export default function Footer({ lang, dict }: { lang: string, dict: any }) {
   return (
      <footer className="bg-[#141210] text-white pt-32 mt-48 pb-48 px-8 md:px-20 font-sans">
         <div className="max-w-[1600px] mx-auto   ">

            {/* ROW 1: BRAND & CONTACT */}
            <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-20 mt-48">
               <h2 className="text-7xl md:text-[100px] font-serif leading-none tracking-tight text-white uppercase">
                  AYRIS APART
               </h2>
               <div className="space-y-4 pt-10 md:pt-0">
                  <div className="flex items-center justify-end space-x-3 text-sm font-medium tracking-widest opacity-80">
                     <Phone size={15} className="opacity-60" /> <span>+90 543 231 87 13</span>
                  </div>
                  <div className="flex items-center justify-end space-x-3 text-sm font-medium tracking-widest opacity-80">
                     <Mail size={15} className="opacity-60" /> <span>hello@ayrisapart.com</span>
                  </div>
               </div>
            </div>

            {/* THIN SEPARATOR LINE */}
            <div className="w-full h-px bg-white/10 mb-20" />

            {/* ROW 2: MAIN GRID */}
            <div className="grid grid-cols-1 lg:grid-cols-12 gap-y-16 lg:gap-x-24 mb-32">

               {/* LEFT CONTENT (CTA) */}
               <div className="lg:col-span-5 space-y-10 max-w-sm">
                  <p className="text-white/70 text-[17px] leading-relaxed">
                     {lang === 'tr'
                        ? "Konaklamanızı bugün ayırtın ve Ören kıyılarında deniz kenarı lüksünü, nefes kesen manzaraları ve unutulmaz anları keşfedin."
                        : "Book your stay today and discover seaside luxury, breathtaking views, and unforgettable moments on the shores of Oren."}
                  </p>
                  <Link
                     href={`/${lang}/reservation`}
                     className="inline-flex items-center space-x-2 border-b border-white/40 pb-1 group hover:border-white transition-all"
                  >
                     <span className="text-[#C88C4B] text-xl transform group-hover:translate-x-1 transition-transform">↳</span>
                     <span className="text-sm font-bold tracking-[0.3em] uppercase">{dict.footer.book}</span>
                  </Link>
               </div>

               {/* RIGHT LINKS */}
               <div className="lg:col-span-7">
                  <div className="grid grid-cols-2 md:grid-cols-4 gap-12">
                     {/* EXPLORE */}
                     <div className="space-y-8">
                        <h4 className="text-[10px] font-bold tracking-[0.4em] opacity-40 uppercase">EXPLORE</h4>
                        <ul className="space-y-4 text-sm font-medium opacity-60 uppercase tracking-widest">
                           <li><Link href={`/${lang}`} className="hover:opacity-100 transition-opacity">{dict.nav.home}</Link></li>
                           <li><Link href={`/${lang}/about`} className="hover:opacity-100 transition-opacity">{dict.nav.about}</Link></li>
                           <li><Link href={`/${lang}/news`} className="hover:opacity-100 transition-opacity">{dict.nav.news}</Link></li>
                           <li><Link href={`/${lang}/suites`} className="hover:opacity-100 transition-opacity">{dict.nav.suites}</Link></li>
                        </ul>
                     </div>

                     {/* OTHERS */}
                     <div className="space-y-8">
                        <h4 className="text-[10px] font-bold tracking-[0.4em] opacity-40 uppercase">OTHERS</h4>
                        <ul className="space-y-4 text-sm font-medium opacity-60 uppercase tracking-widest">
                           <li><Link href={`/${lang}/services`} className="hover:opacity-100 transition-opacity">Services</Link></li>
                           <li><Link href={`/${lang}/activities`} className="hover:opacity-100 transition-opacity">Activities</Link></li>
                           <li><Link href={`/${lang}/gallery`} className="hover:opacity-100 transition-opacity">Gallery</Link></li>
                           <li><Link href={`/${lang}/contact`} className="hover:opacity-100 transition-opacity">{dict.nav.contact}</Link></li>
                        </ul>
                     </div>

                     {/* UTILITY */}
                     <div className="space-y-8">
                        <h4 className="text-[10px] font-bold tracking-[0.4em] opacity-40 uppercase">UTILITY</h4>
                        <ul className="space-y-4 text-sm font-medium opacity-60 uppercase tracking-widest">
                           <li><Link href={`/${lang}/license`} className="hover:opacity-100 transition-opacity">License</Link></li>
                           <li><Link href={`/${lang}/404`} className="hover:opacity-100 transition-opacity">404</Link></li>
                        </ul>
                     </div>

                     {/* SOCIALS */}
                     <div className="space-y-8">
                        <h4 className="text-[10px] font-bold tracking-[0.4em] opacity-40 uppercase">SOCIALS</h4>
                        <ul className="space-y-4 text-sm font-medium opacity-60 uppercase tracking-widest">
                           <li><a href="#" className="hover:opacity-100 transition-opacity">Instagram</a></li>
                           <li><a href="#" className="hover:opacity-100 transition-opacity">Facebook</a></li>
                           <li><a href="#" className="hover:opacity-100 transition-opacity">Twitter</a></li>
                        </ul>
                     </div>
                  </div>
               </div>
            </div>

            {/* ROW 3: FINAL BOTTOM WITH CENTER ICON SPLIT */}
            <div className="relative pt-12 flex flex-col md:flex-row justify-between items-center bg-[#141210]">
               {/* The split line effect */}
               <div className="absolute top-0 left-0 w-[45%] h-px bg-white/10 hidden lg:block" />
               <div className="absolute top-0 right-0 w-[45%] h-px bg-white/10 hidden lg:block" />

               <div className="text-[10px] font-bold tracking-[0.3em] opacity-40 uppercase items-center flex">
                  COPYRIGHT © AYRIS APART
               </div>

               {/* Central Decorative Logo Image */}
               <div className="md:absolute md:left-1/2 md:-translate-x-1/2 md:-top-10 mb-8 md:mb-0">
                  <div className="relative w-24 h-24">
                     <Image 
                        src="/logo.png" 
                        alt="Ayris Apart Logo" 
                        fill 
                        className="object-contain filter brightness-0 invert" 
                     />
                  </div>
               </div>

               <div className="text-[10px] font-bold tracking-[0.3em] opacity-40 uppercase md:mt-0">
                  CREATED BY <a href="https://ayris.dev" target="_blank" className="hover:text-white transition-opacity">AYRISTECH</a>
               </div>
            </div>

         </div>
      </footer>
   )
}