import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
import { ArrowLeft, BookOpen, FileText, HelpCircle, Mail, MessageCircle, Phone } from "lucide-react";
import { Link } from "wouter";

const faqItems = [
  {
    category: "Inscription et compte",
    questions: [
      {
        q: "Comment créer un compte pour mon association ?",
        a: "Cliquez sur le bouton \"Se connecter\" en haut de la page, puis créez votre compte. Une fois connecté, vous pourrez compléter le profil de votre association avec toutes les informations nécessaires (nom, SIRET, adresse, etc.)."
      },
      {
        q: "Quelles informations dois-je fournir pour mon profil association ?",
        a: "Pour un profil complet, vous devez renseigner : le nom de l'association, le numéro SIRET (si applicable), le numéro RNA, l'adresse du siège social, les coordonnées de contact, et les informations du représentant légal. Plus votre profil est complet, plus vos demandes seront traitées rapidement."
      },
      {
        q: "Puis-je modifier les informations de mon association ?",
        a: "Oui, vous pouvez modifier les informations de votre association à tout moment depuis la page \"Mon association\" dans votre espace personnel."
      }
    ]
  },
  {
    category: "Documents",
    questions: [
      {
        q: "Quels documents dois-je téléverser ?",
        a: "Les documents essentiels sont : les statuts de l'association, le récépissé de déclaration en préfecture, le RIB de l'association. Selon vos demandes, vous pourrez également avoir besoin de : rapports d'activité, rapports financiers, PV d'assemblée générale, liste des dirigeants, attestation d'assurance."
      },
      {
        q: "Quels formats de fichiers sont acceptés ?",
        a: "Nous acceptons les formats suivants : PDF, DOC, DOCX, JPG, JPEG, PNG, XLS, XLSX. La taille maximale par fichier est de 10 Mo."
      },
      {
        q: "Mes documents sont-ils sécurisés ?",
        a: "Oui, tous vos documents sont stockés de manière sécurisée et confidentielle. Seuls vous et les services administratifs habilités peuvent y accéder."
      }
    ]
  },
  {
    category: "Demandes",
    questions: [
      {
        q: "Quels types de demandes puis-je effectuer ?",
        a: "Vous pouvez effectuer plusieurs types de demandes : subventions de fonctionnement, subventions de projet, agréments (Jeunesse et Éducation Populaire, Sport), autorisations d'occupation du domaine public, demandes de salle municipale."
      },
      {
        q: "Comment créer une nouvelle demande ?",
        a: "Depuis votre tableau de bord, cliquez sur \"Nouvelle demande\", sélectionnez le type de demande, remplissez le formulaire (pré-rempli avec vos informations), joignez les documents nécessaires, puis soumettez votre demande."
      },
      {
        q: "Puis-je modifier une demande après l'avoir soumise ?",
        a: "Non, une fois soumise, une demande ne peut plus être modifiée. Cependant, si le service vous demande des informations complémentaires, vous pourrez les fournir. Si nécessaire, vous pouvez créer une nouvelle demande."
      },
      {
        q: "Combien de temps prend le traitement d'une demande ?",
        a: "Le délai de traitement varie selon le type de demande et la période. En général, comptez entre 2 et 8 semaines. Vous serez notifié par email à chaque étape du traitement."
      }
    ]
  },
  {
    category: "Subventions",
    questions: [
      {
        q: "Quelle est la différence entre subvention de fonctionnement et de projet ?",
        a: "La subvention de fonctionnement finance les activités courantes de l'association (loyer, salaires, fournitures). La subvention de projet finance un projet spécifique avec des objectifs, un calendrier et un budget définis."
      },
      {
        q: "Quels documents sont nécessaires pour une demande de subvention ?",
        a: "Pour une demande de subvention, vous devez généralement fournir : les statuts, le dernier rapport d'activité, le dernier rapport financier, un budget prévisionnel, et pour un projet, une description détaillée avec calendrier et budget spécifique."
      },
      {
        q: "Comment est calculé le montant de la subvention ?",
        a: "Le montant accordé dépend de plusieurs critères : la nature du projet, son impact, le budget présenté, les autres financements obtenus, et les disponibilités budgétaires du service. Le montant accordé peut être inférieur au montant demandé."
      }
    ]
  },
  {
    category: "Agréments",
    questions: [
      {
        q: "À quoi sert un agrément ?",
        a: "L'agrément est une reconnaissance officielle par l'État. Il permet notamment d'accéder à certains financements publics, de bénéficier d'avantages fiscaux, et de participer à certains dispositifs réservés aux associations agréées."
      },
      {
        q: "Quelles sont les conditions pour obtenir un agrément ?",
        a: "Les conditions varient selon le type d'agrément, mais généralement : l'association doit exister depuis au moins 3 ans, avoir une activité régulière, présenter une gestion démocratique et transparente, et respecter les principes républicains."
      }
    ]
  }
];

