import type { ReactNode } from 'react';
import ScrollReveal from '@/components/ScrollReveal';

export type LogistiqueSeoSource = { label: string; href?: string };

export const defaultSourceLinks: LogistiqueSeoSource[] = [
  {
    label: 'INRS - Travail à la chaleur',
    href: 'https://www.inrs.fr/risques/chaleur/reglementation.html',
  },
  {
    label: 'EPA - Using Cool Roofs to Reduce Heat Islands',
    href: 'https://www.epa.gov/heatislands/using-cool-roofs-reduce-heat-islands',
  },
  {
    label: 'U.S. Department of Energy - Cool Roofs',
    href: 'https://www.energy.gov/energysaver/articles/cool-roofs',
  },
  {
    label: 'Légifrance - Articles R174-22 à R174-32',
    href: 'https://www.legifrance.gouv.fr/codes/section_lc/LEGITEXT000006074096/LEGISCTA000043819497/',
  },
  {
    label: 'Ministère de la Transition écologique - Éco Énergie Tertiaire',
    href: 'https://www.ecologie.gouv.fr/eco-energie-tertiaire-eet',
  },
];

const defaultTitre = (
  <>
    Chaleur en entrepôt logistique :
    <br />
    <span className="text-foreground/42">ce que votre toiture change vraiment.</span>
  </>
);

export type LogistiqueSeoSection = { title: string; body: ReactNode };

