'use client';

import { motion } from 'framer-motion';
import { Phone } from 'lucide-react';
import { useScroll, useTransform } from 'framer-motion';
import { useRef } from 'react';
import {
	useGetPublicContactQuery,
	useGetPublicGalaryQuery,
} from '@/store/slice/publicApi';
import { GallerySection } from '@/app/generated/prisma/enums';
import PrimaryButton from '../button/PrimaryButton';
import { containerVariants, itemVariants } from '@/constant/variants';
import { useRouter } from 'next/navigation';

const Hero = () => {
	const router = useRouter();
	const ref = useRef(null);
	const { scrollY } = useScroll();
	const y = useTransform(scrollY, [0, 300], [0, 100]);
	const { data: contactData } = useGetPublicContactQuery();
	const { data: galleryData } = useGetPublicGalaryQuery();
	const heroContacts = contactData?.filter(
		(contact) => contact.section === GallerySection.HERO
	);
	const heroGalary = galleryData?.filter(
		(contact) => contact.section === GallerySection.HERO
	);
	const phone =
		(heroContacts && heroContacts.length > 0 && heroContacts[0].phone) ||
		undefined;
	const heroBg =
		(heroGalary && heroGalary.length > 0 && heroGalary[0].image) || undefined;

	return (
		<section
			ref={ref}
			className="relative min-h-screen w-full overflow-hidden pt-24 "
			style={{ backgroundColor: '#110D09' }}
		>
			{/* Full-Width Cinematic Background Image with Parallax */}
			<motion.div className="absolute inset-0" style={{ y }}>
				{heroBg && (
					<img
						src={heroBg}
						alt="Luxury transportation - cityscape with premium vehicle"
						className="w-full h-full object-cover"
					/>
				)}

				{/* Dark Overlay Gradient (#0B0B0B → transparent) */}
				<div className="absolute inset-0 bg-linear-to-b from-[#0B0B0B]/70 via-[#0B0B0B]/50 to-transparent"></div>
			</motion.div>

			<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-[calc(100vh-96px)] flex flex-col items-center justify-center">
				<motion.div
					variants={containerVariants}
					initial="hidden"
					animate="visible"
					className="w-full text-center"
				>
					{/* Main Headline */}
					<motion.h1
						variants={itemVariants}
						className="font-serif text-5xl sm:text-6xl lg:text-7xl xl:text-8xl font-bold mb-6 tracking-tight text-white leading-tight text-balance"
					>
						TRUST LUXURY
						<br />
						TRANSPORTATION
					</motion.h1>

					{/* Gold Divider */}
					<motion.div
						variants={itemVariants}
						className="w-24 h-1 mx-auto mb-10"
						style={{ backgroundColor: '#CBB26A' }}
					></motion.div>

					{/* Subheadline */}
					<motion.p
						variants={itemVariants}
						className="text-xl sm:text-2xl font-light tracking-wide mb-16 max-w-3xl mx-auto"
						style={{ color: '#D6D6D6' }}
					>
						IN WASHINGTON DC, MARYLAND AND VIRGINIA.
					</motion.p>

					{/* CTA Buttons */}
					<motion.div
						variants={itemVariants}
						className="flex flex-col sm:flex-row gap-10 justify-center items-center mb-16 w-full"
					>
						{/* Primary Button */}
						<motion.div
							whileHover={{
								scale: 1.05,
								boxShadow: '0 0 30px rgba(203, 178, 106, 0.4)',
							}}
							whileTap={{ scale: 0.95 }}
						>
							<PrimaryButton
								className="cursor-pointer px-12 py-6 rounded-lg font-bold text-lg transition-all duration-300 whitespace-nowrap shadow-lg"
								title="BOOK ONLINE"
								type="button"
								onClick={() => {
									router.push('/book');
								}}
							/>
						</motion.div>

						{/* Secondary Button - Phone */}
						{phone && (
							<motion.a
								whileHover={{ scale: 1.05 }}
								whileTap={{ scale: 0.95 }}
								href={`tel:+${phone}`}
							>
								<PrimaryButton
									className="px-12 py-6 rounded-lg font-bold text-lg transition-all duration-300 bg-iherit flex items-center gap-3 whitespace-nowrap  border-yellow-200 hover:text-black text-gray-300 hover border-2"
									title={phone}
									startIcon={<Phone />}
								/>
							</motion.a>
						)}
					</motion.div>

					{/* Trust Indicators */}
					<motion.div
						variants={itemVariants}
						className="flex flex-col sm:flex-row gap-12 justify-center items-center text-sm px-4"
						style={{ color: '#D6D6D6' }}
					>
						<div className="flex items-center gap-2">
							<div
								className="w-2 h-2 md:w-4 md:h-4 rounded-full"
								style={{ backgroundColor: '#CBB26A' }}
							></div>
							<span className="text-sm md:text-lg">
								Professional Chauffeurs
							</span>
						</div>
						<div className="hidden sm:flex items-center gap-2">
							<div
								className="w-2 h-2 md:w-4 md:h-4 rounded-full"
								style={{ backgroundColor: '#CBB26A' }}
							></div>
							<span className="text-sm md:text-lg">Premium Fleet</span>
						</div>
						<div className="hidden sm:flex items-center gap-2">
							<div
								className="w-2 h-2 md:w-4 md:h-4 rounded-full"
								style={{ backgroundColor: '#CBB26A' }}
							></div>
							<span className="text-sm md:text-lg">24/7 Support</span>
						</div>
					</motion.div>
				</motion.div>

				{/* Scroll Indicator */}
				<motion.div
					animate={{ y: [0, 8, 0] }}
					transition={{ duration: 2, repeat: Infinity }}
					className="absolute bottom-8 left-1/2 transform -translate-x-1/2"
				>
					<div
						className="w-6 h-10 border-2 rounded-full flex items-start justify-center p-2"
						style={{ borderColor: 'rgba(203, 178, 106, 0.4)' }}
					>
						<div
							className="w-1 h-2 rounded-full"
							style={{ backgroundColor: '#CBB26A' }}
						></div>
					</div>
				</motion.div>
			</div>
		</section>
	);
};

export default Hero;