"use client";
import Head from "next/head";
import { useApiQuery } from "@/hooks/api/useApiQuery";
import type { HeroButton, HeroState } from "@/types/models";

export default function HeroSection() {
  const { data: heroData } = useApiQuery<HeroState>("/api/hero", {
    cacheTTL: 5 * 60 * 1000, // 5 minutes
  });

  const hero = heroData ?? { title: "", description: "", background: null, buttons: [] };
  const bgUrl = hero.background ? hero.background.replace("/uploads/", "/api/uploads/") : null;

  return (
    <section
      id="hero-section"
      className="relative bg-cover bg-center min-h-[70vh] flex items-center justify-center text-white overflow-hidden"
      style={{
        backgroundImage: bgUrl ? `url(${bgUrl})` : "none",
      }}
      aria-label="Hero section"
    >
      {/* Preload the hero background image for faster LCP */}
      {bgUrl && (
        <link rel="preload" as="image" href={bgUrl} fetchPriority="high" />
      )}
      {/* Dramatic, slightly darker animated overlay */}
      <div className="absolute inset-0 bg-gradient-to-br from-black/20 via-primary-dark/20 to-black/30 animate-pulse-slow z-0"></div>
      {/* Subtle animated floating lights */}
      <div className="absolute inset-0 pointer-events-none z-10">
        <div className="absolute w-32 h-32 bg-primary/30 rounded-full blur-3xl top-10 left-10 animate-float" />
        <div className="absolute w-24 h-24 bg-orange-400/20 rounded-full blur-2xl bottom-20 right-20 animate-float2" />
      </div>

      <div className="relative z-20 text-center max-w-3xl px-6 flex flex-col items-center">
        <h1
          className="text-5xl md:text-7xl font-extrabold mb-6 drop-shadow-lg tracking-tight animate-fade-in min-h-[64px]"
          tabIndex={0}
        >
          {hero.title || <span className="inline-block w-2/3 h-12 bg-gray-700 rounded-md animate-pulse" />}
        </h1>
        <p
          className="text-xl md:text-2xl mb-8 leading-relaxed text-gray-200 animate-fade-in delay-200 min-h-[32px]"
          tabIndex={0}
        >
          {hero.description || <span className="inline-block w-full h-6 bg-gray-700 rounded-md animate-pulse" />}
        </p>
        <div className="flex flex-wrap justify-center gap-4 animate-fade-in delay-300 min-h-[56px]">
          {hero.buttons && hero.buttons.length > 0
            ? hero.buttons.map((button, index) => (
                <a
                  key={index}
                  href={button.url}
                  className="relative group inline-block px-8 py-3 rounded-full font-semibold text-lg bg-[#B87333] shadow-xl hover:scale-105 hover:bg-[#A05A2C] hover:shadow-[#B87333]/30 hover:shadow-2xl transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-[#B87333] focus:ring-offset-2 focus:ring-offset-black/50"
                  aria-label={button.label}
                >
                  <span className="relative z-10">{button.label}</span>
                  <span className="absolute inset-0 rounded-full opacity-0 group-hover:opacity-100 group-hover:scale-110 transition-all duration-300 bg-white/10 blur"></span>
                </a>
              ))
            : Array.from({ length: 2 }).map((_, i) => (
                <span
                  key={i}
                  className="inline-block px-8 py-3 rounded-full bg-gray-700 animate-pulse min-w-[120px] min-h-[48px]"
                />
              ))}
        </div>
      </div>

    </section>
  );
}
