"use client"

import Navbar from "@/components/navbar"
import Footer from "@/components/footer"
import PageReveal from "@/components/page-reveal"
import PricingTable from "@/components/pricing-table"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { ArrowLeft, Phone, Mail, Clock, Shield, MapPin } from "lucide-react"
import Link from "next/link"
import { useLanguage } from "@/lib/language-context"

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

    const expressInfoText = (price: string) =>
        t.pricing.expressInfoTemplate.replace("{price}", price)

    const expressInfoBecs = expressInfoText("23.500 HUF")
    const expressInfoBudapest = expressInfoText("28.000 HUF")
    const expressInfoPozsony = expressInfoText("23.500 HUF")
    const expressInfoBudapestBecs = expressInfoText("50.000 HUF")

    const districtSurcharge = t.pricing.districtSurcharge

    const routeNav = [
        {
            id: "gyor-becs",
            label: t.pricing.routes.gyorBecs,
        },
        {
            id: "gyor-budapest",
            label: t.pricing.routes.gyorBudapest,
        },
        {
            id: "gyor-pozsony",
            label: t.pricing.routes.gyorPozsony,
        },
        {
            id: "budapest-becs",
            label: t.pricing.routes.budapestBecs,
        },
    ]

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

            {/* Background Decorations matching Home page */}
            <div className="absolute md:fixed inset-0 pointer-events-none -z-10 overflow-hidden">
                <div className="absolute top-1/4 -right-20 w-96 h-96 bg-purple-100 rounded-full blur-3xl opacity-30 animate-blob" />
                <div className="absolute top-1/2 -left-20 w-80 h-80 bg-blue-100 rounded-full blur-3xl opacity-30 animate-blob animation-delay-2000" />
            </div>

            {/* Header Section */}
            <section className="relative pt-40 pb-32 overflow-hidden bg-[#D9A321]">
                {/* Background gradient covers full section now */}
                <div
                    className="absolute inset-0 bg-diagonal opacity-100 -z-10"
                    style={{ background: "linear-gradient(135deg, #D9A321 0%, #1A1A1A 100%)" }}
                />
                <div className="absolute bottom-0 left-0 w-full h-[100px] bg-slate-50 transform -skew-y-3 origin-bottom-left -z-10" />

                <div className="max-w-7xl mx-auto px-6 relative z-10">
                    <Link href="/" className="inline-flex items-center text-white/70 hover:text-white mb-10 transition-colors group">
                        <div className="bg-white/10 p-2 rounded-full mr-3 group-hover:bg-white/20 transition-colors">
                            <ArrowLeft className="w-4 h-4" />
                        </div>
                        <span className="text-xs font-bold tracking-[0.2em] uppercase">{t.pricing.back}</span>
                    </Link>

                    <div className="space-y-4">
                        <h1 className="text-5xl md:text-8xl font-black text-white tracking-tighter leading-none">
                            {t.pricing.title} <br />
                            <span className="text-secondary/40 italic">{t.pricing.titleAccent}</span>
                        </h1>
                        <p className="text-xl text-white/70 max-w-2xl leading-relaxed font-medium">
                            {t.pricing.description}
                        </p>
                    </div>
                </div>
            </section>

            {/* Pricing Content */}
            <section className="py-16">
                <div className="max-w-7xl mx-auto px-6">
                    {/* Info Banner */}
                    <Card className="p-6 mb-16 bg-white border-blue-100 shadow-xl rounded-[2rem] flex flex-col md:flex-row gap-8 items-center">
                        <div className="bg-primary/10 p-4 rounded-2xl">
                            <Clock className="w-8 h-8 text-primary" />
                        </div>
                        <div className="flex-1">
                            <h3 className="font-extrabold text-blue-950 uppercase tracking-tight mb-1">{t.pricing.banner.title}</h3>
                            <p className="text-slate-500 text-sm leading-relaxed">
                                {t.pricing.banner.description}
                            </p>
                        </div>
                        <Button asChild className="rounded-full px-8 h-12 bg-primary hover:bg-primary/90 text-sm font-bold tracking-widest uppercase">
                            <a href="https://app.skyflytravel.hu/public/offers/new" target="_blank" rel="noopener noreferrer">
                                {t.nav.cta}
                            </a>
                        </Button>
                    </Card>

                    {/* Route Navigation */}
                    <div className="mb-14">
                        <div className="text-center text-[10px] font-black uppercase tracking-[0.4em] text-slate-400 mb-4">
                            {t.pricing.routes.title}
                        </div>
                        <div className="flex flex-wrap justify-center gap-3">
                            {routeNav.map(route => (
                                <a
                                    key={route.id}
                                    href={`#${route.id}`}
                                    className="px-4 py-2 rounded-full bg-white text-slate-700 text-xs font-bold uppercase tracking-widest border border-slate-100 shadow-sm hover:border-primary hover:text-primary transition-colors"
                                >
                                    {route.label}
                                </a>
                            ))}
                        </div>
                    </div>

                    {/* Tables */}
                    <div id="gyor-becs">
                        <PricingTable
                            route={t.pricing.routesTable.gyorBecs}
                            rows={t.pricing.rows.becs}
                            specials={t.pricing.specials.base}
                            vipInfo={t.pricing.vipInfo.base}
                            effectiveFrom={`${t.pricing.table.effective}: 2026.01.15`}
                            expressInfo={expressInfoBecs}
                        />
                    </div>

                    <div id="gyor-budapest">
                        <PricingTable
                            route={t.pricing.routesTable.gyorBudapest}
                            rows={t.pricing.rows.budapest}
                            specials={t.pricing.specials.base}
                            vipInfo={t.pricing.vipInfo.base}
                            effectiveFrom={`${t.pricing.table.effective}: 2026.01.15`}
                            expressInfo={expressInfoBudapest}
                            districtSurcharge={districtSurcharge}
                        />
                    </div>

                    <div id="gyor-pozsony">
                        <PricingTable
                            route={t.pricing.routesTable.gyorPozsony}
                            rows={t.pricing.rows.pozsony}
                            specials={t.pricing.specials.base}
                            vipInfo={t.pricing.vipInfo.base}
                            effectiveFrom={`${t.pricing.table.effective}: 2026.01.15`}
                            expressInfo={expressInfoPozsony}
                        />
                    </div>

                    <div id="budapest-becs">
                        <PricingTable
                            route={t.pricing.routesTable.budapestBecs}
                            rows={t.pricing.rows.budapestVienna}
                            specials={t.pricing.specials.budapestVienna}
                            vipInfo={t.pricing.vipInfo.budapestVienna}
                            effectiveFrom={`${t.pricing.table.effective}: 2026.01.15`}
                            expressInfo={expressInfoBudapestBecs}
                            districtSurcharge={districtSurcharge}
                        />
                    </div>
                    {/* Additional Info Cards */}
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-24">
                        <Card className="p-8 rounded-[2rem] border-none shadow-lg bg-white group hover:-translate-y-2 transition-all duration-300">
                            <div className="bg-green-50 w-16 h-16 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-green-500 transition-colors duration-300">
                                <Shield className="w-8 h-8 text-green-500 group-hover:text-white transition-colors duration-300" />
                            </div>
                            <h4 className="font-extrabold text-slate-900 text-xl mb-3 uppercase tracking-tight">{t.pricing.extra.security.title}</h4>
                            <p className="text-slate-500 text-sm leading-relaxed">
                                {t.pricing.extra.security.desc}
                            </p>
                        </Card>

                        <Card className="p-8 rounded-[2rem] border-none shadow-lg bg-white group hover:-translate-y-2 transition-all duration-300">
                            <div className="bg-blue-50 w-16 h-16 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-blue-500 transition-colors duration-300">
                                <MapPin className="w-8 h-8 text-blue-500 group-hover:text-white transition-colors duration-300" />
                            </div>
                            <h4 className="font-extrabold text-slate-900 text-xl mb-3 uppercase tracking-tight">{t.pricing.extra.addresses.title}</h4>
                            <p className="text-slate-500 text-sm leading-relaxed">
                                {t.pricing.extra.addresses.desc}
                            </p>
                        </Card>

                        <Card className="p-8 rounded-[2rem] border-none shadow-lg bg-white group hover:-translate-y-2 transition-all duration-300">
                            <div className="bg-purple-50 w-16 h-16 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-purple-500 transition-colors duration-300">
                                <Phone className="w-8 h-8 text-purple-500 group-hover:text-white transition-colors duration-300" />
                            </div>
                            <h4 className="font-extrabold text-slate-900 text-xl mb-3 uppercase tracking-tight">{t.pricing.extra.custom.title}</h4>
                            <p className="text-slate-500 text-sm leading-relaxed">
                                {t.pricing.extra.custom.desc}
                            </p>
                        </Card>
                    </div>

                    {/* Footer CTA */}
                    <div className="mt-24 text-center space-y-8 bg-slate-900 rounded-[3rem] p-16 text-white overflow-hidden relative">
                        <div className="absolute top-0 right-0 w-64 h-64 bg-primary/20 rounded-full blur-3xl -mr-32 -mt-32" />
                        <div className="relative z-10 flex flex-col items-center">
                            <h2 className="text-3xl md:text-5xl font-black uppercase tracking-tighter mb-8">{t.pricing.cta.title}</h2>
                            <div className="flex flex-wrap justify-center gap-12">
                                <a href={`tel:${t.common.phone.replace(/\s/g, "")}`} className="flex items-center gap-4 text-xl md:text-2xl font-black hover:text-primary transition-colors decoration-primary decoration-4 underline-offset-8 group">
                                    <div className="bg-white/5 p-3 rounded-2xl group-hover:bg-primary transition-colors">
                                        <Phone className="text-primary group-hover:text-white" />
                                    </div>
                                    {t.common.phone}
                                </a>
                                <a href={`mailto:${t.common.email}`} className="flex items-center gap-4 text-xl md:text-2xl font-black hover:text-primary transition-colors decoration-primary decoration-4 underline-offset-8 group">
                                    <div className="bg-white/5 p-3 rounded-2xl group-hover:bg-primary transition-colors">
                                        <Mail className="text-primary group-hover:text-white" />
                                    </div>
                                    {t.common.email}
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
          <Footer />
        </PageReveal>
    )
}