'use client'

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

export default function SuitesClient({ lang, dict }: { lang: string, dict: any }) {
  const suites = [
    { id: 'iris', number: '01', name: dict.suites_page.list.s1.name, desc: dict.suites_page.list.s1.desc, image: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606641/ayrisapart/Daire%201/photo_1_2024-04-05_12-32-09.jpg', bed: dict.suites_page.list.s1.bed, guests: dict.suites_page.list.s1.guests },
    { id: 'electra', number: '02', name: dict.suites_page.list.s2.name, desc: dict.suites_page.list.s2.desc, image: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606648/ayrisapart/Daire%202/photo_1_2024-04-05_16-04-34.jpg', bed: dict.suites_page.list.s2.bed, guests: dict.suites_page.list.s2.guests },
    { id: 'arke', number: '03', name: dict.suites_page.list.s3.name, desc: dict.suites_page.list.s3.desc, image: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606654/ayrisapart/Daire%203/photo_1_2024-04-05_16-06-09.jpg', bed: dict.suites_page.list.s3.bed, guests: dict.suites_page.list.s3.guests },
    { id: 'harpy', number: '04', name: dict.suites_page.list.s4.name, desc: dict.suites_page.list.s4.desc, image: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606661/ayrisapart/Daire%204/photo_1_2024-04-05_16-07-01.jpg', bed: dict.suites_page.list.s4.bed, guests: dict.suites_page.list.s4.guests },
    { id: 'hydaspes', number: '05', name: dict.suites_page.list.s5.name, desc: dict.suites_page.list.s5.desc, image: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606671/ayrisapart/Daire%205/photo_1_2024-05-04_15-32-44.jpg', bed: dict.suites_page.list.s5.bed, guests: dict.suites_page.list.s5.guests },
    { id: 'zephyrus', number: '06', name: dict.suites_page.list.s6.name, desc: dict.suites_page.list.s6.desc, image: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606681/ayrisapart/Daire%206/photo_1_2024-05-04_15-32-44.jpg', bed: dict.suites_page.list.s6.bed, guests: dict.suites_page.list.s6.guests },
    { id: 'pothos', number: '07', name: dict.suites_page.list.s7.name, desc: dict.suites_page.list.s7.desc, image: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606689/ayrisapart/Daire%207/photo_1_2024-05-04_15-33-34.jpg', bed: dict.suites_page.list.s7.bed, guests: dict.suites_page.list.s7.guests },
    { id: 'thaumas', number: '08', name: dict.suites_page.list.s8.name, desc: dict.suites_page.list.s8.desc, image: 'https://res.cloudinary.com/du7xohbct/image/upload/v1776606696/ayrisapart/Daire%208/photo_1_2024-05-04_15-33-34.jpg', bed: dict.suites_page.list.s8.bed, guests: dict.suites_page.list.s8.guests },
  ]

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

      {/* HEADER SECTION */}
      <section className="pt-44 pb-20 px-6 ">
        <div className="max-w-4xl mx-auto text-center space-y-10">
          <motion.h1
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            className="text-7xl md:text-[120px] font-serif text-[#1A1A1A] leading-[0.9] tracking-tight uppercase"
          >
            {dict.suites_page.title}
          </motion.h1>
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            className="text-[#1A1A1A]/60 text-lg md:text-xl max-w-2xl mx-auto font-medium leading-relaxed italic"
          >
            {dict.suites_page.subtitle}
          </motion.p>
        </div>
      </section>

      {/* SUITES LIST SECTION */}
      <section className="pb-32 px-6 md:px-12 max-w-[1400px] mx-auto">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-24">
          {suites.map((suite, idx) => (
            <motion.div
              key={suite.id}
              initial={{ opacity: 0, y: 50 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8, delay: (idx % 2) * 0.1 }}
              className="group cursor-pointer"
            >
              {/* Image Card */}
              <div className="aspect-[4/3] relative overflow-hidden rounded-[2px] bg-white p-0 shadow-sm">
                <Image
                  src={suite.image}
                  alt={suite.name}
                  fill
                  className="object-cover transition-transform duration-1000 group-hover:scale-105"
                />
              </div>

              {/* Info */}
              <div className="mt-10 space-y-6">
                <h2 className="text-4xl font-serif text-[#1A1A1A] uppercase tracking-tight">
                  <span className="mr-4 font-sans text-xl opacity-20">{suite.number}.</span>
                  {suite.name}
                </h2>

                {/* Icons row */}
                <div className="flex items-center space-x-8 text-[#1A1A1A]/60 text-[15px] font-medium">
                  <div className="flex items-center space-x-2">
                    <Users size={16} strokeWidth={1.5} className="text-[#C88C4B]" />
                    <span>{suite.guests}</span>
                  </div>
                  <div className="flex items-center space-x-2">
                    <BedDouble size={16} strokeWidth={1.5} className="text-[#C88C4B]" />
                    <span>{suite.bed}</span>
                  </div>
                </div>

                <p className="text-[#1A1A1A]/70 text-[17px] leading-relaxed italic max-w-lg">
                  {suite.desc}
                </p>

                {/* Link */}
                <Link
                  href={`/${lang}/suites/${suite.id}`}
                  className="inline-flex items-center space-x-3 text-[13px] font-bold tracking-[0.3em] uppercase border-b-2 border-[#1A1A1A] pb-2 group/btn"
                >
                  <span className="bg-[#1A1A1A] text-white p-1 rounded-full group-hover/btn:bg-[#C88C4B] transition-colors">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" 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.suites_page.details}</span>
                </Link>
              </div>
            </motion.div>
          ))}
        </div>
      </section>

      {/* GENERAL AMENITIES SECTION */}
      <section className="py-32 px-6 md:px-12 max-w-[1400px] mx-auto bg-white/30 rounded-[4px] mb-32 border border-[#1A1A1A]/5 shadow-sm">
        <Amenities dict={dict} />
      </section>

    </main>
  )
}