'use client'

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

export default function ShowcaseImage() {
  const containerRef = useRef<HTMLDivElement>(null)
  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ["start end", "end start"]
  })

  // Slightly increased scales for a better balance
  const scale = useTransform(scrollYProgress, [0, 0.4], [0.1, 1.0])
  const opacity = useTransform(scrollYProgress, [0, 0.2], [0, 1])

  return (
    <section ref={containerRef} className="relative z-60 bg-[#FAF7F0] pb-32">
      <div className=" mx-auto px-6 overflow-hidden">
        <motion.div
          style={{
            scale,
            opacity
          }}
          className="relative aspect-[16/9] w-full overflow-hidden shadow-xl rounded-sm"
        >
          <Image
            src="https://res.cloudinary.com/du7xohbct/image/upload/v1776642098/ayrisapart/hero/photo-1501696461415-6bd6660c6742_rkxjcu.avif"
            alt="Luxury Cave Pool Experience"
            fill
            sizes="(max-width: 768px) calc(100vw - 48px), calc(100vw - 48px)"
            className="object-cover"
            priority
          />
          <div className="absolute inset-0 bg-black/5" />
        </motion.div>
      </div>
    </section>
  )
}
