"use client"

import Navbar from "@/components/navbar"
import Footer from "@/components/footer"
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"

const becsRows = [
    { persons: "1 pax / 1 way", express: "16.000 HUF", private: "29.000 HUF" },
    { persons: "2 pax / 1 way", express: "23.500 HUF", private: "29.000 HUF" },
    { persons: "3 pax / 1 way", express: "26.500 HUF", private: "29.000 HUF" },
    { persons: "4 pax / 1 way", express: "31.000 HUF", private: "35.000 HUF" },
    { persons: "5-6 pax / 1 way", express: "33.000 HUF", private: "37.500 HUF" },
    { persons: "7-8 pax / 1 way", express: "35.000 HUF", private: "39.000 HUF" },
]

const budapestRows = [
    { persons: "1 pax / 1 way", express: "22.000 HUF", private: "38.000 HUF" },
    { persons: "2 pax / 1 way", express: "28.000 HUF", private: "38.000 HUF" },
    { persons: "3 pax / 1 way", express: "33.000 HUF", private: "38.000 HUF" },
    { persons: "4 pax / 1 way", express: "38.000 HUF", private: "45.000 HUF" },
    { persons: "5-6 pax / 1 way", express: "42.000 HUF", private: "50.000 HUF" },
    { persons: "7-8 pax / 1 way", express: "45.000 HUF", private: "52.000 HUF" },
]

const pozsonyRows = [
    { persons: "1 pax / 1 way", express: "16.000 HUF", private: "29.000 HUF" },
    { persons: "2 pax / 1 way", express: "23.500 HUF", private: "29.000 HUF" },
    { persons: "3 pax / 1 way", express: "26.500 HUF", private: "29.000 HUF" },
    { persons: "4 pax / 1 way", express: "31.000 HUF", private: "35.000 HUF" },
    { persons: "5-6 pax / 1 way", express: "33.000 HUF", private: "37.500 HUF" },
    { persons: "7-8 pax / 1 way", express: "35.000 HUF", private: "39.000 HUF" },
]

