'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.8, 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="max-w-[1400px] 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://images.unsplash.com/photo-1571896349842-33c89424de2d?q=80&w=2080&auto=format&fit=crop"
            alt="Luxury Cave Pool Experience"
            fill
            className="object-cover"
            priority
          />
          <div className="absolute inset-0 bg-black/5" />
        </motion.div>
      </div>
    </section>
  )
}