import type { ReactNode } from 'react';

const defaultSources: { ref: string; url?: string }[] = [
  {
    ref: 'Akbari, H., Berdahl, P., Levinson, R., Wiel, S., Miller, W., & Desjarlais, A. (2005). Aging and Weathering of Cool Roofing Membranes. Lawrence Berkeley National Laboratory / U.S. Department of Energy.',
    url: 'https://www.osti.gov/servlets/purl/860745',
  },
  {
    ref: 'Levinson, R., & Akbari, H. (2010). Potential benefits of cool roofs on commercial buildings: conserving energy, saving money, and reducing emission of greenhouse gases and air pollutants. Energy Efficiency, 3, 53-109.',
  },
  {
    ref: 'Macintyre, H.L., & Heaviside, C. (2019). Potential benefits of cool roofs in reducing heat-related mortality during heatwaves in a European city. Environment International, 127, 430-441.',
  },
  {
    ref: 'Santamouris, M. (2014). Cooling the cities — a review of reflective and green roof mitigation technologies to fight heat island and improve comfort in urban environments. Solar Energy, 103, 682-703.',
    url: 'https://doi.org/10.1016/j.solener.2012.07.003',
  },
  {
    ref: 'Santamouris, M. (2020). Recent progress on urban overheating and heat island research. Energy and Buildings, 207, 109482.',
  },
  {
    ref: 'Synnefa, A., Santamouris, M., & Akbari, H. (2007). Estimating the effect of using cool coatings on energy loads and thermal comfort in residential buildings in various climatic conditions. Energy and Buildings, 39(11), 1167-1174.',
  },
  {
    ref: 'U.S. Environmental Protection Agency (2024). Using Cool Roofs to Reduce Heat Islands.',
    url: 'https://www.epa.gov/heatislands/using-cool-roofs-reduce-heat-islands',
  },
  {
    ref: 'Kalkstein, L.S., et al. (2022). Increasing Trees and High-Albedo Surfaces Decreases Heat Impacts and Mortality in Los Angeles, CA. International Journal of Biometeorology.',
  },
];

const comparison = [
  { critere: 'Coût au m²', cool: '20 à 25 €', iso: '80 à 100 €', clim: "Faible à l'achat, lourd en exploitation" },
  { critere: 'Durée de chantier', cool: '3 à 5 jours', iso: '2 à 4 semaines', clim: 'Installation rapide' },
  { critere: "Économies d'énergie", cool: '15 à 40 %', iso: '20 à 50 %', clim: 'Aucune (augmente la facture)' },
  { critere: 'Durabilité', cool: '8 à 20 ans', iso: '20 à 30 ans', clim: '10 à 15 ans' },
  { critere: "Interruption d'activité", cool: 'Non', iso: 'Oui', clim: 'Oui' },
  { critere: 'ROI moyen', cool: '14 mois', iso: '8 à 12 ans', clim: 'Jamais' },
];

interface SEOContentProps {
  intro?: string;
  sections?: ReactNode;
  sources?: { ref: string; url?: string }[];
}

