"use client"

import Navbar from "@/components/navbar"
import Footer from "@/components/footer"
import PageReveal from "@/components/page-reveal"
import { Card } from "@/components/ui/card"
import { ArrowLeft, Users, Briefcase, Wind, Wifi, ShieldCheck, ChevronRight } from "lucide-react"
import Link from "next/link"
import Image from "next/image"
import { useLanguage } from "@/lib/language-context"
import { motion } from "framer-motion"

export default function FleetPage() {
    const { t } = useLanguage()

    const vehicles = [
        {
            id: "vclass",
            data: t.fleetPage.vehicles.vclass,
            image: "/images/fleet/v-class.jpg",
            large: true,
            icon: Users
        },
        {
            id: "eclass",
            data: t.fleetPage.vehicles.eclass,
            image: "/images/fleet/e-class.jpg",
            large: false,
            icon: Briefcase
        },
        {
            id: "superb",
            data: t.fleetPage.vehicles.superb,
            image: "/images/fleet/superb.jpg",
            large: false,
            icon: Wind
        },
        {
            id: "transit",
            data: t.fleetPage.vehicles.transit,
            image: "/images/fleet/transit.jpg",
            large: true,
            icon: Users
        }
    ]

    const containerVariants = {
        hidden: { opacity: 0 },
        visible: {
            opacity: 1,
            transition: {
                staggerChildren: 0.2
            }
        }
    }

    const itemVariants = {
        hidden: { opacity: 0, y: 30 },
        visible: {
            opacity: 1,
            y: 0,
            transition: {
                duration: 0.8
            }
        }
    }

    return (
        <PageReveal className="relative min-h-screen bg-[#fafaf9] text-slate-800 overflow-hidden">
            <Navbar darkMode={false} />

            {/* Background elements - Softer and more premium */}
            <div className="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none -z-10">
                <div className="absolute top-[-5%] left-[-5%] w-[50%] h-[50%] bg-primary/5 rounded-full blur-[140px] opacity-60" />
                <div className="absolute top-[20%] right-[-10%] w-[40%] h-[40%] bg-blue-500/5 rounded-full blur-[120px] opacity-40" />
            </div>

            {/* Header Section */}
            <section className="relative pt-32 pb-20 px-6">
                <div className="max-w-7xl mx-auto">
                    <motion.div
                        initial={{ opacity: 0, x: -20 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ duration: 0.6 }}
                    >
                        <Link href="/" className="inline-flex items-center text-slate-400 hover:text-primary mb-10 transition-colors group">
                            <ArrowLeft className="w-4 h-4 mr-2 group-hover:-translate-x-1 transition-transform" />
                            <span className="text-[10px] font-black uppercase tracking-[0.3em]">{t.fleetPage.back}</span>
                        </Link>
                    </motion.div>

                    <div className="max-w-4xl">
                        <motion.div
                            initial={{ opacity: 0, y: 30 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ duration: 0.8 }}
                            className="space-y-8"
                        >
                            <h1 className="text-7xl md:text-9xl font-black uppercase tracking-tighter leading-[0.85] text-slate-900">
                                {t.fleetPage.title} <br />
                                <span className="text-primary italic">{t.fleetPage.titleAccent}</span>
                            </h1>
                            <p className="text-xl md:text-2xl text-slate-500 max-w-2xl leading-relaxed font-medium">
                                {t.fleetPage.description}
                            </p>
                        </motion.div>
                    </div>
                </div>
            </section>

            {/* Fleet Grid */}
            <section className="pb-32 px-6">
                <motion.div
                    variants={containerVariants}
                    initial="hidden"
                    whileInView="visible"
                    viewport={{ once: true }}
                    className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-10"
                >
                    {vehicles.map((vehicle, idx) => (
                        <motion.div
                            key={vehicle.id}
                            variants={itemVariants}
                            className={vehicle.large ? "md:col-span-2" : "md:col-span-1"}
                        >
                            <Card className="group relative overflow-hidden rounded-[3.5rem] border-none bg-white shadow-[0_32px_64px_-16px_rgba(0,0,0,0.08)] transition-all duration-700 hover:shadow-[0_48px_80px_-20px_rgba(0,0,0,0.12)] aspect-[16/9] md:aspect-auto md:h-[700px]">
                                {/* Image with refined hover scaling */}
                                <Image
                                    src={vehicle.image}
                                    alt={vehicle.data.name}
                                    fill
                                    className="object-cover transition-transform duration-[1.5s] ease-out group-hover:scale-110"
                                />

                                {/* Darker bottom gradient for text readability */}
                                <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-80 transition-opacity duration-700 group-hover:opacity-90" />

                                {/* Content Details - Overlay style without box */}
                                <div className="absolute inset-0 p-10 md:p-16 flex flex-col justify-end">
                                    <div className="space-y-6 transform transition-all duration-700 group-hover:-translate-y-2">
                                        <div className="flex items-center justify-between">
                                            <div className="flex items-center gap-3">
                                                <span className="px-5 py-2 rounded-full bg-primary text-white text-[9px] font-black uppercase tracking-[0.2em] shadow-xl">
                                                    {vehicle.data.category}
                                                </span>
                                            </div>
                                                <div className="flex items-center gap-2">
                                                    <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
                                                <span className="text-[9px] font-black text-white/60 uppercase tracking-[0.3em]">{t.fleetPage.availabilityLabel}</span>
                                            </div>
                                        </div>

                                        <div className="space-y-4">
                                            <h3 className="text-4xl md:text-7xl font-black uppercase tracking-tighter text-white leading-tight">
                                                {vehicle.data.name}
                                            </h3>
                                            <p className="text-white/70 max-w-2xl text-base md:text-lg font-medium leading-relaxed">
                                                {vehicle.data.description}
                                            </p>
                                        </div>

                                        <div className="flex flex-wrap gap-x-8 gap-y-4 pt-4">
                                            {vehicle.data.features.map((feature: string, fIdx: number) => (
                                                <div key={fIdx} className="flex items-center gap-3 text-white/80">
                                                    <div className="w-1.5 h-1.5 rounded-full bg-primary" />
                                                    <span className="text-[10px] md:text-xs font-black uppercase tracking-widest">{feature}</span>
                                                </div>
                                            ))}
                                        </div>

                                        <div className="pt-8 border-t border-white/10 flex items-center justify-between">
                                            <Link
                                                href="https://app.skyflytravel.hu/public/offers/new"
                                                target="_blank"
                                                className="inline-flex items-center gap-4 text-primary font-black uppercase tracking-[0.2em] text-[10px] hover:gap-6 transition-all"
                                            >
                                                {t.nav.cta}
                                                <ChevronRight className="w-4 h-4" />
                                            </Link>

                                            <div className="hidden md:flex gap-4">
                                                <div className="w-12 h-12 rounded-2xl bg-white/10 backdrop-blur-md flex items-center justify-center text-white border border-white/10 group-hover:bg-primary/20 group-hover:border-primary/30 transition-all">
                                                    <vehicle.icon className="w-6 h-6" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </Card>
                        </motion.div>
                    ))}
                </motion.div>
            </section>

            {/* Quality Statement */}
            <section className="py-32 px-6 bg-white relative">
                <div className="max-w-5xl mx-auto text-center space-y-16">
                    <motion.div
                        initial={{ opacity: 0, scale: 0.9 }}
                        whileInView={{ opacity: 1, scale: 1 }}
                        viewport={{ once: true }}
                        className="bg-primary/10 w-24 h-24 rounded-[2rem] flex items-center justify-center mx-auto mb-8 rotate-6 hover:rotate-0 transition-transform duration-700"
                    >
                        <ShieldCheck className="w-12 h-12 text-primary" />
                    </motion.div>

                    <h2 className="text-4xl md:text-6xl font-black uppercase tracking-tighter leading-tight text-slate-900">
                        {t.servicesPage.whyUs.items[1]}
                    </h2>

                    <div className="grid grid-cols-1 md:grid-cols-3 gap-16 md:gap-8">
                        <div className="space-y-4">
                            <p className="text-6xl font-black text-primary transition-transform hover:scale-110 duration-300">{t.fleetPage.stats.ageValue}</p>
                            <p className="text-[11px] font-black uppercase tracking-[0.2em] text-slate-400">{t.fleetPage.stats.ageLabel}</p>
                        </div>
                        <div className="space-y-4">
                            <p className="text-6xl font-black text-primary transition-transform hover:scale-110 duration-300">{t.fleetPage.stats.cleanlinessValue}</p>
                            <p className="text-[11px] font-black uppercase tracking-[0.2em] text-slate-400">{t.fleetPage.stats.cleanlinessLabel}</p>
                        </div>
                        <div className="space-y-4">
                            <p className="text-6xl font-black text-primary transition-transform hover:scale-110 duration-300">{t.fleetPage.stats.maintenanceValue}</p>
                            <p className="text-[11px] font-black uppercase tracking-[0.2em] text-slate-400">{t.fleetPage.stats.maintenanceLabel}</p>
                        </div>
                    </div>
                </div>
            </section>
          <Footer />
        </PageReveal>
    )
}