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 — +90 554 376 51 03</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>bilgi@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">
                     {dict.footer.desc}
                  </p>
                  <Link
                     href={`/${lang}/contact`}
                     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-3 gap-12">
                     {/* EXPLORE */}
                     <div className="space-y-8">
                        <h4 className="text-[10px] font-bold tracking-[0.4em] opacity-40 uppercase">{dict.footer.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}/suites`} className="hover:opacity-100 transition-opacity">{dict.nav.suites}</Link></li>
                           <li><Link href={`/${lang}/blog`} className="hover:opacity-100 transition-opacity">{dict.nav.news}</Link></li>
                           <li><Link href={`/${lang}/contact`} className="hover:opacity-100 transition-opacity">{dict.nav.contact}</Link></li>
                        </ul>
                     </div>

                     {/* CONTACT */}
                     <div className="space-y-8">
                        <h4 className="text-[10px] font-bold tracking-[0.4em] opacity-40 uppercase">{dict.contact.title}</h4>
                        <ul className="space-y-4 text-sm font-medium opacity-60 tracking-widest">
                           <li>+90 543 231 87 13</li>
                           <li>+90 554 376 51 03</li>
                           <li>bilgi@ayrisapart.com</li>
                           <li className="leading-relaxed">{dict.contact.visit.d}</li>
                        </ul>
                     </div>

                     {/* SOCIALS */}
                     <div className="space-y-8">
                        <h4 className="text-[10px] font-bold tracking-[0.4em] opacity-40 uppercase">{dict.footer.socials}</h4>
                        <ul className="space-y-4 text-sm font-medium opacity-60 uppercase tracking-widest">
                           <li><a href="https://instagram.com/ayrisapart" target="_blank" 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">WhatsApp</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
                        sizes="200px"
                        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>
   )
}