the-tip-top-frontend/app/faq/FAQContent.tsx

"use client";

import { useState } from "react";
import Link from "next/link";

interface FAQ {
  category: string;
  question: string;
  answer: string;
}

const faqData: FAQ[] = [
  {
    category: "Participation",
    question: "Comment participer au jeu-concours ?",
    answer: "Pour participer, vous devez effectuer un achat de minimum 49€ dans une boutique Thé Tip Top participante, récupérer votre ticket de caisse avec le code unique, créer un compte sur notre site www.thetiptop.fr, vous connecter et saisir votre code pour découvrir instantanément votre gain.",
  },
  {
    category: "Codes",
    question: "Où trouver mon code de participation ?",
    answer: "Votre code de participation se trouve sur votre ticket de caisse après chaque achat de minimum 49€ en magasin Thé Tip Top. Il est clairement indiqué et composé de 10 caractères alphanumériques.",
  },
  {
    category: "Codes",
    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). Assurez-vous que le code n'a pas déjà été utilisé. Si le problème persiste, contactez notre service client via la page Contact avec une photo de votre ticket.",
  },
  {
    category: "Compte",
    question: "Puis-je créer un compte avec mes réseaux sociaux ?",
    answer: "Oui, vous pouvez créer un compte et vous connecter rapidement en utilisant votre compte Google ou Facebook. Cela permet une inscription plus rapide et sécurisée.",
  },
  {
    category: "Délais",
    question: "Jusqu'à quand puis-je saisir mon code ?",
    answer: "Vous pouvez saisir votre code pendant toute la durée du jeu-concours, soit du 1er janvier 2025 au 31 janvier 2025 à 23h59. Après cette date, les codes ne seront plus acceptés.",
  },
  {
    category: "Retrait",
    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 coffrets, vous avez le choix entre le retrait en boutique ou la livraison à domicile offerte. Pour le grand prix, une livraison mensuelle sera organisée à l'adresse de votre choix.",
  },
  {
    category: "Retrait",
    question: "Dans quelles boutiques puis-je récupérer mon lot ?",
    answer: "Vous pouvez récupérer votre lot dans n'importe quelle boutique Thé Tip Top en France métropolitaine. Présentez simplement votre confirmation de gain (email ou capture d'écran) et une pièce d'identité.",
  },
  {
    category: "Tirage final",
    question: "Comment fonctionne le tirage final pour le grand prix ?",
    answer: "À l'issue de la période de participation, un tirage au sort sera organisé le 15 février 2025 sous contrôle d'huissier de justice (Maître Dupont, Office Notarial de Paris) pour désigner le grand gagnant du prix principal : 1 an de thé offert d'une valeur de 360€. Tous les participants ayant validé au moins un code sont automatiquement inscrits au tirage.",
  },
  {
    category: "Données",
    question: "Mes données personnelles sont-elles protégées ?",
    answer: "Absolument. Nous prenons la protection de vos données très au sérieux conformément au RGPD. Toutes les informations sont cryptées et stockées de manière sécurisée. Vous disposez d'un droit d'accès, de rectification et d'effacement de vos données. Consultez notre Politique de Confidentialité pour plus de détails.",
  },
  {
    category: "Technique",
    question: "Le site ne fonctionne pas, que faire ?",
    answer: "Essayez de vider le cache de votre navigateur et de rafraîchir la page (Ctrl+F5 ou Cmd+Shift+R). Assurez-vous d'utiliser un navigateur récent (Chrome, Firefox, Safari, Edge). Vérifiez que JavaScript et les cookies sont activés. Si le problème persiste, contactez notre support technique à support@thetiptop.com.",
  },
];

