/**
 * Section pédagogique SEO — "La peinture cool roof, en clair."
 * Insérée après la FAQ sur la page CovaTherm pour couvrir la longue traîne :
 * "comment fonctionne peinture cool roof", "prix peinture cool roof au m²",
 * "acrylique vs polyuréthane", "chantier cool roof", "durabilité", "comparatif".
 */

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

const comparisonRows: Array<{
  label: string;
  covatherm: string;
  membrane: string;
  refonte: string;
  highlight?: boolean;
}> = [
  { label: 'Coût au m²',                          covatherm: '20 à 25 €',        membrane: '80 à 100 €',    refonte: '~150 €' },
  { label: 'Durée de chantier',                   covatherm: '3 à 5 jours',      membrane: '2 à 4 semaines', refonte: '3 à 6 semaines' },
  { label: 'Gain thermique intérieur',            covatherm: "Jusqu'à 8-10 °C",  membrane: 'Similaire',     refonte: "Variable selon l'isolation", highlight: true },
  { label: 'Durée de vie',                        covatherm: '8 à 20 ans',       membrane: '15 à 20 ans',   refonte: '20 à 30 ans' },
  { label: "Interruption d'activité",             covatherm: 'Non',              membrane: 'Oui',           refonte: 'Oui' },
  { label: "Effet sur l'étanchéité existante",    covatherm: 'Protégée et prolongée', membrane: 'Remplacée', refonte: 'Remplacée' },
  { label: 'ROI moyen',                           covatherm: '14 mois',          membrane: '3 à 5 ans',     refonte: '8 à 12 ans',     highlight: true },
];

const Bullet = ({ children }: { children: React.ReactNode }) => (
  <li className="pl-5 relative text-foreground/75 leading-relaxed">
    <span className="absolute left-0 top-[0.6em] w-1.5 h-1.5 rounded-full bg-primary/70" />
    {children}
  </li>
);

const H3 = ({ children }: { children: React.ReactNode }) => (
  <h3
    className="font-satoshi text-xl lg:text-2xl font-black text-foreground !leading-[1.15] mb-4"
    style={{ letterSpacing: '-0.02em' }}
  >
    {children}
  </h3>
);

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

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