const SEOContent = ({
  intro = "Le cool roof est aujourd'hui l'une des solutions les plus efficaces pour lutter contre la surchauffe des bâtiments professionnels. Technique éprouvée depuis plus de vingt ans aux États-Unis, largement documentée par la recherche scientifique, elle s'impose en France comme une alternative rentable à la climatisation industrielle et à la rénovation lourde d'étanchéité. Voici ce qu'il faut savoir avant de lancer un projet.",
  sections,
  sources = defaultSources,
}: SEOContentProps = {}) => (
  <section className="py-16 lg:py-32 bg-cream">
    <div className="container mx-auto px-4 lg:px-8 max-w-4xl">
      <div className="mb-12">
        <p className="text-[10px] uppercase tracking-[0.25em] font-semibold text-primary/65 font-body mb-3">
          Dossier
        </p>
        <h2
          className="font-satoshi text-3xl sm:text-4xl lg:text-5xl font-black text-foreground !leading-[1.05]"
          style={{ letterSpacing: '-0.03em' }}
        >
          Tout comprendre
          <br />
          <span className="text-foreground/45">sur le cool roof.</span>
        </h2>
      </div>

      <div className="space-y-14 text-foreground/75 leading-relaxed font-body">

        <p className="text-base lg:text-lg">
          {intro}
        </p>

        {sections ?? (<>
          <div>
            <h3 className="font-satoshi text-2xl lg:text-3xl font-bold text-foreground mb-4">
              Le principe du cool roof : réflectance solaire et émissivité thermique
            </h3>
            <p className="mb-4">
              Le cool roof repose sur deux propriétés physiques qui se cumulent pour déterminer la performance d'un revêtement.
            </p>
            <p className="mb-4">
              La <strong className="text-foreground">réflectance solaire</strong>, d'abord, mesure la capacité d'une surface à renvoyer le rayonnement plutôt que de l'absorber. Une peinture blanche classique plafonne entre 70 et 80 % à l'état neuf, avec une chute rapide due à l'encrassement et au farinage. Les meilleurs cool roofs dépassent <strong className="text-foreground">90 %</strong> dès la pose et maintiennent ce niveau dans le temps grâce à des pigments réflectifs et à un top coat anti-UV.
            </p>
            <p className="mb-4">
              L'<strong className="text-foreground">émissivité thermique</strong> mesure la capacité à évacuer dans l'infrarouge la faible chaleur résiduelle absorbée. Les cool roofs haute performance franchissent une émissivité de <strong className="text-foreground">0,90</strong>.
            </p>
            <p>
              La somme des deux donne le <strong className="text-foreground">SRI</strong>, ou Solar Reflectance Index. C'est l'indicateur normé ASTM 1980 qui fait référence dans l'industrie du revêtement de toiture. CovaTherm 20 affiche un SRI de <strong className="text-foreground">119 à l'état neuf</strong> et <strong className="text-foreground">118 après vieillissement accéléré</strong> en chambre QUV, un record européen. En plein été, une toiture sombre peut dépasser 70 à 80 °C. Avec un cool roof, la surface reste à une dizaine de degrés au-dessus de la température ambiante, et le transfert thermique vers l'intérieur est réduit de façon drastique.
            </p>
          </div>

          <div>
            <h3 className="font-satoshi text-2xl lg:text-3xl font-bold text-foreground mb-4">
              Pourquoi adopter un cool roof sur votre bâtiment
            </h3>
            <p className="mb-4">
              Un cool roof produit six bénéfices mesurables, validés à la fois par la littérature scientifique et par nos chantiers.
            </p>
            <ul className="list-disc pl-6 space-y-3">
              <li><strong className="text-foreground">Gain thermique intérieur</strong> : 5 à 10 °C de moins sous toiture, sans climatisation (US EPA, 2024). Un entrepôt logistique qui monte à 45 °C en pic estival redescend entre 32 et 35 °C.</li>
              <li><strong className="text-foreground">Économies de climatisation</strong> : réduction de <strong className="text-foreground">11 à 27 %</strong> de la demande de pointe selon les études terrain du Lawrence Berkeley National Laboratory (Levinson & Akbari, 2010), jusqu'à <strong className="text-foreground">40 %</strong> sur les bâtiments industriels les plus sollicités.</li>
              <li><strong className="text-foreground">Productivité et confort</strong> : les travaux sur le stress thermique urbain montrent qu'une amélioration du confort intérieur a un effet direct sur la vigilance, la concentration et la baisse des arrêts liés à la chaleur (Santamouris, 2014 ; 2020).</li>
              <li><strong className="text-foreground">Durée de vie de l'étanchéité allongée</strong> : en abaissant la température de surface et en limitant les cycles de dilatation-rétraction, le cool roof prolonge la vie des membranes bitumineuses, EPDM ou PVC de <strong className="text-foreground">8 à 10 ans</strong> (Akbari et al., 2005).</li>
              <li><strong className="text-foreground">Lutte contre l'îlot de chaleur urbain</strong> : à l'échelle d'une ville, un déploiement massif des toitures réflectives peut faire baisser la température ambiante de plusieurs degrés et compenser jusqu'à <strong className="text-foreground">18 %</strong> de la mortalité liée aux vagues de chaleur (Macintyre & Heaviside, 2019).</li>
              <li><strong className="text-foreground">Boost du photovoltaïque</strong> : 10 % de rendement estival supplémentaire pour les panneaux monofaces sur toiture blanche, jusqu'à 20-25 % pour les bifaces grâce à l'albédo restitué.</li>
            </ul>
          </div>

          <div>
            <h3 className="font-satoshi text-2xl lg:text-3xl font-bold text-foreground mb-4">
              Les limites du cool roof : pour quels bâtiments est-il pertinent ?
            </h3>
            <p className="mb-4">
              Le cool roof n'est pas une solution universelle. Trois limites méritent d'être bien identifiées avant tout projet.
            </p>
            <ul className="list-disc pl-6 space-y-3">
              <li><strong className="text-foreground">Il ne remplace pas une étanchéité défaillante.</strong> Les peintures cool roof standard sont imperméables, mais ne se substituent pas à un système d'étanchéité certifié CSTB. Pour une toiture qui présente des fuites généralisées, une réfection complète reste indispensable. En revanche, pour des microfissures localisées et des boursouflures, notre solution 2-en-1 <a href="/covaseal" className="text-primary font-semibold hover:underline">CovaSeal 20</a> combine effet cool roof et étanchéité liquide dans la même application.</li>
              <li><strong className="text-foreground">L'application demande des conditions météo précises.</strong> Les peintures à base d'eau ne se posent pas par temps humide ou pluvieux. La température idéale se situe entre <strong className="text-foreground">17 et 30 °C</strong>, et le vent peut perturber une pose par pulvérisation. Un chantier se planifie donc en fonction de ces contraintes saisonnières.</li>
              <li><strong className="text-foreground">Les zones d'eau stagnante posent problème pour certaines technologies.</strong> Sur les toitures à faible pente (moins de 3 %), les flaques peuvent décoller certaines peintures cool roof classiques. Pour ces configurations, CovaSeal 20 a été spécifiquement formulée avec une résine élastomère qui résiste à la stagnation d'eau.</li>
            </ul>
          </div>

          <div>
            <h3 className="font-satoshi text-2xl lg:text-3xl font-bold text-foreground mb-4">
              Bien choisir sa peinture cool roof : les 4 critères qui comptent
            </h3>
            <p className="mb-4">
              Toutes les peintures cool roof ne se valent pas. Quatre critères déterminent la performance réelle et la durabilité du revêtement.
            </p>
            <ol className="list-decimal pl-6 space-y-3">
              <li><strong className="text-foreground">La quantité de matière déposée.</strong> Plus le système est garnissant, plus la réflectance et l'émissivité sont élevées et durables. Privilégiez les systèmes au-delà de <strong className="text-foreground">0,7 L/m²</strong>.</li>
              <li><strong className="text-foreground">Le coefficient de réflectivité.</strong> Exigez un SRI supérieur à 100 à l'état neuf et supérieur à 90 à l'état vieilli, mesuré après vieillissement accéléré normé. CovaTherm 20 atteint 119/118, qui reste une référence européenne.</li>
              <li><strong className="text-foreground">La protection anti-UV de finition.</strong> Un Top Coat anti-UV évite le jaunissement et le farinage, qui ruinent la performance cool roof en quelques années. C'est le critère qui sépare les produits 5 ans des produits 20 ans.</li>
              <li><strong className="text-foreground">La durée de vie réelle.</strong> Résine acrylique 2-5 ans, polyuréthane 8-10 ans, polyuréthane + Top Coat jusqu'à 20 ans. Un ROI de 14 mois n'a de sens que si le produit ne demande pas une réfection tous les 5 ans.</li>
            </ol>
          </div>

          <div>
            <h3 className="font-satoshi text-2xl lg:text-3xl font-bold text-foreground mb-4">
              Comment se déroule un chantier cool roof
            </h3>
            <p className="mb-4">
              Un chantier cool roof professionnel suit un process en cinq étapes, réalisées par des applicateurs certifiés.
            </p>
            <ol className="list-decimal pl-6 space-y-3 mb-4">
              <li><strong className="text-foreground">Diagnostic technique</strong> : évaluation de l'état du support, humidité, zones à réparer, compatibilité des matériaux.</li>
              <li><strong className="text-foreground">Nettoyage haute pression</strong> : élimination au karcher des mousses, poussières et résidus.</li>
              <li><strong className="text-foreground">Primaire d'accroche</strong> : sous-couche qui garantit l'adhérence durable du revêtement.</li>
              <li><strong className="text-foreground">Application du base coat</strong> : couche réfléchissante posée en deux passes croisées, par pulvérisation depuis le sol. Les machines restent au pied du bâtiment, seuls les flexibles montent en toiture. Zéro charge sur la structure, zéro vibration, zéro risque pour l'étanchéité existante.</li>
              <li><strong className="text-foreground">Application du top coat</strong> (pour les systèmes longue durée) : finition anti-UV et anti-encrassement qui protège la réflectivité sur 20 ans.</li>
            </ol>
            <p>
              L'application se fait par temps sec, entre 10 et 35 °C. Un chantier type de <strong className="text-foreground">1 000 m² est bouclé en 3 à 5 jours</strong>, sans interruption d'activité du bâtiment. Tous les applicateurs Covalba sont certifiés EPI et formés au travail en sécurité en toiture.
            </p>
          </div>

          <div>
            <h3 className="font-satoshi text-2xl lg:text-3xl font-bold text-foreground mb-4">
              Cool roof, isolation ou climatisation : le comparatif
            </h3>
            <p className="mb-6">
              Le cool roof n'est pas la seule solution pour réduire la chaleur dans un bâtiment. Il se compare favorablement à l'isolation et à la climatisation sur trois axes : coût, rapidité de déploiement et retour sur investissement.
            </p>

            {/* Desktop — table */}
            <div className="hidden sm:block mb-4">
              <table className="w-full text-sm border-collapse">
                <thead>
                  <tr className="bg-foreground text-white">
                    <th className="text-left font-satoshi font-bold px-4 py-3 rounded-tl-xl">Critère</th>
                    <th className="text-left font-satoshi font-bold px-4 py-3">Cool roof</th>
                    <th className="text-left font-satoshi font-bold px-4 py-3">Isolation extérieure</th>
                    <th className="text-left font-satoshi font-bold px-4 py-3 rounded-tr-xl">Climatisation</th>
                  </tr>
                </thead>
                <tbody>
                  {comparison.map((row, i) => (
                    <tr
                      key={row.critere}
                      className={i % 2 === 0 ? 'bg-white' : 'bg-foreground/[0.03]'}
                    >
                      <td className="px-4 py-3 font-semibold text-foreground border-b border-foreground/5">{row.critere}</td>
                      <td className="px-4 py-3 text-primary font-semibold border-b border-foreground/5">{row.cool}</td>
                      <td className="px-4 py-3 text-foreground/70 border-b border-foreground/5">{row.iso}</td>
                      <td className="px-4 py-3 text-foreground/70 border-b border-foreground/5">{row.clim}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            {/* Mobile — cards empilées par critère */}
            <div className="sm:hidden space-y-3 mb-4">
              {comparison.map((row) => (
                <div key={row.critere} className="rounded-xl border border-foreground/10 bg-white p-4">
                  <p className="text-xs uppercase tracking-wider font-bold text-foreground/50 mb-3">{row.critere}</p>
                  <div className="space-y-2 text-sm">
                    <div className="flex justify-between gap-3 bg-foreground text-white rounded-lg px-3 py-2">
                      <span className="text-teal-vivid font-semibold text-xs">Cool roof</span>
                      <span className="font-semibold text-xs">{row.cool}</span>
                    </div>
                    <div className="flex justify-between gap-3 px-3">
                      <span className="text-foreground/55 text-xs">Isolation extérieure</span>
                      <span className="text-foreground/75 text-xs text-right">{row.iso}</span>
                    </div>
                    <div className="flex justify-between gap-3 px-3">
                      <span className="text-foreground/55 text-xs">Climatisation</span>
                      <span className="text-foreground/75 text-xs text-right">{row.clim}</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>

            <p>
              Le cool roof est la solution qui s'amortit le plus rapidement, sans démontage ni interruption d'activité. Pour un bâtiment industriel ou tertiaire existant de plus de 10 ans, c'est la voie la plus rentable pour abaisser la chaleur intérieure et prolonger la vie de la toiture.
            </p>
          </div>

          <div>
            <h3 className="font-satoshi text-2xl lg:text-3xl font-bold text-foreground mb-4">
              Le cool roof et la transition énergétique
            </h3>
            <p className="mb-4">
              Au-delà du bénéfice direct pour le bâtiment, le cool roof s'inscrit dans les leviers obligatoires du <strong className="text-foreground">décret tertiaire</strong> (objectifs 2030/2040/2050, année de référence 2020, 30 à 40 % d'économies d'énergie à produire) et dans les stratégies d'adaptation au changement climatique promues par l'Union européenne et les Nations Unies.
            </p>
            <p>
              Les recherches sur l'impact des toitures réflectives à l'échelle urbaine convergent : un déploiement massif du cool roof sur les parcs industriels et tertiaires pourrait compenser une part significative du réchauffement urbain, réduire la demande de climatisation et limiter la mortalité liée aux vagues de chaleur (Santamouris, 2014 ; Macintyre & Heaviside, 2019 ; Kalkstein et al., 2022). À l'échelle d'un bâtiment, c'est un investissement concret. À l'échelle d'une ville, c'est un enjeu de santé publique.
            </p>
          </div>
        </>)}

          <div className="border-t border-foreground/10 pt-10">
            <h3 className="font-satoshi text-xl lg:text-2xl font-bold text-foreground mb-5">
              Sources et références scientifiques
            </h3>
            <ol className="list-decimal pl-6 space-y-3 text-sm text-foreground/70">
              {sources.map((s, i) => (
                <li key={i} className="leading-relaxed">
                  {s.ref}
                  {s.url && (
                    <>
                      {' '}
                      <a
                        href={s.url}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="text-primary hover:underline break-words"
                      >
                        {s.url}
                      </a>
                    </>
                  )}
                </li>
              ))}
            </ol>
          </div>

        </div>
    </div>
  </section>
);

export default SEOContent;