import type { ReactNode } from 'react';
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
import { ArrowRight } from 'lucide-react';
import ScrollReveal from '@/components/ScrollReveal';

export type IndustrieFaqItem = { q: string; a: string };

export const defaultFaqs: IndustrieFaqItem[] = [
  {
    q: 'Mon activité industrielle sera-t-elle interrompue pendant le chantier ?',
    a: "Non. Tout se passe en toiture, depuis l'extérieur. Les machines restent au pied du bâtiment, seuls les flexibles montent. Pas d'accès aux zones de production, pas de bruit interne, pas de poussière. Votre activité continue normalement, sans impact sur vos certifications HACCP, BPF ou ISO. Un chantier industriel type dure 3 à 5 jours selon la surface.",
  },
  {
    q: 'Quels gains thermiques sur un bâtiment industriel ?',
    a: "Jusqu'à 8°C de baisse de température de surface et jusqu'à 40 % d'économies sur la climatisation, mesurés sur sites industriels équipés cool roof Covalba. Les bâtiments non climatisés gagnent en confort de travail et en stabilité de process. Le gain réel dépend de la surface, du type de toiture, de l'activité et de la zone climatique. Une étude technique chiffre votre cas.",
  },
  {
    q: 'Quels types de toitures industrielles sont compatibles ?',
    a: "80 % de nos chantiers industriels sont sur membrane bitumineuse, 20 % sur bac acier — les deux supports les plus courants. Le système Covalba est également compatible EPDM, PVC, fibrociment et béton. Toiture rouillée, microfissures, vieillissement : un diagnostic technique valide l'état du support et la solution adaptée (CovaTherm, CovaMetal pour bac acier, CovaSeal pour étanchéité fatiguée).",
  },
  {
    q: 'Compatible avec mes certifications HACCP, BPF ou ISO ?',
    a: "Oui. Le chantier se déroule intégralement en toiture, sans pénétration dans les zones de production. Aucun risque pour vos certifications agroalimentaires, pharmaceutiques ou industrielles. Les protocoles d'application Covalba respectent les exigences des sites sensibles : zone tampon, EPI conformes, intervention planifiée hors heures de production si nécessaire.",
  },
  {
    q: 'Quelle durée de vie pour un site industriel exposé ?',
    a: "De 8 à 20 ans selon la technologie. CovaTherm 8 (résine polyuréthane) : 8 à 10 ans, avec une couche d'entretien possible en fin de cycle. CovaTherm 20 (PU + vernis anti-UV) : 20 ans sans reprise, SRI 118 après vieillissement accéléré (record européen). Sur un horizon industriel de 20 ans, la version premium est systématiquement la plus rentable.",
  },
  {
    q: 'Quel est le retour sur investissement pour un site industriel ?',
    a: "ROI moyen en moins de 2 ans pour un site équipé en climatisation ou en froid de process. Sur la durée de vie du cool roof, l'économie cumulée (jusqu'à -40 % sur la consommation liée au refroidissement, sur 8 à 20 ans) dépasse largement l'investissement initial. Pour les sites non climatisés, le ROI se mesure en gain de productivité, en confort de travail et en allongement de la durée de vie de la toiture.",
  },
  {
    q: 'Et si j\'ai déjà la climatisation ? Le gain est-il pertinent ?',
    a: "Oui, d'autant plus. Sans cool roof, vos groupes froids fonctionnent en surcharge l'été (toiture à 70°C). Le cool roof réduit la charge thermique transmise par la toiture : moins de cycles de fonctionnement, moins d'usure, et 20 à 40 % d'économies sur la consommation électrique liée à la climatisation. La durée de vie des équipements de froid est également prolongée.",
  },
  {
    q: 'Mon bâtiment industriel est-il éligible aux primes CEE ?',
    a: "La fiche CEE BAT-EN-112 est réservée aux bâtiments tertiaires à usage commercial chauffés ou refroidis par pompe à chaleur — les bâtiments industriels stricto sensu n'y sont pas éligibles. D'autres dispositifs peuvent s'appliquer selon votre activité : aides régionales, ADEME, dispositifs liés à votre classification ICPE. Covalba vous accompagne dans l'identification des aides mobilisables.",
  },
];

const defaultTitre = (
  <>
    Vos questions,
    <br />
    <span className="text-foreground/40">nos réponses.</span>
  </>
);

type IndustrieFAQProps = {
  badge?: string;
  titre?: ReactNode;
  intro?: string;
  faqs?: IndustrieFaqItem[];
  ctaLabel?: string;
  ctaHref?: string;
};

const IndustrieFAQ = ({
  badge = 'FAQ',
  titre = defaultTitre,
  intro = 'Les questions qui reviennent le plus souvent chez les responsables de sites industriels. Si la vôtre n\'y figure pas, parlons-en.',
  faqs = defaultFaqs,
  ctaLabel = 'Une autre question ? Parlons-en',
  ctaHref = '#contact',
}: IndustrieFAQProps = {}) => (
  <section className="py-28 lg:py-40 bg-cream">
    <div className="container mx-auto px-4 lg:px-8">
      <ScrollReveal>
        <div className="grid lg:grid-cols-5 gap-12 lg:gap-16">
          {/* Left — sticky header */}
          <div className="lg:col-span-2 lg:sticky lg:top-24 lg:self-start">
            <div className="mb-6 lg:mb-7 flex items-center gap-3">
              <span className="h-px w-12 bg-primary/70" aria-hidden="true" />
              <span className="text-primary text-[11px] font-bold font-body uppercase tracking-[0.22em]">
                {badge}
              </span>
            </div>

            <h2
              className="font-satoshi font-black text-foreground !leading-[1.05] mb-5"
              style={{ fontSize: 'clamp(1.875rem, 3.8vw, 3rem)', letterSpacing: '-0.03em' }}
            >
              {titre}
            </h2>

            <p className="text-foreground/65 text-base lg:text-[15.5px] font-body leading-relaxed max-w-[400px]">
              {intro}
            </p>
          </div>

          {/* Right — accordion */}
          <div className="lg:col-span-3">
            <Accordion type="single" collapsible className="space-y-3">
              {faqs.map((faq, i) => (
                <AccordionItem
                  key={i}
                  value={`industrie-faq-${i}`}
                  className="border border-foreground/[0.06] bg-white rounded-xl px-6 data-[state=open]:shadow-sm"
                >
                  <AccordionTrigger className="text-left font-semibold text-foreground hover:no-underline py-5">
                    {faq.q}
                  </AccordionTrigger>
                  <AccordionContent className="text-foreground/65 leading-relaxed pb-5 font-body">
                    {faq.a}
                  </AccordionContent>
                </AccordionItem>
              ))}
            </Accordion>

            <div className="mt-8">
              <a
                href={ctaHref}
                className="group inline-flex items-center gap-2 text-primary font-semibold hover:gap-3 transition-all text-sm"
              >
                {ctaLabel}
                <ArrowRight className="w-4 h-4" />
              </a>
            </div>
          </div>
        </div>
      </ScrollReveal>
    </div>
  </section>
);

export default IndustrieFAQ;