"use client";

import { motion } from "framer-motion";
import { MapPin, Phone } from "lucide-react";

export default function Footer() {
  return (
    <footer id="contact" className="bg-[#050505] pt-24 pb-12 relative border-t border-white/5">
      <div className="container mx-auto px-6 md:px-12">
        <div className="flex flex-col md:flex-row justify-between gap-16 mb-20">
          
          {/* Brand Info */}
          <motion.div 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
            className="md:w-1/3"
          >
            <a href="#" className="inline-block mb-6">
              <div className="flex flex-col group">
                <span className="font-serif text-4xl text-text-main group-hover:text-accent1 transition-colors">
                  LUNA
                </span>
                <span className="text-[10px] uppercase tracking-[0.3em] text-accent1 mt-1 font-light">
                  Cocktail and More
                </span>
              </div>
            </a>
            <p className="text-text-main/60 font-light leading-relaxed mb-8">
              Muğla'nın kalbinde, premium kokteyl ve müzik deneyimi. 
              Sunset'ten geceye uzanan eşsiz bir atmosfer.
            </p>
            <div className="flex space-x-4">
              <a href="https://www.instagram.com/lunacocktaill/" target="_blank" rel="noreferrer" className="w-10 h-10 border border-white/10 rounded-full flex items-center justify-center text-text-main hover:bg-accent1 hover:text-primary hover:border-accent1 transition-all">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="18"
                  height="18"
                  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>
            </div>
          </motion.div>

          {/* Contact Info */}
          <motion.div 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="md:w-1/3 space-y-6"
          >
            <h4 className="font-serif text-2xl text-text-main mb-6">İletişim</h4>
            
            <a href="tel:05321610234" className="flex items-start group">
              <Phone className="text-accent2 mt-1 mr-4 group-hover:text-accent1 transition-colors" size={20} />
              <div>
                <span className="block text-[10px] uppercase tracking-widest text-text-main/50 mb-1">Rezervasyon</span>
                <span className="text-lg text-text-main group-hover:text-accent1 transition-colors font-light">0532 161 02 34</span>
              </div>
            </a>
            
            <div className="flex items-start group">
              <MapPin className="text-accent2 mt-1 mr-4 group-hover:text-accent1 transition-colors" size={20} />
              <div>
                <span className="block text-[10px] uppercase tracking-widest text-text-main/50 mb-1">Konum</span>
                <span className="text-lg text-text-main font-light leading-relaxed">
                  Muğla Merkez<br />
                  Türkiye
                </span>
              </div>
            </div>
            
          </motion.div>

          {/* Quick Form */}
          <motion.div 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6, delay: 0.4 }}
            className="md:w-1/3"
          >
            <h4 className="font-serif text-2xl text-text-main mb-6">Bize Ulaşın</h4>
            <form className="space-y-4" onSubmit={(e) => e.preventDefault()}>
              <input 
                type="text" 
                placeholder="Adınız Soyadınız" 
                className="w-full bg-primary/50 border border-white/10 px-4 py-3 text-sm text-text-main focus:outline-none focus:border-accent1 transition-colors"
              />
              <input 
                type="tel" 
                placeholder="Telefon Numaranız" 
                className="w-full bg-primary/50 border border-white/10 px-4 py-3 text-sm text-text-main focus:outline-none focus:border-accent1 transition-colors"
              />
              <button 
                type="submit" 
                className="w-full bg-accent1 text-primary py-3 uppercase tracking-widest text-xs font-bold hover:bg-accent2 transition-colors"
              >
                Gönder
              </button>
            </form>
          </motion.div>

        </div>

        <div className="border-t border-white/5 pt-8 flex flex-col md:flex-row justify-between items-center text-xs text-text-main/40 font-light">
          <p>&copy; {new Date().getFullYear()} Luna Cocktail & More. Tüm hakları saklıdır.</p>
          <p className="mt-2 md:mt-0">
            Created by <a href="https://ayris.tech" target="_blank" rel="noreferrer" className="hover:text-accent1 transition-colors font-medium">ayris.tech</a>
          </p>
        </div>
      </div>
    </footer>
  );
}