"use client"

import Navbar from "@/components/navbar"
import Footer from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import {
    ArrowLeft,
    CheckCircle2,
    Facebook,
    Phone,
    Sparkles,
    Shield,
    Clock,
    MapPin
} from "lucide-react"
import Link from "next/link"
import { useLanguage } from "@/lib/language-context"

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

    const packageEntries = [
        {
            unique: t.servicesPage.packages.classic.unique,
            name: t.servicesPage.packages.classic.title,
            desc: t.servicesPage.packages.classic.desc,
            toAirport: t.servicesPage.packages.classic.toAirport,
            toCity: t.servicesPage.packages.classic.toCity
        },
        {
            unique: t.servicesPage.packages.express.unique,
            name: t.servicesPage.packages.express.title,
            desc: t.servicesPage.packages.express.desc,
            toAirport: t.servicesPage.packages.express.toAirport,
            toCity: t.servicesPage.packages.express.toCity
        },
        {
            unique: t.servicesPage.packages.private.unique,
            name: t.servicesPage.packages.private.title,
            desc: t.servicesPage.packages.private.desc,
            toAirport: t.servicesPage.packages.private.toAirport,
            toCity: t.servicesPage.packages.private.toCity
        },
        {
            unique: t.servicesPage.packages.family.unique,
            name: t.servicesPage.packages.family.title,
            desc: t.servicesPage.packages.family.desc,
            toAirport: t.servicesPage.packages.family.toAirport,
            toCity: t.servicesPage.packages.family.toCity
        },
        {
            unique: t.servicesPage.packages.bigFamily.unique,
            name: t.servicesPage.packages.bigFamily.title,
            desc: t.servicesPage.packages.bigFamily.desc,
            toAirport: t.servicesPage.packages.bigFamily.toAirport,
            toCity: t.servicesPage.packages.bigFamily.toCity
        }
    ]

    return (
        <main 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-purple-200 rounded-full blur-3xl opacity-30 animate-blob" />
                <div className="absolute top-1/2 -left-20 w-[360px] h-[360px] bg-blue-200 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-100 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.servicesPage.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.servicesPage.title}
                            <br />
                            <span className="text-primary italic">{t.servicesPage.titleAccent}</span>
                        </h1>
                        <p className="text-lg md:text-2xl text-slate-500 leading-relaxed font-medium">
                            {t.servicesPage.description}
                        </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-8">
                            {/* Shared Features */}
                            <Card className="rounded-[3rem] border-none shadow-2xl bg-white overflow-hidden">
                                <div className="bg-gradient-to-r from-primary to-secondary px-8 py-6">
                                    <div className="flex items-center gap-3 text-white">
                                        <Sparkles className="w-5 h-5" />
                                        <h2 className="text-sm font-black uppercase tracking-[0.3em]">{t.servicesPage.commonFeatures.title}</h2>
                                    </div>
                                </div>
                                <div className="p-8 space-y-6">
                                    <div className="grid md:grid-cols-3 gap-6 border-b border-slate-100 pb-6">
                                        <div className="text-[10px] font-black uppercase tracking-[0.3em] text-primary">
                                            {t.servicesPage.commonFeatures.toAirport}
                                        </div>
                                        <div className="md:col-span-2 text-slate-500 text-sm leading-relaxed font-medium">
                                            {t.servicesPage.commonFeatures.toAirportDesc}
                                        </div>
                                    </div>
                                    <div className="grid md:grid-cols-3 gap-6">
                                        <div className="text-[10px] font-black uppercase tracking-[0.3em] text-primary">
                                            {t.servicesPage.commonFeatures.toCity}
                                        </div>
                                        <div className="md:col-span-2 text-slate-500 text-sm leading-relaxed font-medium">
                                            {t.servicesPage.commonFeatures.toCityDesc}
                                        </div>
                                    </div>
                                </div>
                            </Card>

                            {/* Packages */}
                            <div className="grid grid-cols-1 gap-6">
                                {packageEntries.map((pkg, idx) => (
                                    <Card key={idx} className="rounded-[3rem] border-none shadow-xl bg-white overflow-hidden group">
                                        <div className="flex flex-col md:flex-row">
                                            <div className="md:w-1/3 bg-slate-900 text-white p-8">
                                                <p className="text-[10px] font-black uppercase tracking-[0.35em] text-white/60">
                                                    {pkg.unique}
                                                </p>
                                                <h3 className="text-2xl font-black uppercase tracking-tight mt-3">
                                                    {pkg.name}
                                                </h3>
                                            </div>
                                            <div className="md:w-2/3 p-8 space-y-6">
                                                <p className="text-slate-500 text-sm leading-relaxed font-medium">
                                                    {pkg.desc}
                                                </p>
                                                <div className="grid md:grid-cols-2 gap-6">
                                                    <div className="rounded-[2rem] bg-slate-50 p-5 border border-slate-100">
                                                        <div className="flex items-center gap-3 mb-3">
                                                            <MapPin className="w-4 h-4 text-primary" />
                                                            <span className="text-[10px] font-black uppercase tracking-[0.3em] text-slate-400">
                                                                {t.servicesPage.commonFeatures.toAirport}
                                                            </span>
                                                        </div>
                                                        <p className="text-slate-600 text-sm leading-relaxed font-medium">{pkg.toAirport}</p>
                                                    </div>
                                                    <div className="rounded-[2rem] bg-slate-50 p-5 border border-slate-100">
                                                        <div className="flex items-center gap-3 mb-3">
                                                            <Clock className="w-4 h-4 text-secondary" />
                                                            <span className="text-[10px] font-black uppercase tracking-[0.3em] text-slate-400">
                                                                {t.servicesPage.commonFeatures.toCity}
                                                            </span>
                                                        </div>
                                                        <p className="text-slate-600 text-sm leading-relaxed font-medium">{pkg.toCity}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </Card>
                                ))}
                            </div>
                        </div>

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

                            <Card className="rounded-[3rem] border-none shadow-2xl bg-white overflow-hidden">
                                <div className="bg-gradient-to-r from-secondary to-primary px-8 py-6">
                                    <h2 className="text-white text-sm font-black uppercase tracking-[0.3em]">
                                        {t.servicesPage.freeOfCharge.title}
                                    </h2>
                                </div>
                                <div className="p-8 space-y-4">
                                    {t.servicesPage.freeOfCharge.items.map((item: string, i: number) => (
                                        <div key={i} className="flex items-start gap-3">
                                            <Shield className="w-4 h-4 text-secondary mt-1" />
                                            <span className="text-slate-600 text-sm leading-relaxed font-medium">{item}</span>
                                        </div>
                                    ))}
                                </div>
                            </Card>

                            <Card className="rounded-[3rem] border-none shadow-2xl bg-white overflow-hidden">
                                <div className="bg-slate-900 px-8 py-6">
                                    <h2 className="text-white text-sm font-black uppercase tracking-[0.3em]">
                                        {t.servicesPage.discounts.title}
                                    </h2>
                                </div>
                                <div className="p-8 space-y-6">
                                    <p className="text-slate-600 text-sm leading-relaxed font-medium">
                                        {t.servicesPage.discounts.fb}{" "}
                                        <Link href="https://www.facebook.com/skyflytravel.hu" target="_blank" className="text-primary font-black hover:underline">
                                            {t.servicesPage.discounts.fbLink}
                                        </Link>
                                    </p>
                                    <div className="flex items-center justify-between rounded-[2rem] bg-slate-50 border border-slate-100 p-4">
                                        <div className="text-[10px] font-black uppercase tracking-[0.3em] text-slate-400">
                                            {t.servicesPage.discounts.fbLink}
                                        </div>
                                        <Link href="https://www.facebook.com/skyflytravel.hu" target="_blank" className="bg-[#4D69A1] p-3 rounded-2xl hover:scale-105 transition-transform">
                                            <Facebook className="text-white w-6 h-6 fill-white" />
                                        </Link>
                                    </div>
                                    <div className="rounded-[2rem] bg-slate-900 text-white p-5">
                                        <p className="text-xs leading-relaxed">
                                            <span className="font-black uppercase tracking-wide text-primary">
                                                {t.servicesPage.discounts.loyalty.split(":")[0]}:
                                            </span>{" "}
                                            {t.servicesPage.discounts.loyalty.split(":")[1]}
                                        </p>
                                    </div>
                                </div>
                            </Card>

                            <Card className="rounded-[3rem] border-none shadow-2xl bg-slate-900 text-white p-6 flex items-center gap-4">
                                <div className="bg-primary p-3 rounded-2xl shadow-lg">
                                    <Phone className="w-6 h-6 text-white" />
                                </div>
                                <div>
                                    <p className="text-[10px] font-black text-white/50 uppercase tracking-[0.3em]">
                                        {t.contactPage.info.hotlineShort}
                                    </p>
                                    <p className="text-lg font-black">{t.common.phone}</p>
                                </div>
                            </Card>
                        </div>
                    </div>

                    {/* CTA */}
                    <div className="mt-20 text-center">
                        <Button
                            asChild
                            size="lg"
                            className="rounded-full px-12 h-16 bg-primary hover:bg-primary/90 text-white font-black uppercase tracking-[0.25em] shadow-xl transition-all"
                        >
                            <a href="https://app.skyflytravel.hu/public/offers/new" target="_blank" rel="noopener noreferrer">
                                {t.nav.cta}
                            </a>
                        </Button>
                    </div>
                </div>
            </section>

            <Footer />
        </main>
    )
}