"use client"

import Image from "next/image"
import { Button } from "@/components/ui/button"
import { useLanguage } from "@/lib/language-context"

export default function Footer() {
  const { t } = useLanguage()
  const year = new Date().getFullYear().toString()

  return (
    <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="flex flex-wrap justify-center gap-4">
            <a href="https://www.facebook.com/airporttransfer.gyor" target="_blank" rel="noopener noreferrer" aria-label="Facebook" className="opacity-80 hover:opacity-100 transition-opacity">
              <Image src="/images/social/facebook.png" alt="Facebook" width={20} height={20} className="object-contain" />
            </a>
            <a href="https://plus.google.com/u/0/115420236176324532133/posts" target="_blank" rel="noopener noreferrer" aria-label="Google Plus" className="opacity-80 hover:opacity-100 transition-opacity">
              <Image src="/images/social/googleplus.png" alt="Google Plus" width={20} height={20} className="object-contain" />
            </a>
            <a href="https://x.com/SkyFlyTravel1" target="_blank" rel="noopener noreferrer" aria-label="X (Twitter)" className="opacity-80 hover:opacity-100 transition-opacity">
              <Image src="/images/social/twitter.png" alt="X (Twitter)" width={20} height={20} className="object-contain" />
            </a>
            <a href="http://skyflytravel.blogspot.hu/" target="_blank" rel="noopener noreferrer" aria-label="Blogspot" className="opacity-80 hover:opacity-100 transition-opacity">
              <Image src="/images/social/blogspot.png" alt="Blogspot" width={20} height={20} className="object-contain" />
            </a>
            <a href="https://www.tiktok.com/@skyflytravel.transfer" target="_blank" rel="noopener noreferrer" aria-label="TikTok" className="opacity-80 hover:opacity-100 transition-opacity">
              <svg viewBox="0 0 24 24" className="w-5 h-5 fill-white" aria-hidden="true">
                <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>
            </a>
            <a href="https://www.instagram.com/skyfly_travel/" target="_blank" rel="noopener noreferrer" aria-label="Instagram" className="opacity-80 hover:opacity-100 transition-opacity">
              <Image src="/images/social/instagram.png" alt="Instagram" width={20} height={20} className="object-contain" />
            </a>
          </div>
          <div className="text-slate-600 text-[10px] font-bold uppercase tracking-widest">
            {t.footer.copyright.replace("{year}", year)} {t.footer.rights}
          </div>
          <div className="text-slate-900/10 text-[8px] leading-tight select-none">
            {t.footer.seoLine}
          </div>
          <div className="flex flex-col items-center gap-1 text-slate-800 text-[9px] font-bold uppercase tracking-widest pt-2 sm:flex-row sm:justify-center sm:gap-4">
            <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 hidden sm:inline">|</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 hidden sm:inline">|</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>
  )
}