"use client";

import { useMemo, useRef } from "react";
import Link from "next/link";
import Image from "next/image";
import { motion, useScroll, useTransform } from "framer-motion";
import { resortData } from "@/src/data/resort";
import ScrollVideo from "./components/ScrollVideo";
import SplitSection from "./components/SplitSection";
import TestimonialsSlider from "./components/TestimonialsSlider";

export default function Home() {
  const portfolioRef = useRef(null);
  
  const { scrollYProgress } = useScroll({
    target: portfolioRef,
    offset: ["start end", "end start"]
  });

  const portfolioBgY = useTransform(scrollYProgress, [0, 1], ["0%", "15%"]);
  const portfolioScale = useTransform(scrollYProgress, [0, 0.5, 1], [1.05, 1, 1.05]);

  return (
    <div className="flex flex-col">
      <section className="relative h-[85vh] w-full bg-[#FAF9F6] flex flex-col items-center justify-center pt-20 overflow-hidden">
        <motion.div 
          initial={{ scale: 0.8, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          transition={{ duration: 1.5, ease: "easeOut" }}
          className="absolute bottom-[-20%] w-[1200px] h-[1200px] bg-white rounded-full" 
        />

        <div className="relative z-20 flex flex-col items-center text-center px-6">
          <motion.h1 
            initial={{ y: 30, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            transition={{ duration: 1, ease: "easeOut" }}
            className="flex flex-col items-center"
          >
            <span className="text-gray-900 text-6xl md:text-9xl font-sans font-medium tracking-[0.1em] leading-none mb-2 uppercase">
              KUSURSUZ
            </span>
            <motion.span 
              initial={{ x: -20, opacity: 0 }}
              animate={{ x: 0, opacity: 1 }}
              transition={{ delay: 0.5, duration: 1 }}
              className="text-gray-900 text-6xl md:text-9xl font-serif italic font-light tracking-[0.05em] leading-none"
            >
              BİR KAÇIŞ
            </motion.span>
          </motion.h1>

          <motion.div 
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 1, duration: 1 }}
            className="mt-16"
          >
            <Link
              href={resortData.bookingUrl}
              className="bg-[#5C6353] text-white px-10 py-4 rounded-full text-[10px] font-bold tracking-[0.3em] hover:bg-gold transition-all shadow-xl shadow-black/5"
            >
              REZERVASYON YAP
            </Link>
          </motion.div>
        </div>
      </section>

      <ScrollVideo />

      <section className="bg-white py-32 md:py-48 px-6 text-center">
        <motion.div 
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-100px" }}
          transition={{ duration: 1 }}
          className="max-w-5xl mx-auto space-y-12"
        >
          <p className="text-3xl md:text-5xl font-serif text-gray-900 leading-[1.6] font-light">
            Ege&apos;nin kalbinde, tarihin ve denizin kucaklaştığı özel bir dünyada, 
            <span className="italic"> unutulmaz anılar</span> biriktirmek için tasarlandı.
          </p>
          <div className="w-16 h-px bg-gold mx-auto opacity-60" />
        </motion.div>
      </section>

      <section ref={portfolioRef} className="relative min-h-[120vh] py-32 flex flex-col justify-between overflow-hidden">
        <motion.div 
          style={{ y: portfolioBgY, scale: portfolioScale }}
          className="absolute inset-0 z-0 h-full w-full"
        >
          <Image
            src="https://images.unsplash.com/photo-1510414842594-a61c69b5ae57?auto=format&fit=crop&q=80&w=2000"
            alt="Palms"
            fill
            className="object-cover brightness-50"
            priority
          />
        </motion.div>

        <motion.div 
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          className="relative z-10 text-center"
        >
          <span className="text-white text-[10px] tracking-[0.5em] font-bold uppercase opacity-70">
            HAYATI KEŞFEDİN
          </span>
        </motion.div>

        <div className="relative z-10 flex flex-col items-center text-center px-6">
          <h2 className="flex flex-col items-center">
            <motion.span 
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 1 }}
              className="text-white text-4xl md:text-7xl font-sans font-extralight tracking-[0.2em] uppercase leading-tight"
            >
              YAVAŞ YAŞAMANIN <span className="font-serif italic font-light lowercase">lüksü</span>
            </motion.span>
            <motion.span 
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.2, duration: 1 }}
              className="text-white text-5xl md:text-8xl font-sans font-medium tracking-[0.1em] uppercase leading-tight"
            >
              SALMAKIS&apos;TE
            </motion.span>
          </h2>
        </div>

        <div className="relative z-10 max-w-[1600px] mx-auto w-full px-10 grid grid-cols-1 md:grid-cols-3 gap-12 text-center md:text-left border-t border-white/20 pt-12">
          {[
            { tag: "ÖZEL KOYUNUZ", title: "KUSURSUZ SAHİL" },
            { tag: "RİTÜELLER", title: "SPA CENTER" },
            { tag: "GURME", title: "DENİZ MUTFAĞI" },
          ].map((item, i) => (
            <motion.div 
              key={i} 
              initial={{ opacity: 0, x: -20 }}
              whileInView={{ opacity: 1, x: 0 }}
              transition={{ delay: i * 0.1, duration: 0.8 }}
              className="group cursor-pointer"
            >
              <span className="text-white/40 text-[9px] tracking-[0.4em] font-bold block mb-2 transition-colors group-hover:text-gold">
                {item.tag}
              </span>
              <h4 className="text-white text-xl md:text-2xl font-sans font-light tracking-[0.2em] group-hover:italic transition-all">
                {item.title}
              </h4>
            </motion.div>
          ))}
        </div>
      </section>

      <section className="bg-white py-32 md:py-48 px-6 text-center">
        <motion.div 
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-100px" }}
          transition={{ duration: 1 }}
          className="max-w-5xl mx-auto space-y-12"
        >
          <p className="text-3xl md:text-5xl font-serif text-gray-900 leading-[1.6] font-light">
            Salmakis Resort & Spa olarak biz, sadece bir tatil değil, dönüştürücü bir deneyim sunuyoruz. 
            Halikarnassos&apos;un antik büyüsünü modern lüksle birleştiren benzersiz konumumuz ve misafirperverliğimizle, 
            Ege&apos;nin en özel köşesinde sizi ağırlıyoruz.
          </p>
          <div className="w-16 h-px bg-gold mx-auto opacity-60" />
          <p className="text-lg md:text-2xl font-serif text-gray-400 italic font-light tracking-[0.2em] uppercase">
            SESSİZ ZARAFETİN VE KALİTENİN BULUŞMA NOKTASI.
          </p>
        </motion.div>
      </section>

      <SplitSection 
        title="KONAKLAMA"
        subtitle="LÜKS & KONFOR"
        description="Ege'nin kalbinde, her detayı huzurla işlenmiş odalarımızda lüksü ve konforu yeniden tanımlayın. Maviye uyanmanın en şık hali."
        mainImage="salmakis/rooms/deluxe_room_1"
        secondImage="salmakis/rooms/superior_room_1"
        href="/accommodation"
      />

      <SplitSection 
        title="YİYECEK & İÇECEK"
        subtitle="GURME DENEYİM"
        description="Denizden gelen tazeliğin Ege otlarıyla buluştuğu, her lokmada ayrı bir hikaye anlatan gastronomi yolculuğuna hazır olun."
        mainImage="salmakis/experiences/dining"
        secondImage="salmakis/experiences/dining"
        href="/dining"
        reverse
      />

      <SplitSection 
        title="SPA CENTER"
        subtitle="RUHSAL YENİLENME"
        description="Bedeninizi ve ruhunuzu antik ritüellerle yenileyin. Salmakis'in şifalı sularında ve uzman ellerde kendinizi yeniden keşfedeceksiniz."
        mainImage="salmakis/experiences/spa"
        secondImage="salmakis/spa/turkish_bath"
        href="/spa"
      />

      <SplitSection 
        title="MAVİ KOY"
        subtitle="SAHİL & BEACH"
        description="Mavi bayraklı kristal sularımızda, Bodrum güneşinin ve denizin en saf halini keşfedin. Gününüzü turkuaz sularda sonlandırın."
        mainImage="salmakis/experiences/beach"
        secondImage="salmakis/experiences/beach"
        href="/beach"
        reverse
      />

      <TestimonialsSlider />

      <section className="py-24 bg-zinc-50 overflow-hidden">
        <motion.div 
          initial={{ opacity: 0, scale: 0.95 }}
          whileInView={{ opacity: 1, scale: 1 }}
          transition={{ duration: 1.2 }}
          className="max-w-4xl mx-auto text-center space-y-8 px-6"
        >
          <span className="text-gold uppercase tracking-[0.5em] text-xs font-bold">
            MİRASIMIZ
          </span>
          <h2 className="text-4xl md:text-5xl font-serif text-[#1D3557]">
            {resortData.legend.title.tr}
          </h2>
          <div className="relative">
            <div className="absolute -top-12 -left-12 text-9xl text-gold/10 font-serif -z-10">
              &ldquo;
            </div>
            <p className="text-lg md:text-xl text-gray-600 leading-relaxed font-light italic">
              {resortData.legend.text.tr}
            </p>
          </div>
          <div className="pt-8">
            <div className="w-16 h-px bg-gold mx-auto" />
          </div>
        </motion.div>
      </section>
    </div>
  );
}