"use client";

import { motion } from "framer-motion";
import { resortData } from "@/src/data/resort";
import { useState } from "react";
import AccommodationCard from "../components/AccommodationCard";

export default function AccommodationPage() {
  const lang = "tr";
  const [filter, setFilter] = useState<"all" | "rooms" | "residence">("all");

  const filteredRooms = resortData.rooms.filter(room => {
    if (filter === "all") return true;
    if (filter === "rooms") return !room.slug.includes("rezidans");
    if (filter === "residence") return room.slug.includes("rezidans");
    return true;
  });

  return (
    <div className="bg-[#ECE7E1] min-h-screen pt-72 md:pt-96 pb-48  flex flex-col items-center">
      <div className="max-w-[1600px] mx-auto px-6 ">

        {/* Header Section */}
        <div className="space-y-12 mb-32 mt-40">
          <div className="space-y-6">
            <motion.div
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              className="flex items-center gap-4"
            >
              <div className="w-12 h-px bg-gold" />
              <span className="text-gold text-[10px] tracking-[0.5em] font-bold uppercase block">
                KONAKLAMA DENEYİMİ
              </span>
            </motion.div>

            <motion.h1
              initial={{ y: 30, opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
              transition={{ delay: 0.1, duration: 0.8 }}
              className="text-6xl md:text-8xl font-serif text-gray-900 leading-[0.85] tracking-tight"
            >
              Zarafet & <br /><span className="italic font-light">Ege Serüveni</span>
            </motion.h1>

            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ delay: 0.3 }}
              className="pt-10 border-t border-black/5"
            >
              <p className="text-gray-500 font-light text-2xl leading-relaxed italic border-l-4 border-gold/20 pl-8 max-w-2xl">
                &ldquo;Bardakçı Koyu&apos;nun büyüleyici manzarasında, lüksün ve huzurun buluştuğu noktada sizi ağırlıyoruz.&rdquo;
              </p>
            </motion.div>
          </div>

          <div className="flex bg-white p-2 rounded-full shadow-sm border border-black/5 w-fit">
            {["all", "rooms", "residence"].map((id) => (
              <button
                key={id}
                onClick={() => setFilter(id as any)}
                className={`px-10 py-3 rounded-full text-[10px] font-bold tracking-[0.2em] transition-all duration-500 ${filter === id ? "bg-[#5C6353] text-white shadow-lg" : "text-gray-400 hover:text-gray-900"
                  }`}
              >
                {id === "all" ? "HEPSİ" : id === "rooms" ? "ODALAR" : "REZİDANS"}
              </button>
            ))}
          </div>
        </div>

        {/* Accommodation Grid - Single Column for Wide Mode */}
        <div className="flex flex-col gap-y-16">
          {filteredRooms.map((room) => (
            <motion.div
              key={room.slug}
              layout
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8 }}
            >
              <AccommodationCard room={room} lang={lang} />
            </motion.div>
          ))}
        </div>
      </div>
    </div>
  );
}