export default function FAQ() {
  return (
    <div className="min-h-screen bg-muted/30">
      {/* Header */}
      <header className="border-b border-border bg-white sticky top-0 z-10">
        <div className="container py-4">
          <div className="flex items-center gap-4">
            <Link href="/">
              <Button variant="ghost" size="icon">
                <ArrowLeft className="h-5 w-5" />
              </Button>
            </Link>
            <div>
              <h1 className="text-xl font-bold">Aide & FAQ</h1>
              <p className="text-sm text-muted-foreground">
                Trouvez des réponses à vos questions
              </p>
            </div>
          </div>
        </div>
      </header>

      <main className="container py-8">
        {/* Hero */}
        <div className="text-center mb-12">
          <div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
            <HelpCircle className="h-8 w-8 text-primary" />
          </div>
          <h2 className="text-2xl md:text-3xl font-bold mb-4">
            Comment pouvons-nous vous aider ?
          </h2>
          <p className="text-muted-foreground max-w-2xl mx-auto">
            Consultez notre foire aux questions ou contactez-nous directement pour toute demande d'assistance.
          </p>
        </div>

        {/* Quick links */}
        <div className="grid md:grid-cols-3 gap-4 mb-12">
          <Card className="hover:shadow-md transition-shadow">
            <CardContent className="p-6 text-center">
              <BookOpen className="h-8 w-8 mx-auto text-primary mb-3" />
              <h3 className="font-semibold mb-2">Guide de démarrage</h3>
              <p className="text-sm text-muted-foreground">
                Apprenez à utiliser le portail en quelques étapes simples.
              </p>
            </CardContent>
          </Card>
          <Card className="hover:shadow-md transition-shadow">
            <CardContent className="p-6 text-center">
              <FileText className="h-8 w-8 mx-auto text-primary mb-3" />
              <h3 className="font-semibold mb-2">Documents types</h3>
              <p className="text-sm text-muted-foreground">
                Téléchargez des modèles de documents pour vos demandes.
              </p>
            </CardContent>
          </Card>
          <Card className="hover:shadow-md transition-shadow">
            <CardContent className="p-6 text-center">
              <MessageCircle className="h-8 w-8 mx-auto text-primary mb-3" />
              <h3 className="font-semibold mb-2">Nous contacter</h3>
              <p className="text-sm text-muted-foreground">
                Notre équipe est disponible pour répondre à vos questions.
              </p>
            </CardContent>
          </Card>
        </div>

        {/* FAQ sections */}
        <div className="max-w-3xl mx-auto space-y-8">
          {faqItems.map((section, index) => (
            <Card key={index}>
              <CardHeader>
                <CardTitle>{section.category}</CardTitle>
              </CardHeader>
              <CardContent>
                <Accordion type="single" collapsible className="w-full">
                  {section.questions.map((item, qIndex) => (
                    <AccordionItem key={qIndex} value={`item-${index}-${qIndex}`}>
                      <AccordionTrigger className="text-left">
                        {item.q}
                      </AccordionTrigger>
                      <AccordionContent className="text-muted-foreground">
                        {item.a}
                      </AccordionContent>
                    </AccordionItem>
                  ))}
                </Accordion>
              </CardContent>
            </Card>
          ))}
        </div>

        {/* Contact section */}
        <Card className="max-w-3xl mx-auto mt-12 bg-primary text-primary-foreground">
          <CardContent className="p-8">
            <div className="text-center">
              <h3 className="text-xl font-bold mb-4">Vous n'avez pas trouvé votre réponse ?</h3>
              <p className="opacity-90 mb-6">
                Notre équipe est disponible pour vous accompagner dans vos démarches.
              </p>
              <div className="flex flex-wrap justify-center gap-4">
                <div className="flex items-center gap-2">
                  <Mail className="h-5 w-5" />
                  <span>contact@portail-associations.fr</span>
                </div>
                <div className="flex items-center gap-2">
                  <Phone className="h-5 w-5" />
                  <span>01 23 45 67 89</span>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      </main>

      {/* Footer */}
      <footer className="border-t border-border py-8 bg-white mt-12">
        <div className="container text-center text-sm text-muted-foreground">
          <p>© {new Date().getFullYear()} Portail Associations. Tous droits réservés.</p>
          <div className="flex justify-center gap-4 mt-2">
            <Link href="/" className="hover:text-primary">Accueil</Link>
            <Link href="/dashboard" className="hover:text-primary">Mon espace</Link>
          </div>
        </div>
      </footer>
    </div>
  );
}
