Untitled

import { useState, useEffect, useRef } from "react";
{/* Background Video: Full Body Massage */}
<video
autoPlay
loop
muted
playsInline
className="absolute inset-0 w-full h-full object-cover z-0 opacity-40"
>
<source src="/videos/full-body-massage.mp4" type="video/mp4" />
</video>


{/* Background Music */}
<audio ref={audioRef} loop>
<source src="/audio/relaxing-spa-music.mp3" type="audio/mp3" />
</audio>


{/* Overlay Content */}
<div className="relative z-10 bg-white/60 backdrop-blur-md rounded-3xl p-8 shadow-lg max-w-5xl">
<motion.h1
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
className="text-4xl font-bold text-amber-900 mb-4"
>
Full Body Massage
</motion.h1>


<motion.p
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.3, duration: 0.6 }}
className="max-w-2xl text-lg text-amber-800 mb-8"
>
A full body massage is a therapeutic treatment that involves massaging the entire body, typically from head to toe to promote relaxation, relieve muscle tension, and improve blood circulation. It usually includes the back, neck, shoulders, arms, hands, legs, and feet, and sometimes the scalp and face.
</motion.p>


<div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-3xl mb-8 mx-auto">
{prices.map((option) => (
<motion.div
key={option.id}
whileHover={{ scale: 1.05 }}
transition={{ type: "spring", stiffness: 200 }}
>
<Card
className={`cursor-pointer shadow-md rounded-2xl border-amber-300 ${
selected === option.id ? "bg-amber-200" : "bg-white"
}`}
onClick={() => setSelected(option.id)}
>
<CardContent className="flex flex-col items-center p-6">
<Clock className="w-8 h-8 text-amber-800 mb-2" />
<h3 className="text-xl font-semibold text-amber-900">
{option.time}
</h3>
<p className="text-lg text-amber-700 flex items-center gap-1">
<DollarSign className="w-4 h-4" /> {option.price}
</p>
</CardContent>
</Card>
</motion.div>
))}
</div>


<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.6, duration: 0.6 }}
className="bg-amber-100 rounded-2xl p-4 max-w-md shadow-inner mx-auto"
>
<h4 className="font-semibold text-amber-900 mb-2 flex items-center justify-center gap-2">
<Info className="w-5 h-5" /> Payment Method
</h4>
<p className="text-amber-800 text-sm">
We follow a <strong>“First come, first serve”</strong> basis. The earlier you make your payment or reservation, the better your chance of being served.
</p>
</motion.div>


<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.8, duration: 0.6 }}
className="mt-8"
>
<Button className="bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-xl text-lg shadow-lg">
Book Now
</Button>
</motion.div>
</div>
</div>
);
}