export const defaultSeoSections: LogistiqueSeoSection[] = [
  {
    title: 'Pourquoi les entrepôts logistiques surchauffent en été',
    body: (
      <>
        Un entrepôt logistique cumule trois caractéristiques qui en font un
        piège thermique. Sa toiture est vaste, souvent plusieurs milliers de
        mètres carrés d'un seul tenant. Elle est généralement en{' '}
        <strong className="text-foreground">bac acier</strong> peu ou pas
        isolé, un matériau qui absorbe et transmet très vite la chaleur. Et
        elle coiffe un grand volume d'air, dans lequel la chaleur monte et se
        stratifie. En plein été, la surface d'une toiture sombre peut dépasser{' '}
        <strong className="text-foreground">80°C</strong>, et une grande
        partie de cette énergie se retrouve transmise à l'intérieur. Les zones
        hautes, les mezzanines et les racks supérieurs deviennent alors les
        points les plus chauds du site, là où sont souvent stockées les
        marchandises et là où circulent les caristes.
      </>
    ),
  },
  {
    title: 'Chaleur en entrepôt et conditions de travail',
    body: (
      <>
        La chaleur en entrepôt est avant tout un sujet de{' '}
        <strong className="text-foreground">santé et de sécurité au travail</strong>.
        Caristes, préparateurs de commandes et agents de quai fournissent un
        effort physique soutenu, parfois dans des bâtiments où la température
        dépasse 35°C en été. L'employeur a l'obligation de prendre en compte
        les fortes chaleurs dans l'évaluation des risques et d'adapter les
        conditions de travail. En abaissant la température sous la toiture, le
        cool roof contribue à des conditions plus supportables, ce qui limite
        les baisses de cadence, l'absentéisme et les arrêts liés à la chaleur.
        Sur les sites à forte densité humaine comme les plateformes e-commerce,
        c'est un levier direct de performance.
      </>
    ),
  },
  {
    title: 'Protéger les marchandises sensibles à la chaleur',
    body: (
      <>
        Beaucoup de produits stockés en entrepôt se dégradent au-delà d'une
        certaine température, même en dehors des zones réfrigérées. Cosmétiques,
        électronique, vins et spiritueux, denrées sèches et produits
        pharmaceutiques ont des plages de température de stockage à respecter.
        Lorsque la chaleur transmise par la toiture fait grimper la température
        intérieure, en particulier en zone haute, le risque de pertes, de
        non-conformités et de litiges augmente. En stabilisant la température,
        le <strong className="text-foreground">cool roof</strong> aide à
        préserver l'intégrité des marchandises pendant les périodes les plus
        chaudes.
      </>
    ),
  },
  {
    title: 'Cool roof : une réponse passive à la chaleur des bâtiments',
    body: (
      <>
        Le <strong className="text-foreground">cool roof</strong>, ou toiture
        réfléchissante, consiste à appliquer un revêtement clair à haute
        réflectance solaire sur la toiture existante. Le principe est documenté
        depuis plusieurs décennies par la recherche sur les îlots de chaleur
        urbains. Plutôt que d'absorber le rayonnement comme une surface sombre,
        la toiture le renvoie vers l'extérieur. La surface chauffe beaucoup
        moins, et la chaleur transmise au bâtiment diminue d'autant. C'est une
        solution <strong className="text-foreground">passive</strong> : une
        fois appliquée, elle agit sans consommer d'énergie, contrairement à une
        climatisation qu'il faut alimenter en continu, et qui est souvent
        absente des entrepôts.
      </>
    ),
  },
  {
    title: 'Le cas particulier des entrepôts frigorifiques',
    body: (
      <>
        Pour les plateformes <strong className="text-foreground">frigorifiques</strong>{' '}
        et les entrepôts à zones fraîches, un enjeu supplémentaire s'ajoute.
        Chaque degré de chaleur transmis par la toiture doit être compensé par
        les groupes froids, qui tournent en surrégime pendant les périodes
        chaudes. En limitant cet apport thermique, le cool roof allège la charge
        des compresseurs, réduit la facture énergétique et diminue le risque de{' '}
        <strong className="text-foreground">rupture de la chaîne du froid</strong>{' '}
        lors des canicules. C'est sur ces sites que le retour sur investissement
        est le plus rapide.
      </>
    ),
  },
  {
    title: 'Cool roof, décret tertiaire et parc existant',
    body: (
      <>
        Les bâtiments d'entreposage de plus de{' '}
        <strong className="text-foreground">1000 m²</strong> sont soumis à des
        objectifs progressifs de réduction de leur consommation d'énergie. Le
        cool roof s'inscrit dans cette trajectoire comme une action sobre,
        surtout sur les sites équipés de froid ou de climatisation. La plupart
        des entrepôts récents étant déjà construits avec des toitures claires,
        l'enjeu se concentre sur le{' '}
        <strong className="text-foreground">parc existant</strong> : bâtiments
        anciens à toiture sombre ou bac acier vieillissant, sites frigorifiques
        en surcoût, plateformes à fort enjeu humain. Sur ces bâtiments, le cool
        roof Covalba apporte une réponse rapide à mettre en œuvre, appliquée
        depuis l'extérieur, sans interruption d'activité, et conçue pour durer
        grâce à un revêtement protégé contre le jaunissement et la perte de
        réflectivité.
      </>
    ),
  },
];

type LogistiqueSEOContentProps = {
  eyebrow?: string;
  titre?: ReactNode;
  sections?: LogistiqueSeoSection[];
  sourceLinks?: LogistiqueSeoSource[];
};

