'use client'

import { motion } from "framer-motion"
import Image from "next/image"
import Link from "next/link"
import { Users, BedDouble, ArrowLeft } from 'lucide-react'
import Amenities from "@/components/Amenities"

export default function SuiteDetailClient({ lang, id, dict }: { lang: string, id: string, dict: any }) {
  // Mapping the 8 mythological suites with their Cloudinary assets
  const suitesData: Record<string, any> = {
    'iris': {
      number: '01',
      name: dict.suites_page.list.s1.name,
      description: dict.suites_page.list.s1.desc,
      mainImage: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606641/ayrisapart/Daire%201/photo_1_2024-04-05_12-32-09.jpg',
      guests: dict.suites_page.list.s1.guests,
      bed: dict.suites_page.list.s1.bed,
      gallery: [
        'https://res.cloudinary.com/du7xohbct/image/upload/v1776606642/ayrisapart/Daire%201/photo_2_2024-04-05_12-32-09.jpg',
        'https://res.cloudinary.com/du7xohbct/image/upload/v1776606643/ayrisapart/Daire%201/photo_3_2024-04-05_12-32-09.jpg',
        'https://res.cloudinary.com/du7xohbct/image/upload/v1776606644/ayrisapart/Daire%201/photo_4_2024-04-05_12-32-09.jpg'
      ]
    },
    'electra': {
      number: '02',
      name: dict.suites_page.list.s2.name,
      description: dict.suites_page.list.s2.desc,
      mainImage: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606648/ayrisapart/Daire%202/photo_1_2024-04-05_16-04-34.jpg',
      guests: dict.suites_page.list.s2.guests,
      bed: dict.suites_page.list.s2.bed,
      gallery: [
        'https://res.cloudinary.com/du7xohbct/image/upload/v1776606649/ayrisapart/Daire%202/photo_2_2024-04-05_16-04-34.jpg',
        'https://res.cloudinary.com/du7xohbct/image/upload/v1776606650/ayrisapart/Daire%202/photo_3_2024-04-05_16-04-34.jpg',
        'https://res.cloudinary.com/du7xohbct/image/upload/v1776606651/ayrisapart/Daire%202/photo_5_2024-04-05_16-04-34.jpg'
      ]
    },
    'arke': {
      number: '03',
      name: dict.suites_page.list.s3.name,
      description: dict.suites_page.list.s3.desc,
      mainImage: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606654/ayrisapart/Daire%203/photo_1_2024-04-05_16-06-09.jpg',
      guests: dict.suites_page.list.s3.guests,
      bed: dict.suites_page.list.s3.bed,
      gallery: [
        'https://res.cloudinary.com/du7xohbct/image/upload/v1776606655/ayrisapart/Daire%203/photo_2_2024-04-05_16-06-09.jpg',
        'https://res.cloudinary.com/du7xohbct/image/upload/v1776606655/ayrisapart/Daire%203/photo_3_2024-04-05_16-06-09.jpg',
        'https://res.cloudinary.com/du7xohbct/image/upload/v1776606656/ayrisapart/Daire%203/photo_4_2024-04-05_16-06-09.jpg'
      ]
    },
    'harpy': {
      number: '04',
      name: dict.suites_page.list.s4.name,
      description: dict.suites_page.list.s4.desc,
      mainImage: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606661/ayrisapart/Daire%204/photo_1_2024-04-05_16-07-01.jpg',
      guests: dict.suites_page.list.s4.guests,
      bed: dict.suites_page.list.s4.bed,
      gallery: [
        'https://res.cloudinary.com/du7xohbct/image/upload/v1776606662/ayrisapart/Daire%204/photo_2_2024-04-05_16-07-01.jpg',
        'https://res.cloudinary.com/du7xohbct/image/upload/v1776606663/ayrisapart/Daire%204/photo_3_2024-04-05_16-07-01.jpg',
        'https://res.cloudinary.com/du7xohbct/image/upload/v1776606664/ayrisapart/Daire%204/photo_5_2024-04-05_16-07-01.jpg'
      ]
    },
    'hydaspes': {
      number: '05',
      name: dict.suites_page.list.s5.name,
      description: dict.suites_page.list.s5.desc,
      mainImage: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606671/ayrisapart/Daire%205/photo_1_2024-05-04_15-32-44.jpg',
      guests: dict.suites_page.list.s5.guests,
      bed: dict.suites_page.list.s5.bed,
      gallery: [
        'https://res.cloudinary.com/du7xohbct/image/upload/v1776606672/ayrisapart/Daire%205/photo_2_2024-05-04_15-33-08.jpg',
        'https://res.cloudinary.com/du7xohbct/image/upload/v1776606673/ayrisapart/Daire%205/photo_3_2024-05-04_15-33-08.jpg',
        'https://res.cloudinary.com/du7xohbct/image/upload/v1776606674/ayrisapart/Daire%205/photo_4_2024-05-04_15-33-08.jpg'
      ]
    },
    'zephyrus': {
      number: '06',
      name: dict.suites_page.list.s6.name,
      description: dict.suites_page.list.s6.desc,
      mainImage: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606681/ayrisapart/Daire%206/photo_1_2024-05-04_15-32-44.jpg',
      guests: dict.suites_page.list.s6.guests,
      bed: dict.suites_page.list.s6.bed,
      gallery: [
        'https://res.cloudinary.com/du7xohbct/image/upload/v1776606682/ayrisapart/Daire%206/photo_2_2024-05-04_15-33-08.jpg',
        'https://res.cloudinary.com/du7xohbct/image/upload/v1776606683/ayrisapart/Daire%206/photo_3_2024-05-04_15-33-08.jpg',
        'https://res.cloudinary.com/du7xohbct/image/upload/v1776606684/ayrisapart/Daire%206/photo_5_2024-05-04_15-33-08.jpg'
      ]
    },
    'pothos': {
      number: '07',
      name: dict.suites_page.list.s7.name,
      description: dict.suites_page.list.s7.desc,
      mainImage: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606689/ayrisapart/Daire%207/photo_1_2024-05-04_15-33-34.jpg',
      guests: dict.suites_page.list.s7.guests,
      bed: dict.suites_page.list.s7.bed,
      gallery: [
        'https://res.cloudinary.com/du7xohbct/image/upload/v1776606690/ayrisapart/Daire%207/photo_2_2024-05-04_15-33-34.jpg',
        'https://res.cloudinary.com/du7xohbct/image/upload/v1776606691/ayrisapart/Daire%207/photo_3_2024-05-04_15-33-34.jpg',
        'https://res.cloudinary.com/du7xohbct/image/upload/v1776606692/ayrisapart/Daire%207/photo_5_2024-05-04_15-33-34.jpg'
      ]
    },
    'thaumas': {
      number: '08',
      name: dict.suites_page.list.s8.name,
      description: dict.suites_page.list.s8.desc,
      mainImage: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606696/ayrisapart/Daire%208/photo_1_2024-05-04_15-33-34.jpg',
      guests: dict.suites_page.list.s8.guests,
      bed: dict.suites_page.list.s8.bed,
      gallery: [
        'https://res.cloudinary.com/du7xohbct/image/upload/v1776606697/ayrisapart/Daire%208/photo_2_2024-05-04_15-33-34.jpg',
        'https://res.cloudinary.com/du7xohbct/image/upload/v1776606698/ayrisapart/Daire%208/photo_4_2024-05-04_15-33-34.jpg',
        'https://res.cloudinary.com/du7xohbct/image/upload/v1776606699/ayrisapart/Daire%208/photo_5_2024-05-04_15-33-34.jpg'
      ]
    }
  }

  const suite = suitesData[id] || suitesData['iris']

  return (
    <main className="bg-[#FAF7F0] min-h-screen">

      {/* SECTION 1: HEADER & MAIN IMAGE */}
      <section className="pt-44 pb-20 px-6 md:px-16 max-w-[1400px] mx-auto">
        <div className="space-y-12">
          {/* Back Button */}
          <Link href={`/${lang}/suites`} className="inline-flex items-center space-x-2 text-[11px] font-bold tracking-[0.4em] uppercase text-[#1A1A1A]/40 hover:text-[#1A1A1A] transition-colors">
            <ArrowLeft size={16} />
            <span>{lang === 'tr' ? 'Tüm Odalar' : 'All Suites'}</span>
          </Link>

          {/* Title and Brief Header */}
          <div className="space-y-8">
            <motion.h1 
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              className="text-6xl md:text-[88px] font-serif text-[#1A1A1A] tracking-tight leading-none uppercase"
            >
              <span className="opacity-50 mr-4 font-sans text-4xl">{suite.number}.</span>
              {suite.name}
            </motion.h1>

            <div className="flex flex-wrap items-center gap-x-12 gap-y-4 text-[#1A1A1A]/70 text-[15px] font-medium">
              <div className="flex items-center space-x-2 uppercase tracking-widest">
                <Users size={18} className="text-[#C88C4B]" />
                <span>{suite.guests}</span>
              </div>
              <div className="flex items-center space-x-2 uppercase tracking-widest">
                <BedDouble size={18} className="text-[#C88C4B]" />
                <span>{suite.bed}</span>
              </div>
            </div>
          </div>

          {/* Main Visual */}
          <motion.div 
            initial={{ opacity: 0, scale: 0.98 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 1 }}
            className="aspect-[21/9] relative overflow-hidden rounded-[2px] shadow-2xl"
          >
             <Image 
                src={suite.mainImage} 
                alt={suite.name} 
                fill 
                className="object-cover"
                priority
             />
          </motion.div>
        </div>
      </section>

      {/* SECTION 2: ABOUT & AMENITIES */}
      <section className="py-24 px-6 md:px-16 max-w-[1400px] mx-auto">
        <div className="grid grid-cols-1 md:grid-cols-12 gap-16 border-b border-[#1A1A1A]/10 pb-20">
          <div className="md:col-span-4">
             <h2 className="text-4xl font-serif text-[#1A1A1A] uppercase tracking-tight">{lang === 'tr' ? 'Suit Hakkında' : 'About Suite'}</h2>
          </div>
          <div className="md:col-span-8 space-y-12">
             <p className="text-[#1A1A1A]/70 text-2xl leading-relaxed italic max-w-2xl">
                {suite.description}
             </p>
             <Link 
                href={`/${lang}/reservation`}
                className="inline-flex items-center space-x-3 text-[14px] font-bold tracking-[0.4em] uppercase border-b-2 border-[#1A1A1A] pb-2 group"
             >
                <span className="transform group-hover:translate-x-1 transition-transform">
                   <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="rotate-45">
                   <line x1="12" y1="19" x2="12" y2="5" />
                   <polyline points="5 12 12 5 19 12" />
                   </svg>
                </span>
                <span>{dict.footer.book}</span>
             </Link>
          </div>
        </div>

        {/* INTEGRATED AMENITIES COMPONENT */}
        <div className="mt-20">
           <Amenities dict={dict} />
        </div>
      </section>

      {/* SECTION 3: GALLERY GRID */}
      <section className="py-24 px-6 md:px-16 max-w-[1400px] mx-auto pb-44">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
           <div className="aspect-square relative overflow-hidden rounded-[2px] shadow-lg">
              <Image src={suite.gallery[0]} alt="Gallery" fill className="object-cover hover:scale-105 transition-transform duration-1000" />
           </div>
           <div className="aspect-square relative overflow-hidden rounded-[2px] shadow-lg">
              <Image src={suite.gallery[1]} alt="Gallery" fill className="object-cover hover:scale-105 transition-transform duration-1000" />
           </div>
           <div className="md:col-span-2 aspect-[21/9] relative overflow-hidden rounded-[2px] shadow-lg">
              <Image src={suite.gallery[2]} alt="Gallery" fill className="object-cover hover:scale-105 transition-transform duration-1000" />
           </div>
        </div>
      </section>

    </main>
  )
}