"use client"

import Navbar from "@/components/navbar"
import Footer from "@/components/footer"
import PageReveal from "@/components/page-reveal"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import {
    ArrowLeft,
    CheckCircle2,
    Calendar,
    Users,
    Bus,
    Briefcase,
    Heart,
    Phone,
    Sparkles,
    Shield,
    Clock,
    MapPin
} from "lucide-react"
import Link from "next/link"
import Image from "next/image"
import { useLanguage } from "@/lib/language-context"

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

    const serviceIcons = [
        <Bus key="excursions" className="w-8 h-8 text-primary" />,
        <Heart key="weddings" className="w-8 h-8 text-secondary" />,
        <Briefcase key="corporate" className="w-8 h-8 text-primary" />,
        <Users key="work" className="w-8 h-8 text-secondary" />
    ]

    const serviceImages = [
        "/images/service-cards/ford-transit.jpg",
        "/images/service-cards/merci-eskuvo.png",
        "/images/service-cards/ford-tourneo.jpg",
        "/images/service-cards/opel-vivaro.jpg"
    ]

    return (
        <PageReveal className="relative min-h-screen bg-slate-50">
            <Navbar darkMode={false} />

            {/* Atmosphere */}
            <div className="absolute md:fixed inset-0 pointer-events-none -z-10 overflow-hidden">
                <div className="absolute -top-24 -right-24 w-[420px] h-[420px] bg-primary/10 rounded-full blur-3xl opacity-30 animate-blob" />
                <div className="absolute top-1/2 -left-20 w-[360px] h-[360px] bg-blue-100 rounded-full blur-3xl opacity-30 animate-blob animation-delay-2000" />
                <div className="absolute bottom-0 right-1/3 w-[280px] h-[280px] bg-pink-50 rounded-full blur-3xl opacity-30 animate-blob animation-delay-4000" />
            </div>

            {/* Hero */}
            <section className="relative pt-32 pb-20 overflow-hidden">
                <div className="absolute inset-0 -z-10 bg-[#fafaf9]" />
                <div className="absolute bottom-0 left-0 w-full h-[90px] bg-white transform -skew-y-2 origin-bottom-left -z-10" />

                <div className="max-w-7xl mx-auto px-6">
                    <Link href="/" className="inline-flex items-center text-slate-400 hover:text-primary mb-10 transition-colors group">
                        <div className="bg-slate-100 p-2 rounded-full mr-3 group-hover:bg-primary/10 transition-colors">
                            <ArrowLeft className="w-4 h-4" />
                        </div>
                        <span className="text-[10px] font-black uppercase tracking-[0.3em]">{t.otherTransportPage.back}</span>
                    </Link>

                    <div className="space-y-8 max-w-4xl">
                        <h1 className="text-6xl md:text-9xl font-black uppercase tracking-tighter leading-[0.85] text-slate-900">
                            {t.otherTransportPage.title}
                            <br />
                            <span className="text-primary italic">{t.otherTransportPage.titleAccent}</span>
                        </h1>
                        <p className="text-lg md:text-2xl text-slate-500 leading-relaxed font-medium">
                            {t.otherTransportPage.heroDescription}
                        </p>
                    </div>
                </div>
            </section>

            <section className="py-16">
                <div className="max-w-7xl mx-auto px-6">
                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-10">
                        {/* Left column */}
                        <div className="lg:col-span-2 space-y-12">

                            {/* Main Introduction Card */}
                            <Card className="rounded-[3rem] border-none shadow-2xl bg-white overflow-hidden p-8 md:p-12">
                                <div className="space-y-6">
                                    <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 text-primary">
                                        <Sparkles className="w-4 h-4" />
                                        <span className="text-[10px] font-black uppercase tracking-[0.2em]">{t.otherTransportPage.badge}</span>
                                    </div>
                                    <h2 className="text-3xl md:text-4xl font-black uppercase tracking-tighter text-slate-900 leading-tight">
                                        {t.otherTransportPage.titlePart1} <span className="text-primary">{t.otherTransportPage.titleAccentPart}</span>
                                    </h2>
                                    <p className="text-slate-600 text-lg leading-relaxed font-medium">
                                        {t.otherTransportPage.mainContent}
                                    </p>
                                </div>
                            </Card>

                            {/* Service Grid - Ensuring relative position for fill images */}
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                {t.otherTransportPage.services.map((service: any, idx: number) => (
                                    <Card key={idx} className="rounded-[3rem] border-none shadow-xl bg-white overflow-hidden group hover:-translate-y-2 transition-transform duration-500">
                                        <div className="relative w-full overflow-hidden bg-slate-100" style={{ height: '240px' }}>
                                            <Image
                                                src={serviceImages[idx]}
                                                alt={service.title}
                                                fill
                                                className="object-cover group-hover:scale-110 transition-transform duration-700"
                                                sizes="(min-width: 768px) 400px, 100vw"
                                            />
                                            <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
                                            <div className="absolute bottom-6 left-6">
                                                <div className="bg-white/20 backdrop-blur-md p-3 rounded-2xl border border-white/20">
                                                    {serviceIcons[idx]}
                                                </div>
                                            </div>
                                        </div>
                                        <div className="p-8 space-y-4">
                                            <h3 className="text-2xl font-black uppercase tracking-tight text-slate-900">
                                                {service.title}
                                            </h3>
                                            <p className="text-slate-500 text-sm leading-relaxed font-medium">
                                                {service.desc}
                                            </p>
                                        </div>
                                    </Card>
                                ))}
                            </div>
                        </div>

                        {/* Right column */}
                        <div className="space-y-8">
                            {/* Capacity Card */}
                            <Card className="rounded-[3rem] border-none shadow-2xl bg-slate-900 text-white overflow-hidden">
                                <div className="bg-primary px-8 py-6">
                                    <div className="flex items-center gap-3">
                                        <Users className="w-5 h-5 text-white" />
                                        <h2 className="text-white text-sm font-black uppercase tracking-[0.3em]">
                                            {t.otherTransportPage.capacityTitle}
                                        </h2>
                                    </div>
                                </div>
                                <div className="p-8 space-y-6">
                                    <p className="text-slate-300 text-sm leading-relaxed font-medium">
                                        {t.otherTransportPage.capacityDesc}
                                    </p>
                                    <div className="space-y-4">
                                        {t.otherTransportPage.capacityList.map((item: string, idx: number) => (
                                            <div key={idx} className="flex items-start gap-3">
                                                <CheckCircle2 className="w-4 h-4 text-primary mt-1" />
                                                <span className="text-slate-200 text-sm font-medium">{item}</span>
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            </Card>

                            {/* Contact Card */}
                            <Card className="rounded-[3rem] border-none shadow-2xl bg-white overflow-hidden p-8 space-y-8">
                                <div className="space-y-2">
                                    <p className="text-[10px] font-black uppercase tracking-[0.3em] text-primary">{t.otherTransportPage.contactSubtitle}</p>
                                    <h3 className="text-2xl font-black uppercase tracking-tight text-slate-900">
                                        {t.otherTransportPage.cta}
                                    </h3>
                                </div>
                                <div className="space-y-4">
                                    <Button asChild className="w-full h-16 rounded-full bg-primary hover:bg-primary/90 text-white font-black uppercase tracking-widest text-xs shadow-lg shadow-primary/20">
                                        <Link href="/kapcsolat">
                                            {t.otherTransportPage.cta}
                                        </Link>
                                    </Button>
                                    <div className="flex items-center justify-center gap-4 py-4">
                                        <div className="h-px bg-slate-100 flex-grow" />
                                        <span className="text-[10px] font-black text-slate-300 uppercase tracking-widest">{t.otherTransportPage.phoneAlt}</span>
                                        <div className="h-px bg-slate-100 flex-grow" />
                                    </div>
                                    <a href={`tel:${t.common.phoneHref}`} className="flex items-center gap-4 p-5 rounded-[2rem] bg-slate-50 hover:bg-slate-100 transition-colors border border-slate-100 group">
                                        <div className="bg-slate-900 p-3 rounded-2xl group-hover:scale-110 transition-transform">
                                            <Phone className="w-5 h-5 text-white" />
                                        </div>
                                        <div>
                                            <p className="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">Hotline 24/7</p>
                                            <p className="text-lg font-black text-slate-900">{t.common.phone}</p>
                                        </div>
                                    </a>
                                </div>
                            </Card>

                            {/* Quality Badge */}
                            <div className="rounded-[3rem] bg-gradient-to-br from-primary to-secondary p-[1px]">
                                <div className="bg-white rounded-[2.9rem] p-8 space-y-4">
                                    <Shield className="w-10 h-10 text-primary" />
                                    <h4 className="text-xl font-black uppercase tracking-tight text-slate-900">{t.otherTransportPage.qualityTitle}</h4>
                                    <p className="text-slate-500 text-sm font-medium leading-relaxed">
                                        {t.otherTransportPage.qualityDesc}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <Footer />
        </PageReveal>
    )
}