const LogistiqueSEOContent = ({
  eyebrow = 'Dossier logistique',
  titre = defaultTitre,
  sections = defaultSeoSections,
  sourceLinks = defaultSourceLinks,
}: LogistiqueSEOContentProps = {}) => (
  <section className="bg-[#F6F3EC] py-16 lg:py-28">
    <div className="container mx-auto px-4 lg:px-8">
      <ScrollReveal>
        <article className="mx-auto max-w-6xl">
          <div className="mb-12 lg:mb-16 max-w-3xl">
            <p className="text-[10px] uppercase tracking-[0.24em] font-bold text-primary/70 font-body mb-4">
              {eyebrow}
            </p>
            <h2
              className="font-satoshi text-3xl sm:text-4xl lg:text-[3rem] font-black text-foreground !leading-[1.05]"
              style={{ letterSpacing: '-0.03em' }}
            >
              {titre}
            </h2>
          </div>

          <div className="space-y-16 lg:space-y-24">
            <div className="grid lg:grid-cols-[0.95fr_1.05fr] gap-8 lg:gap-14 items-start lg:items-stretch">
              <figure className="flex justify-center lg:items-center lg:h-full">
                <img
                  src="/images/logistique/seo-surchauffe-entrepot.webp"
                  alt="Toiture sombre d'un grand entrepôt logistique exposée au soleil d'été"
                  loading="lazy"
                  className="w-full max-w-[560px] mx-auto aspect-[4/3] object-cover object-center rounded-xl"
                />
              </figure>
              <div className="space-y-10 text-foreground/74 font-body leading-relaxed">
                <section>
                  <h3 className="font-satoshi text-2xl lg:text-3xl font-bold text-foreground mb-4">
                    {sections[0]?.title}
                  </h3>
                  <p>
                    {sections[0]?.body}
                  </p>
                </section>

                <section>
                  <h3 className="font-satoshi text-2xl lg:text-3xl font-bold text-foreground mb-4">
                    {sections[1]?.title}
                  </h3>
                  <p>
                    {sections[1]?.body}
                  </p>
                </section>
              </div>
            </div>

            <div className="grid lg:grid-cols-[1.05fr_0.95fr] gap-8 lg:gap-14 items-start lg:items-stretch">
              <div className="space-y-10 text-foreground/74 font-body leading-relaxed lg:order-1 order-2">
                <section>
                  <h3 className="font-satoshi text-2xl lg:text-3xl font-bold text-foreground mb-4">
                    {sections[2]?.title}
                  </h3>
                  <p>
                    {sections[2]?.body}
                  </p>
                </section>

                <section>
                  <h3 className="font-satoshi text-2xl lg:text-3xl font-bold text-foreground mb-4">
                    {sections[3]?.title}
                  </h3>
                  <p>
                    {sections[3]?.body}
                  </p>
                </section>
              </div>
              <figure className="lg:order-2 order-1 flex justify-center lg:items-center lg:h-full">
                <img
                  src="/images/logistique/seo-conditions-travail.webp"
                  alt="Intérieur d'un entrepôt logistique avec racks et marchandises en zone haute"
                  loading="lazy"
                  className="w-full max-w-[560px] mx-auto aspect-[4/3] object-cover object-center rounded-xl"
                />
              </figure>
            </div>

            <div className="grid lg:grid-cols-[0.95fr_1.05fr] gap-8 lg:gap-14 items-start lg:items-stretch">
              <figure className="flex justify-center lg:items-center lg:h-full">
                <img
                  src="/images/logistique/seo-froid-coolroof.webp"
                  alt="Entrepôt frigorifique avec toiture blanche réfléchissante et équipements techniques"
                  loading="lazy"
                  className="w-full max-w-[560px] mx-auto aspect-[4/3] object-cover object-center rounded-xl"
                />
              </figure>
              <div className="space-y-10 text-foreground/74 font-body leading-relaxed">
                <section>
                  <h3 className="font-satoshi text-2xl lg:text-3xl font-bold text-foreground mb-4">
                    {sections[4]?.title}
                  </h3>
                  <p>
                    {sections[4]?.body}
                  </p>
                </section>

                <section>
                  <h3 className="font-satoshi text-2xl lg:text-3xl font-bold text-foreground mb-4">
                    {sections[5]?.title}
                  </h3>
                  <p>
                    {sections[5]?.body}
                  </p>
                </section>
              </div>
            </div>
          </div>

          <footer className="mt-14 lg:mt-20 border-t border-foreground/10 pt-6">
            <p className="text-[11px] uppercase tracking-[0.18em] font-bold text-foreground/45 font-body mb-3">
              Sources
            </p>
            <ul className="grid gap-2 text-sm text-foreground/58 font-body">
              {sourceLinks.map((source) => (
                <li key={source.href}>
                  <a
                    href={source.href}
                    target="_blank"
                    rel="noreferrer"
                    className="hover:text-primary transition-colors underline underline-offset-4 decoration-foreground/20"
                  >
                    {source.label}
                  </a>
                </li>
              ))}
            </ul>
          </footer>
        </article>
      </ScrollReveal>
    </div>
  </section>
);

export default LogistiqueSEOContent;
