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

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

export const defaultSourceLinks: DistributionSeoSource[] = [
  {
    label: 'Lawrence Berkeley National Laboratory - Heat Island Group',
    href: 'https://heatisland.lbl.gov/',
  },
  {
    label: 'EPA - Reducing Urban Heat Islands: Cool Roofs',
    href: 'https://www.epa.gov/heatislands/using-cool-roofs-reduce-heat-islands',
  },
  {
    label: 'ADEME - Îlots de chaleur urbains et rafraîchissement passif',
    href: 'https://www.ademe.fr/',
  },
  {
    label: 'Ministère de la Transition écologique - Fiche CEE BAT-EN-112',
    href: 'https://www.ecologie.gouv.fr/politiques-publiques/operations-standardisees-deconomies-denergie',
  },
  {
    label: 'Ministère de la Transition écologique - Éco Énergie Tertiaire',
    href: 'https://www.ecologie.gouv.fr/eco-energie-tertiaire-eet',
  },
];

const defaultTitre = (
  <>
    Cool roof magasin et grande surface :
    <br />
    <span className="text-foreground/42">pourquoi une toiture réfléchissante change la donne.</span>
  </>
);

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

export const defaultSeoSections: DistributionSeoSection[] = [
  {
    title: 'Pourquoi les surfaces commerciales surchauffent en été',
    body: (
      <>
        Un magasin ou un centre commercial cumule une grande toiture plate, souvent en bac acier ou en
        membrane sombre, au-dessus d'un espace ouvert au public que l'on cherche à garder à température
        agréable. Une toiture foncée absorbe l'essentiel du rayonnement solaire et peut voir sa surface
        dépasser <strong className="text-foreground">80°C</strong> en plein été, avant de transmettre
        cette chaleur à l'intérieur. C'est précisément ce flux de chaleur par la toiture que le{' '}
        <a href="/peinture-reflective-covatherm" className="font-semibold text-primary underline underline-offset-4">
          revêtement cool roof toiture
        </a>{' '}
        vient interrompre.
      </>
    ),
  },
  {
    title: 'Le principe du cool roof, validé par la recherche',
    body: (
      <>
        Une toiture réfléchissante associe une forte réflectance solaire et une forte émissivité : elle
        renvoie une grande partie du rayonnement reçu et évacue la chaleur résiduelle, au lieu de la
        stocker. Ce principe de rafraîchissement passif est documenté par les laboratoires publics et la
        recherche académique. Ces études estiment qu'une toiture réfléchissante peut réduire de façon
        notable la consommation de climatisation d'un bâtiment, l'ampleur réelle dépendant de l'isolation,
        de la zone climatique et de l'usage.
      </>
    ),
  },
  {
    title: "Confort thermique et chiffre d'affaires",
    body: (
      <>
        Au-delà de l'énergie, le confort thermique est un véritable levier commercial. Un point de vente
        trop chaud voit sa fréquentation baisser pendant les épisodes de chaleur, et un client mal à l'aise
        écourte sa visite. À l'inverse, une ambiance fraîche incite à rester plus longtemps en magasin.
        En abaissant la température sous toiture, le cool roof aide à préserver l'attractivité du point de
        vente au moment précis où la concurrence souffre de la chaleur.
      </>
    ),
  },
  {
    title: 'Maîtriser la facture de climatisation',
    body: (
      <>
        Contrairement à un entrepôt de stockage, une surface commerciale est climatisée. Lorsque la toiture
        chauffe, la climatisation tourne en surrégime pour tenir la température de consigne. En limitant
        l'apport de chaleur par le toit, le cool roof réduit la charge des équipements de froid et de
        climatisation. Le même mécanisme soulage les rayons frais : meubles réfrigérés et zones de produits
        frais consomment moins et conservent mieux les denrées quand l'ambiance générale reste tempérée.
      </>
    ),
  },
  {
    title: 'Cool roof et prime CEE : la fiche BAT-EN-112',
    body: (
      <>
        Parce qu'une surface commerciale est un bâtiment climatisé, ses travaux de cool roof sont éligibles
        aux Certificats d'Économies d'Énergie au titre de la fiche BAT-EN-112. Cette opération vise les
        bâtiments tertiaires à usage commercial, à trois conditions : chaud et froid par pompe à chaleur,
        toiture sans revêtement réflectif avant travaux, et produit dont l'indice de réflectance solaire
        reste élevé après vieillissement. Covalba étudie l'éligibilité du site et accompagne le montage du
        dossier de{' '}
        <a href="#prime-cee-distribution" className="font-semibold text-primary underline underline-offset-4">
          prime CEE cool roof commerce
        </a>.
      </>
    ),
  },
  {
    title: 'Un revêtement qui dure, sur de grandes surfaces',
    body: (
      <>
        Sur une toiture commerciale de plusieurs milliers de mètres carrés, la durabilité du revêtement est
        déterminante. Les solutions bas de gamme à base de résine acrylique perdent leur réflectivité en
        quelques années, ce qui impose de recommencer bien plus tôt que prévu. Les revêtements employés par
        Covalba, à base de polyuréthane et de vernis de finition, sont conçus pour tenir 8 à 10 ans en
        conservant leurs performances. Pour les supports sensibles, Covalba peut aussi orienter vers une{' '}
        <a href="/covaseal" className="font-semibold text-primary underline underline-offset-4">
          étanchéité cool roof
        </a>{' '}
        ou un{' '}
        <a href="/covametal" className="font-semibold text-primary underline underline-offset-4">
          cool roof bac acier
        </a>.
      </>
    ),
  },
  {
    title: 'Cool roof, décret tertiaire et parc existant',
    body: (
      <>
        Les bâtiments commerciaux de plus de <strong className="text-foreground">1000 m²</strong> sont
        soumis au dispositif Éco Énergie Tertiaire, avec des objectifs progressifs de réduction de
        consommation d'énergie. Le cool roof s'inscrit dans cette trajectoire en agissant sur le poste
        climatisation, sans travaux lourds ni fermeture du site. L'essentiel de l'opportunité se situe sur
        le parc existant : magasins et surfaces à toiture sombre ou vieillissante, non encore traités. Pour
        une approche plus globale, consultez aussi la page pilier{' '}
        <a href="/industrie" className="font-semibold text-primary underline underline-offset-4">
          cool roof bâtiment tertiaire
        </a>{' '}
        ou demandez un{' '}
        <a href="/diagnostic" className="font-semibold text-primary underline underline-offset-4">
          diagnostic cool roof surface commerciale
        </a>.
      </>
    ),
  },
];

