"use client"

import Navbar from "@/components/navbar"
import Hero from "@/components/hero"
import FeatureSection from "@/components/feature-section"
import CookieConsent from "@/components/cookie-consent"
import { Button } from "@/components/ui/button"
import { useLanguage } from "@/lib/language-context"
import { Card } from "@/components/ui/card"
import Link from "next/link"
import Image from "next/image"
import { Star, ArrowLeft, Facebook } from "lucide-react"

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

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

      {/* Background Decorations */}
      <div className="fixed inset-0 pointer-events-none -z-10 overflow-hidden">
        <div className="absolute top-1/4 -left-20 w-96 h-96 bg-purple-200 rounded-full blur-3xl opacity-30 animate-blob" />
        <div className="absolute top-1/2 -right-20 w-80 h-80 bg-blue-200 rounded-full blur-3xl opacity-30 animate-blob animation-delay-2000" />
        <div className="absolute bottom-1/4 left-1/2 -translate-x-1/2 w-[500px] h-[500px] bg-pink-100 rounded-full blur-3xl opacity-20 animate-blob animation-delay-4000" />
      </div>

      <Hero />

      {/* Build Section */}
      <FeatureSection
        oversizedTitle={t.features.transfer.oversized}
        title={t.features.transfer.title}
        description={t.features.transfer.description}
        ctaText={t.features.transfer.cta}
        accentColor="text-blue-500"
        href="https://app.skyflytravel.hu/public/offers/new"
      >
        <div className="relative group p-4">
          <div className="absolute inset-0 bg-blue-500/10 blur-3xl rounded-full scale-110 group-hover:scale-125 transition-transform" />
          <Card className="relative w-full aspect-square md:w-[450px] md:h-[450px] rounded-[3rem] overflow-hidden border-none shadow-2xl">
            <Image src="/images/airport.jpg" alt="Airport Transfer" fill className="object-cover group-hover:scale-105 transition-transform duration-700" />
            <div className="absolute bottom-0 left-0 right-0 p-8 bg-gradient-to-t from-black/90 via-black/50 to-transparent pt-32">
              <div className="space-y-2">
                <p className="text-white text-xl font-black uppercase tracking-widest">{t.features.transfer.cardCaption}</p>
                <p className="text-white/80 text-sm font-medium leading-relaxed">{t.features.transfer.cardDescription}</p>
              </div>
            </div>
          </Card>
        </div>
      </FeatureSection>

      {/* Customize Section */}
      <FeatureSection
        oversizedTitle={t.features.packages.oversized}
        title={t.features.packages.title}
        description={t.features.packages.description}
        ctaText={t.features.packages.cta}
        reversed
        accentColor="text-purple-500"
        href="/szolgaltatasok"
      >
        <div className="relative group p-4">
          <div className="absolute inset-0 bg-purple-500/10 blur-3xl rounded-full scale-110 group-hover:scale-125 transition-transform" />
          <Card className="relative w-full aspect-square md:w-[450px] md:h-[450px] rounded-[3rem] overflow-hidden border-none shadow-2xl">
            <Image src="/images/family.jpg" alt="Family Packages" fill className="object-cover group-hover:scale-105 transition-transform duration-700" />
            <div className="absolute bottom-0 left-0 right-0 p-8 bg-gradient-to-t from-black/90 via-black/50 to-transparent pt-32">
              <div className="space-y-2">
                <p className="text-white text-xl font-black uppercase tracking-widest">{t.features.packages.cardCaption}</p>
                <p className="text-white/80 text-sm font-medium leading-relaxed">{t.features.packages.cardDescription}</p>
              </div>
            </div>
          </Card>
        </div>
      </FeatureSection>

      {/* Promote Section */}
      <FeatureSection
        oversizedTitle={t.features.security.oversized}
        title={t.features.security.title}
        description={t.features.security.description}
        accentColor="text-green-500"
      >
        <div className="relative group p-4">
          <div className="absolute inset-0 bg-green-500/10 blur-3xl rounded-full scale-110 group-hover:scale-125 transition-transform" />
          <Card className="relative w-full aspect-square md:w-[450px] md:h-[450px] rounded-[3rem] overflow-hidden border-none shadow-2xl">
            <Image src="/images/interior.jpg" alt="Security and Comfort" fill className="object-cover group-hover:scale-105 transition-transform duration-700" />
            <div className="absolute bottom-0 left-0 right-0 p-8 bg-gradient-to-t from-black/90 via-black/50 to-transparent pt-32">
              <div className="space-y-2">
                <p className="text-white text-xl font-black uppercase tracking-widest">{t.features.security.cardCaption}</p>
                <p className="text-white/80 text-sm font-medium leading-relaxed">{t.features.security.cardDescription}</p>
              </div>
            </div>
          </Card>
        </div>
      </FeatureSection>

      {/* Sell Section */}
      <FeatureSection
        oversizedTitle={t.features.booking.oversized}
        title={t.features.booking.title}
        description={t.features.booking.description}
        ctaText={t.features.booking.cta}
        reversed
        accentColor="text-orange-500"
        href="https://app.skyflytravel.hu/public/offers/new"
        externalLink
      >
        <div className="relative group p-4">
          <div className="absolute inset-0 bg-orange-500/10 blur-3xl rounded-full scale-110 group-hover:scale-125 transition-transform" />
          <Card className="relative w-full aspect-square md:w-[450px] md:h-[450px] rounded-[3rem] overflow-hidden border-none shadow-2xl bg-white flex items-center justify-center p-8">
            <div className="text-center space-y-6">
              <div className="w-20 h-20 bg-orange-100 rounded-2xl flex items-center justify-center mx-auto">
                <Star className="w-10 h-10 text-orange-500" />
              </div>
              <h4 className="text-2xl font-black uppercase tracking-tighter">{t.features.booking.cardCaption}</h4>
              <p className="text-slate-500 text-sm font-medium leading-relaxed max-w-xs mx-auto">
                {t.features.booking.cardDescription}
              </p>
              <div className="space-y-2 pt-4">
                <div className="h-2 w-48 bg-slate-100 rounded-full mx-auto" />
                <div className="h-2 w-32 bg-slate-50 rounded-full mx-auto" />
              </div>
            </div>
          </Card>
        </div>
      </FeatureSection>

      {/* Showcase Section */}
      <FeatureSection
        oversizedTitle={t.features.fleet.oversized}
        title={t.features.fleet.title}
        description={t.features.fleet.description}
        ctaText={t.features.fleet.cta}
        accentColor="text-pink-500"
        href="/flotta"
      >
        <div className="relative group p-4">
          <div className="absolute inset-0 bg-pink-500/10 blur-3xl rounded-full scale-110 group-hover:scale-125 transition-transform" />
          <Card className="relative w-full aspect-square md:w-[450px] md:h-[450px] rounded-[3rem] overflow-hidden border-none shadow-2xl">
            <Image src="/images/fleet-modern.jpg" alt="Our Fleet" fill className="object-cover group-hover:scale-105 transition-transform duration-700" />
            <div className="absolute bottom-0 left-0 right-0 p-8 bg-gradient-to-t from-black/90 via-black/50 to-transparent pt-32">
              <div className="space-y-2">
                <p className="text-white text-xl font-black uppercase tracking-widest">{t.features.fleet.cardCaption}</p>
                <p className="text-white/80 text-sm font-medium leading-relaxed">{t.features.fleet.cardDescription}</p>
              </div>
            </div>
          </Card>
        </div>
      </FeatureSection>

      {/* Engage Section */}
      <FeatureSection
        oversizedTitle={t.features.nonstop.oversized}
        title={t.features.nonstop.title}
        description={t.features.nonstop.description}
        reversed
        accentColor="text-cyan-500"
        customCTA={
          <div className="flex flex-wrap gap-6 pt-2">
            <div className="space-y-1">
              <p className="text-[10px] font-black uppercase tracking-widest text-slate-400">{t.contactPage.info.phone}</p>
              <a href="tel:+36302821101" className="text-xl font-black text-white bg-cyan-500 px-4 py-2 rounded-xl inline-block hover:scale-105 transition-transform">+36 30 282 1101</a>
            </div>
            <div className="space-y-1">
              <p className="text-[10px] font-black uppercase tracking-widest text-slate-400">{t.contactPage.info.email}</p>
              <a href="mailto:info@skyflytravel.hu" className="text-lg font-bold text-slate-900 hover:text-cyan-500 transition-colors block italic">info@skyflytravel.hu</a>
            </div>
          </div>
        }
      >
        <div className="relative group p-4">
          <div className="absolute inset-0 bg-cyan-500/10 blur-3xl rounded-full scale-110 group-hover:scale-125 transition-transform" />
          <Card className="relative w-full aspect-square md:w-[450px] md:h-[450px] rounded-[3rem] overflow-hidden border-none shadow-2xl">
            <Image src="/images/mercedes.jpg" alt="Non-stop help" fill className="object-cover group-hover:scale-105 transition-transform duration-700" />
            <div className="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/80 to-transparent">
              <p className="text-white text-lg font-bold uppercase tracking-widest">{t.features.nonstop.cardCaption}</p>
            </div>
          </Card>
        </div>
      </FeatureSection>

      {/* Discounts Section */}
      <FeatureSection
        oversizedTitle={t.discounts.oversized}
        title={t.discounts.title}
        description={t.discounts.description}
        accentColor="text-primary"
        customCTA={
          <div className="flex flex-wrap gap-4">
            <Button asChild size="lg" className="rounded-full px-8 h-12 text-xs font-bold uppercase tracking-widest bg-blue-600 text-white hover:bg-blue-700 transition-all shadow-xl">
              <Link href="/akciok/facebook-google">{t.discounts.fbGoogle.title}</Link>
            </Button>
            <Button asChild size="lg" className="rounded-full px-8 h-12 text-xs font-bold uppercase tracking-widest bg-black text-white hover:bg-slate-900 transition-all shadow-xl">
              <Link href="/akciok/tiktok">{t.discounts.tiktok.title}</Link>
            </Button>
          </div>
        }
      >
        <div className="relative group p-4">
          <div className="absolute inset-0 bg-primary/20 blur-3xl rounded-full scale-110 group-hover:scale-125 transition-transform" />
          <Card className="relative w-full aspect-square md:w-[450px] md:h-[450px] rounded-[3rem] overflow-hidden border-none shadow-2xl bg-slate-900">
            <Image src="/images/discounts_bg.png" alt="Special Discounts" fill className="object-cover opacity-50 group-hover:opacity-70 transition-all duration-700 blur-[2px] group-hover:blur-0" />

            <div className="absolute inset-0 p-8 flex flex-col justify-center space-y-4">
              <div className="bg-white/95 backdrop-blur-xl p-6 rounded-3xl shadow-2xl transform transition-all duration-500 hover:-translate-y-2">
                <div className="flex items-center gap-4 mb-3">
                  <div className="bg-blue-600 p-2 rounded-lg"><Facebook className="w-4 h-4 text-white" /></div>
                  <h4 className="font-black text-slate-900 text-sm uppercase">{t.discounts.fbGoogle.title}</h4>
                </div>
                <p className="text-slate-500 text-xs font-medium mb-4">{t.discounts.fbGoogle.desc}</p>
                <Link href="/akciok/facebook-google" className="text-[10px] font-black text-primary uppercase tracking-widest hover:gap-3 flex items-center gap-2 group/link transition-all">
                  {t.discounts.fbGoogle.cta} <ArrowLeft className="w-3 h-3 rotate-180" />
                </Link>
              </div>

              <div className="bg-white/95 backdrop-blur-xl p-6 rounded-3xl shadow-2xl transform transition-all duration-500 hover:-translate-y-2">
                <div className="flex items-center gap-4 mb-3">
                  <div className="bg-black p-2 rounded-lg">
                    <svg viewBox="0 0 24 24" className="w-4 h-4 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>
                  <h4 className="font-black text-slate-900 text-sm uppercase">{t.discounts.tiktok.title}</h4>
                </div>
                <p className="text-slate-500 text-xs font-medium mb-4">{t.discounts.tiktok.desc}</p>
                <Link href="/akciok/tiktok" className="text-[10px] font-black text-primary uppercase tracking-widest hover:gap-3 flex items-center gap-2 group/link transition-all">
                  {t.discounts.tiktok.cta} <ArrowLeft className="w-3 h-3 rotate-180" />
                </Link>
              </div>
            </div>
          </Card>
        </div>
      </FeatureSection>

      {/* SEO Optimized Content Section - Full Width */}
      <section className="py-12 md:py-16 bg-white">
        <div className="max-w-4xl mx-auto px-6">
          <div className="space-y-12">
            <div className="text-center">
              <h2 className="text-[10px] font-black uppercase tracking-[0.5em] text-primary mb-6">SkyFly Travel</h2>
              <h3 className="text-4xl md:text-7xl font-black uppercase tracking-tighter leading-tight text-slate-900">
                {t.contactPage.seo.title}
              </h3>
              <p className="text-xl md:text-2xl font-bold text-primary italic mt-4">
                {t.contactPage.seo.subtitle}
              </p>
            </div>

            <div className="space-y-8">
              {t.contactPage.seo.content.map((paragraph: string, idx: number) => (
                <p key={idx} className="text-slate-500 leading-relaxed font-medium text-lg md:text-xl text-center md:text-left">
                  {paragraph}
                </p>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Footer / Final CTA */}
      <section className="py-16 md:py-20 bg-slate-950 text-white text-center">
        <div className="max-w-4xl mx-auto px-6 space-y-12">
          <h2 className="text-4xl md:text-6xl font-black tracking-tighter uppercase">{t.footer.ready}</h2>
          <p className="text-xl text-slate-400 max-w-xl mx-auto">
            {t.footer.description}
          </p>
          <div className="flex justify-center gap-6">
            <Button size="lg" asChild className="rounded-full px-12 h-14 text-sm font-bold uppercase tracking-widest bg-primary hover:bg-primary/90 transition-all shadow-2xl">
              <a href="https://app.skyflytravel.hu/public/offers/new" target="_blank" rel="noopener noreferrer">
                {t.footer.cta}
              </a>
            </Button>
          </div>
          <div className="pt-12 border-t border-white/5 space-y-6">
            <div className="flex flex-wrap justify-center gap-x-8 gap-y-2 text-slate-400 text-xs font-bold uppercase tracking-widest">
              <a href="/docs/impresszum.pdf" target="_blank" rel="noopener noreferrer" className="hover:text-primary transition-colors">
                {t.footer.impressum}
              </a>
              <a href="/docs/ADATVEDELEMI_SZABALYZAT_ZT.pdf" target="_blank" rel="noopener noreferrer" className="hover:text-primary transition-colors">
                {t.footer.privacy}
              </a>
            </div>
            <div className="text-slate-600 text-[10px] font-bold uppercase tracking-widest">
              © 2026 SkyFly Travel. {t.footer.rights}
            </div>
            <div className="text-slate-900/10 text-[8px] leading-tight select-none">
              reptéri transzfer, transzfer Győr, Budapest, Bécs Schwechat, Pozsony - airport Shuttle - Airport taxi - Reptéri járatok - Repülőtéri transzfer - Budapest reptér - Pozsony repter - Bécs reptér (Vienna Airport) - Transfer Budapest airport - Transfer Vienna Airport Budapest Liszt Ferenc Ferihegy
            </div>
            <div className="flex justify-center gap-4 text-slate-800 text-[9px] font-bold uppercase tracking-widest pt-2">
              <a href="https://transzfer.lap.hu" target="_blank" rel="noopener noreferrer" className="hover:text-primary transition-colors">transzfer.lap.hu</a>
              <span className="opacity-20">|</span>
              <a href="https://utasszallitas.lap.hu" target="_blank" rel="noopener noreferrer" className="hover:text-primary transition-colors">utasszallitas.lap.hu</a>
              <span className="opacity-20">|</span>
              <a href="https://repuloter.lap.hu" target="_blank" rel="noopener noreferrer" className="hover:text-primary transition-colors">repuloter.lap.hu</a>
            </div>
          </div>
        </div>
      </section>

      <CookieConsent />
    </main>
  )
}