"use client"

import Navbar from "@/components/navbar"
import Footer from "@/components/footer"
import { Card } from "@/components/ui/card"
import { ArrowLeft, Info } from "lucide-react"
import Link from "next/link"
import { useLanguage } from "@/lib/language-context"
import { cn } from "@/lib/utils"

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

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

            {/* Background Decorations */}
            <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-primary/5 rounded-full blur-3xl opacity-30 animate-blob" />
                <div className="absolute top-1/2 -left-20 w-80 h-80 bg-secondary/5 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]">
                <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.conditionsPage.back}</span>
                    </Link>

                    <div className="space-y-4">
                        <h1 className="text-5xl md:text-8xl font-black text-white tracking-tighter leading-none uppercase">
                            {t.conditionsPage.title} <br />
                            <span className="text-secondary/40 italic">{t.conditionsPage.titleAccent}</span>
                        </h1>
                    </div>
                </div>
            </section>

            <section className="py-24">
                <div className="max-w-5xl mx-auto px-6">
                    <div className="grid grid-cols-1 gap-12">
                        {t.conditionsPage.sections.map((section: any, idx: number) => (
                            <div key={idx} className="relative">
                                {/* Section Header */}
                                <div className="flex items-center gap-4 mb-8">
                                    <div className="bg-primary/10 p-2.5 rounded-xl">
                                        <Info className="w-5 h-5 text-primary" />
                                    </div>
                                    <h2 className="text-2xl md:text-3xl font-black text-slate-900 uppercase tracking-tight">
                                        {section.title}
                                    </h2>
                                </div>

                                {/* Section Content */}
                                <Card className="p-8 md:p-12 rounded-[2.5rem] border-none shadow-xl bg-white space-y-6">
                                    {section.content.map((paragraph: string, pIdx: number) => (
                                        <p key={pIdx} className="text-slate-600 leading-relaxed font-medium text-lg">
                                            {paragraph}
                                        </p>
                                    ))}
                                </Card>
                            </div>
                        ))}
                    </div>

                    {/* Contact Info Footer */}
                    <div className="mt-24 bg-slate-900 rounded-[3rem] p-12 text-center text-white relative overflow-hidden shadow-2xl">
                        <div className="absolute top-0 right-0 w-64 h-64 bg-primary/10 rounded-full blur-3xl -mr-32 -mt-32" />
                        <p className="relative z-10 text-xl font-bold uppercase tracking-widest text-primary mb-4">
                            SkyFly Travel
                        </p>
                        <h2 className="relative z-10 text-3xl md:text-4xl font-black uppercase tracking-tighter mb-8">
                            {t.nav.contact}
                        </h2>
                        <div className="relative z-10 flex flex-wrap justify-center gap-8">
                            <a href={`tel:${t.common.phone.replace(/\s/g, "")}`} className="font-bold text-lg hover:text-primary transition-colors">{t.common.phone}</a>
                            <a href={`mailto:${t.common.email}`} className="font-bold text-lg hover:text-primary transition-colors">{t.common.email}</a>
                        </div>
                    </div>
                </div>
            </section>
          <Footer />
        </main>
    )
}