const categories = [
  { name: "Participation", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" },
  { name: "Codes", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" },
  { name: "Compte", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" },
  { name: "Délais", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" },
  { name: "Retrait", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" },
  { name: "Tirage final", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" },
  { name: "Données", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" },
  { name: "Technique", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" },
];

export default function FAQContent() {
  const [searchQuery, setSearchQuery] = useState("");
  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
  const [openQuestion, setOpenQuestion] = useState<number | null>(null);

  const toggleQuestion = (index: number) => {
    setOpenQuestion(openQuestion === index ? null : index);
  };

  const filteredFAQs = faqData.filter((faq) => {
    const matchesSearch =
      faq.question.toLowerCase().includes(searchQuery.toLowerCase()) ||
      faq.answer.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesCategory = !selectedCategory || faq.category === selectedCategory;
    return matchesSearch && matchesCategory;
  });

  const getCategoryColor = (category: string) => {
    const cat = categories.find(c => c.name === category);
    return cat?.color || "bg-gray-100 text-gray-700";
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0]">
      {/* Hero Section */}
      <section className="bg-gradient-to-r from-white to-[#faf9f5] py-12 border-b-2 border-[#e5e4dc]">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center">
            <h1 className="text-4xl md:text-5xl font-bold text-[#5a5a4e] mb-4">
              Questions fréquentes
            </h1>
            <p className="text-lg text-[#8a8a7a]">
              Trouvez rapidement les réponses à vos questions sur notre jeu-concours Thé Tip Top.
            </p>
          </div>
        </div>
      </section>

      {/* Search Bar */}
      <section className="py-8">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <div className="relative">
              <input
                type="text"
                placeholder="Rechercher une question..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full px-4 py-3 pl-12 border-2 border-[#e5e4dc] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-[#d4a574] bg-white shadow-sm"
              />
              <svg
                className="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-[#8a8a7a]"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                />
              </svg>
            </div>
          </div>
        </div>
      </section>

      {/* Category Filters */}
      <section className="pb-8">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <div className="flex flex-wrap gap-3">
              {categories.map((category) => (
                <button
                  key={category.name}
                  onClick={() => setSelectedCategory(
                    selectedCategory === category.name ? null : category.name
                  )}
                  className={`px-4 py-2 rounded-full text-sm font-semibold transition-all ${
                    selectedCategory === category.name
                      ? 'bg-gradient-to-r from-[#d4a574] to-[#c4956a] text-white shadow-lg ring-2 ring-offset-2 ring-[#d4a574]'
                      : category.color + ' hover:shadow-md border border-[#d4a574]/30'
                  }`}
                >
                  {category.name}
                </button>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* FAQ Questions */}
      <section className="pb-16">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto space-y-3">
            {filteredFAQs.length === 0 ? (
              <div className="bg-white rounded-xl shadow-md p-8 text-center text-[#8a8a7a] border border-[#e5e4dc]">
                Aucune question ne correspond à votre recherche.
              </div>
            ) : (
              filteredFAQs.map((faq, index) => (
                <div key={index} className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
                  <button
                    onClick={() => toggleQuestion(index)}
                    className="w-full flex items-start justify-between p-6 text-left hover:bg-gradient-to-r hover:from-[#d4a574]/5 hover:to-[#c4956a]/5 transition-colors"
                  >
                    <div className="flex-1 pr-4">
                      <div className="flex items-center gap-2 mb-2">
                        <span className={`text-xs font-bold px-2 py-1 rounded ${getCategoryColor(faq.category)}`}>
                          {faq.category}
                        </span>
                      </div>
                      <h3 className="text-lg font-semibold text-[#5a5a4e]">{faq.question}</h3>
                    </div>
                    <svg
                      className={`w-6 h-6 text-[#8a8a7a] flex-shrink-0 transition-transform ${
                        openQuestion === index ? 'rotate-180' : ''
                      }`}
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                    </svg>
                  </button>
                  {openQuestion === index && (
                    <div className="px-6 pb-6 text-[#5a5a4e] leading-relaxed">
                      {faq.answer}
                    </div>
                  )}
                </div>
              ))
            )}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="pb-16">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <div className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] rounded-2xl shadow-2xl p-12 text-center text-white border-2 border-[#e5e4dc]">
              <h2 className="text-2xl md:text-3xl font-bold mb-4">
                Vous ne trouvez pas votre réponse ?
              </h2>
              <p className="text-white/90 mb-6 max-w-2xl mx-auto">
                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">
                <a
                  href="mailto:support@thetiptop.com"
                  className="inline-flex items-center justify-center gap-2 bg-white text-[#d4a574] hover:bg-[#f5f5f0] font-bold px-8 py-3 rounded-lg transition-all shadow-lg hover:scale-105 duration-300"
                >
                  ✉️ support@thetiptop.com
                </a>
                <Link
                  href="/contact"
                  className="inline-flex items-center justify-center bg-white/10 hover:bg-white/20 backdrop-blur-sm text-white font-bold px-8 py-3 rounded-lg transition-all border-2 border-white/30 hover:border-white/50"
                >
                  Formulaire de contact
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}