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 DistributionFaqItem = { q: string; a: string };

export const defaultFaqs: DistributionFaqItem[] = [
  {
    q: 'Mon magasin restera-t-il ouvert pendant les travaux ?',
    a: "Oui. Toute l'application se fait depuis l'extérieur du bâtiment. Votre point de vente continue d'accueillir ses clients, et l'intervention est organisée pour respecter vos horaires d'ouverture.",
  },
  {
    q: 'Mon commerce est-il éligible à la prime CEE ?',
    a: "Très probablement. La fiche BAT-EN-112 vise les bâtiments tertiaires à usage commercial climatisés par pompe à chaleur, dont la toiture n'a pas encore de revêtement réflectif. Covalba étudie votre éligibilité, monte le dossier, et la prime vient en déduction du coût des travaux. Son montant dépend de votre zone climatique et de la surface traitée.",
  },
  {
    q: 'Quel impact sur le confort des clients ?',
    a: "C'est le bénéfice le plus direct. En abaissant la température sous toiture, le cool roof rend l'ambiance plus agréable pendant les fortes chaleurs. Un magasin frais retient les clients plus longtemps, là où un point de vente surchauffé voit sa fréquentation chuter.",
  },
  {
    q: 'Le cool roof réduit-il vraiment ma facture de climatisation ?',
    a: "Oui. En limitant la chaleur transmise par la toiture, vos groupes de climatisation sont moins sollicités. Comme la climatisation pèse lourd dans la facture énergétique d'un commerce, l'effet sur les charges est significatif, surtout sur les grandes surfaces.",
  },
  {
    q: 'Un revêtement bon marché ne fait-il pas le même travail ?',
    a: 'Sur le moment, oui. Dans la durée, non. Les revêtements bas de gamme à base de résine acrylique se dégradent souvent en 2 à 5 ans et perdent leur réflectivité. Covalba applique des systèmes polyuréthane ou avec vernis de finition conçus pour tenir 8 à 10 ans. Sur une grande toiture, le moins cher coûte vite plus cher.',
  },
  {
    q: 'Quels types de toitures de magasin sont compatibles ?',
    a: "Bac acier, bitume, membranes synthétiques et béton. Covalba dispose d'un système adapté à chaque support, y compris pour les toitures anciennes ou corrodées après diagnostic.",
  },
  {
    q: 'Et mes rayons frais et meubles réfrigérés ?',
    a: "Une ambiance plus tempérée soulage vos installations de froid commercial et limite le risque sur la conservation des denrées, en complément de votre production de froid existante.",
  },
  {
    q: 'Ma surface est-elle concernée par le décret tertiaire ?',
    a: "Si votre bâtiment commercial dépasse 1000 m², il est soumis à des objectifs de réduction de consommation d'énergie aux horizons 2030, 2040 et 2050. Le cool roof est une action passive qui agit sur le poste climatisation et s'intègre dans votre trajectoire de conformité.",
  },
];

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

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

const DistributionFAQ = ({
  badge = 'FAQ',
  titre = defaultTitre,
  intro = 'Les points qui reviennent le plus souvent chez les responsables de surfaces commerciales.',
  faqs = defaultFaqs,
  ctaLabel = 'Une autre question ? Parlons-en',
  ctaHref = '#contact-distribution',
}: DistributionFAQProps = {}) => (
  <section className="bg-cream py-20 lg:py-32">
    <div className="container mx-auto px-4 lg:px-8">
      <ScrollReveal>
        <div className="grid items-start gap-10 lg:grid-cols-[0.85fr_1.15fr] lg:gap-16">
          <div className="lg:sticky lg:top-24">
            <div className="mb-5 flex items-center gap-3">
              <span className="h-px w-10 bg-primary/70" aria-hidden="true" />
              <span className="font-body text-[11px] font-bold uppercase tracking-[0.22em] text-primary">{badge}</span>
            </div>
            <h2
              className="mb-5 font-satoshi font-bold text-foreground !leading-[1.05]"
              style={{ fontSize: 'clamp(2rem, 3.3vw, 3rem)', letterSpacing: '-0.03em' }}
            >
              {titre}
            </h2>
            <p className="max-w-[420px] font-body text-base leading-relaxed text-foreground/65 lg:text-[15.5px]">
              {intro}
            </p>
            <a href={ctaHref} className="group mt-8 inline-flex items-center gap-2 text-sm font-semibold text-primary transition-all hover:gap-3">
              {ctaLabel}
              <ArrowRight className="h-4 w-4" />
            </a>
          </div>

          <Accordion type="single" collapsible className="space-y-3">
            {faqs.map((faq, index) => (
              <AccordionItem
                key={faq.q}
                value={`distribution-faq-${index}`}
                className="rounded-xl border border-foreground/[0.06] bg-white px-5 shadow-[0_12px_34px_rgba(24,42,58,0.04)] data-[state=open]:border-primary/20 lg:px-6"
              >
                <AccordionTrigger className="py-5 text-left font-satoshi text-base font-bold text-foreground hover:no-underline lg:text-[17px]">
                  {faq.q}
                </AccordionTrigger>
                <AccordionContent className="pb-5 font-body text-[14.5px] leading-relaxed text-foreground/67 lg:text-[15px]">
                  {faq.a}
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </div>
      </ScrollReveal>
    </div>
  </section>
);

export default DistributionFAQ;