'use client';

import { Link } from '@/i18n/routing';
import { yachts } from '../data/yachts';
import YachtCard from '../components/YachtCard';
import { motion } from 'framer-motion';
import { use } from 'react';

interface PageProps {
  params: Promise<{ locale: string }>;
}

export default function Home({ params }: PageProps) {
  const { locale: _locale } = use(params);
  const t = useTranslations('Home');

  const fadeInUp = {
    hidden: { opacity: 0, y: 40 },
    visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" } }
  };

  return (
    <>
      <header className="relative h-screen w-full overflow-hidden">
        {/* YouTube Video Background */}
        <motion.div 
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 1.5 }}
          className="absolute inset-0 z-0 pointer-events-none overflow-hidden bg-black"
        >
          <iframe
            className="absolute top-1/2 left-1/2 w-[115vw] h-[115vh] min-w-[177.77vh] min-h-[56.25vw] -translate-x-1/2 -translate-y-1/2"
            src="https://www.youtube.com/embed/0k4s7X8EgYI?autoplay=1&mute=1&controls=0&loop=1&playlist=0k4s7X8EgYI&showinfo=0&rel=0&modestbranding=1&playsinline=1&enablejsapi=1&vq=hd1080"
            allow="autoplay; encrypted-media"
            frameBorder="0"
          ></iframe>
          {/* Elegant Overlay */}
          <div className="absolute inset-0 bg-gradient-to-b from-primary/60 via-primary/20 to-primary/80"></div>
          <div className="absolute inset-0 bg-black/10 backdrop-blur-[1px]"></div>
        </motion.div>
        <div className="relative h-full flex flex-col items-center justify-center text-center px-6">
          {/* Text overlays removed for cinematic look */}
        </div>
      </header>

      {/* Fiziksel Boşluk Ayırıcı - Üst */}
      <div className="h-24 md:h-32"></div>

      <section className="py-24 px-6 bg-surface overflow-hidden relative flex flex-col items-center justify-center text-center">
        {/* Decorative Background Element */}
        <motion.div 
          initial={{ opacity: 0, scale: 0.9 }}
          whileInView={{ opacity: 0.03, scale: 1 }}
          transition={{ duration: 1.5 }}
          viewport={{ once: true }}
          className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none select-none w-full text-center"
        >
          <span className="font-headline text-[15rem] md:text-[24rem] font-bold leading-none tracking-tighter text-primary">1980</span>
        </motion.div>

        <motion.div 
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-100px" }}
          variants={{
            visible: { transition: { staggerChildren: 0.2 } }
          }}
          className="max-w-4xl mx-auto relative z-10 flex flex-col items-center"
        >
          <motion.div variants={fadeInUp} className="mb-8 flex flex-col items-center gap-4">
            <span className="font-label text-xs tracking-[0.4em] text-secondary uppercase">{t('established')}</span>
            <div className="h-px w-12 bg-secondary/40"></div>
          </motion.div>

          <motion.div variants={fadeInUp}>
            <h2 className="font-headline text-4xl md:text-7xl text-primary leading-[1.1] mb-16 tracking-tight">
              {t('title_main')} <br />
              <span className="text-secondary italic">{t('title_italic')}</span>
            </h2>
          </motion.div>

          <motion.div variants={fadeInUp}>
            <p className="font-body text-on-surface-variant text-lg md:text-xl leading-[2] font-light max-w-3xl mx-auto text-justify [text-align-last:center]">
              {t('description')}
            </p>
          </motion.div>
        </motion.div>
      </section>

      {/* Fiziksel Boşluk Ayırıcı - Alt */}
      <div className="h-24 md:h-32"></div>

      {/* Fleet Section */}
      <section className="pb-48 px-6 md:px-12 bg-white flex flex-col items-center">
        <div className="w-full max-w-[1440px] mx-auto flex flex-col items-center">

          {/* Section Header */}
          <motion.div 
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true }}
            variants={fadeInUp}
            className="flex flex-col items-center text-center"
          >
            <span className="font-label text-xs tracking-[0.4em] text-secondary uppercase block mb-4">Our Selection</span>
            <h2 className="font-headline text-4xl md:text-6xl text-primary leading-tight uppercase">
              {t('featured_fleet')} <span className="italic">{t('featured_fleet_italic')}</span>
            </h2>
          </motion.div>

          {/* Kesin Boşluk Ayırıcı */}
          <div className="h-16 md:h-24"></div>

          {/* Cards Grid (3 on top, 2 centered on bottom) */}
          <motion.div 
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true, margin: "-100px" }}
            variants={{
              visible: { transition: { staggerChildren: 0.15 } }
            }}
            className="flex flex-wrap justify-center gap-x-12 gap-y-24 w-full"
          >
            {yachts.map((yacht) => (
              <motion.div 
                key={yacht.slug} 
                variants={fadeInUp}
                className="w-full md:w-[calc(50%-3rem)] lg:w-[calc(33.333%-3rem)]"
              >
                <YachtCard yacht={yacht} />
              </motion.div>
            ))}
          </motion.div>

        </div>
      </section>

      {/* Ekstra Alt Boşluk */}
      <div className="h-32 md:h-48"></div>

    </>
  );
}