172 lines
10 KiB
TypeScript
172 lines
10 KiB
TypeScript
"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>
|
|
)
|
|
}
|