const budapestViennaRows = [
    { persons: "1 pax / 1 way", express: "40.000 HUF", private: "60.000 HUF" },
    { persons: "2 pax / 1 way", express: "50.000 HUF", private: "60.000 HUF" },
    { persons: "3 pax / 1 way", express: "55.000 HUF", private: "60.000 HUF" },
    { persons: "4 pax / 1 way", express: "60.000 HUF", private: "70.000 HUF" },
    { persons: "5 pax / 1 way", express: "65.000 HUF", private: "75.000 HUF" },
    { persons: "6 pax / 1 way", express: "65.000 HUF", private: "75.000 HUF" },
    { persons: "7-8 pax / 1 way", express: "70.000 HUF", private: "80.000 HUF" },
]

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

    // Dynamic passenger text
    const getFaresHub = (rows: any[]) => {
        return rows.map(r => ({
            ...r,
            persons: language === "hu" ? r.persons.replace("pax", "fő").replace("way", "út") : r.persons
        }))
    }

    const specials = [
        {
            name: language === "hu" ? "Családi csomag" : "Family package",
            price: "33.000 HUF",
            description: language === "hu"
                ? "max. 4 fő, min. 1 gyermek (0-14 éves), private transzfer, max. 3 normál és 3 kézi poggyász (Teljesítés: személygépjárművel)"
                : "max. 4 pax, min. 1 child (0-14 yrs), private transfer, max. 3 standard and 3 hand luggage (Performed by passenger car)"
        },
        {
            name: language === "hu" ? "„Nagy” családi csomag" : "„Large” family package",
            price: "36.000 HUF",
            description: language === "hu"
                ? "max. 6 fő, min. 1 gyermek (0-14 éves), private transzfer, max. 6 normál és 6 kézi poggyász (Teljesítés: kisbusszal)"
                : "max. 6 pax, min. 1 child (0-14 yrs), private transfer, max. 6 standard and 6 hand luggage (Performed by minibus)"
        }
    ]

    const vipInfo = language === "hu"
        ? ["1-3 fő (Mercedes E-class): 40.000 Ft", "4-6 fő (Mercedes Vito / Ford Tourneo Custom): 50.000 Ft"]
        : ["1-3 pax (Mercedes E-class): 40.000 Ft", "4-6 pax (Mercedes Vito / Ford Tourneo Custom): 50.000 Ft"]


    const specialsPozsony = specials

    const specialsBudapestVienna = [
        {
            name: language === "hu" ? "Családi csomag" : "Family package",
            price: "66.000 HUF",
            description: language === "hu"
                ? "max. 4 fő, min. 1 gyermek (0-14 éves), private transzfer, max. 3 normál és 3 kézi poggyász (Teljesítés: személygépjárművel)"
                : "max. 4 pax, min. 1 child (0-14 yrs), private transfer, max. 3 standard and 3 hand luggage (Performed by passenger car)"
        },
        {
            name: language === "hu" ? "„Nagy”  családi csomag" : "„Large” family package",
            price: "72.000 HUF",
            description: language === "hu"
                ? "max. 6 fő, min. 1 gyermek (0-14 éves), private transzfer, max. 6 normál és 6 kézi poggyász (Teljesítés: kisbusszal)"
                : "max. 6 pax, min. 1 child (0-14 yrs), private transfer, max. 6 standard and 6 hand luggage (Performed by minibus)"
        }
    ]

    const vipInfoBudapestVienna = language === "hu"
        ? ["1-3 fő (Mercedes E-class): 75.000 Ft", "4-6 fő (Mercedes Vito / Ford Tourneo Custom): 95.000 Ft"]
        : ["1-3 pax (Mercedes E-class): 75.000 Ft", "4-6 pax (Mercedes Vito / Ford Tourneo Custom): 95.000 Ft"]

    
    const expressInfoText = (price: string) =>
        language === "hu"
            ? `Amennyiben nincs más utas a viteldíj ${price}. (22:00-05:00 utasfelvétel esetén Private transzfer keretében tudjuk vállalni, ha nincs más)`
            : `If there are no other passengers, the fare is ${price}. (For pickups between 22:00-05:00 we can only provide Private transfer if there are no other passengers.)`

    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 routeNav = [
        {
            id: "gyor-becs",
            label: language === "hu" ? "Győr – Bécs (Schwechat)" : "Győr – Vienna (Schwechat)",
        },
        {
            id: "gyor-budapest",
            label: language === "hu" ? "Győr – Budapest" : "Győr – Budapest",
        },
        {
            id: "gyor-pozsony",
            label: language === "hu" ? "Győr – Pozsony" : "Győr – Bratislava",
        },
        {
            id: "budapest-becs",
            label: language === "hu" ? "Budapest – Bécs (Schwechat)" : "Budapest – Vienna (Schwechat)",
        },
    ]

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

            {/* Background Decorations matching Home page */}
            <div className="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">
                            {language === "hu" ? "Útvonalak" : "Routes"}
                        </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={language === "hu" ? "GYŐR – BÉCS REPTÉR (SCHWECHAT) vagy BÉCS REPTÉR - GYŐR" : "GYŐR – VIENNA AIRPORT (SCHWECHAT) or VIENNA AIRPORT - GYŐR"}
                            rows={getFaresHub(becsRows)}
                            specials={specials}
                            vipInfo={vipInfo}
                            effectiveFrom={`${t.pricing.table.effective}: 2026.01.15`}
                            expressInfo={expressInfoBecs}
                        />
                    </div>

                    <div id="gyor-budapest">
                        <PricingTable
                            route={language === "hu" ? "GYŐR – BUDAPEST REPTÉR vagy BUDAPEST REPTÉR - GYŐR" : "GYŐR – BUDAPEST AIRPORT or BUDAPEST AIRPORT - GYŐR"}
                            rows={getFaresHub(budapestRows)}
                            specials={specials}
                            vipInfo={vipInfo}
                            effectiveFrom={`${t.pricing.table.effective}: 2026.01.15`}
                            expressInfo={expressInfoBudapest}
                        />
                    </div>



                    <div id="gyor-pozsony">
                        <PricingTable
                            route={language === "hu" ? "GYŐR – POZSONY REPTÉR vagy POZSONY REPTÉR - GYŐR" : "GYŐR – BRATISLAVA AIRPORT or BRATISLAVA AIRPORT - GYŐR"}
                            rows={getFaresHub(pozsonyRows)}
                            specials={specialsPozsony}
                            vipInfo={vipInfo}
                            effectiveFrom={`${t.pricing.table.effective}: 2026.01.15`}
                            expressInfo={expressInfoPozsony}
                        />
                    </div>

                    <div id="budapest-becs">
                        <PricingTable
                            route={language === "hu" ? "BUDAPEST – BÉCS REPTÉR (SCHWECHAT) vagy BÉCS REPTÉR (SCHWECHAT) - BUDAPEST" : "BUDAPEST – VIENNA AIRPORT (SCHWECHAT) or VIENNA AIRPORT (SCHWECHAT) - BUDAPEST"}
                            rows={getFaresHub(budapestViennaRows)}
                            specials={specialsBudapestVienna}
                            vipInfo={vipInfoBudapestVienna}
                            effectiveFrom={`${t.pricing.table.effective}: 2026.01.15`}
                            expressInfo={expressInfoBudapestBecs}
                        />
                    </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:+36305543838" 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>
                                    +36 30 5543838
                                </a>
                                <a href="mailto:info@skyflytravel.hu" 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>
                                    info@skyflytravel.hu
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
          <Footer />
        </main>
    )
}