"use client"

import { Button } from "@/components/ui/button";
import { motion } from "framer-motion";
import Link from "next/link";

export function Hero() {
  return (
    <section className="relative h-[100dvh] flex items-center justify-center text-center overflow-hidden bg-slate-900 text-white">
      {/* Fallback Background Image */}
      <div className="absolute inset-0 w-full h-full">
        <div
          className="absolute inset-0 w-full h-full bg-cover bg-center bg-no-repeat"
          style={{ backgroundImage: "url(/fallback.jpg)" }}
        />
        <div className="absolute inset-0 bg-black/40" />
      </div>

      {/* Vimeo Video Background */}
      <div className="absolute inset-0 w-full h-full overflow-hidden">
        <iframe
          className="absolute top-1/2 left-1/2 w-[100vw] h-[56.25vw] min-h-[100vh] min-w-[177.77vh] -translate-x-1/2 -translate-y-1/2"
          src="https://player.vimeo.com/video/1145144021?h=e14da28bfc&autoplay=1&loop=1&muted=1&background=1&controls=0"
          title="Hero Background Video"
          frameBorder="0"
          allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share"
          allowFullScreen
        />
      </div>

      {/* Overlay */}
      <div className="absolute inset-0 bg-black/30 z-10" />

      <div className="container relative z-20 px-4">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          className="space-y-6"
        >
          <span className="inline-block px-4 py-2 rounded-full bg-primary/20 backdrop-blur-sm border border-primary/30 text-sm font-medium">
            Welcome to Trains of Rajbari
          </span>
          <h1 className="text-4xl md:text-6xl font-bold tracking-tight">
            Connecting People Through <br />
            <span className="text-primary-foreground">Journeys</span>
          </h1>
          <p className="text-lg md:text-xl text-gray-200 max-w-2xl mx-auto">
            Your one-stop destination for train updates, schedules, and stories
            in Rajbari.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
            <Button size="lg" className="text-lg" asChild>
              <a href="#schedule">View Schedule</a>
            </Button>
            <Button size="lg" variant="secondary" className="text-lg" asChild>
              <Link href="/blogs">Latest Updates</Link>
            </Button>
          </div>
        </motion.div>
      </div>
    </section>
  );
}
