"use client";

import { ArrowRight, HelpCircle, ShieldCheck, Sparkles, Wrench, type LucideIcon } from 'lucide-react';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import StickyMobileCTA from '@/components/StickyMobileCTA';
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
import { Badge } from '@/components/ui/badge';

export interface FaqQuestionItem {
  q: string;
  a: string;
}

export interface FaqCategory {
  id: string;
  label: string;
  icon: LucideIcon;
  questions: FaqQuestionItem[];
}

export interface FAQProps {
  heroBadge?: string;
  heroTitre?: string;
  heroIntro?: string;
  categories?: FaqCategory[];
  ctaTitre?: string;
  ctaTexte?: string;
  ctaLabel?: string;
  ctaHref?: string;
}

const defaultCategories: FaqCategory[] = [
  {
    id: 'generalites',
    label: 'Généralités',
    icon: HelpCircle,
    questions: [
      {
        q: 'Pourquoi concentrer les efforts sur le toit ?',
        a: 'Le toit est la surface la plus exposée au rayonnement solaire. Sur les bâtiments industriels, logistiques ou commerciaux, les toits plats peuvent dépasser 80°C en saison chaude et contribuer fortement à la hausse de température intérieure.',
      },
      {
        q: 'L’application d’une peinture réflective réduira-t-elle mes factures d’énergie ?',
        a: 'Un toit plus frais laisse entrer moins de chaleur dans le bâtiment. Dans les espaces climatisés, les coûts énergétiques baissent mécaniquement grâce à une moindre utilisation de la climatisation. L’économie dépend du bâtiment, de son usage et de son niveau d’isolation.',
      },
      {
        q: 'Quel ROI peut-on espérer grâce aux peintures réflectives Covalba ?',
        a: 'Le retour sur investissement varie selon le type de bâtiment et l’activité. Plus la consigne de température est basse, plus l’impact peut être fort. La page historique cite un ordre de grandeur d’environ 5 ans pour un hypermarché à 24°C et 2 à 3 ans pour un bâtiment frigorifique à 4°C.',
      },
      {
        q: 'Un toit frais risque-t-il d’augmenter mes factures de chauffage en hiver ?',
        a: 'L’apport solaire par le toit en hiver reste faible : le soleil est plus bas, moins intense, les journées sont plus courtes et l’ensoleillement moins fréquent. Le revêtement limite surtout l’entrée des calories extérieures en été.',
      },
      {
        q: 'Une autorisation administrative est-elle nécessaire ?',
        a: 'Avant tout projet, il est recommandé de vérifier le PLU local. En règle générale, les toits plats des bâtiments industriels situés en zone d’activité reçoivent plus facilement l’autorisation de changer la couleur de toiture.',
      },
    ],
  },
  {
    id: 'technique',
    label: 'Critères techniques',
    icon: Sparkles,
    questions: [
      {
        q: 'Qu’est-ce que la réflectance solaire ?',
        a: 'La réflectance solaire décrit la capacité d’une surface à réfléchir le rayonnement solaire, lumière visible et rayons invisibles compris. La technologie CovaTherm permet de réfléchir 94% du rayonnement solaire.',
      },
      {
        q: 'Qu’est-ce que l’émissivité thermique ?',
        a: 'L’émissivité thermique correspond à la capacité d’un matériau à émettre la chaleur absorbée sous forme de radiation thermique. Les peintures réflectives Covalba permettent de renvoyer 88% de la chaleur reçue.',
      },
      {
        q: 'Qu’est-ce que l’indice de réflectance solaire, le SRI ?',
        a: 'Le SRI représente la capacité d’une toiture à rejeter la chaleur solaire. Il est calculé selon la norme ASTM E1980 à partir de la réflectance solaire et de l’émissivité thermique.',
      },
      {
        q: 'Quel est le SRI de CovaTherm ?',
        a: 'CovaTherm affiche un SRI de 119 à l’état neuf et un SRI de 118 à l’état vieilli, d’après les valeurs communiquées sur la page FAQ historique.',
      },
      {
        q: 'Les revêtements Covalba contiennent-ils des substances dangereuses ?',
        a: 'Les composants sont conformes au règlement REACH et autorisés en Europe, sans substance classée parmi les substances préoccupantes identifiées dans REACH.',
      },
    ],
  },
  {
    id: 'durabilite',
    label: 'Entretien et durabilité',
    icon: Wrench,
    questions: [
      {
        q: 'L’entretien est-il aussi contraignant que sur une toiture classique ?',
        a: 'Non. Le système intègre une finition qui réduit l’accroche des salissures et le développement de mousses. Une vérification annuelle et un rinçage à l’eau si nécessaire permettent de préserver les performances.',
      },
      {
        q: 'Y a-t-il un entretien à réaliser ?',
        a: 'Covalba recommande une visite annuelle de toiture et, si nécessaire, un nettoyage à l’eau pour évacuer les particules accumulées sur le revêtement.',
      },
      {
        q: 'Quelles sont les garanties du produit et de son efficacité ?',
        a: 'L’installation du système CovaTherm par des applicateurs certifiés est couverte par une garantie biennale sur l’adhésion au support. Le test de vieillissement accéléré de 4000 heures montre un maintien des performances réflectives.',
      },
      {
        q: 'La garantie décennale de l’étanchéité est-elle maintenue ?',
        a: 'L’application d’une peinture cool roof Covalba sur une étanchéité sous garantie n’implique pas de modification structurelle ni de son usage. La garantie décennale est donc maintenue selon la page FAQ historique.',
      },
    ],
  },
  {
    id: 'chantier',
    label: 'Chantier',
    icon: ShieldCheck,
    questions: [
      {
        q: 'La charpente doit-elle être renforcée au préalable ?',
        a: 'Non. L’application de CovaTherm ne présente pas de danger pour la structure : son faible poids, compris entre 0,8 kg/m² et 1,2 kg/m², peut être supporté par les toitures existantes.',
      },
      {
        q: 'Les solutions Covalba améliorent-elles l’étanchéité ?',
        a: 'CovaTherm est d’abord un revêtement thermo-réflectif et ne constitue pas une étanchéité principale. Son film continu, épais et élastique peut toutefois reboucher les microfissures jusqu’à 2 mm et contribuer à améliorer l’étanchéité générale.',
      },
      {
        q: 'Quelle incidence sur une installation photovoltaïque ?',
        a: 'Une toiture plus fraîche peut améliorer le rendement des panneaux en saison chaude. La page historique mentionne environ 10% de gain pour des panneaux monofaces et 20% à 25% pour des installations bifaces.',
      },
      {
        q: 'Les eaux de pluie sont-elles impactées ?',
        a: 'Une analyse des eaux de ruissellement réalisée par un laboratoire accrédité a montré l’absence de traces de polluants, dont les PFAS, dans les eaux de pluie provenant d’une toiture couverte d’une peinture Covalba.',
      },
    ],
  },
];