type DistributionSEOContentProps = {
  eyebrow?: string;
  titre?: ReactNode;
  intro?: string;
  sections?: DistributionSeoSection[];
  sourceLinks?: DistributionSeoSource[];
  footnote?: string;
};

const DistributionSEOContent = ({
  eyebrow = 'Dossier distribution',
  titre = defaultTitre,
  intro = "Dans le commerce, la chaleur estivale n'est pas qu'une question de confort : elle touche directement la fréquentation, la facture d'énergie et la conservation des produits. Voici pourquoi une toiture réfléchissante change la donne sur une surface de vente, et ce que disent les travaux de référence sur le sujet.",
  sections = defaultSeoSections,
  sourceLinks = defaultSourceLinks,
  footnote = 'Les données de fréquentation et les seuils SRI précis doivent être confirmés avant publication ferme. Le chiffre académique de 15 % de consommation annuelle de climatisation et l\'argument commercial de -40 % sur les besoins de climatisation correspondent à deux métriques distinctes.',
}: DistributionSEOContentProps = {}) => (
  <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 max-w-3xl lg:mb-16">
            <p className="mb-4 font-body text-[10px] font-bold uppercase tracking-[0.24em] text-primary/70">
              {eyebrow}
            </p>
            <h2
              className="font-satoshi text-3xl font-bold text-foreground !leading-[1.05] sm:text-4xl lg:text-[3rem]"
              style={{ letterSpacing: '-0.03em' }}
            >
              {titre}
            </h2>
            <p className="mt-6 max-w-3xl font-body text-base leading-relaxed text-foreground/68 lg:text-[17px]">
              {intro}
            </p>
          </div>

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

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

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

                <section>
                  <h3 className="mb-4 font-satoshi text-2xl font-bold text-foreground lg:text-3xl">
                    {sections[3]?.title}
                  </h3>
                  <p>
                    {sections[3]?.body}
                  </p>
                </section>
              </div>
              <figure className="order-1 flex justify-center lg:order-2 lg:h-full lg:items-center">
                <img
                  src="/images/distribution/seo-prime-cee.webp"
                  alt="Surface commerciale climatisée et toiture de magasin éligible aux aides CEE"
                  loading="lazy"
                  decoding="async"
                  className="mx-auto aspect-[4/3] w-full max-w-[560px] rounded-xl object-cover object-center"
                />
              </figure>
            </div>

            <div className="grid items-start gap-8 lg:grid-cols-[0.95fr_1.05fr] lg:gap-14 lg:items-stretch">
              <figure className="flex justify-center lg:h-full lg:items-center">
                <img
                  src="/images/distribution/seo-durabilite.webp"
                  alt="Revêtement cool roof durable sur une toiture commerciale claire"
                  loading="lazy"
                  decoding="async"
                  className="mx-auto aspect-[4/3] w-full max-w-[560px] rounded-xl object-cover object-center"
                />
              </figure>
              <div className="space-y-10 font-body leading-relaxed text-foreground/74">
                <section>
                  <h3 className="mb-4 font-satoshi text-2xl font-bold text-foreground lg:text-3xl">
                    {sections[4]?.title}
                  </h3>
                  <p>
                    {sections[4]?.body}
                  </p>
                </section>

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

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

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

export default DistributionSEOContent;
