"use client"

import Navbar from "@/components/navbar"
import Footer from "@/components/footer"
import { ArrowLeft, CheckCircle2 } from "lucide-react"
import Link from "next/link"
import Script from "next/script"
import { useLanguage } from "@/lib/language-context"
import { motion } from "framer-motion"

export default function TikTokDiscountPage() {
    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-black">
                <div className="absolute inset-0 bg-gradient-to-br from-pink-600/20 to-cyan-400/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.tiktok.title}</span>
                    </Link>
                    <h1 className="text-5xl md:text-7xl font-black text-white uppercase tracking-tighter leading-none mb-6">
                        {t.discounts.tiktok.title} <br />
                        <span className="text-primary italic">{t.discounts.pages.tiktok.discountLabel}</span>
                    </h1>
                </div>
            </section>

            <section className="py-24">
                <div className="max-w-4xl mx-auto px-6">
                    <div className="bg-white rounded-[3rem] p-10 md:p-16 shadow-2xl border border-slate-100 space-y-12">
                        <div className="space-y-8">
                            <div className="flex items-center gap-4">
                                <div className="w-12 h-12 bg-black rounded-2xl flex items-center justify-center shadow-lg">
                                    <svg viewBox="0 0 24 24" className="w-6 h-6 fill-white" xmlns="http://www.w3.org/2000/svg"><path d="M12.525.02c1.31-.036 2.612-.01 3.91-.01.1.993.414 1.956.96 2.784.73 1.096 1.764 1.93 2.97 2.45v3.91c-.815-.09-1.62-.315-2.38-.64-.816-.35-1.545-.88-2.15-1.53-.102.043-.102.164-.102.26v9.06c0 1.54-.34 3.05-1 4.41-.65 1.35-1.63 2.5-2.83 3.33-1.4.95-3.08 1.45-4.79 1.45-1.68 0-3.32-.48-4.73-1.39-1.21-.79-2.2-1.9-2.86-3.21-.71-1.37-1.07-2.9-1.07-4.47s.36-3.1 1.07-4.47c.66-1.31 1.65-2.42 2.86-3.21 1.25-.8 2.69-1.23 4.18-1.25.102 0 .204-.006.307-.006v3.94c-.037-.006-.074-.012-.112-.012-1.25.038-2.44.57-3.31 1.49-.89.92-1.38 2.16-1.38 3.45 0 1.29.49 2.53 1.38 3.45.87.92 2.06 1.45 3.31 1.49 1.25-.038 2.44-.57 3.31-1.49.89-.92 1.38-2.16 1.38-3.45V0l.024.02z" /></svg>
                                </div>
                                <h2 className="text-3xl font-black text-slate-900 uppercase tracking-tight">{t.discounts.pages.tiktok.claimTitle}</h2>
                            </div>
                            <ul className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                {t.discounts.pages.tiktok.steps.map((step: string, idx: number) => (
                                    <li key={idx} className="flex items-start gap-3 p-6 bg-slate-50 rounded-2xl border border-slate-100 text-slate-700 font-bold group hover:border-primary/30 transition-colors">
                                        <CheckCircle2 className="w-5 h-5 text-primary mt-1 shrink-0" />
                                        <span>{step}</span>
                                    </li>
                                ))}
                            </ul>
                        </div>

                        <div className="space-y-8 pt-8 border-t border-slate-100 text-center">
                            <h3 className="text-2xl font-black text-slate-900 uppercase tracking-tight">{t.discounts.pages.tiktok.videoTitle}</h3>
                            <div className="relative mx-auto max-w-[325px] aspect-[9/16] rounded-3xl overflow-hidden shadow-2xl border border-slate-200 bg-black">
                                <blockquote className="tiktok-embed" cite="https://www.tiktok.com/@skyflytravel.transfer/video/7595495377424370966" data-video-id="7595495377424370966" style={{ maxWidth: "605px", minWidth: "325px" }}>
                                    <section>
                                        <a target="_blank" title={t.common.tiktokHandle} href="https://www.tiktok.com/@skyflytravel.transfer?refer=embed">{t.common.tiktokHandle}</a>
                                    </section>
                                </blockquote>
                                <Script async src="https://www.tiktok.com/embed.js"></Script>
                            </div>
                        </div>

                        <div className="pt-10 flex justify-center">
                            <a
                                href="https://www.tiktok.com/@skyflytravel.transfer"
                                target="_blank"
                                rel="noopener noreferrer"
                                className="inline-flex items-center gap-2 bg-black text-white px-10 py-5 rounded-full font-bold hover:bg-slate-900 transition-colors shadow-2xl"
                            >
                                <svg viewBox="0 0 24 24" className="w-5 h-5 fill-white" xmlns="http://www.w3.org/2000/svg"><path d="M12.525.02c1.31-.036 2.612-.01 3.91-.01.1.993.414 1.956.96 2.784.73 1.096 1.764 1.93 2.97 2.45v3.91c-.815-.09-1.62-.315-2.38-.64-.816-.35-1.545-.88-2.15-1.53-.102.043-.102.164-.102.26v9.06c0 1.54-.34 3.05-1 4.41-.65 1.35-1.63 2.5-2.83 3.33-1.4.95-3.08 1.45-4.79 1.45-1.68 0-3.32-.48-4.73-1.39-1.21-.79-2.2-1.9-2.86-3.21-.71-1.37-1.07-2.9-1.07-4.47s.36-3.1 1.07-4.47c.66-1.31 1.65-2.42 2.86-3.21 1.25-.8 2.69-1.23 4.18-1.25.102 0 .204-.006.307-.006v3.94c-.037-.006-.074-.012-.112-.012-1.25.038-2.44.57-3.31 1.49-.89.92-1.38 2.16-1.38 3.45 0 1.29.49 2.53 1.38 3.45.87.92 2.06 1.45 3.31 1.49 1.25-.038 2.44-.57 3.31-1.49.89-.92 1.38-2.16 1.38-3.45V0l.024.02z" /></svg>
                                {t.discounts.pages.tiktok.openPage}
                            </a>
                        </div>
                    </div>
                </div>
            </section>
          <Footer />
        </main>
    )
}