
import { sanitizeWpHtml } from '@/lib/sanitizeHtml';

export interface EditorialSource {
  ref: string;
  url: string;
}

export interface EditorialSection {
  titre?: string | null;
  contenu?: string | null;
}

const defaultSources: EditorialSource[] = [
  {
    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: '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: '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.',
    url: 'https://doi.org/10.1016/j.enbuild.2007.01.004',
  },
  {
    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',
  },
];

interface CovaSealEditorialProps {
  badge?: string;
  /** Intro HTML (WordPress). Absente => intro d'origine. */
  intro?: string;
  /** Sections HTML (WordPress). Absentes => corps d'origine. */
  sections?: EditorialSection[];
  sources?: EditorialSource[];
}

const CovaSealEditorial = ({
  badge = 'Dossier',
  intro,
  sections,
  sources = defaultSources,
}: CovaSealEditorialProps = {}) => (
  <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">
            {badge}
          </p>
          <h2
            className="font-satoshi text-3xl sm:text-4xl lg:text-5xl font-black text-foreground !leading-[1.05]"
            style={{ letterSpacing: '-0.03em' }}
          >
            L'étanchéité cool roof,
            <br />
            <span className="text-foreground/45">en clair.</span>
          </h2>
        </div>

        <div className="space-y-14 text-foreground/75 leading-relaxed font-body">
          {intro || sections ? (<>
            {intro && (
              <div
                className="text-base lg:text-lg [&_strong]:text-foreground"
                dangerouslySetInnerHTML={{ __html: sanitizeWpHtml(intro) }}
              />
            )}
            {(sections ?? []).map((s, i) => (
              <div key={i}>
                <h3 className="font-satoshi text-2xl lg:text-3xl font-bold text-foreground mb-4">
                  {s.titre}
                </h3>
                <div
                  className="[&_p]:mb-4 [&_p:last-child]:mb-0 [&_strong]:text-foreground [&_ul]:list-disc [&_ul]:pl-6 [&_ul]:space-y-2 [&_ul]:mb-4 [&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:space-y-3 [&_ol]:mb-4 [&_a]:text-primary [&_a]:font-semibold [&_a:hover]:underline"
                  dangerouslySetInnerHTML={{ __html: sanitizeWpHtml(s.contenu) }}
                />
              </div>
            ))}
          </>) : (<>

          <p className="text-base lg:text-lg">
            Étanchéité cool roof, peinture étanchéité toiture, résine élastomère,
            revêtement liquide réfléchissant : plusieurs appellations pour désigner une
            même famille de produits qui combinent imperméabilisation et réflectivité
            solaire. Utilisée pour rénover les toitures fatiguées sans passer par un
            remplacement complet, l'étanchéité cool roof s'impose comme la solution la
            plus rentable quand le budget ne permet pas une réfection totale. Elle reste
            aussi l'alternative intelligente quand la toiture n'est pas encore assez
            dégradée pour la justifier.
          </p>

          {/* 1. Principe */}
          <div>
            <h3 className="font-satoshi text-2xl lg:text-3xl font-bold text-foreground mb-4">
              Le principe de l'étanchéité cool roof
            </h3>
            <p className="mb-4">
              Une étanchéité cool roof combine deux mécanismes techniques sur le même
              support.
            </p>
            <ul className="list-disc pl-6 space-y-3 mb-4">
              <li>
                <strong className="text-foreground">La réflectance solaire</strong> renvoie
                jusqu'à 90 % du rayonnement plutôt que de le laisser pénétrer dans le
                bâtiment. CovaSeal 20 affiche un <strong className="text-foreground">SRI
                neuf de 107</strong>, ce qui garantit un effet cool roof immédiat dès la
                première application.
              </li>
              <li>
                <strong className="text-foreground">La résine élastomère</strong> forme
                après séchage un film continu, souple et imperméable, qui reste solidaire
                du support en cas de dilatations thermiques. C'est ce qui permet à CovaSeal
                20 de reboucher les microfissures jusqu'à{' '}
                <strong className="text-foreground">2 mm</strong> et de tenir sur les zones
                de stagnation d'eau.
              </li>
            </ul>
            <p>
              Le Top Coat anti-UV finalise le système. Il protège la résine des rayons
              ultraviolets, stabilise la blancheur et empêche le farinage sur vingt ans.
            </p>
          </div>

          {/* 2. Toitures concernées */}
          <div>
            <h3 className="font-satoshi text-2xl lg:text-3xl font-bold text-foreground mb-4">
              Les toitures pour lesquelles CovaSeal 20 a été conçue
            </h3>
            <p className="mb-4">
              CovaSeal 20 est l'étanchéité cool roof adaptée aux situations suivantes :
            </p>
            <ul className="list-disc pl-6 space-y-2 mb-4">
              <li><strong className="text-foreground">Microfissures ou boursouflures localisées</strong> sur l'étanchéité existante</li>
              <li><strong className="text-foreground">Zones d'infiltration ponctuelles</strong> sans défaillance généralisée</li>
              <li><strong className="text-foreground">Étanchéité bitumineuse</strong> vieillissante, posée depuis plus d'un an</li>
              <li><strong className="text-foreground">Membranes EPDM ou PVC</strong> anciennes, de plus de dix ans</li>
              <li><strong className="text-foreground">Toitures plates ou à faible pente</strong> où l'eau a tendance à stagner</li>
            </ul>
            <p>
              Pour une toiture saine qui ne cherche que l'effet cool roof, la{' '}
              <a
                href="/peinture-reflective-covatherm"
                className="text-primary font-semibold hover:underline"
              >
                peinture cool roof pure CovaTherm
              </a>{' '}
              reste plus adaptée. À l'inverse, pour une toiture hors d'âge avec des
              infiltrations massives et des lés décollés, une réfection complète s'impose
              avant toute chose.
            </p>
          </div>

          {/* 3. Budget */}
          <div>
            <h3 className="font-satoshi text-2xl lg:text-3xl font-bold text-foreground mb-4">
              Le budget d'une étanchéité cool roof au mètre carré
            </h3>
            <p className="mb-4">
              Le prix d'une étanchéité cool roof professionnelle posée se situe en
              moyenne entre <strong className="text-foreground">20 et 25 € HT</strong>{' '}
              du mètre carré, tout compris : diagnostic, préparation du support, fourniture
              et pose. Trois facteurs font varier le chiffre final :
            </p>
            <ul className="list-disc pl-6 space-y-2 mb-4">
              <li>La <strong className="text-foreground">surface à traiter</strong>, avec une dégressivité au-delà de 2 000 m²</li>
              <li>L'<strong className="text-foreground">état du support</strong>, un support très dégradé pouvant nécessiter des réparations ponctuelles ou un voile de renfort</li>
              <li>La <strong className="text-foreground">complexité de la toiture</strong> (relevés, évacuations, pénétrations)</li>
            </ul>
            <p className="mb-4">
              Face aux alternatives traditionnelles, le rapport est sans appel :
            </p>
            <ul className="list-disc pl-6 space-y-2 mb-4">
              <li><strong className="text-foreground">Membrane bitumineuse neuve</strong> : 80 à 100 € / m²</li>
              <li><strong className="text-foreground">Remplacement isolation + étanchéité</strong> : environ 150 € / m²</li>
              <li><strong className="text-foreground">CovaSeal 20 (étanchéité cool roof 2-en-1)</strong> : 20 à 25 € / m²</li>
            </ul>
            <p>
              CovaSeal 20 divise le budget de rénovation par{' '}
              <strong className="text-foreground">4 à 7</strong>, avec en prime l'effet
              cool roof et une garantie de vingt ans. Le chantier est par ailleurs
              éligible à la{' '}
              <a
                href="/diagnostic"
                className="text-primary font-semibold hover:underline"
              >
                prime CEE étanchéité toiture
              </a>{' '}
              sous conditions, et vous pouvez{' '}
              <a
                href="/estimation"
                className="text-primary font-semibold hover:underline"
              >
                estimer les économies d'une étanchéité cool roof
              </a>{' '}
              sur votre bâtiment.
            </p>
          </div>

          {/* 4. Déroulé chantier */}
          <div>
            <h3 className="font-satoshi text-2xl lg:text-3xl font-bold text-foreground mb-4">
              Le déroulé d'un chantier Covalba
            </h3>
            <p className="mb-4">
              Un chantier d'étanchéité cool roof se déroule en cinq étapes maîtrisées,
              réalisées par des applicateurs Covalba certifiés.
            </p>
            <ol className="list-decimal pl-6 space-y-3 mb-4">
              <li>
                <strong className="text-foreground">Diagnostic technique.</strong> Un
                technicien évalue l'état du support, mesure l'humidité, localise les
                microfissures et les zones de rétention d'eau, et vérifie la compatibilité
                du matériau. Un support mal diagnostiqué, c'est un revêtement qui cloque
                ou qui ne fait pas l'étanchéité.
              </li>
              <li>
                <strong className="text-foreground">Nettoyage haute pression.</strong> La
                toiture est débarrassée au karcher des mousses, poussières et résidus,
                sans décapage. L'adhérence sur la durée se joue à cette étape.
              </li>
              <li>
                <strong className="text-foreground">Application du Base Coat.</strong> La
                couche d'étanchéité est posée en pulvérisation depuis le sol, à raison de{' '}
                <strong className="text-foreground">2 à 3 kg/m²</strong>. Les machines
                restent au pied du bâtiment, seuls les flexibles montent en toiture.
              </li>
              <li>
                <strong className="text-foreground">Voile de renfort optionnel.</strong>{' '}
                Sur les zones sensibles (pénétrations, relevés, raccords), un voile en
                polyester est noyé dans la résine pour doubler la tenue mécanique.
              </li>
              <li>
                <strong className="text-foreground">Application du Top Coat.</strong> La
                finition anti-UV scelle le système et garantit la réflectivité sur deux
                décennies.
              </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²</strong> est bouclé en{' '}
              <strong className="text-foreground">3 à 5 jours</strong>, sans interruption
              d'activité du bâtiment.
            </p>
          </div>

          {/* 5. Effet protecteur */}
          <div>
            <h3 className="font-satoshi text-2xl lg:text-3xl font-bold text-foreground mb-4">
              L'effet protecteur d'un revêtement réflectif sur l'étanchéité existante
            </h3>
            <p className="mb-4">
              Sur une toiture conventionnelle sombre, la surface peut dépasser{' '}
              <strong className="text-foreground">80°C</strong> en plein été. Cette chaleur
              accélère le vieillissement des membranes par trois mécanismes : absorption
              des rayons ultraviolets, dilatation thermique des matériaux et cycles répétés
              de dilatation-rétraction jour/nuit. Les études scientifiques sur le
              vieillissement des revêtements de toiture confirment que l'ultraviolet
              constitue le facteur principal de dégradation des matériaux non-métalliques,
              avec un processus fortement dépendant de la température : plus les écarts
              thermiques journaliers sont importants, plus la dégradation est rapide
              (Miller, Kriner &amp; Desjarlais, 2002).
            </p>
            <p>
              En abaissant la température de surface de la toiture, l'étanchéité cool roof
              limite drastiquement ces trois facteurs. Des essais terrain réalisés par le
              Lawrence Berkeley National Laboratory sur des bâtiments commerciaux ont
              montré une chute de température de surface de{' '}
              <strong className="text-foreground">79°C à 49°C</strong> après application
              d'un revêtement réflectif (Akbari, Berdahl, Levinson et al., 2005). Moins de
              chaleur absorbée, c'est moins de dilatations, moins de fissures, et une
              durée de vie de l'étanchéité allongée de 8 à 10 ans.
            </p>
          </div>

          {/* 7. Îlots de chaleur */}
          <div>
            <h3 className="font-satoshi text-2xl lg:text-3xl font-bold text-foreground mb-4">
              Un levier concret contre les îlots de chaleur urbains
            </h3>
            <p className="mb-4">
              Au-delà des bénéfices directs pour le bâtiment, l'étanchéité cool roof
              contribue à réduire l'effet d'îlot de chaleur urbain, ce phénomène qui fait
              que les centres-villes sont en moyenne de{' '}
              <strong className="text-foreground">2 à 10°C plus chauds</strong> que les
              zones rurales environnantes. Les toitures et revêtements de sol sombres y
              jouent un rôle majeur en absorbant le rayonnement solaire pour le restituer
              sous forme de chaleur.
            </p>
            <p>
              Les recherches menées sur les stratégies de rafraîchissement urbain
              démontrent qu'une adoption généralisée des toitures réflectives à l'échelle
              d'une ville pourrait contribuer à diminuer la température ambiante urbaine
              et, par conséquent, la demande énergétique liée à la climatisation
              (Santamouris, 2014). Une étude britannique a même évalué qu'à l'échelle
              urbaine, le déploiement des cool roofs pourrait réduire de{' '}
              <strong className="text-foreground">18 %</strong> la mortalité liée aux
              vagues de chaleur. Appliquer CovaSeal 20 sur un bâtiment industriel ou
              tertiaire, c'est contribuer à ce mouvement collectif en plus de gagner en
              confort interne.
            </p>
          </div>

          </>)}

          {/* Sources */}
          <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
            </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}{' '}
                  <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 CovaSealEditorial;
