'use client'

import { useRef } from 'react'
import { motion, useScroll, useTransform } from 'framer-motion'
import Image from 'next/image'
import Link from 'next/link'

interface Suite {
  id: string
  name: string
  number: string
  image: string
  desc: string
}

export default function SuitesHighlights({ lang, dict }: { lang: string, dict: any }) {
  const container = useRef(null)

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

  return (
    <section ref={container} className="relative bg-[#FAF7F0] z-60">

      <div className="relative">
        {suites.map((suite, idx) => (
          <SuiteCard
            key={suite.id}
            suite={suite}
            index={idx}
            lang={lang}
            dict={dict}
          />
        ))}
      </div>

      {/* Bottom spacer to allow the last item to scroll */}
      <div className="h-[20vh] bg-[#FAF7F0]" />
    </section>
  )
}

function SuiteCard({ suite, index, lang, dict }: { suite: Suite, index: number, lang: string, dict: any }) {
  const cardRef = useRef(null)
  const { scrollYProgress } = useScroll({
    target: cardRef,
    offset: ["start end", "start start"]
  })

  // Stacking (Curtain) Effect: Each card is sticky and 100vh to cover the previous one
  return (
    <div
      ref={cardRef}
      className="sticky top-0 h-screen w-full flex items-center bg-[#FAF7F0] border-t border-[#1A1A1A]/5 shadow-[0_-20px_50px_rgba(0,0,0,0.05)]"
      style={{ zIndex: index + 1 }}
    >
      <div className="max-w-[1400px] mx-auto px-6 w-full">
        <div className="grid grid-cols-1 md:grid-cols-12 gap-12 items-center">

          {/* Room Number & Info */}
          <div className="md:col-span-4 space-y-10">
            <div className="space-y-4">
              <span className="text-[#1A1A1A]/20 text-6xl font-serif block">{suite.number}.</span>
              <h3 className="text-4xl md:text-6xl font-serif text-[#1A1A1A] uppercase tracking-tight">{suite.name}</h3>
            </div>

            <p className="text-[#1A1A1A]/60 text-lg md:text-xl font-medium italic leading-relaxed max-w-sm">
              {suite.desc}
            </p>

            <div className="pt-4">
              <Link
                href={`/${lang}/suites/${suite.id}`}
                className="inline-flex items-center space-x-4 border-b-2 border-[#1A1A1A] pb-2 group"
              >
                <span className="text-[11px] font-bold tracking-[0.3em] uppercase">{dict.suites.btn.more}</span>
                <span className="text-xl transform group-hover:translate-x-1 transition-transform">↳</span>
              </Link>
            </div>
          </div>

          {/* Image */}
          <div className="md:col-span-8">
            <motion.div
              className="relative aspect-[16/10] md:aspect-[16/9] overflow-hidden rounded-[2px] shadow-2xl bg-white"
              style={{
                scale: useTransform(scrollYProgress, [0, 1], [0.9, 1]),
                opacity: useTransform(scrollYProgress, [0, 0.5], [0, 1])
              }}
            >
              <Image
                src={suite.image}
                alt={suite.name}
                fill
                className="object-cover"
              />
            </motion.div>
          </div>

        </div>
      </div>
    </div>
  )
}