salmakisyatch/app/components/Footer.tsx

import Link from 'next/link';

export default function Footer() {
  return (
    <footer className="w-full bg-[#111111] text-white pt-20  px-6 md:px-12 border-t border-white/5 flex flex-col items-center">
      <div className="w-full max-w-[1440px]   flex flex-col items-center">

        {/* Top Section: Brand & Heritage */}
        <div className="text-center mb-16">
          <h2 className="text-4xl md:text-5xl font-headline tracking-[0.3em] text-gold mb-4 uppercase">SALMAKIS</h2>
          <p className="font-label text-xs tracking-[0.3em] text-white/60 mb-8 uppercase italic">A Heritage of Excellence Since 1980.</p>

          <div className="flex flex-col gap-2 font-body text-sm text-white/80 tracking-wide">
            <p>+90 252 316 65 06</p>
            <p>08:00 - 20:00</p>
            <p className="text-white/40">salmakis@salmakis.com.tr</p>
          </div>
        </div>

        {/* Middle Section: 3-Column Entities */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-12 md:gap-8 lg:gap-24 w-full max-w-5xl mx-auto mb-20 text-center justify-items-center">

          {/* Salmakis Resort */}
          <div className="flex flex-col items-center">
            <h3 className="font-headline text-xl text-gold mb-6 tracking-wider">Salmakis Resort</h3>
            <div className="flex flex-col gap-3 font-body text-xs text-white/60 leading-relaxed uppercase tracking-wider">
              <p>Bardakci Koyu<br />BODRUM/MUĞLA/TURKEY</p>
              <div className="flex flex-col gap-1 mt-2">
                <p>+90 252 316 65 06</p>
                <p>+90 252 316 65 07</p>
                <p>+90 252 316 65 11</p>
              </div>
              <p className="text-white/30 mt-2 lowercase">salmakis@salmakis.com.tr</p>
            </div>
          </div>

          {/* Salmakis Villas */}
          <div className="flex flex-col items-center">
            <h3 className="font-headline text-xl text-gold mb-6 tracking-wider">Salmakis Villas</h3>
            <div className="flex flex-col gap-3 font-body text-xs text-white/60 leading-relaxed uppercase tracking-wider">
              <p>Bademlik Mevkii<br />Kume Evleri No 24<br />Bodrum/MUGLA/TURKEY</p>
              <div className="flex flex-col gap-1 mt-2">
                <p>+90 252 316 27 38</p>
                <p>+90 252 316 28 77</p>
                <p>+90 532 731 78 04</p>
                <p>+90 252 316 27 37</p>
              </div>
              <p className="text-white/30 mt-2 lowercase">info@salmakisvillas.com</p>
            </div>
          </div>

          {/* Salmakis Yachting */}
          <div className="flex flex-col items-center">
            <h3 className="font-headline text-xl text-gold mb-6 tracking-wider">Salmakis Yachting</h3>
            <div className="flex flex-col gap-3 font-body text-xs text-white/60 leading-relaxed uppercase tracking-wider">
              <p>Kumbahce Mah. Icmeler Cad.<br />No 28/1<br />BODRUM/MUGLA/TURKEY</p>
              <div className="flex flex-col gap-1 mt-2">
                <p>+90 252 316 27 38</p>
                <p>+90 252 316 28 77</p>
                <p>+90 252 316 27 37</p>
              </div>
              <p className="text-white/30 mt-2 lowercase">info@salmakisyachting.com</p>
            </div>
          </div>

        </div>

        {/* Social Follow Bar */}
        <div className="w-full flex justify-end items-center gap-6 mb-6 px-4">
          <span className="font-label text-xs tracking-widest text-white uppercase font-medium">FOLLOW US</span>
          <div className="flex items-center gap-4 text-white">
            <a href="#" className="hover:text-gold transition-colors">
              {/* Instagram representation */}
              <span className="material-symbols-outlined !text-2xl">photo_camera</span>
            </a>
            <a href="#" className="hover:text-gold transition-colors font-bold text-xl px-1">
              f
            </a>
            <a href="#" className="hover:text-gold transition-colors">
              <span className="material-symbols-outlined !text-2xl">play_circle</span>
            </a>
            <a href="#" className="hover:text-gold transition-colors font-bold text-xl px-1">
              in
            </a>
          </div>
        </div>

        {/* Divider */}
        <div className="w-full h-px bg-white/10 mb-6"></div>

        {/* Bottom Legal Bar */}
        <div className="w-full flex flex-col md:flex-row justify-between items-center gap-6 px-4 pb-12">
          <div className="flex flex-wrap items-center justify-center md:justify-start gap-6 font-label text-[10px] tracking-widest text-white/80 uppercase">
            <Link href="/legal" className="hover:text-gold transition-colors">LEGAL & PRIVACY</Link>
            <Link href="/cookies" className="hover:text-gold transition-colors">COOKIES</Link>
            <Link href="/sitemap" className="hover:text-gold transition-colors">SITEMAP</Link>
            <button className="hover:text-gold transition-colors uppercase tracking-widest text-[10px] cursor-pointer">COOKIES SETTINGS</button>
          </div>

          <div className="flex flex-col items-center md:items-end gap-2">
            <p className="font-label text-[10px] tracking-widest text-white/80 uppercase">
              © SALMAKIS 2026 ALL RIGHTS RESERVED
            </p>
            <a
              href="https://ayris.tech"
              target="_blank"
              rel="noopener noreferrer"
              className="group flex items-center gap-2"
            >
              <span className="font-label text-[9px] tracking-widest text-white/30 uppercase">Created by</span>
              <span className="font-headline text-[10px] tracking-[0.2em] text-white/60 font-bold border-b border-white/20 pb-0.5 group-hover:text-gold group-hover:border-gold transition-all">AYRISTECH</span>
            </a>
          </div>
        </div>

      </div>
    </footer>
  );
}