"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, Info } from "lucide-react"
import Link from "next/link"
import { useLanguage } from "@/lib/language-context"
import { cn } from "@/lib/utils"

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-[#2D343F]">
            <Navbar darkMode={false} />

            {/* Header Section */}
            <section className="relative pt-32 pb-16 bg-[#2D343F]">
                <div className="max-w-7xl mx-auto px-6">
                    <Link href="/" className="inline-flex items-center text-white/70 hover:text-white mb-8 transition-colors group">
                        <ArrowLeft className="w-4 h-4 mr-2" />
                        <span className="text-xs font-bold uppercase tracking-widest">{t.servicesPage.back}</span>
                    </Link>
                    <h1 className="text-4xl md:text-5xl font-black text-white uppercase tracking-tight">
                        {t.servicesPage.title} {t.servicesPage.titleAccent}
                    </h1>
                </div>
            </section>

            <section className="pb-24">
                <div className="max-w-7xl mx-auto px-6">
                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">

                        {/* Left Column - Packages (2/3 width) */}
                        <div className="lg:col-span-2 space-y-6">

                            {/* Common Shared Features */}
                            <div className="overflow-hidden rounded-lg shadow-lg">
                                <div className="bg-[#EF9F3F] px-4 py-2">
                                    <h2 className="text-white text-sm font-bold uppercase">{t.servicesPage.commonFeatures.title}</h2>
                                </div>
                                <div className="bg-[#3D4552] p-4 space-y-3">
                                    <div className="grid grid-cols-3 gap-4 border-b border-slate-600/50 pb-2">
                                        <div className="text-[#EF9F3F] text-xs font-bold col-span-1">{t.servicesPage.commonFeatures.toAirport}</div>
                                        <div className="text-white/90 text-xs col-span-2">{t.servicesPage.commonFeatures.toAirportDesc}</div>
                                    </div>
                                    <div className="grid grid-cols-3 gap-4">
                                        <div className="text-[#EF9F3F] text-xs font-bold col-span-1">{t.servicesPage.commonFeatures.toCity}</div>
                                        <div className="text-white/90 text-xs col-span-2">{t.servicesPage.commonFeatures.toCityDesc}</div>
                                    </div>
                                </div>
                            </div>

                            {/* Individual Packages */}
                            {packageEntries.map((pkg, idx) => (
                                <div key={idx} className="overflow-hidden rounded-lg shadow-lg">
                                    <div className="bg-[#EF9F3F] px-4 py-2">
                                        <h2 className="text-white text-sm font-bold uppercase">{pkg.unique}</h2>
                                    </div>
                                    <div className="bg-[#3D4552] p-4 space-y-3">
                                        <div className="grid grid-cols-3 gap-4 border-b border-slate-600/50 pb-2">
                                            <div className="text-white text-xs font-bold col-span-1">"{pkg.name}"</div>
                                            <div className="text-white/90 text-xs col-span-2">{pkg.desc}</div>
                                        </div>
                                        <div className="grid grid-cols-3 gap-4 border-b border-slate-600/50 pb-2">
                                            <div className="text-white/70 text-xs col-span-1">{t.servicesPage.commonFeatures.toAirport}</div>
                                            <div className="text-white/90 text-xs col-span-2">{pkg.toAirport}</div>
                                        </div>
                                        <div className="grid grid-cols-3 gap-4">
                                            <div className="text-white/70 text-xs col-span-1">{t.servicesPage.commonFeatures.toCity}</div>
                                            <div className="text-white/90 text-xs col-span-2">{pkg.toCity}</div>
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>

                        {/* Right Column - Info Panels (1/3 width) */}
                        <div className="space-y-6">

                            {/* Why Us */}
                            <div className="overflow-hidden rounded-lg shadow-lg">
                                <div className="bg-[#EF9F3F] px-4 py-2">
                                    <h2 className="text-white text-sm font-bold uppercase">{t.servicesPage.whyUs.title}</h2>
                                </div>
                                <div className="bg-[#3D4552] p-6">
                                    <ul className="space-y-3">
                                        {t.servicesPage.whyUs.items.map((item: string, i: number) => (
                                            <li key={i} className="flex items-start gap-3">
                                                <div className="mt-1.5 w-1.5 h-1.5 bg-white rounded-full shrink-0" />
                                                <span className="text-white/90 text-xs leading-relaxed">{item}</span>
                                            </li>
                                        ))}
                                    </ul>
                                </div>
                            </div>

                            {/* Free of Charge */}
                            <div className="overflow-hidden rounded-lg shadow-lg">
                                <div className="bg-[#EF9F3F] px-4 py-2">
                                    <h2 className="text-white text-sm font-bold uppercase">{t.servicesPage.freeOfCharge.title}</h2>
                                </div>
                                <div className="bg-[#3D4552] p-6">
                                    <ul className="space-y-3">
                                        {t.servicesPage.freeOfCharge.items.map((item: string, i: number) => (
                                            <li key={i} className="flex items-start gap-3">
                                                <div className="mt-1.5 w-1.5 h-1.5 bg-white rounded-full shrink-0" />
                                                <span className="text-white/90 text-xs leading-relaxed">{item}</span>
                                            </li>
                                        ))}
                                    </ul>
                                </div>
                            </div>

                            {/* Discounts */}
                            <div className="overflow-hidden rounded-lg shadow-lg">
                                <div className="bg-[#EF9F3F] px-4 py-2">
                                    <h2 className="text-white text-sm font-bold uppercase">{t.servicesPage.discounts.title}</h2>
                                </div>
                                <div className="bg-[#3D4552] p-6 space-y-6">
                                    <div className="space-y-4">
                                        <p className="text-white/90 text-xs italic font-bold">
                                            {t.servicesPage.discounts.fb} <Link href="https://www.facebook.com/skyflytravel.hu" target="_blank" className="text-[#EF9F3F] hover:underline ml-1">{t.servicesPage.discounts.fbLink}</Link>
                                        </p>
                                        <div className="flex justify-center">
                                            <Link href="https://www.facebook.com/skyflytravel.hu" target="_blank" className="bg-[#4D69A1] p-3 rounded-lg hover:scale-105 transition-transform">
                                                <Facebook className="text-white w-8 h-8 fill-white" />
                                            </Link>
                                        </div>
                                    </div>
                                    <div className="flex items-start gap-3 pt-4 border-t border-slate-600/50">
                                        <div className="mt-1.5 w-1.5 h-1.5 bg-white rounded-full shrink-0" />
                                        <p className="text-white/90 text-xs leading-relaxed">
                                            <span className="font-bold">{t.servicesPage.discounts.loyalty.split(':')[0]}:</span>
                                            {t.servicesPage.discounts.loyalty.split(':')[1]}
                                        </p>
                                    </div>
                                </div>
                            </div>

                            {/* Hotline quick link */}
                            <Card className="bg-primary/10 border-primary/20 p-6 rounded-2xl flex items-center space-x-4">
                                <div className="bg-primary p-3 rounded-xl shadow-lg">
                                    <Phone className="w-6 h-6 text-white" />
                                </div>
                                <div>
                                    <p className="text-[10px] font-bold text-white/50 uppercase tracking-widest">Hotline 0-24</p>
                                    <p className="text-lg font-black text-white">+36 30 554 3838</p>
                                </div>
                            </Card>

                        </div>
                    </div>

                    {/* Final CTA */}
                    <div className="mt-16 text-center">
                        <Button asChild size="lg" className="rounded-full px-12 h-16 bg-[#EF9F3F] hover:bg-[#D98F2F] text-white font-bold uppercase tracking-widest 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>
    )
}