
/**
 * SEO educational section — "Cool roof coating, explained."
 * Placed after the FAQ on the CovaTherm page to cover the long tail:
 * "how does a cool roof coating work", "cool roof coating price per m²",
 * "acrylic vs polyurethane", "cool roof project", "durability", "comparison".
 */

const comparisonRows: Array<{
  label: string;
  covatherm: string;
  membrane: string;
  refonte: string;
  highlight?: boolean;
}> = [
  { label: 'Cost per m²',                       covatherm: '€20 to 25',        membrane: '€80 to 100',     refonte: '~€150' },
  { label: 'Project duration',                  covatherm: '3 to 5 days',      membrane: '2 to 4 weeks',   refonte: '3 to 6 weeks' },
  { label: 'Indoor thermal gain',               covatherm: 'Up to 8-10 °C',    membrane: 'Similar',        refonte: 'Varies with insulation', highlight: true },
  { label: 'Service life',                      covatherm: '8 to 20 years',    membrane: '15 to 20 years', refonte: '20 to 30 years' },
  { label: 'Operational downtime',              covatherm: 'No',               membrane: 'Yes',            refonte: 'Yes' },
  { label: 'Effect on existing waterproofing',  covatherm: 'Protected and extended', membrane: 'Replaced', refonte: 'Replaced' },
  { label: 'Average ROI',                       covatherm: '14 months',        membrane: '3 to 5 years',   refonte: '8 to 12 years',  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>
);

const CoolRoofGuideEN = () => (
  <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">
            Guide
          </p>
          <h2
            className="font-satoshi text-3xl sm:text-4xl lg:text-5xl font-black text-foreground !leading-[1.05]"
            style={{ letterSpacing: '-0.03em' }}
          >
            Cool roof coating,
            <br />
            <span className="text-foreground/45">explained.</span>
          </h2>
          <p className="text-foreground/75 text-base lg:text-lg font-body leading-relaxed mt-6">
            Cool roof coating, reflective white coating, anti-heat coating: <strong className="text-foreground">three names for the same thing</strong>, a coating that reflects solar radiation instead of absorbing it. Used for <strong className="text-foreground">more than twenty years in the United States</strong>, the cool roof coating stands out as the most cost-effective alternative to heavy insulation work — provided you choose the right technology and the right applicator.
          </p>
        </div>

      <div className="space-y-12 lg:space-y-16 text-[15px] lg:text-base font-body">
        {/* ─── How it works ─── */}
          <article>
            <H3>How does a cool roof coating work?</H3>
            <p className="text-foreground/75 leading-relaxed mb-4">
              A dark roof absorbs up to <strong>90% of solar radiation</strong>, then releases that heat into the building. A cool roof coating reverses the mechanism through two combined properties.
            </p>
            <ul className="space-y-2 mb-4">
              <Bullet>
                <strong>Solar reflectance</strong>: the coating's ability to reflect radiation rather than absorb it. A good cool roof coating exceeds <strong>0.85</strong>.
              </Bullet>
              <Bullet>
                <strong>Thermal emissivity</strong>: the ability to release accumulated heat in the infrared range. The best formulations reach <strong>0.90</strong>.
              </Bullet>
            </ul>
            <p className="text-foreground/75 leading-relaxed">
              Combining the two gives the <strong>SRI</strong> (Solar Reflectance Index), the ASTM 1980 standard indicator used as the industry reference. The higher it is, the better the coating performs. CovaTherm 20 reaches an SRI of <strong>119 when new</strong> and <strong>118 after accelerated aging</strong>, among the best-performing on the market.
            </p>
          </article>

        {/* ─── Acrylic vs Polyurethane ─── */}
          <article>
            <H3>Which technology to choose: acrylic or polyurethane?</H3>
            <p className="text-foreground/75 leading-relaxed mb-4">
              Not all cool roof coatings are equal. The resin technology makes all the difference to the coating's real service life.
            </p>
            <ul className="space-y-3 mb-4">
              <Bullet>
                <strong>Acrylic resin</strong>: 90% of the market. Around €10 to 12/m². Degrades quickly under UV and chalking, with a useful life of <strong>2 to 5 years</strong>.
              </Bullet>
              <Bullet>
                <strong>Polyurethane resin</strong> (CovaTherm): €20 to 25/m² installed, lasts <strong>8 to 10 years</strong> with a simple maintenance coat. With anti-UV Top Coat (CovaTherm 20): <strong>20 years</strong> with no intermediate touch-up.
              </Bullet>
            </ul>
            <p className="text-foreground/75 leading-relaxed">
              Over a building's operating life, <strong className="text-foreground">the cheapest cool roof coating to buy is always the one that costs the most</strong>.
            </p>
          </article>

        {/* ─── Price ─── */}
          <article>
            <H3>Cool roof coating price per m²</H3>
            <p className="text-foreground/75 leading-relaxed mb-4">
              The price of a professional cool roof coating, installed, averages between <strong>€10 and €25</strong> per square meter, all-inclusive: assessment, surface preparation, material, and application. The price gap comes mainly from the technology used.
            </p>
            <ul className="space-y-2 mb-4">
              <Bullet><strong>€10 to 12/m²</strong>: acrylic resin cool roof coating, service life 2 to 5 years.</Bullet>
              <Bullet><strong>€20 to 25/m²</strong>: high-performance polyurethane resin cool roof coating like CovaTherm, service life 8 to 20 years depending on the finish.</Bullet>
            </ul>
            <p className="text-foreground/75 leading-relaxed mb-4">
              Three additional factors move the final figure: the area to be treated (price tapers off above 2,000 m²), the condition of the substrate, and the geographic location of the project.
            </p>
            <p className="text-foreground/75 leading-relaxed">
              For comparison, a new waterproofing membrane costs between <strong>€80 and €100</strong>/m², and a full insulation + waterproofing replacement runs around <strong>€150</strong>/m². A cool roof coating therefore divides the budget by 3 to 7, with an <strong>average ROI of 14 months</strong>.{' '}
              <a href="/en" className="text-primary font-semibold hover:underline">
                Estimate the savings of a cool roof coating
              </a>
              .
            </p>
          </article>

        {/* ─── Project ─── */}
          <article>
            <H3>How does a cool roof coating project unfold?</H3>
            <p className="text-foreground/75 leading-relaxed mb-4">
              The performance of a cool roof coating <strong className="text-foreground">depends directly on the quality of the application</strong>. A Covalba project unfolds in five controlled steps, carried out by certified applicators.
            </p>
            <ol className="space-y-3 mb-4 list-none counter-reset-[step]">
              {[
                { t: 'Technical assessment', d: "A technician evaluates the condition of the substrate, measures moisture, identifies areas to repair, and checks material compatibility. A poorly assessed substrate means a coating that blisters." },
                { t: 'High-pressure cleaning', d: "Removal of moss, dust, and residue with a pressure washer, without stripping. This step determines long-term adhesion." },
                { t: 'Primer application', d: "A bonding undercoat prepares the substrate to receive the cool roof coating." },
                { t: 'Base coat application', d: 'The reflective coat is applied in two crossed passes, sprayed from the ground. Zero load on the roof, zero vibration, zero risk to the existing waterproofing.' },
                { t: 'Top coat application', d: 'On the long-life version only, this anti-UV and anti-soiling finish protects reflectivity for 20 years.' },
              ].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">
              Application is done in dry weather, between 10 and 35 °C. A typical <strong>1,000 m²</strong> project is completed in <strong>3 to 5 days</strong>, with no interruption to building operations. All applicators are <strong>PPE-certified</strong> and trained in safe roof work.
            </p>
          </article>

        {/* ─── Durability ─── */}
          <article>
            <H3>Durability of a cool roof coating</H3>
            <p className="text-foreground/75 leading-relaxed mb-4">
              The durability of a cool roof coating is measured against three criteria:
            </p>
            <ul className="space-y-2 mb-4">
              <Bullet>Its resistance to UV</Bullet>
              <Bullet>Its resistance to soiling</Bullet>
              <Bullet>Its ability not to chalk</Bullet>
            </ul>
            <p className="text-foreground/75 leading-relaxed mb-4">
              A standard coating can lose up to <strong>40% of its reflectivity in 5 years</strong>, which cancels out much of the initial thermal benefit.
            </p>
            <p className="text-foreground/75 leading-relaxed">
              CovaTherm 20, thanks to its exclusive anti-UV Top Coat, maintains an <strong>SRI of 118</strong> after <strong>4,000 hours of accelerated aging</strong> in a QUV chamber, equivalent to 20 years of solar exposure. The coating soils three times slower than standard solutions and does not chalk. It is among the best-performing for durability on this type of product.
            </p>
          </article>

        {/* ─── Comparison ─── */}
          <article>
            <H3>Cool roof coating or other thermal solutions?</H3>
            <p className="text-foreground/75 leading-relaxed mb-6">
              The choice between a cool roof coating, a new membrane, and a full renovation depends on the building, the budget, and the current condition of the roof. Here are the criteria that matter, and why a cool roof coating stands out as an{' '}
              <a href="/en" className="text-primary font-semibold hover:underline">
                alternative to waterproofing replacement
              </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">Criterion</th>
                    <th className="text-left px-4 py-3 font-semibold">CovaTherm cool roof coating</th>
                    <th className="text-left px-4 py-3 font-semibold text-white/75">New white membrane</th>
                    <th className="text-left px-4 py-3 font-semibold text-white/75">Insulation + waterproofing replacement</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: 'CovaTherm cool roof coating', key: 'covatherm' as const, highlight: true },
                { name: 'New white membrane',          key: 'membrane' as const,  highlight: false },
                { name: 'Insulation + waterproofing replacement', 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">
              A cool roof coating is the solution that pays back the fastest, with no dismantling and no interruption to operations. It stands out as the reference for industrial, pharmaceutical, food-processing, aeronautical, and commercial buildings more than 10 years old, where keeping cool is critical and a heavy renovation is hard to organize.
            </p>
          </article>
      </div>
    </div>
  </section>
);

export default CoolRoofGuideEN;
