moygroup/app/components/Footer.tsx

import Link from "next/link";
import Image from "next/image";
import { MapPin, Phone, Mail } from "lucide-react";
import { Locale } from "../dictionaries";

export default function Footer({ lang, dict }: { lang: Locale; dict: any }) {
  return (
    <footer className="bg-[var(--color-moy-dark)] text-white pt-16 pb-8 border-t border-gray-800">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12">
          {/* Brand */}
          <div className="space-y-4">
            <Image src="/logo.png" alt="Moy Group Logo" width={180} height={48} className="h-12 w-auto mb-6" />
            <p className="text-gray-400 text-sm leading-relaxed">
              {dict.description}
            </p>
            <div className="flex gap-4 pt-4">
              <a href="#" className="text-gray-400 hover:text-[var(--color-moy-gold)] transition-colors">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="20" height="20" x="2" y="2" rx="5" ry="5" /><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" /><line x1="17.5" x2="17.51" y1="6.5" y2="6.5" /></svg>
              </a>
              <a href="#" className="text-gray-400 hover:text-[var(--color-moy-gold)] transition-colors">
                <svg width="20" height="20" 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" /></svg>
              </a>
            </div>
          </div>

          {/* Quick Links */}
          <div>
            <h3 className="text-lg font-serif mb-6 text-white uppercase tracking-wider">{dict.quickLinks}</h3>
            <ul className="space-y-3">
              <li>
                <Link href={`/${lang}/kurumsal`} className="text-gray-400 hover:text-[var(--color-moy-gold)] transition-colors text-sm">{dict.about}</Link>
              </li>
              <li>
                <Link href={`/${lang}/galeri`} className="text-gray-400 hover:text-[var(--color-moy-gold)] transition-colors text-sm">Galeri</Link>
              </li>

              <li>
                <Link href={`/${lang}/iletisim`} className="text-gray-400 hover:text-[var(--color-moy-gold)] transition-colors text-sm">{dict.contactInfo}</Link>
              </li>
            </ul>
          </div>

          {/* Locations */}
          <div>
            <h3 className="text-lg font-serif mb-6 text-white uppercase tracking-wider">{dict.ourVenues}</h3>
            <ul className="space-y-3">
              <li>
                <Link href={`/${lang}/#mekanlar`} className="text-gray-400 hover:text-[var(--color-moy-gold)] transition-colors text-sm">Moy Beach</Link>
              </li>
              <li>
                <Link href={`/${lang}/#mekanlar`} className="text-gray-400 hover:text-[var(--color-moy-gold)] transition-colors text-sm">Kite Beach Hotel</Link>
              </li>
              <li>
                <Link href={`/${lang}/#mekanlar`} className="text-gray-400 hover:text-[var(--color-moy-gold)] transition-colors text-sm">Volkswagen Kite</Link>
              </li>
            </ul>
          </div>

          {/* Contact */}
          <div>
            <h3 className="text-lg font-serif mb-6 text-white uppercase tracking-wider">{dict.contactInfo}</h3>
            <ul className="space-y-4">
              <li className="flex items-start gap-3">
                <MapPin size={18} className="text-[var(--color-moy-gold)] shrink-0 mt-0.5" />
                <div className="flex flex-col">
                  <span className="text-white text-sm mb-1">Moy Beach</span>
                  <span className="text-gray-400 text-xs">Atatürk 1. Cd No:86, Akyaka, Ula/Muğla</span>
                  <a href="tel:+905344656235" className="text-[var(--color-moy-gold)] hover:text-white transition-colors text-xs mt-1">+90 534 465 62 35</a>
                </div>
              </li>
              <li className="flex items-start gap-3">
                <MapPin size={18} className="text-[var(--color-moy-gold)] shrink-0 mt-0.5" />
                <div className="flex flex-col">
                  <span className="text-white text-sm mb-1">Kite Beach Hotel</span>
                  <span className="text-gray-400 text-xs">Akçapınar Sok. Kiteboard Sahili, Muğla</span>
                  <a href="tel:+905330816181" className="text-[var(--color-moy-gold)] hover:text-white transition-colors text-xs mt-1">+90 533 081 61 81</a>
                </div>
              </li>
              <li className="flex items-start gap-3">
                <MapPin size={18} className="text-[var(--color-moy-gold)] shrink-0 mt-0.5" />
                <div className="flex flex-col">
                  <span className="text-white text-sm mb-1">Volkswagen Kite</span>
                  <span className="text-gray-400 text-xs">Akçapınar Kite Sahili, Ula/Muğla</span>
                  <div className="flex flex-col gap-1 mt-1">
                    <a href="tel:+905378823137" className="text-[var(--color-moy-gold)] hover:text-white transition-colors text-xs">+90 537 882 31 37</a>
                    <a href="tel:+905052049856" className="text-[var(--color-moy-gold)] hover:text-white transition-colors text-xs">+90 505 204 98 56</a>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>

        {/* Bottom */}
        <div className="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center gap-4">
          <p className="text-gray-500 text-xs">
            &copy; {new Date().getFullYear()} Moy Group. {dict.rights}
          </p>
          <div className="flex gap-4">
            <a href="https://ayris.tech" target="_blank" rel="noopener noreferrer" className="text-gray-500 hover:text-[var(--color-moy-gold)] transition-colors text-xs flex items-center gap-1">
              created by <span className="font-medium">ayris.tech</span>
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}