"use client";

import { motion } from "framer-motion";

export default function About() {
  return (
    <section id="about" className="py-24 md:py-32 bg-primary relative">
      <div className="container mx-auto px-6 md:px-12 flex flex-col md:flex-row items-center gap-16">
        
        <motion.div 
          initial={{ opacity: 0, x: -50 }}
          whileInView={{ opacity: 1, x: 0 }}
          viewport={{ once: true, margin: "-100px" }}
          transition={{ duration: 0.8 }}
          className="w-full md:w-1/2 relative"
        >
          <div className="relative aspect-[4/5] md:aspect-square w-full">
            <div className="absolute inset-0 bg-accent1/10 translate-x-4 translate-y-4" />
            <img 
              src="https://images.unsplash.com/photo-1574096079513-d8259312b785?q=80&w=1974&auto=format&fit=crop" 
              alt="Luna Cocktail Vibe" 
              className="w-full h-full object-cover grayscale-[30%] hover:grayscale-0 transition-all duration-700"
            />
          </div>
        </motion.div>
        
        <motion.div 
          initial={{ opacity: 0, x: 50 }}
          whileInView={{ opacity: 1, x: 0 }}
          viewport={{ once: true, margin: "-100px" }}
          transition={{ duration: 0.8, delay: 0.2 }}
          className="w-full md:w-1/2"
        >
          <h2 className="font-serif text-4xl md:text-5xl text-text-main mb-6">
            Luna is not just a bar.<br />
            <span className="text-accent1 italic">It's a lifestyle.</span>
          </h2>
          
          <div className="w-16 h-1 bg-accent2 mb-8" />
          
          <p className="text-text-main/80 text-lg leading-relaxed font-light mb-6">
            Muğla'nın kalbinde, rooftop konseptiyle premium bir kaçış noktası. 
            Golden hour esnasında eşsiz kokteyl deneyimiyle başlayan hikayemiz, 
            gecenin ilerleyen saatlerinde canlı müzik ve DJ performanslarıyla ritmini artırıyor.
          </p>
          
          <p className="text-text-main/80 text-lg leading-relaxed font-light mb-10">
            Karanlık ama sıcak, lüks ama erişilebilir atmosferimizde; imza kokteyllerimiz, 
            Soul Club ve Latin Geceleri gibi özel konseptlerimizle 
            kendinizi müziğin ve lezzetin akışına bırakın.
          </p>
          
          <p className="font-serif text-xl text-text-main italic border-l-2 border-accent1 pl-4">
            "Nights like these, only at Luna."
          </p>
        </motion.div>
        
      </div>
    </section>
  );
}