"use client";

import React, { useState, useEffect, startTransition } from "react";

type BackgroundOption = {
  type: "image" | "video";
  src: string;
};

const backgroundOptions: BackgroundOption[] = [
  {
    type: "video",
    src: "https://res.cloudinary.com/djmddrfv2/video/upload/v1776867708/1776635758203726_mql5sn.mp4",
  },
];

const Hero = () => {
  const [background, setBackground] = useState<BackgroundOption | null>(null);

  useEffect(() => {
    startTransition(() => {
      const randomIndex = Math.floor(Math.random() * backgroundOptions.length);
      setBackground(backgroundOptions[randomIndex]);
    });
  }, []);

  return (
    <section
      className="relative isolate min-h-screen overflow-hidden bg-black"
      data-aos="fade-in"
    >
      <video
        key={background?.src}
        className="absolute inset-0 z-0 h-full w-full scale-105 object-cover"
        autoPlay
        loop
        muted
        playsInline
        preload="auto"
        src={background?.src}
      />

      <div
        className="pointer-events-none absolute inset-0 z-[1] bg-gradient-to-b from-black/60 via-black/40 to-black/80"
        aria-hidden
      />
      <div
        className="pointer-events-none absolute inset-0 z-[1] bg-[radial-gradient(ellipse_at_center,_transparent_0%,_rgba(0,0,0,0.5)_100%)]"
        aria-hidden
      />

      <div
        aria-hidden
        className="pointer-events-none absolute -top-40 left-1/2 z-[1] h-96 w-96 -translate-x-1/2 rounded-full bg-[#d6ac63]/20 blur-3xl"
      />

      <div
        className="relative z-[2] mx-auto flex min-h-screen max-w-7xl items-center justify-center px-4 sm:px-6 lg:px-8"
        data-aos="zoom-in-up"
        data-aos-delay="100"
      >
        <div className="flex max-w-5xl flex-col items-center text-center">
          <span className="inline-flex items-center gap-2 rounded-full border border-[#d6ac63]/50 bg-white/5 px-4 py-1.5 text-xs font-light uppercase tracking-wide text-[#d6ac63] backdrop-blur-md">
            <span className="h-1.5 w-1.5 rounded-full bg-[#d6ac63] shadow-[0_0_8px_#d6ac63]" />
            Fauzan Resorts
          </span>

          <h1 className="mt-8 text-4xl font-light uppercase leading-[1.05] tracking-wide text-white sm:text-5xl lg:text-6xl xl:text-7xl">
            Success{" "}
            <span className="bg-gradient-to-r from-[#d6ac63] via-[#e8c989] to-[#d6ac63] bg-clip-text font-light italic text-transparent">
              redefined
            </span>
            <br />
            in moments
          </h1>

          <div
            className="mt-10 h-px w-24 bg-gradient-to-r from-transparent via-[#d6ac63] to-transparent"
            aria-hidden
          />
        </div>
      </div>

      <a
        href="#home-contact"
        className="group absolute bottom-10 left-1/2 z-[2] -translate-x-1/2 text-white/80 transition hover:text-white"
        aria-label="Discover more and scroll down"
      >
        <div className="flex flex-col items-center gap-3 text-center">
          <span className="text-[10px] font-light uppercase tracking-wide">
            Discover more
          </span>
          <span className="relative flex h-10 w-6 items-start justify-center rounded-full border border-white/40 p-1.5">
            <span className="block h-2 w-1 animate-bounce rounded-full bg-[#d6ac63]" />
          </span>
        </div>
      </a>
    </section>
  );
};

export default Hero;