"use client";

import { motion } from "framer-motion";
import Image from "next/image";
import { Experience } from "@/lib/constants";
import { Button } from "@/components/shared/Button";

interface ExperienceHeroProps {
  experience: Experience;
}

export function ExperienceHero({ experience }: ExperienceHeroProps) {
  return (
    <section className="relative pt-20 md:pt-24">
      <div className="relative h-[50vh] md:h-[60vh] overflow-hidden">
        <Image
          src={experience.image}
          alt={`${experience.name} — ${experience.tagline}`}
          fill
          className="object-cover"
          priority
          sizes="100vw"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-deep-nazar/70 via-deep-nazar/20 to-transparent" />

        <div className="absolute bottom-0 left-0 right-0 p-6 md:p-12">
          <div className="max-w-7xl mx-auto">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.2 }}
            >
              <p className="text-bosphorus font-semibold text-sm tracking-widest uppercase mb-3">
                {experience.tagline}
              </p>
              <h1 className="font-display text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-4">
                {experience.name}
              </h1>
              <p className="text-white/80 text-lg md:text-xl max-w-2xl mb-6">
                {experience.hook}
              </p>

              <div className="flex flex-wrap items-center gap-4 text-white/70 text-sm mb-6">
                <span className="flex items-center gap-1.5">
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                  {experience.duration}
                </span>
                <span className="flex items-center gap-1.5">
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
                  </svg>
                  {experience.groupSize}
                </span>
                <span className="text-sun-yolk font-semibold">&#9733; 4.9/5</span>
              </div>

              <div className="flex flex-wrap gap-4 items-center">
                <Button href="#booking" variant="coral" size="lg">
                  Book Now — From &euro;{experience.price}
                </Button>
                <span className="text-white/50 text-sm">
                  Free cancellation up to 48h before
                </span>
              </div>
            </motion.div>
          </div>
        </div>
      </div>
    </section>
  );
}