"use client"

import Image from "next/image"
import { Button } from "@/components/ui/button"
import { useLanguage } from "@/lib/language-context"
import ratingsHu from "@/ratings_hu.json"
import ratingsEn from "@/ratings_en.json"
import { useEffect, useState } from "react"

export default function Footer() {
  const { t, language } = useLanguage()
  const year = new Date().getFullYear().toString()
  const ratingsData = language === "hu" ? ratingsHu : ratingsEn
  const ratingValue = ratingsData?.data?.[0]?.rating ?? 0
  const ratingCount = ratingsData?.data?.[0]?.userRatingCount ?? 0
  const ratingPercent = Math.max(0, Math.min(100, (ratingValue / 5) * 100))
  const reviews = ratingsData?.data?.[0]?.reviews ?? []
  const [featuredReviews, setFeaturedReviews] = useState(reviews.slice(0, 2))
  const reviewUrl = "https://g.page/r/CRltVP4lAy7lEBM/review"
  const reviewPreviewText = (text: string) => (text.length > 160 ? `${text.slice(0, 160).trimEnd()}...` : text)
  const reviewStars = (value: number) => {
    const safe = Math.max(0, Math.min(5, Math.round(value)))
    return "★".repeat(safe) + "☆".repeat(5 - safe)
  }

  useEffect(() => {
    if (!reviews.length) {
      setFeaturedReviews([])
      return
    }
    if (reviews.length <= 2) {
      setFeaturedReviews(reviews)
      return
    }
    const first = Math.floor(Math.random() * reviews.length)
    let second = Math.floor(Math.random() * (reviews.length - 1))
    if (second >= first) second += 1
    setFeaturedReviews([reviews[first], reviews[second]])
  }, [language, reviews.length])

  return (
    <section className="py-16 md:py-20 bg-slate-950 text-white">
      <div className="max-w-6xl mx-auto px-6">
        <div className="grid gap-12 md:grid-cols-2 items-start">
          <div className="space-y-8 text-center flex flex-col items-center">
            <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>

          <div className="relative">
            <div className="absolute -top-10 right-0 w-40 h-40 bg-primary/20 blur-3xl rounded-full" />
            <div className="relative rounded-[2.5rem] bg-white/5 border border-white/10 p-6 md:p-7 backdrop-blur-xl shadow-2xl">
              <div className="flex items-center justify-between gap-4">
                <div className="text-[10px] font-black uppercase tracking-[0.3em] text-white/60">
                  {t.footer.reviewsTitle}
                </div>
                <a href={reviewUrl} target="_blank" rel="noopener noreferrer" className="text-[10px] font-black uppercase tracking-[0.3em] text-primary hover:text-primary/80 transition-colors">
                  Google
                </a>
              </div>

              <div className="mt-4 flex items-center gap-4">
                <div className="text-3xl md:text-4xl font-black text-white">
                  {ratingValue.toFixed(1)}
                </div>
                <div className="space-y-1">
                  <span
                    className="text-[14px] leading-none tracking-[0.1em] font-semibold"
                    style={{
                      backgroundImage: `linear-gradient(90deg, #fde047 ${ratingPercent}%, rgba(255,255,255,0.35) ${ratingPercent}%)`,
                      WebkitBackgroundClip: "text",
                      color: "transparent",
                    }}
                    aria-hidden="true"
                  >
                    ★★★★★
                  </span>
                  <div className="text-[10px] font-black uppercase tracking-[0.3em] text-white/50">
                    ({ratingCount})
                  </div>
                </div>
              </div>

              <div className="mt-6 grid gap-4">
                {featuredReviews.map((review, idx) => (
                  <div key={`${review.author ?? "review"}-${idx}`} className="rounded-[1.5rem] bg-white/5 border border-white/10 p-4 hover:-translate-y-1 transition-transform duration-300">
                    <div className="flex items-center justify-between gap-4">
                      <div className="text-[11px] tracking-[0.2em] text-yellow-300">
                        {reviewStars(review.rating ?? 5)}
                      </div>
                      <div className="text-[9px] uppercase tracking-widest text-white/40">
                        {review.author ?? "Customer"}
                      </div>
                    </div>
                    <p className="mt-3 text-sm text-white/80 leading-relaxed [display:-webkit-box] [webkit-line-clamp:3] [webkit-box-orient:vertical] overflow-hidden">
                      {reviewPreviewText(review.text ?? "")}
                    </p>
                  </div>
                ))}
              </div>

              <a
                href={reviewUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="mt-5 inline-flex items-center gap-2 text-[11px] font-black uppercase tracking-[0.35em] text-white/80 hover:text-white transition-colors"
              >
                {t.footer.reviewsCta}
              </a>
            </div>
          </div>
        </div>

        <div className="pt-12 mt-12 border-t border-white/5 space-y-6 text-center">
          <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>
  )
}