const CoolRoofGuide = ({ badge = 'Guide', intro, sections }: CoolRoofGuideProps = {}) => (
  <section className="py-16 lg:py-24 bg-white">
    <div className="container mx-auto px-4 lg:px-8 max-w-3xl">
        <div className="mb-10 lg:mb-14">
          <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' }}
          >
            La peinture cool roof,
            <br />
            <span className="text-foreground/45">en clair.</span>
          </h2>
          <p className="text-foreground/75 text-base lg:text-lg font-body leading-relaxed mt-6">
            {intro ? (
              <span className="[&_strong]:text-foreground" dangerouslySetInnerHTML={{ __html: sanitizeWpHtml(intro) }} />
            ) : (<>
            Peinture cool roof, peinture blanche réfléchissante, peinture anti-chaleur : <strong className="text-foreground">trois noms pour la même chose</strong>, un revêtement qui renvoie le rayonnement solaire au lieu de l'absorber. Utilisée depuis <strong className="text-foreground">plus de vingt ans aux États-Unis</strong> et aujourd'hui reconnue en France via la <strong className="text-foreground">prime CEE</strong>, la peinture cool roof s'impose comme l'alternative la plus rentable aux travaux d'isolation lourds. À condition de choisir la bonne technologie et le bon applicateur.
            </>)}
          </p>
        </div>

      <div className="space-y-12 lg:space-y-16 text-[15px] lg:text-base font-body">
        {sections ? (
          sections.map((s, i) => (
            <article key={i}>
              <H3>{s.titre}</H3>
              <div
                className="space-y-4 text-foreground/75 leading-relaxed [&_strong]:text-foreground [&_a]:text-primary [&_a]:font-semibold [&_a:hover]:underline [&_ul]:space-y-2 [&_ul]:list-disc [&_ul]:pl-6 [&_li]:marker:text-primary/70 [&_ol]:space-y-3 [&_ol]:list-decimal [&_ol]:pl-6 [&_table]:w-full [&_table]:text-sm"
                dangerouslySetInnerHTML={{ __html: sanitizeWpHtml(s.contenu) }}
              />
            </article>
          ))
        ) : (<>
        {/* ─── Comment fonctionne ─── */}
          <article>
            <H3>Comment fonctionne une peinture cool roof ?</H3>
            <p className="text-foreground/75 leading-relaxed mb-4">
              Une toiture sombre absorbe jusqu'à <strong>90 % du rayonnement solaire</strong>, puis restitue cette chaleur à l'intérieur du bâtiment. Une peinture cool roof inverse le mécanisme grâce à deux propriétés cumulées.
            </p>
            <ul className="space-y-2 mb-4">
              <Bullet>
                <strong>Réflectance solaire</strong> : capacité du revêtement à renvoyer le rayonnement plutôt que de l'absorber. Une bonne peinture cool roof dépasse <strong>0,85</strong>.
              </Bullet>
              <Bullet>
                <strong>Émissivité thermique</strong> : capacité à dissiper dans l'infrarouge la chaleur accumulée. Les meilleures formulations atteignent <strong>0,90</strong>.
              </Bullet>
            </ul>
            <p className="text-foreground/75 leading-relaxed">
              Le cumul des deux donne le <strong>SRI</strong> (Solar Reflectance Index), indicateur normé ASTM 1980 qui fait référence dans l'industrie. Plus il est élevé, plus la peinture est performante. CovaTherm 20 affiche un SRI de <strong>119 à l'état neuf</strong> et <strong>118 après vieillissement accéléré</strong>, ce qui constitue un record européen.
            </p>
          </article>

        {/* ─── Acrylique vs Polyuréthane ─── */}
          <article>
            <H3>Quelle technologie choisir : acrylique ou polyuréthane ?</H3>
            <p className="text-foreground/75 leading-relaxed mb-4">
              Toutes les peintures cool roof ne se valent pas. La technologie de la résine fait toute la différence sur la durée de vie réelle du revêtement.
            </p>
            <ul className="space-y-3 mb-4">
              <Bullet>
                <strong>Résine acrylique</strong> : 90 % de l'offre du marché. Environ 10 à 12 €/m². Se dégrade vite sous l'effet des UV et du farinage, durée de vie utile <strong>2 à 5 ans</strong>.
              </Bullet>
              <Bullet>
                <strong>Résine polyuréthane</strong> (CovaTherm) : 20 à 25 €/m² à la pose, tient <strong>8 à 10 ans</strong> avec une simple couche d'entretien. Avec Top Coat anti-UV (CovaTherm 20) : <strong>20 ans</strong> sans reprise intermédiaire.
              </Bullet>
            </ul>
            <p className="text-foreground/75 leading-relaxed">
              Sur la durée d'exploitation d'un bâtiment, <strong className="text-foreground">la peinture cool roof la moins chère à l'achat est systématiquement celle qui coûte le plus cher</strong>.
            </p>
          </article>

        {/* ─── Prix ─── */}
          <article>
            <H3>Prix d'une peinture cool roof au m²</H3>
            <p className="text-foreground/75 leading-relaxed mb-4">
              Le prix d'une peinture cool roof professionnelle posée se situe en moyenne entre <strong>10 et 25 € HT</strong> du mètre carré, tout compris : diagnostic, préparation du support, fourniture et pose. L'écart de prix s'explique principalement par la technologie utilisée.
            </p>
            <ul className="space-y-2 mb-4">
              <Bullet><strong>10 à 12 €/m²</strong> : peinture cool roof en résine acrylique, durée de vie 2 à 5 ans.</Bullet>
              <Bullet><strong>20 à 25 €/m²</strong> : peinture cool roof en résine polyuréthane haute performance comme CovaTherm, durée de vie 8 à 20 ans selon la finition.</Bullet>
            </ul>
            <p className="text-foreground/75 leading-relaxed mb-4">
              Trois facteurs supplémentaires font varier le chiffre final : la surface à traiter (dégressivité au-delà de 2 000 m²), l'état du support et la localisation géographique du chantier. Une{' '}
              <a href="/bat-en-112" className="text-primary font-semibold hover:underline">
                prime CEE peinture cool roof
              </a>{' '}
              peut également réduire la facture pour les bâtiments tertiaires.
            </p>
            <p className="text-foreground/75 leading-relaxed">
              Pour comparaison, une membrane d'étanchéité neuve coûte entre <strong>80 et 100 €</strong>/m², et un remplacement complet isolation + étanchéité tourne autour de <strong>150 €</strong>/m². La peinture cool roof divise donc le budget par 3 à 7, avec un <strong>ROI moyen de 14 mois</strong>.{' '}
              <a href="/estimation" className="text-primary font-semibold hover:underline">
                Estimer les économies d'une peinture cool roof
              </a>
              .
            </p>
          </article>

        {/* ─── Chantier ─── */}
          <article>
            <H3>Comment se passe un chantier de peinture cool roof ?</H3>
            <p className="text-foreground/75 leading-relaxed mb-4">
              La performance d'une peinture cool roof <strong className="text-foreground">dépend directement de la qualité de la pose</strong>. Un chantier Covalba se déroule en cinq étapes maîtrisées, réalisées par des applicateurs certifiés.
            </p>
            <ol className="space-y-3 mb-4 list-none counter-reset-[step]">
              {[
                { t: 'Diagnostic technique', d: "Un technicien évalue l'état du support, mesure l'humidité, identifie les zones à réparer et vérifie la compatibilité du matériau. Un support mal diagnostiqué, c'est un revêtement qui cloque." },
                { t: 'Nettoyage haute pression', d: "Débarras des mousses, poussières et résidus au karcher, sans décapage. C'est à cette étape que se joue l'adhérence sur la durée." },
                { t: 'Application du primaire', d: "Une sous-couche d'accroche prépare le support à recevoir le revêtement cool roof." },
                { t: 'Application du base coat', d: 'La couche réfléchissante est posée en deux passes croisées, en pulvérisation depuis le sol. Zéro charge en toiture, zéro vibration, zéro risque pour l\'étanchéité existante.' },
                { t: 'Application du top coat', d: 'Uniquement sur la version longue durée, cette finition anti-UV et anti-encrassement protège la réflectivité sur 20 ans.' },
              ].map((s, i) => (
                <li key={i} className="flex gap-4">
                  <span className="shrink-0 w-7 h-7 rounded-full bg-primary/10 text-primary text-sm font-bold flex items-center justify-center mt-0.5">
                    {i + 1}
                  </span>
                  <div className="flex-1">
                    <p className="font-semibold text-foreground mb-1">{s.t}</p>
                    <p className="text-foreground/75 leading-relaxed">{s.d}</p>
                  </div>
                </li>
              ))}
            </ol>
            <p className="text-foreground/75 leading-relaxed">
              L'application se fait par temps sec, entre 10 et 35 °C. Un chantier type de <strong>1 000 m²</strong> est bouclé en <strong>3 à 5 jours</strong>, sans interruption d'activité du bâtiment. Tous les applicateurs Covalba sont <strong>certifiés EPI</strong> et formés au travail en sécurité en toiture.
            </p>
          </article>

        {/* ─── Durabilité ─── */}
          <article>
            <H3>Durabilité d'une peinture cool roof</H3>
            <p className="text-foreground/75 leading-relaxed mb-4">
              La durabilité d'une peinture cool roof se mesure à trois critères :
            </p>
            <ul className="space-y-2 mb-4">
              <Bullet>Sa résistance aux UV</Bullet>
              <Bullet>Sa tenue face à l'encrassement</Bullet>
              <Bullet>Sa capacité à ne pas fariner</Bullet>
            </ul>
            <p className="text-foreground/75 leading-relaxed mb-4">
              Une peinture classique peut perdre jusqu'à <strong>40 % de sa réflectivité en 5 ans</strong>, ce qui annule une grande partie du bénéfice thermique initial.
            </p>
            <p className="text-foreground/75 leading-relaxed">
              CovaTherm 20, grâce à son Top Coat anti-UV exclusif, maintient un <strong>SRI de 118</strong> après <strong>4 000 heures de vieillissement accéléré</strong> en chambre QUV, soit l'équivalent de 20 ans d'exposition solaire européenne. Le revêtement s'encrasse trois fois moins vite que les solutions standard et ne farine pas. C'est le record européen de durabilité sur ce type de produit.
            </p>
          </article>

        {/* ─── Comparatif ─── */}
          <article>
            <H3>Peinture cool roof ou autres solutions thermiques ?</H3>
            <p className="text-foreground/75 leading-relaxed mb-6">
              Le choix entre peinture cool roof, membrane neuve et rénovation complète dépend du bâtiment, du budget et de l'état actuel de la toiture. Voici les critères qui comptent, et pourquoi la peinture cool roof s'impose comme une{' '}
              <a href="/etancheite-vs-cool-roof" className="text-primary font-semibold hover:underline">
                alternative au remplacement d'étanchéité
              </a>
              .
            </p>

            {/* Desktop table */}
            <div className="hidden md:block overflow-hidden rounded-2xl border border-border">
              <table className="w-full text-sm">
                <thead>
                  <tr className="bg-foreground text-white">
                    <th className="text-left px-4 py-3 font-semibold">Critère</th>
                    <th className="text-left px-4 py-3 font-semibold">Peinture cool roof CovaTherm</th>
                    <th className="text-left px-4 py-3 font-semibold text-white/75">Membrane blanche neuve</th>
                    <th className="text-left px-4 py-3 font-semibold text-white/75">Remplacement iso + étanchéité</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-border">
                  {comparisonRows.map((r, i) => (
                    <tr key={i} className={i % 2 === 0 ? 'bg-muted/40' : 'bg-white'}>
                      <td className="px-4 py-3 font-medium text-foreground/80">{r.label}</td>
                      <td className={`px-4 py-3 ${r.highlight ? 'font-semibold text-primary' : 'text-foreground/80'}`}>
                        {r.covatherm}
                      </td>
                      <td className="px-4 py-3 text-foreground/65">{r.membrane}</td>
                      <td className="px-4 py-3 text-foreground/65">{r.refonte}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            {/* Mobile cards */}
            <div className="md:hidden space-y-4">
              {[
                { name: 'Peinture cool roof CovaTherm', key: 'covatherm' as const, highlight: true },
                { name: 'Membrane blanche neuve',        key: 'membrane' as const,  highlight: false },
                { name: 'Remplacement iso + étanchéité', key: 'refonte' as const,   highlight: false },
              ].map((col, ci) => (
                <div
                  key={ci}
                  className={`rounded-2xl p-5 ${col.highlight ? 'bg-foreground text-white' : 'bg-muted/40 border border-border'}`}
                >
                  <p className={`text-[11px] uppercase tracking-[0.15em] font-bold mb-3 ${col.highlight ? 'text-teal-vivid' : 'text-foreground/55'}`}>
                    {col.name}
                  </p>
                  <dl className="space-y-2 text-sm">
                    {comparisonRows.map((r, i) => (
                      <div key={i} className="flex justify-between gap-4">
                        <dt className={col.highlight ? 'text-white/65' : 'text-foreground/65'}>{r.label}</dt>
                        <dd className={`text-right font-medium ${col.highlight ? 'text-white' : 'text-foreground/85'}`}>{r[col.key]}</dd>
                      </div>
                    ))}
                  </dl>
                </div>
              ))}
            </div>

            <p className="text-foreground/75 leading-relaxed mt-6">
              La peinture cool roof est la solution qui s'amortit le plus rapidement, sans démontage ni interruption d'activité. Elle s'impose comme la référence pour les bâtiments industriels, pharmaceutiques, agroalimentaires, aéronautiques et tertiaires de plus de 10 ans, où la fraîcheur est critique et où une rénovation lourde est difficile à organiser.
            </p>
          </article>
        </>)}
      </div>
    </div>
  </section>
);

export default CoolRoofGuide;