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

export const defaultFaqs: LogistiqueFaqItem[] = [
  {
    q: "Mon exploitation logistique sera-t-elle interrompue pendant le chantier ?",
    a: "Non. Toute l'application se fait depuis l'extérieur du bâtiment. Vos réceptions, expéditions et préparations continuent normalement, y compris sur les sites en activité 24/7. On organise l'intervention par zones pour s'adapter à vos flux.",
  },
  {
    q: "Quel gain pour le confort de mes équipes l'été ?",
    a: "C'est le bénéfice le plus immédiat. En abaissant la température sous toiture, le cool roof rend les zones de préparation, de quai et de stockage plus supportables, ce qui limite les baisses de cadence et les arrêts liés à la chaleur, et vous aide à répondre à vos obligations d'employeur.",
  },
  {
    q: 'Le cool roof protège-t-il les marchandises stockées ?',
    a: "Oui. En limitant la chaleur transmise par la toiture, il stabilise la température intérieure, en particulier dans les zones hautes où l'air chaud s'accumule. Vos produits sensibles à la chaleur sont mieux préservés pendant les périodes les plus chaudes.",
  },
  {
    q: 'Quels gains de température dans un entrepôt ?',
    a: "La température de surface de la toiture peut baisser de plusieurs dizaines de degrés, et la température intérieure de plusieurs degrés en zone haute. L'effet est particulièrement net sur les bâtiments à toiture bac acier peu isolée, qui représentent la majorité du parc logistique.",
  },
  {
    q: "Le cool roof est-il utile si mon entrepôt n'est pas climatisé ?",
    a: "Oui, et c'est le cas le plus fréquent en logistique. Sans climatisation, le bénéfice ne se mesure pas en économie d'énergie mais en confort des équipes et en protection des marchandises. La toiture transmet moins de chaleur, les zones de travail et de stockage restent plus tempérées.",
  },
  {
    q: "Et si j'ai des chambres froides ?",
    a: "Le cas le plus rentable. En limitant l'apport de chaleur par la toiture, vous soulagez directement vos groupes froids, vous réduisez la facture énergétique et vous diminuez le risque de rupture de chaîne du froid pendant les pics de chaleur.",
  },
  {
    q: "Quels types de toitures d'entrepôt 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: 'Mon entrepôt est-il concerné par le décret tertiaire ?',
    a: "Si votre site d'entreposage dépasse 1000 m², il est soumis à des objectifs de réduction de consommation d'énergie. Le cool roof est une action passive qui s'intègre dans votre trajectoire de conformité, en particulier sur les sites équipés de froid ou de climatisation.",
  },
];

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

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

const LogistiqueFAQ = ({
  badge = 'FAQ',
  titre = defaultTitre,
  intro = "Les questions qui reviennent le plus souvent chez les responsables d'entrepôts. Si la vôtre n'y figure pas, parlons-en.",
  faqs = defaultFaqs,
  ctaLabel = 'Une autre question ? Parlons-en',
  ctaHref = '#contact',
}: LogistiqueFAQProps = {}) => (
  <section className="py-20 lg:py-32 bg-cream">
    <div className="container mx-auto px-4 lg:px-8">
      <ScrollReveal>
        <div className="grid lg:grid-cols-[0.85fr_1.15fr] gap-10 lg:gap-16 items-start">
          <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="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(2rem, 3.3vw, 3rem)', letterSpacing: '-0.03em' }}
            >
              {titre}
            </h2>

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

            <a
              href={ctaHref}
              className="group mt-8 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>

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

export default LogistiqueFAQ;