const FAQ = ({
  heroBadge = 'FAQ',
  heroTitre = 'Tout savoir sur les revêtements réflectifs cool roof.',
  heroIntro = 'Retrouvez les réponses aux questions fréquentes sur le confort thermique, les économies d’énergie, les performances techniques, l’entretien et la mise en œuvre.',
  categories = defaultCategories,
  ctaTitre = 'Parlons de votre bâtiment.',
  ctaTexte = 'Nos équipes peuvent vous aider à cadrer votre support, vos contraintes et la solution adaptée.',
  ctaLabel = 'Nous contacter',
  ctaHref = '/contact',
}: FAQProps = {}) => {
  return (
    <div className="min-h-screen bg-background">
      <Navbar />
      <main>
        <section className="bg-navy pb-16 pt-28 text-white lg:pb-20 lg:pt-32">
          <div className="container mx-auto px-4 lg:px-8">
            <Badge className="mb-5 border-white/12 bg-white/10 text-white">{heroBadge}</Badge>
            <h1 className="max-w-4xl font-satoshi text-4xl font-black leading-tight tracking-tight md:text-6xl">
              {heroTitre}
            </h1>
            <p className="mt-6 max-w-3xl font-body text-lg leading-relaxed text-white/68">
              {heroIntro}
            </p>
          </div>
        </section>

        <section className="bg-offwhite py-10 lg:py-14">
          <div className="container mx-auto px-4 lg:px-8">
            <div className="grid gap-4 md:grid-cols-4">
              {categories.map((category) => {
                const Icon = category.icon;
                return (
                  <a key={category.id} href={`#${category.id}`} className="rounded-lg border border-border bg-card p-5 shadow-sm transition-colors hover:border-primary/25 hover:bg-primary/5">
                    <Icon className="mb-4 h-5 w-5 text-primary" />
                    <h2 className="font-satoshi text-lg font-black tracking-tight text-foreground">{category.label}</h2>
                    <p className="mt-2 font-body text-sm text-foreground/52">{category.questions.length} questions</p>
                  </a>
                );
              })}
            </div>
          </div>
        </section>

        <section className="bg-background py-16 lg:py-24">
          <div className="container mx-auto px-4 lg:px-8">
            <div className="mx-auto max-w-4xl space-y-14">
              {categories.map((category) => (
                <section key={category.id} id={category.id} className="scroll-mt-28">
                  <div className="mb-6 flex items-center gap-3">
                    <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary">
                      <category.icon className="h-5 w-5" />
                    </div>
                    <h2 className="font-satoshi text-3xl font-black tracking-tight text-foreground">{category.label}</h2>
                  </div>
                  <Accordion type="single" collapsible className="rounded-lg border border-border bg-card">
                    {category.questions.map((item, index) => (
                      <AccordionItem key={item.q} value={`${category.id}-${index}`} className="px-5">
                        <AccordionTrigger className="text-left font-satoshi text-lg font-black leading-snug text-foreground">
                          {item.q}
                        </AccordionTrigger>
                        <AccordionContent className="font-body text-base leading-8 text-foreground/68">
                          {item.a}
                        </AccordionContent>
                      </AccordionItem>
                    ))}
                  </Accordion>
                </section>
              ))}
            </div>
          </div>
        </section>

        <section className="bg-navy py-16 text-white">
          <div className="container mx-auto px-4 lg:px-8">
            <div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
              <div>
                <Badge className="mb-4 border-white/12 bg-white/10 text-white">Une autre question ?</Badge>
                <h2 className="font-satoshi text-3xl font-black tracking-tight lg:text-5xl">
                  {ctaTitre}
                </h2>
                <p className="mt-4 max-w-2xl font-body text-lg leading-relaxed text-white/62">
                  {ctaTexte}
                </p>
              </div>
              <a href={ctaHref} className="group inline-flex items-center justify-center gap-2 rounded-full cta-gradient py-2.5 pl-6 pr-2 font-semibold text-white">
                <span className="text-sm">{ctaLabel}</span>
                <span className="flex h-8 w-8 items-center justify-center rounded-full bg-white/20 transition-transform group-hover:translate-x-0.5">
                  <ArrowRight className="h-4 w-4" />
                </span>
              </a>
            </div>
          </div>
        </section>
      </main>
      <Footer />
      <StickyMobileCTA label="Contact" href="/contact" phoneHref="tel:+33238775708" />
    </div>
  );
};

export default FAQ;
