"use client"

import { useEffect, useRef } from "react"
import Link from "next/link"

export default function HeroSection() {
  const videoRef = useRef<HTMLVideoElement>(null)

  useEffect(() => {
    videoRef.current?.play().catch(() => {
      // Muted autoplay can still be deferred by the browser during client navigation.
    })
  }, [])

  return (
    <section
      className="relative min-h-[100svh] flex items-center justify-center overflow-hidden px-4 py-24 sm:px-6 lg:px-8"
      aria-label="Hero"
    >
      {/* Background Video */}
      <video
        ref={videoRef}
        className="animate-hero-image absolute inset-0 h-full w-full object-cover"
        autoPlay
        muted
        loop
        playsInline
        poster="/images/hero-bg.jpg"
        aria-hidden="true"
      >
        <source
          src="/videos/hero-broll.mp4"
          type="video/mp4"
        />
      </video>

      {/* Dark overlay */}
      <div className="absolute inset-0 bg-[#1D1D1D]/60" />

      {/* Balanced vignette keeps copy readable over moving video. */}
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(29,29,29,0.18)_0%,rgba(29,29,29,0.56)_72%)]" />
      <div className="absolute inset-x-0 bottom-0 h-48 bg-gradient-to-t from-[#1D1D1D]/75 to-transparent" />

      {/* Content */}
      <div className="relative z-10 mx-auto flex w-full max-w-5xl flex-col items-center text-center">
        {/* Eyebrow */}
        <div className="animate-page-fade-up mb-4 rounded-full border border-[#F8F8F6]/10 bg-[#F8F8F6]/10 px-4 py-2 shadow-[0_12px_40px_rgba(0,0,0,0.18)] backdrop-blur-sm sm:mb-5">
          <span className="block text-[10px] font-semibold uppercase leading-none tracking-[0.22em] text-[#C9B88A] sm:text-xs">
            Build Your Career With Purpose
          </span>
        </div>

        {/* Headline */}
        <h1 className="animate-page-fade-up max-w-6xl text-balance text-[clamp(2.35rem,6.4vw,5.6rem)] font-semibold leading-[1.05] tracking-normal text-[#F8F8F6] [animation-delay:120ms]">
          Rooted in a{" "}
          <span className="font-bold italic text-[#D5B76D]">Tradition of Excellence</span>{" "}
          <span className="font-bold italic text-[#D5B76D]">Careers Built on</span> Purpose
        </h1>

        {/* Sub-headline */}
        <p className="animate-page-fade-up mt-5 max-w-2xl text-balance text-sm font-medium leading-6 text-[#F8F8F6]/85 sm:mt-6 sm:text-base md:text-lg [animation-delay:220ms]">
          For over 50 years, the Singh family has built a community of excellence
          across senior living, real estate, healthcare, and hospitality.
        </p>

        {/* CTAs */}
        <div className="animate-page-fade-up mt-8 flex w-full max-w-sm flex-col items-center justify-center gap-3 sm:w-auto sm:max-w-none sm:flex-row sm:gap-4 [animation-delay:320ms]">
          <Link
            href="#jobs"
            className="inline-flex h-12 w-full items-center justify-center rounded-full bg-[#D5B76D] px-7 text-sm font-bold text-[#1D1D1D] shadow-[0_14px_35px_rgba(0,0,0,0.24)] transition-all duration-300 hover:bg-[#E2C983] sm:w-auto"
          >
            Search Jobs
          </Link>
          {/* <Link
            href="#brands"
            className="inline-flex h-12 w-full items-center justify-center rounded-full border border-[#F8F8F6]/35 bg-[#1D1D1D]/10 px-7 text-sm font-bold text-[#F8F8F6] backdrop-blur-sm transition-all duration-300 hover:border-[#D5B76D] hover:text-[#D5B76D] sm:w-auto"
          >
            Search Jobs
          </Link> */}
        </div>
      </div>
    </section>
  )
}