import Link from "next/link";
import HeroVideo from "@/components/HeroVideo";

interface HeroSectionProps {
  heroData: {
    location: string;
    welcome: string;
    title: string;
    subtitle: string;
    exploreActivities: string;
    scroll: string;
  };
  lang: string;
}

export default function HeroSection({ heroData, lang }: HeroSectionProps) {
  return (
    <section className="relative h-screen w-full flex items-center justify-center overflow-hidden">
      <HeroVideo />

      <div className="relative z-10 text-center px-4 max-w-5xl mx-auto">
        <div className="animate-fade-up delay-100">
          <span className="inline-block text-white/60 text-xs tracking-[0.35em] uppercase mb-8 font-light">
            {heroData.location}
          </span>
        </div>

        <div className="flex items-center justify-center gap-4 md:gap-6 mb-6 animate-fade-up delay-200">
          <span
            className="text-xs md:text-sm tracking-[0.4em] font-bold uppercase whitespace-nowrap text-white/90"
            style={{ writingMode: 'vertical-rl', transform: 'rotate(180deg)' }}
          >
            {heroData.welcome}
          </span>
          <h1 className="font-sans font-black text-white leading-none tracking-tighter text-[clamp(4rem,10vw,10rem)] uppercase">
            {heroData.title}
          </h1>
        </div>

        <p className="animate-fade-up delay-500 text-white/75 text-base md:text-xl mb-10 font-light italic tracking-wide">
          {heroData.subtitle}
        </p>

        <div className="animate-fade-up delay-600 flex flex-col sm:flex-row items-center justify-center gap-4">
          <Link
            href={`/${lang}/aktiviteler`}
            className="bg-white/10 backdrop-blur-sm border border-white/30 text-white px-10 py-4 rounded-full text-xs font-bold tracking-[0.15em] uppercase hover:bg-white/20 transition-colors w-full sm:w-auto text-center"
          >
            {heroData.exploreActivities}
          </Link>
        </div>
      </div>

      {/* Scroll indicator */}
      <div className="absolute bottom-10 left-1/2 -translate-x-1/2 z-20 flex flex-col items-center gap-3">
        <span className="text-white/40 text-[10px] tracking-[0.3em] uppercase">{heroData.scroll}</span>
        <div className="w-px h-12 bg-gradient-to-b from-white/40 to-transparent animate-scroll-bounce" />
      </div>
    </section>
  );
}