"use client"

import Navbar from "@/components/navbar"
import Footer from "@/components/footer"
import { ArrowLeft, Facebook, Star, CheckCircle2 } from "lucide-react"
import Link from "next/link"
import Image from "next/image"
import { useLanguage } from "@/lib/language-context"

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

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

            {/* Header Section */}
            <section className="relative pt-40 pb-20 overflow-hidden bg-slate-900">
                <div className="absolute inset-0 bg-gradient-to-br from-blue-600/20 to-purple-600/20 -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">
                        <ArrowLeft className="w-4 h-4 mr-2 group-hover:-translate-x-1 transition-transform" />
                        <span className="text-xs font-bold uppercase tracking-widest">{t.discounts.pages.fbGoogle.title}</span>
                    </Link>
                    <h1 className="text-5xl md:text-7xl font-black text-white uppercase tracking-tighter leading-none mb-6">
                        {t.discounts.fbGoogle.title} <br />
                        <span className="text-primary italic">{t.discounts.pages.fbGoogle.discountLabel}</span>
                    </h1>
                </div>
            </section>

            <section className="py-24">
                <div className="max-w-7xl mx-auto px-6">
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
                        {/* Facebook Section */}
                        <div className="space-y-12">
                            <div className="space-y-6">
                                <div className="flex items-center gap-4">
                                    <div className="w-12 h-12 bg-blue-600 rounded-2xl flex items-center justify-center shadow-lg shadow-blue-600/20">
                                        <Facebook className="text-white w-6 h-6" />
                                    </div>
                                    <h2 className="text-3xl font-black text-slate-900 uppercase tracking-tight">{t.discounts.pages.fbGoogle.fbTitle}</h2>
                                </div>
                                <ul className="space-y-4">
                                    {t.discounts.pages.fbGoogle.fbSteps.map((step: string, idx: number) => (
                                        <li key={idx} className="flex items-start gap-3 text-slate-600 font-medium">
                                            <CheckCircle2 className="w-5 h-5 text-blue-600 mt-1 shrink-0" />
                                            <span>{step}</span>
                                        </li>
                                    ))}
                                </ul>
                                <div className="pt-4">
                                    <a
                                        href="https://www.facebook.com/airporttransfer.gyor"
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        className="inline-flex items-center gap-2 bg-blue-600 text-white px-8 py-4 rounded-full font-bold hover:bg-blue-700 transition-colors shadow-xl shadow-blue-600/20"
                                    >
                                        <Facebook className="w-5 h-5" />
                                        {t.discounts.pages.fbGoogle.facebookOpen}
                                    </a>
                                </div>
                            </div>

                            <div className="space-y-6">
                                <h3 className="text-xl font-bold text-slate-900">{t.discounts.pages.fbGoogle.helperText}</h3>
                                <div className="relative aspect-video rounded-3xl overflow-hidden shadow-2xl border border-slate-200">
                                    <Image
                                        src="/images/SkyFlyFBLike.gif"
                                        alt="Facebook Like Help"
                                        fill
                                        sizes="(min-width: 1024px) 50vw, 100vw"
                                        className="object-contain bg-white"
                                    />
                                </div>
                            </div>
                        </div>

                        {/* Google Section */}
                        <div className="space-y-12">
                            <div className="space-y-6">
                                <div className="flex items-center gap-4">
                                    <div className="w-12 h-12 bg-white rounded-2xl flex items-center justify-center shadow-lg border border-slate-100">
                                        <Star className="text-yellow-500 w-6 h-6 fill-yellow-500" />
                                    </div>
                                    <h2 className="text-3xl font-black text-slate-900 uppercase tracking-tight">{t.discounts.pages.fbGoogle.googleTitle}</h2>
                                </div>
                                <ul className="space-y-4">
                                    {t.discounts.pages.fbGoogle.googleSteps.map((step: string, idx: number) => (
                                        <li key={idx} className="flex items-start gap-3 text-slate-600 font-medium">
                                            <CheckCircle2 className="w-5 h-5 text-yellow-500 mt-1 shrink-0" />
                                            <span>{step}</span>
                                        </li>
                                    ))}
                                </ul>
                                <div className="pt-4">
                                    <a
                                        href="https://g.page/r/CRltVP4lAy7lEBM/review"
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        className="inline-flex items-center gap-2 bg-white text-slate-900 border border-slate-200 px-8 py-4 rounded-full font-bold hover:bg-slate-50 transition-colors shadow-lg"
                                    >
                                        <Star className="w-5 h-5 text-yellow-500 fill-yellow-500" />
                                        {t.discounts.pages.fbGoogle.googleReview}
                                    </a>
                                </div>
                            </div>

                            <div className="space-y-6">
                                <h3 className="text-xl font-bold text-slate-900">{t.discounts.pages.fbGoogle.facebookLabel}</h3>
                                <div className="rounded-3xl overflow-hidden shadow-2xl border border-slate-200 bg-white p-4">
                                    <iframe
                                        src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fairporttransfer.gyor&tabs=timeline&width=500&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
                                        width="100%"
                                        height="500"
                                        style={{ border: "none", overflow: "hidden" }}
                                        scrolling="no"
                                        frameBorder="0"
                                        allowFullScreen={true}
                                        allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
                                    ></iframe>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
          <Footer />
        </main>
    )
}