'use client'

import { useTranslations } from 'next-intl'
import { Link } from '@/i18n/routing'
import { motion, useReducedMotion } from 'framer-motion'
import { MapPin, Wifi, UtensilsCrossed, Waves, Car } from 'lucide-react'
import Image from 'next/image'
import BougainvilleaMotif from '@/components/BougainvilleaMotif'

const EASE: [number, number, number, number] = [0.22, 1, 0.36, 1]

export default function HomePage() {
  const tHero = useTranslations('hero')
  const tFeatures = useTranslations('features')
  const tRooms = useTranslations('home_rooms')
  const prefersReduced = useReducedMotion()

  const heroContainer = prefersReduced ? undefined : {
    hidden: {},
    show: { transition: { staggerChildren: 0.12 } }
  }

  const heroItem = prefersReduced ? undefined : {
    hidden: { opacity: 0, y: 40, filter: 'blur(8px)' },
    show: { 
      opacity: 1, 
      y: 0, 
      filter: 'blur(0px)',
      transition: { duration: 0.8, ease: EASE } 
    }
  }

  return (
    <div className="bg-background text-on-surface">
      {/* Hero Section */}
      <header className="relative h-screen w-full flex items-center justify-center overflow-hidden">
        <div className="absolute inset-0 z-0">
          <Image 
            src="https://images.unsplash.com/photo-1582719508461-905c673771fd?auto=format&fit=crop&q=80"
            alt="Sitar Apart Hotel View"
            fill
            className="object-cover"
            priority
          />
          <div className="absolute inset-0 bg-gradient-to-b from-secondary/40 via-secondary/20 to-secondary/60" />
        </div>
        
        <motion.div 
          variants={heroContainer}
          initial="hidden"
          animate="show"
          className="relative z-10 text-center px-margin-mobile max-w-3xl"
        >
          <motion.h1 variants={heroItem} className="font-serif text-[40px] md:text-[60px] leading-[1.2] font-semibold text-white mb-6 drop-shadow-lg">
            {tHero('title')}
          </motion.h1>
          
          <motion.p variants={heroItem} className="font-sans text-[18px] text-white/90 mb-10 max-w-xl mx-auto leading-relaxed drop-shadow-md">
            {tHero('description')}
          </motion.p>
          
          <motion.div variants={heroItem}>
            <Link 
              href="/dairelerimiz" 
              className="inline-block bg-accent-pink text-white px-10 py-5 rounded-full font-sans font-bold text-[16px] tracking-wider uppercase hover:scale-105 transition-all duration-300 shadow-xl cursor-pointer focus:outline-none focus-visible:ring-4 focus-visible:ring-white/50 focus-visible:ring-offset-2 focus-visible:ring-offset-accent-pink"
            >
              {tHero('cta')}
            </Link>
          </motion.div>
        </motion.div>
        
        <div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce text-white">
          <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
          </svg>
        </div>
      </header>

      {/* Amenities Strip */}
      <section className="bg-surface-container-lowest py-12 relative z-20 -mt-10 mx-margin-mobile md:mx-auto max-w-container-max rounded-[16px] shadow-[0_32px_64px_-12px_rgba(112,90,76,0.04)] border border-outline-variant/20">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 px-gutter">
          {[
            { icon: Waves, label: tFeatures('pool') },
            { icon: Wifi, label: tFeatures('wifi') },
            { icon: UtensilsCrossed, label: tFeatures('kitchen') },
            { icon: Car, label: tFeatures('parking') }
          ].map((amenity, idx) => (
            <motion.div 
              key={idx}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: '-50px' }}
              transition={{ duration: 0.5, delay: idx * 0.1, ease: EASE }}
              className="flex flex-col items-center text-center gap-3 group"
            >
              <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary transition-transform duration-300 group-hover:scale-110">
                <amenity.icon className="w-6 h-6" />
              </div>
              <span className="font-sans font-bold text-[14px] text-secondary tracking-wide">{amenity.label}</span>
            </motion.div>
          ))}
        </div>
      </section>

      {/* Apartments Section */}
      <section className="py-section-gap px-margin-mobile max-w-container-max mx-auto overflow-visible">
        <motion.div 
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: '-100px' }}
          transition={{ duration: 0.8, ease: EASE }}
          className="relative mb-16 text-center"
        >
          <div className="absolute -top-12 left-1/2 -translate-x-1/2 w-32 h-32 flex items-center justify-center opacity-15 -rotate-6 pointer-events-none text-accent-pink">
             <BougainvilleaMotif className="w-24 h-24" />
          </div>
          <h2 className="font-serif text-[32px] md:text-[40px] font-semibold text-secondary mb-4 relative z-10">
            {tRooms('title')}
          </h2>
          <p className="text-on-surface-variant text-[16px] max-w-xl mx-auto font-sans">
            {tRooms('subtitle')}
          </p>
        </motion.div>
        
        <div className="grid grid-cols-1 md:grid-cols-3 gap-gutter">
          {[
            {
              id: '1-0-daire',
              title: tRooms('room_1.title'),
              desc: tRooms('room_1.desc'),
              img: 'https://images.unsplash.com/photo-1631049307264-da0ec9d70304?auto=format&fit=crop&q=80'
            },
            {
              id: '1-1-daire-a',
              title: tRooms('room_2.title'),
              desc: tRooms('room_2.desc'),
              img: 'https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?auto=format&fit=crop&q=80'
            },
            {
              id: '1-1-daire-b',
              title: tRooms('room_3.title'),
              desc: tRooms('room_3.desc'),
              img: 'https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?auto=format&fit=crop&q=80'
            }
          ].map((room, idx) => (
            <motion.div 
              key={idx}
              initial={{ opacity: 0, y: 40 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: '-50px' }}
              transition={{ duration: 0.6, delay: idx * 0.15, ease: EASE }}
              className="group bg-surface-container-lowest rounded-[24px] overflow-hidden shadow-[0_32px_64px_-12px_rgba(112,90,76,0.04)] border border-outline-variant/20 transition-transform duration-500 hover:-translate-y-2 flex flex-col cursor-pointer"
            >
              <div className="aspect-[3/2] overflow-hidden relative">
                <Image 
                  src={room.img}
                  alt={room.title}
                  fill
                  className="object-cover transition-transform duration-700 group-hover:scale-110"
                />
              </div>
              <div className="p-6 flex flex-col flex-1 bg-surface-container-lowest relative z-10">
                <h3 className="font-serif text-[24px] font-medium text-secondary mb-3 group-hover:text-primary transition-colors">{room.title}</h3>
                <p className="font-sans text-on-surface-variant mb-6 text-[16px] leading-relaxed flex-1">
                  {room.desc}
                </p>
                <Link 
                  href={`/dairelerimiz/${room.id}`} 
                  className="inline-flex items-center text-primary font-sans font-bold text-[16px] border-b-2 border-transparent hover:border-primary transition-colors pb-1 w-fit cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-sm"
                >
                  Detayları İncele <span className="ml-2 group-hover:translate-x-1 transition-transform">→</span>
                </Link>
              </div>
            </motion.div>
          ))}
        </div>
        
        <motion.div 
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8, delay: 0.4 }}
          className="text-center mt-16"
        >
          <Link 
            href="/dairelerimiz" 
            className="inline-flex items-center justify-center px-10 py-4 border-2 border-primary text-primary hover:bg-primary hover:text-white rounded-full font-sans font-bold text-[16px] uppercase tracking-wider transition-all duration-300 cursor-pointer focus:outline-none focus-visible:ring-4 focus-visible:ring-primary/50 focus-visible:ring-offset-2"
          >
            Tüm Daireleri Gör
          </Link>
        </motion.div>
      </section>
    </div>
  )
}