'use client';

import { Link } from '@/i18n/routing';

export default function Footer() {
  return (
    <footer className="bg-aegean-dark text-bone py-20 px-6 font-sans">
      <div className="max-w-7xl mx-auto">
        {/* Top Centered Section */}
        <div className="text-center mb-20">
          <h2 className="text-5xl md:text-7xl font-serif tracking-[0.2em] text-sand mb-4">SALMAKIS</h2>
          <p className="text-[10px] tracking-[0.4em] uppercase opacity-60 mb-10">
            A Heritage of Excellence Since 1980.
          </p>
          
          <div className="space-y-2 text-sm opacity-80 font-medium">
            <p>+90 252 316 65 06</p>
            <p>08:00 - 20:00</p>
            <p>salmakis@salmakis.com.tr</p>
          </div>
        </div>

        {/* Three Columns Section */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-16 text-center mb-24">
          {/* Column 1: Resort */}
          <div className="space-y-6">
            <h3 className="text-xl font-serif text-sand tracking-wide">Salmakis Resort</h3>
            <div className="text-[10px] leading-relaxed tracking-widest uppercase opacity-60 space-y-1">
              <p>BARDAKÇI KOYU</p>
              <p>BODRUM/MUĞLA/TURKEY</p>
            </div>
            <div className="text-xs space-y-1 opacity-80">
              <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-[10px] opacity-40">salmakis@salmakis.com.tr</p>
          </div>

          {/* Column 2: Villas */}
          <div className="space-y-6">
            <h3 className="text-xl font-serif text-sand tracking-wide">Salmakis Villas</h3>
            <div className="text-[10px] leading-relaxed tracking-widest uppercase opacity-60 space-y-1">
              <p>BADEMLİK MEVKİİ</p>
              <p>KÜME EVLERİ NO 24</p>
              <p>BODRUM/MUĞLA/TURKEY</p>
            </div>
            <div className="text-xs space-y-1 opacity-80">
              <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-[10px] opacity-40">info@salmakisvillas.com</p>
          </div>

          {/* Column 3: Yachting */}
          <div className="space-y-6">
            <h3 className="text-xl font-serif text-sand tracking-wide">Salmakis Yachting</h3>
            <div className="text-[10px] leading-relaxed tracking-widest uppercase opacity-60 space-y-1">
              <p>KUMBAHÇE MAH. İÇMELER CAD.</p>
              <p>NO 28/1</p>
              <p>BODRUM/MUĞLA/TURKEY</p>
            </div>
            <div className="text-xs space-y-1 opacity-80">
              <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-[10px] opacity-40">info@salmakisyachting.com</p>
          </div>
        </div>

        {/* Socials Section */}
        <div className="flex flex-col md:flex-row justify-end items-center gap-6 mb-12 border-t border-white/5 pt-12">
          <span className="text-[10px] font-bold tracking-[0.3em] uppercase opacity-60">FOLLOW US</span>
          <div className="flex items-center space-x-6">
            {/* Instagram */}
            <svg className="w-5 h-5 opacity-80 hover:opacity-100 cursor-pointer transition-opacity" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
              <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
              <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
            </svg>
            {/* Facebook */}
            <svg className="w-5 h-5 opacity-80 hover:opacity-100 cursor-pointer transition-opacity" 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"></path>
            </svg>
            {/* Play/Video */}
            <svg className="w-5 h-5 opacity-80 hover:opacity-100 cursor-pointer transition-opacity" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="12" cy="12" r="10"></circle>
              <polygon points="10 8 16 12 10 16 10 8"></polygon>
            </svg>
            {/* LinkedIn */}
            <svg className="w-5 h-5 opacity-80 hover:opacity-100 cursor-pointer transition-opacity" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
              <rect x="2" y="9" width="4" height="12"></rect>
              <circle cx="4" cy="4" r="2"></circle>
            </svg>
          </div>
        </div>

        {/* Bottom Bar */}
        <div className="flex flex-col md:flex-row justify-between items-center gap-8 pt-12 border-t border-white/5">
          <div className="flex flex-wrap justify-center gap-8 text-[9px] font-bold tracking-[0.2em] uppercase opacity-50">
            <Link href="#" className="hover:opacity-100 transition-opacity">LEGAL & PRIVACY</Link>
            <Link href="#" className="hover:opacity-100 transition-opacity">COOKIES</Link>
            <Link href="#" className="hover:opacity-100 transition-opacity">SITEMAP</Link>
            <Link href="#" className="hover:opacity-100 transition-opacity">COOKIES SETTINGS</Link>
          </div>
          
          <div className="text-right space-y-2">
            <p className="text-[9px] font-bold tracking-[0.2em] uppercase opacity-40">
              © SALMAKIS 2026 ALL RIGHTS RESERVED
            </p>
            <p className="text-[9px] font-bold tracking-[0.2em] uppercase opacity-40">
              CREATED BY <span className="text-sand/80">AYRISTECH</span>
            </p>
          </div>
        </div>
      </div>
    </footer>
  );
}