import type { Metadata } from "next";

import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import StickyMobileCTA from "@/components/StickyMobileCTA";
import SolutionsGrid from "@/components/SolutionsGrid";
import JsonLd from "@/components/seo/JsonLd";
import { buildMetadata, SITE_URL } from "@/lib/seo";
import { breadcrumbJsonLd } from "@/lib/wp/seoToMetadata";

const PAGE_URL = `${SITE_URL}/nos-solutions-cool-roof`;

export const metadata: Metadata = buildMetadata({
  title: "Nos solutions cool roof - Covalba",
  description:
    "Découvrez les solutions cool roof Covalba pour toitures professionnelles : peinture réflective, étanchéité, anticorrosion et laque solaire.",
  canonical: PAGE_URL,
});

export default function Page() {
  return (
    <div className="min-h-screen bg-background">
      <JsonLd
        id="solutions-cool-roof-breadcrumb-jsonld"
        data={breadcrumbJsonLd([
          { name: "Accueil", url: `${SITE_URL}/` },
          { name: "Nos solutions cool roof", url: PAGE_URL },
        ])}
      />
      <Navbar />
      <main>
        <section className="relative overflow-hidden bg-navy pb-16 pt-28 text-white lg:pb-20 lg:pt-36">
          <div className="absolute inset-0 opacity-40">
            <img
              src="/images/qui-sommes-nous/hero-pulverisation.jpg"
              alt=""
              className="h-full w-full object-cover"
              aria-hidden="true"
            />
            <div className="absolute inset-0 bg-gradient-to-r from-navy via-navy/86 to-navy/46" />
          </div>
          <div className="container relative z-10 mx-auto px-4 lg:px-8">
            <p className="mb-5 font-body text-[10px] font-bold uppercase tracking-[0.24em] text-white/58">
              Solutions cool roof
            </p>
            <h1 className="max-w-4xl font-satoshi text-5xl font-black leading-[0.96] tracking-tight md:text-6xl lg:text-7xl">
              Un système adapté à chaque toiture professionnelle.
            </h1>
            <p className="mt-6 max-w-2xl font-body text-lg leading-relaxed text-white/72">
              Covalba fabrique des revêtements réflectifs pour réduire la chaleur, protéger les supports et prolonger la durée de vie des toitures.
            </p>
          </div>
        </section>
        <SolutionsGrid />
      </main>
      <Footer />
      <StickyMobileCTA />
    </div>
  );
}