"use client";

import { useTranslations } from "next-intl";
import { motion } from "framer-motion";
import { mockData } from "@/lib/mock-data";
import Link from "next/link";
import Image from "next/image";

export function Hero() {
  const t = useTranslations("hero");

  return (
    <>
      <section 
        className="relative h-[921px] min-h-[600px] w-full overflow-hidden"
        aria-label="Hero Section"
      >
        {/* Background Image - Using Next.js Image for optimization */}
        <div className="absolute inset-0 z-0">
          <motion.div 
            initial={{ scale: 1.05 }}
            animate={{ scale: 1 }}
            transition={{ duration: 15, ease: "easeOut" }}
            style={{ willChange: "transform" }}
            className="relative w-full h-full motion-reduce:!transform-none"
          >
            <Image 
              src={mockData.heroSlides[1]}
              alt="Kordon Apart - Fethiye Marina manzarası"
              fill
              className="object-cover object-[center_top]"
              priority
              sizes="100vw"
            />
          </motion.div>
          {/* Gradient Overlay */}
          <div className="absolute inset-0 bg-gradient-to-b from-[#002045]/80 via-[#002045]/50 to-[#002045]/90" />
        </div>

        {/* Hero Content */}
        <div className="relative z-10 h-full max-w-7xl mx-auto px-4 md:px-12 flex flex-col justify-center items-start pt-20">
          <motion.div 
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            className="max-w-2xl motion-reduce:!transform-none motion-reduce:!opacity-100"
          >
            <span className="font-label-sm text-[12px] text-white/80 uppercase tracking-widest mb-4 block font-bold">
              {t("subtitle")}
            </span>
            <h1 className="font-heading text-5xl md:text-6xl lg:text-7xl text-white mb-6 leading-tight font-extrabold tracking-tight">
              {t("title")}
            </h1>
            <p className="font-body-lg text-lg text-white/90 mb-8 max-w-lg leading-relaxed" style={{ maxWidth: "65ch" }}>
              {t("desc")}
            </p>
            <div className="flex flex-wrap gap-4">
              <Link 
                href="#" 
                className="bg-[#CA8A04] text-white px-8 py-4 rounded-lg font-label-sm uppercase tracking-widest text-[12px] hover:bg-[#CA8A04]/90 transition-colors duration-200 shadow-lg cursor-pointer focus:ring-2 focus:ring-[#CA8A04]/50 focus:outline-none min-h-[48px] flex items-center"
                role="button"
              >
                {t("explore")}
              </Link>
              <Link 
                href="#" 
                className="bg-white/10 backdrop-blur-md border border-white/20 text-white px-8 py-4 rounded-lg font-label-sm uppercase tracking-widest text-[12px] hover:bg-white/20 transition-colors duration-200 cursor-pointer focus:ring-2 focus:ring-white/50 focus:outline-none min-h-[48px] flex items-center"
                role="button"
              >
                {t("virtualTour")}
              </Link>
            </div>
          </motion.div>
        </div>
      </section>

      {/* Search Bar Utility (Floating over Hero bottom) */}
      <div className="relative z-20 max-w-5xl mx-auto px-4 -mt-24 hidden md:block">
        <motion.div 
          initial={{ opacity: 0, y: 40 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.5 }}
          className="bg-white p-8 rounded-xl shadow-2xl shadow-black/10 grid grid-cols-4 gap-6 items-end border border-gray-100 motion-reduce:!transform-none motion-reduce:!opacity-100"
        >
          <div className="space-y-2">
            <label htmlFor="check-in" className="block font-label-sm text-[12px] text-gray-500 uppercase tracking-widest">{t("checkIn")}</label>
            <input id="check-in" className="w-full bg-transparent border-0 border-b border-gray-200 py-2 focus:ring-0 focus:border-gray-900 transition-colors duration-200 text-gray-900 cursor-pointer min-h-[44px]" type="date" />
          </div>
          <div className="space-y-2">
            <label htmlFor="check-out" className="block font-label-sm text-[12px] text-gray-500 uppercase tracking-widest">{t("checkOut")}</label>
            <input id="check-out" className="w-full bg-transparent border-0 border-b border-gray-200 py-2 focus:ring-0 focus:border-gray-900 transition-colors duration-200 text-gray-900 cursor-pointer min-h-[44px]" type="date" />
          </div>
          <div className="space-y-2">
            <label htmlFor="guests" className="block font-label-sm text-[12px] text-gray-500 uppercase tracking-widest">{t("guests")}</label>
            <select id="guests" className="w-full bg-transparent border-0 border-b border-gray-200 py-2 focus:ring-0 focus:border-gray-900 transition-colors duration-200 text-gray-900 cursor-pointer min-h-[44px]">
              <option value="1">{t("adult1")}</option>
              <option value="2">{t("adult2")}</option>
              <option value="3+">{t("adult3")}</option>
            </select>
          </div>
          <button className="bg-[#CA8A04] text-white min-h-[48px] rounded-lg font-label-sm uppercase tracking-widest text-[12px] hover:bg-[#CA8A04]/90 transition-colors duration-200 font-bold cursor-pointer shadow-lg focus:ring-2 focus:ring-[#CA8A04]/50 focus:outline-none">
            {t("checkAvailability")}
          </button>
        </motion.div>
      </div>
    </>
  );
}