107 lines
3.4 KiB
TypeScript
107 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
import { Plus, Minus } from "lucide-react";
|
|
import { SectionHeader } from "@/app/components/ui/section-header";
|
|
import { Badge } from "@/app/components/ui/badge";
|
|
|
|
function FaqItem({ q, a }: { q: string; a: string }) {
|
|
const [open, setOpen] = useState(false);
|
|
return (
|
|
<div className="border-b border-gray-100 last:border-0">
|
|
<button
|
|
className="w-full flex items-center justify-between py-5 text-left group"
|
|
onClick={() => setOpen((v) => !v)}
|
|
>
|
|
<span className="font-serif text-lg text-[var(--color-moy-dark)] group-hover:text-[var(--color-moy-gold-dark)] transition-colors pr-4">
|
|
{q}
|
|
</span>
|
|
<span className="shrink-0 w-7 h-7 border border-gray-200 group-hover:border-[var(--color-moy-gold)] flex items-center justify-center transition-colors">
|
|
{open
|
|
? <Minus size={14} className="text-[var(--color-moy-gold)]" />
|
|
: <Plus size={14} className="text-gray-400 group-hover:text-[var(--color-moy-gold)] transition-colors" />
|
|
}
|
|
</span>
|
|
</button>
|
|
<AnimatePresence initial={false}>
|
|
{open && (
|
|
<motion.div
|
|
initial={{ height: 0, opacity: 0 }}
|
|
animate={{ height: "auto", opacity: 1 }}
|
|
exit={{ height: 0, opacity: 0 }}
|
|
transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
|
|
className="overflow-hidden"
|
|
>
|
|
<p className="text-gray-500 text-sm leading-relaxed pb-5">{a}</p>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function SSSClient({ lang, dict }: { lang: string; dict: any }) {
|
|
const t = dict.faq;
|
|
|
|
const FAQS = [
|
|
{
|
|
category: t.categories.accommodation,
|
|
variant: "blue" as const,
|
|
items: [
|
|
{ q: t.q1, a: t.a1 },
|
|
{ q: t.q2, a: t.a2 },
|
|
{ q: t.q3, a: t.a3 },
|
|
],
|
|
},
|
|
{
|
|
category: t.categories.kitesurf,
|
|
variant: "green" as const,
|
|
items: [
|
|
{ q: t.q4, a: t.a4 },
|
|
{ q: t.q5, a: t.a5 },
|
|
{ q: t.q6, a: t.a6 },
|
|
],
|
|
},
|
|
{
|
|
category: t.categories.reservation,
|
|
variant: "gold" as const,
|
|
items: [
|
|
{ q: t.q7, a: t.a7 },
|
|
{ q: t.q8, a: t.a8 },
|
|
{ q: t.q9, a: t.a9 },
|
|
],
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="min-h-screen bg-white">
|
|
{/* Hero */}
|
|
<div className="bg-[var(--color-moy-dark)] pt-40 pb-20">
|
|
<div className="max-w-3xl mx-auto px-6 text-center">
|
|
<p className="text-[10px] uppercase tracking-[0.28em] text-[var(--color-moy-gold)] mb-4">{t.eyebrow}</p>
|
|
<h1 className="text-5xl md:text-6xl font-serif text-white mb-6">{t.title}</h1>
|
|
<p className="text-gray-400 text-base max-w-lg mx-auto leading-relaxed">
|
|
{t.subtitle}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="max-w-3xl mx-auto px-4 sm:px-6 py-24 space-y-14">
|
|
{FAQS.map((group) => (
|
|
<div key={group.category}>
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<Badge variant={group.variant}>{group.category}</Badge>
|
|
</div>
|
|
<div className="bg-[var(--color-moy-light)] px-6">
|
|
{group.items.map((item) => (
|
|
<FaqItem key={item.q} q={item.q} a={item.a} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|