"use client";

import { motion } from "framer-motion";
import { MagicCard } from "@/components/ui/MagicCard";

const cocktails = [
  {
    id: 1,
    name: "Luna Sunset",
    description: "Tequila, Mezcal, Passion Fruit, Chili, Lime",
    price: "450 ₺",
    image: "https://images.unsplash.com/photo-1513558161293-cdaf765ed2fd?q=80&w=1974&auto=format&fit=crop"
  },
  {
    id: 2,
    name: "Midnight Velvet",
    description: "Bourbon, Blackberry, Vermouth, Angostura",
    price: "480 ₺",
    image: "https://images.unsplash.com/photo-1536935338788-846bb9981813?q=80&w=2069&auto=format&fit=crop"
  },
  {
    id: 3,
    name: "Golden Hour",
    description: "Gin, Elderflower, Prosecco, Gold Dust",
    price: "420 ₺",
    image: "https://images.unsplash.com/photo-1551024709-8f23befc6f87?q=80&w=2157&auto=format&fit=crop"
  }
];

export default function Cocktails() {
  return (
    <section id="cocktails" className="py-24 md:py-32 bg-primary relative border-t border-white/5">
      <div className="container mx-auto px-6 md:px-12">
        
        <div className="text-center mb-16 md:mb-24">
          <motion.h2 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
            className="font-serif text-4xl md:text-5xl text-text-main mb-6"
          >
            İmza Kokteyller
          </motion.h2>
          <motion.div 
            initial={{ opacity: 0, scale: 0 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="w-16 h-1 bg-accent1 mx-auto"
          />
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">
          {cocktails.map((cocktail, index) => (
            <motion.div
              key={cocktail.id}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: "-50px" }}
              transition={{ duration: 0.6, delay: index * 0.2 }}
            >
            <MagicCard className="flex flex-col group relative">
              <div className="aspect-[3/4] overflow-hidden relative mb-6">
                <img 
                  src={cocktail.image} 
                  alt={cocktail.name} 
                  className="w-full h-full object-cover grayscale-[20%] group-hover:grayscale-0 group-hover:scale-105 transition-all duration-700"
                />
              </div>
              <div className="flex justify-between items-start border-b border-white/10 pb-4">
                <div>
                  <h3 className="font-serif text-2xl text-text-main mb-2 group-hover:text-accent1 transition-colors">{cocktail.name}</h3>
                  <p className="text-text-main/60 font-light text-sm max-w-[200px]">{cocktail.description}</p>
                </div>
                <span className="text-accent2 font-serif text-xl">{cocktail.price}</span>
              </div>
            </MagicCard>
            </motion.div>
          ))}
        </div>

        <motion.div 
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6, delay: 0.6 }}
          className="mt-20 text-center"
        >
          <a 
            href="#contact" 
            className="inline-block border border-accent1 text-text-main hover:bg-accent1 hover:text-primary transition-colors px-8 py-3 uppercase tracking-widest text-sm font-semibold"
          >
            Tüm Menüyü İncele
          </a>
        </motion.div>

      </div>
    </section>
  );
}