286 lines
13 KiB
TypeScript
286 lines
13 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
import Link from "next/link";
|
||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
|
||
import Button from "@/components/Button";
|
||
import { ROUTES } from "@/utils/constants";
|
||
|
||
interface FAQ {
|
||
question: string;
|
||
answer: string;
|
||
}
|
||
|
||
interface FAQCategory {
|
||
category: string;
|
||
icon: string;
|
||
faqs: FAQ[];
|
||
}
|
||
|
||
const faqData: FAQCategory[] = [
|
||
{
|
||
category: "Participation au Jeu",
|
||
icon: "🎮",
|
||
faqs: [
|
||
{
|
||
question: "Comment participer au jeu-concours Thé Tip Top ?",
|
||
answer: "Pour participer, vous devez d'abord créer un compte sur notre plateforme. Ensuite, connectez-vous et saisissez le code unique présent sur votre ticket de caisse. Chaque achat en magasin vous donne droit à un code pour tenter votre chance !",
|
||
},
|
||
{
|
||
question: "Qui peut participer au jeu-concours ?",
|
||
answer: "Le jeu-concours est ouvert à toute personne majeure résidant en France métropolitaine. Les employés de Thé Tip Top et leurs familles directes ne sont pas éligibles.",
|
||
},
|
||
{
|
||
question: "Combien de fois puis-je participer ?",
|
||
answer: "Vous pouvez participer autant de fois que vous le souhaitez ! Chaque achat en magasin vous donne un nouveau code à jouer. Il n'y a pas de limite au nombre de participations.",
|
||
},
|
||
{
|
||
question: "Où trouver mon code de participation ?",
|
||
answer: "Votre code de participation se trouve sur votre ticket de caisse après chaque achat en magasin Thé Tip Top. Il est clairement indiqué dans une zone dédiée du ticket.",
|
||
},
|
||
{
|
||
question: "Mon code ne fonctionne pas, que faire ?",
|
||
answer: "Vérifiez d'abord que vous avez bien saisi le code sans erreur (attention aux caractères similaires comme 0/O ou 1/I). Si le problème persiste, contactez notre service client via la page Contact avec une photo de votre ticket.",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
category: "Lots et Gains",
|
||
icon: "🎁",
|
||
faqs: [
|
||
{
|
||
question: "Quels sont les lots à gagner ?",
|
||
answer: "Vous pouvez gagner une variété de lots : des infuseurs à thé, des boîtes de thé signature (100g ou 200g), des coffrets découverte, et même un an de thé d'une valeur de 360€ ! Consultez notre page Lots pour voir tous les prix disponibles.",
|
||
},
|
||
{
|
||
question: "Comment savoir si j'ai gagné ?",
|
||
answer: "Vous saurez immédiatement si vous avez gagné après avoir saisi votre code. Un message s'affichera à l'écran vous indiquant votre lot. Vous recevrez également une confirmation par email avec les détails de votre gain.",
|
||
},
|
||
{
|
||
question: "Comment récupérer mon lot ?",
|
||
answer: "Pour les petits lots (infuseurs, boîtes de thé), vous pouvez les récupérer directement en magasin en présentant votre confirmation de gain. Pour les lots plus importants, nous vous contacterons pour organiser la livraison.",
|
||
},
|
||
{
|
||
question: "Combien de temps ai-je pour récupérer mon lot ?",
|
||
answer: "Vous avez 30 jours à compter de la date de gain pour récupérer votre lot. Passé ce délai, le lot ne pourra plus être réclamé.",
|
||
},
|
||
{
|
||
question: "Puis-je échanger mon lot contre un autre ?",
|
||
answer: "Les lots ne sont pas échangeables ni remboursables. Cependant, pour les coffrets et boîtes de thé, vous pourrez choisir parmi plusieurs variétés lors de la récupération.",
|
||
},
|
||
{
|
||
question: "Y a-t-il des frais pour recevoir mon lot ?",
|
||
answer: "Non, tous les lots sont entièrement gratuits, sans frais de livraison ni frais cachés.",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
category: "Compte et Profil",
|
||
icon: "👤",
|
||
faqs: [
|
||
{
|
||
question: "Comment créer un compte ?",
|
||
answer: "Cliquez sur le bouton 'S'inscrire' en haut de la page, remplissez le formulaire avec vos informations (nom, prénom, email, mot de passe) et validez. Vous recevrez un email de confirmation pour activer votre compte.",
|
||
},
|
||
{
|
||
question: "J'ai oublié mon mot de passe, que faire ?",
|
||
answer: "Sur la page de connexion, cliquez sur 'Mot de passe oublié'. Saisissez votre adresse email et vous recevrez un lien pour réinitialiser votre mot de passe.",
|
||
},
|
||
{
|
||
question: "Comment modifier mes informations personnelles ?",
|
||
answer: "Connectez-vous à votre compte et accédez à la page 'Mon Profil'. Vous pourrez y modifier vos informations personnelles, votre adresse email et votre mot de passe.",
|
||
},
|
||
{
|
||
question: "Puis-je supprimer mon compte ?",
|
||
answer: "Oui, vous pouvez demander la suppression de votre compte en contactant notre service client via la page Contact. Notez que cette action est irréversible et que vous perdrez l'accès à vos lots non récupérés.",
|
||
},
|
||
{
|
||
question: "Mes données personnelles sont-elles sécurisées ?",
|
||
answer: "Absolument. Nous prenons la protection de vos données très au sérieux. Toutes les informations sont cryptées et stockées de manière sécurisée. Consultez notre Politique de Confidentialité pour plus de détails.",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
category: "Problèmes Techniques",
|
||
icon: "🔧",
|
||
faqs: [
|
||
{
|
||
question: "Le site ne s'affiche pas correctement, que faire ?",
|
||
answer: "Essayez de vider le cache de votre navigateur et de rafraîchir la page. Assurez-vous également d'utiliser un navigateur récent (Chrome, Firefox, Safari, Edge). Si le problème persiste, contactez-nous.",
|
||
},
|
||
{
|
||
question: "Je n'arrive pas à me connecter",
|
||
answer: "Vérifiez que vous utilisez la bonne adresse email et le bon mot de passe. Si vous avez oublié votre mot de passe, utilisez la fonction 'Mot de passe oublié'. Assurez-vous également que les cookies sont activés dans votre navigateur.",
|
||
},
|
||
{
|
||
question: "Je n'ai pas reçu l'email de confirmation",
|
||
answer: "Vérifiez votre dossier spam ou courrier indésirable. Si vous ne trouvez toujours pas l'email après quelques minutes, vous pouvez demander un nouvel envoi depuis la page de connexion.",
|
||
},
|
||
{
|
||
question: "Le site est-il compatible avec les mobiles ?",
|
||
answer: "Oui, notre site est entièrement responsive et optimisé pour tous les appareils (smartphones, tablettes, ordinateurs). Vous pouvez participer depuis n'importe quel appareil.",
|
||
},
|
||
{
|
||
question: "Puis-je utiliser le site depuis l'étranger ?",
|
||
answer: "Vous pouvez accéder au site depuis l'étranger, mais seules les personnes résidant en France métropolitaine peuvent participer au jeu-concours et récupérer des lots.",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
category: "Informations Générales",
|
||
icon: "ℹ️",
|
||
faqs: [
|
||
{
|
||
question: "Quelle est la durée du jeu-concours ?",
|
||
answer: "Le jeu-concours se déroule du [date de début] au [date de fin]. Consultez notre page d'accueil pour les dates exactes et le temps restant.",
|
||
},
|
||
{
|
||
question: "Comment contacter le service client ?",
|
||
answer: "Vous pouvez nous contacter via notre page Contact, par email à contact@thetiptop.fr, ou par téléphone au [numéro]. Notre équipe est disponible du lundi au vendredi de 9h à 18h.",
|
||
},
|
||
{
|
||
question: "Où se trouvent les magasins Thé Tip Top ?",
|
||
answer: "Nous avons des magasins dans toute la France. Consultez notre page À Propos ou contactez-nous pour trouver le magasin le plus proche de chez vous.",
|
||
},
|
||
{
|
||
question: "Puis-je offrir mon lot à quelqu'un d'autre ?",
|
||
answer: "Oui, les lots sont cessibles. Vous pouvez offrir votre lot à un tiers, mais la personne devra présenter votre confirmation de gain pour le récupérer.",
|
||
},
|
||
{
|
||
question: "Le jeu-concours est-il gratuit ?",
|
||
answer: "Oui, la participation au jeu-concours est entièrement gratuite. Vous devez simplement effectuer un achat en magasin pour obtenir un code de participation.",
|
||
},
|
||
{
|
||
question: "Où puis-je consulter le règlement du jeu ?",
|
||
answer: "Le règlement complet du jeu-concours est disponible sur notre page Règlement du Jeu. Nous vous recommandons de le lire attentivement avant de participer.",
|
||
},
|
||
],
|
||
},
|
||
];
|
||
|
||
function FAQItem({ faq, isOpen, onClick }: { faq: FAQ; isOpen: boolean; onClick: () => void }) {
|
||
return (
|
||
<div className="border-b border-gray-200 last:border-b-0">
|
||
<button
|
||
className="w-full py-4 px-6 text-left flex justify-between items-center hover:bg-gray-50 transition-colors"
|
||
onClick={onClick}
|
||
aria-expanded={isOpen}
|
||
>
|
||
<span className="font-medium text-gray-900 pr-8">{faq.question}</span>
|
||
<span className={`text-primary-600 text-xl flex-shrink-0 transition-transform ${isOpen ? 'rotate-45' : ''}`}>
|
||
+
|
||
</span>
|
||
</button>
|
||
{isOpen && (
|
||
<div className="px-6 pb-4 text-gray-600 leading-relaxed">
|
||
{faq.answer}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default function FAQContent() {
|
||
const [openItems, setOpenItems] = useState<{ [key: string]: boolean }>({});
|
||
|
||
const toggleItem = (categoryIndex: number, faqIndex: number) => {
|
||
const key = `${categoryIndex}-${faqIndex}`;
|
||
setOpenItems((prev) => ({
|
||
...prev,
|
||
[key]: !prev[key],
|
||
}));
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gray-50 py-12">
|
||
<div className="max-w-4xl mx-auto px-4">
|
||
{/* Hero Section */}
|
||
<div className="text-center mb-12">
|
||
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
|
||
Questions Fréquentes
|
||
</h1>
|
||
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
|
||
Trouvez rapidement les réponses à vos questions sur le jeu-concours Thé Tip Top.
|
||
Si vous ne trouvez pas la réponse que vous cherchez, n'hésitez pas à nous contacter.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Search Hint */}
|
||
<div className="mb-8 p-4 bg-blue-50 border border-blue-200 rounded-lg text-center">
|
||
<p className="text-sm text-blue-800">
|
||
💡 <strong>Astuce :</strong> Utilisez Ctrl+F (Cmd+F sur Mac) pour rechercher un mot-clé dans cette page
|
||
</p>
|
||
</div>
|
||
|
||
{/* FAQ Categories */}
|
||
<div className="space-y-8">
|
||
{faqData.map((category, categoryIndex) => (
|
||
<Card key={categoryIndex} className="overflow-hidden">
|
||
<CardHeader className="bg-gradient-to-r from-primary-50 to-primary-100">
|
||
<CardTitle className="flex items-center gap-3 text-primary-900">
|
||
<span className="text-2xl">{category.icon}</span>
|
||
<span>{category.category}</span>
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="p-0">
|
||
{category.faqs.map((faq, faqIndex) => (
|
||
<FAQItem
|
||
key={faqIndex}
|
||
faq={faq}
|
||
isOpen={openItems[`${categoryIndex}-${faqIndex}`] || false}
|
||
onClick={() => toggleItem(categoryIndex, faqIndex)}
|
||
/>
|
||
))}
|
||
</CardContent>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
|
||
{/* CTA Section */}
|
||
<div className="mt-12 text-center bg-white rounded-lg shadow-lg p-8">
|
||
<h2 className="text-2xl font-bold text-gray-900 mb-4">
|
||
Vous n'avez pas trouvé votre réponse ?
|
||
</h2>
|
||
<p className="text-gray-600 mb-6">
|
||
Notre équipe est là pour vous aider ! Contactez-nous et nous vous répondrons dans les plus brefs délais.
|
||
</p>
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<Link href="/contact">
|
||
<Button variant="primary" className="w-full sm:w-auto">
|
||
Nous Contacter
|
||
</Button>
|
||
</Link>
|
||
<Link href={ROUTES.HOME}>
|
||
<Button variant="outline" className="w-full sm:w-auto">
|
||
Retour à l'Accueil
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Quick Links */}
|
||
<div className="mt-8 text-center text-sm text-gray-600">
|
||
<p className="mb-2">Pages utiles :</p>
|
||
<div className="flex flex-wrap justify-center gap-4">
|
||
<Link href="/rules" className="text-primary-600 hover:text-primary-700 underline">
|
||
Règlement du Jeu
|
||
</Link>
|
||
<span className="text-gray-400">•</span>
|
||
<Link href={ROUTES.LOTS} className="text-primary-600 hover:text-primary-700 underline">
|
||
Lots à Gagner
|
||
</Link>
|
||
<span className="text-gray-400">•</span>
|
||
<Link href="/about" className="text-primary-600 hover:text-primary-700 underline">
|
||
À Propos
|
||
</Link>
|
||
<span className="text-gray-400">•</span>
|
||
<Link href="/privacy" className="text-primary-600 hover:text-primary-700 underline">
|
||
Confidentialité
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|