"use client";

import Link from "next/link";
import { useEffect, useRef, useState } from "react";
import { ArrowRight, Clock, ShieldCheck, Star } from "lucide-react";
import { LocationDisplayName } from "@/components/LocationDisplayName";
import { MotionItem, MotionReveal, MotionStagger } from "@/components/Motion";
import { getWhatsAppUrl } from "@/lib/contact";
import { routePath } from "@/lib/route-url";
import { useUserLocation } from "@/lib/location-context";

export function HeroSection() {
  const videoRef = useRef<HTMLVideoElement | null>(null);
  const [videoVariant, setVideoVariant] = useState<"website" | "mobile">("mobile");
  const { location } = useUserLocation();

  useEffect(() => {
    const mediaQuery = window.matchMedia("(min-width: 1024px)");
    const updateSource = () => setVideoVariant(mediaQuery.matches ? "website" : "mobile");

    updateSource();
    mediaQuery.addEventListener("change", updateSource);

    return () => mediaQuery.removeEventListener("change", updateSource);
  }, []);

  const videoBase =
    videoVariant === "website" ? "/videos/1500x1000-website" : "/videos/1000x1000-mobile";

  useEffect(() => {
    const video = videoRef.current;

    if (!video) {
      return;
    }

    video.muted = true;
    video.defaultMuted = true;
    video.playsInline = true;
    video.setAttribute("muted", "");
    video.setAttribute("playsinline", "");
    video.setAttribute("webkit-playsinline", "");

    const playPromise = video.play();

    if (playPromise) {
      playPromise.catch(() => {
        // Some iOS/Safari modes still block autoplay despite muted inline video.
      });
    }
  }, [videoBase]);

  return (
    <section className="relative min-h-screen w-full overflow-hidden bg-[#000000] font-['Space_Grotesk']">
      <video
        ref={videoRef}
        key={videoBase}
        className="absolute inset-0 h-full w-full object-cover"
        autoPlay
        muted
        loop
        playsInline
        preload="auto"
        aria-hidden="true"
        tabIndex={-1}
        disablePictureInPicture
        controlsList="nodownload nofullscreen noremoteplayback"
        style={{ WebkitTransform: "translateZ(0)" }}
      >
        <source src={`${videoBase}.webm`} type="video/webm" />
        <source src={`${videoBase}.mp4`} type="video/mp4" />
      </video>

      {/* Solid Black Overlay - Enhanced for text legibility */}
      <div className="absolute inset-0 bg-black/60" />

      {/* Content Container */}
      <div className="relative z-10 mx-auto flex min-h-screen w-full max-w-[1440px] items-center px-6 pt-28 pb-14 sm:px-10 lg:px-12 lg:pb-16 2xl:px-16 2xl:pt-32 2xl:pb-20">
        <div className="w-full max-w-3xl 2xl:max-w-4xl">
          {/* Badge */}
          <MotionReveal className="mb-4 inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/10 px-4 py-2 text-[10px] font-bold uppercase tracking-widest text-white backdrop-blur-md sm:text-xs">
            <Star className="h-3 w-3 text-[#D32F2F]" />
            Doorstep Vehicle Service Platform
          </MotionReveal>

          {/* Heading */}
          <MotionReveal
            delay={0.05}
            className="text-4xl font-extrabold leading-[0.95] tracking-[-0.04em] text-white sm:text-6xl md:text-7xl lg:text-7xl 2xl:text-8xl"
          >
            Ride <span className="text-[#D32F2F]">Revived.</span>
            <span className="mt-1 block text-2xl font-medium tracking-tight text-white/90 sm:text-4xl md:text-5xl lg:text-5xl 2xl:text-6xl">
              Premium Care At Your Door{" "}
              {location ? (
                <>
                  In <LocationDisplayName name={location.name} />.
                </>
              ) : (
                "."
              )}
            </span>
          </MotionReveal>

          {/* Subtext */}
          <MotionReveal
            delay={0.1}
            className="mt-6 max-w-xl text-base leading-relaxed text-white/80 sm:text-lg 2xl:mt-8 2xl:text-xl"
          >
            Experience hassle-free car and bike servicing. From routine maintenance to emergency
            support, our verified experts come to you.
          </MotionReveal>

          {/* CTA Buttons */}
          <MotionReveal
            delay={0.15}
            className="mt-8 flex flex-col gap-3 sm:flex-row sm:items-center 2xl:mt-10 2xl:gap-4"
          >
            <Link
              href={getWhatsAppUrl()}
              target="_blank"
              rel="noreferrer"
              className="inline-flex items-center justify-center gap-2 rounded-full bg-[#D32F2F] px-8 py-3.5 text-sm font-bold text-white transition-all duration-300 hover:scale-105 hover:bg-[#D32F2F]/90 active:scale-95 shadow-xl shadow-[#D32F2F]/20 2xl:px-10 2xl:py-4"
            >
              Book Service
              <ArrowRight className="h-4 w-4" />
            </Link>

            <Link
              href={routePath("/services")}
              className="inline-flex items-center justify-center rounded-full border border-white/20 bg-white/5 px-8 py-3.5 text-sm font-bold text-white backdrop-blur-md transition-all duration-300 hover:bg-white/10 2xl:px-10 2xl:py-4"
            >
              Explore Services
            </Link>
          </MotionReveal>

          {/* Feature Grid - Hidden on mobile (hidden), visible from sm (tablet) upwards */}
          <MotionStagger className="mt-12 hidden grid-cols-1 gap-4 sm:grid sm:grid-cols-3 2xl:mt-20 2xl:gap-6">
            {/* Card 1 */}
            <MotionItem className="group flex flex-col gap-3 rounded-xl border border-white/5 bg-white/5 p-5 backdrop-blur-md transition-all hover:border-white/20 hover:bg-white/10 2xl:p-6">
              <ShieldCheck className="h-6 w-6 text-[#D32F2F]" />
              <div>
                <h3 className="text-sm font-bold text-white">Verified Mechanics</h3>
                <p className="mt-1 text-xs leading-5 text-white/50">
                  Trusted professionals for every service.
                </p>
              </div>
            </MotionItem>

            {/* Card 2 */}
            <MotionItem className="group flex flex-col gap-3 rounded-xl border border-white/5 bg-white/5 p-5 backdrop-blur-md transition-all hover:border-white/20 hover:bg-white/10 2xl:p-6">
              <Clock className="h-6 w-6 text-[#D32F2F]" />
              <div>
                <h3 className="text-sm font-bold text-white">Fast Booking</h3>
                <p className="mt-1 text-xs leading-5 text-white/50">
                  Schedule in less than a minute.
                </p>
              </div>
            </MotionItem>

            {/* Card 3 */}
            <MotionItem className="group flex flex-col gap-3 rounded-xl border border-white/5 bg-white/5 p-5 backdrop-blur-md transition-all hover:border-white/20 hover:bg-white/10 2xl:p-6">
              <Star className="h-6 w-6 text-[#D32F2F]" />
              <div>
                <h3 className="text-sm font-bold text-white">Transparent Pricing</h3>
                <p className="mt-1 text-xs leading-5 text-white/50">No hidden charges, ever.</p>
              </div>
            </MotionItem>
          </MotionStagger>
        </div>
      </div>
    </section>
  );
}