'use client';

import { motion } from 'framer-motion';
import { useTranslations } from 'next-intl';
import { Link } from '@/i18n/routing';
import { ChevronRight } from 'lucide-react';
import Image from 'next/image';

export default function Hero() {
  const t = useTranslations('Index');

  return (
    <section className="relative h-screen flex items-center justify-center overflow-hidden">
      {/* Background with Overlay */}
      <div className="absolute inset-0 z-0">
        <Image
          src="https://images.unsplash.com/photo-1542718610-a1d656d1884c?q=80&w=2070&auto=format&fit=crop"
          alt="Luxury Villa"
          fill
          priority
          className="object-cover scale-105"
        />
        <div className="absolute inset-0 bg-black/30 bg-gradient-to-b from-black/40 via-transparent to-bone/10" />
      </div>

      {/* Content */}
      <div className="relative z-10 text-center px-6 max-w-4xl">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, ease: "easeOut" }}
        >
          <span className="inline-block mb-4 text-bone text-sm font-bold tracking-[0.3em] uppercase opacity-90">
            Salmakis Collection
          </span>
          <h1 className="text-5xl md:text-8xl font-serif text-bone leading-tight mb-6">
            {t('title')}
          </h1>
          <p className="text-lg md:text-xl text-bone/90 font-sans max-w-2xl mx-auto mb-10 leading-relaxed">
            {t('description')}
          </p>
          
          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
            <Link
              href="/#villas"
              className="group relative px-8 py-4 bg-salmakis-blue text-white rounded-full font-bold overflow-hidden transition-all duration-300 hover:shadow-xl hover:shadow-salmakis-blue/20"
            >
              <span className="relative z-10 flex items-center space-x-2">
                <span>{t('explore')}</span>
                <ChevronRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
              </span>
            </Link>
            <Link
              href="/contact"
              className="px-8 py-4 bg-white/10 backdrop-blur-md border border-white/20 text-white rounded-full font-bold hover:bg-white/20 transition-all duration-300"
            >
              İletişime Geç
            </Link>
          </div>
        </motion.div>
      </div>

      {/* Scroll indicator */}
      <motion.div 
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 1, duration: 1 }}
        className="absolute bottom-10 left-1/2 -translate-x-1/2"
      >
        <div className="w-[1px] h-20 bg-gradient-to-b from-white to-transparent" />
      </motion.div>
    </section>
  );
}