"use client";

import type { ReactNode } from 'react';
import { ArrowRight } from 'lucide-react';
import ScrollReveal from './ScrollReveal';
import sansCoolRoofBlanc from '@/assets/sans-cool-roof-blanc-carrre.webp';
import { useLocale } from '@/components/blocks/localeContext';
import { pickAlt, type AltDict } from '@/components/blocks/altText';

const EXPLAINER_ALT: AltDict = {
  fr: 'Bâtiment industriel avec cool roof Covalba, réflexion solaire',
  en: 'Industrial building with Covalba cool roof, solar reflection',
  es: 'Edificio industrial con cool roof Covalba, reflexión solar',
};

interface CoolRoofExplainerSectionProps {
  titre?: ReactNode;
  paragraphe?: ReactNode;
  imageSrc?: string;
  imageAlt?: string;
  note?: string;
  ctaLabel?: string;
  ctaHref?: string;
}

const CoolRoofExplainerSection = ({
  titre,
  paragraphe,
  imageSrc = sansCoolRoofBlanc.src,
  imageAlt,
  note = 'Avec cool roof : réflexion solaire',
  ctaLabel = 'Demander un devis',
  ctaHref = '/diagnostic',
}: CoolRoofExplainerSectionProps = {}) => {
  const locale = useLocale();
  return (
  <section className="relative z-0 bg-[#F6FAFB] pt-16 lg:pt-40 pb-16 lg:pb-36 overflow-hidden">
    {/* Ambient teal */}
    <div className="absolute top-0 left-0 w-[70%] h-full bg-[radial-gradient(ellipse_80%_60%_at_15%_30%,_rgba(32,150,140,0.10)_0%,_transparent_65%)] pointer-events-none animate-ambient" />
    <div className="absolute bottom-0 right-0 w-[50%] h-[70%] bg-[radial-gradient(ellipse_70%_80%_at_90%_85%,_rgba(32,150,140,0.05)_0%,_transparent_60%)] pointer-events-none animate-ambient-slow" />

    <div className="relative container mx-auto px-4 lg:px-8">

      {/* Image + texte */}
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center mb-16 lg:mb-20">

        {/* Left : illustration (5 cols) */}
        <div className="lg:col-span-5 order-2 lg:order-1">
          <ScrollReveal>
            <div className="relative">
              <div className="absolute -inset-8 rounded-[3rem] bg-[radial-gradient(ellipse_at_50%_50%,_rgba(32,150,140,0.18)_0%,_transparent_65%)] blur-2xl pointer-events-none" />
              <div className="rounded-[2rem] overflow-hidden shadow-[0_30px_80px_-15px_rgba(20,120,110,0.20),_0_10px_30px_-5px_rgba(32,150,140,0.10)] aspect-square">
                <img
                  src={imageSrc}
                  alt={pickAlt(locale, imageAlt, EXPLAINER_ALT)}
                  className="w-full h-full object-contain p-4 rounded-[2rem]"
                  loading="lazy"
                />
              </div>
            </div>
            <p className="text-[11px] text-primary/60 font-body mt-4 text-center tracking-wide uppercase">
              {note}
            </p>
          </ScrollReveal>
        </div>

        {/* Right : texte (7 cols) */}
        <div className="lg:col-span-7 lg:pl-12 order-1 lg:order-2">
          <ScrollReveal>
            <h2
              className="font-satoshi text-3xl sm:text-4xl lg:text-[3rem] font-black text-foreground !leading-[1.05] mb-8"
              style={{ letterSpacing: '-0.03em' }}
            >
              {titre ?? (<>Le cool roof : une réponse concrète<span className="text-foreground/30"> au problème de chaleur.</span></>)}
            </h2>
            <p className="text-foreground/50 text-base font-body leading-relaxed max-w-lg mb-8">
              {paragraphe ?? (<>Notre résine polyuréthane haute performance, fruit de <strong className="text-foreground/80 font-semibold">14 ans de R&D</strong>, réfléchit jusqu'à <strong className="text-foreground/80 font-semibold">85&nbsp;% du rayonnement solaire</strong>. La surface de votre toiture passe de <strong className="text-foreground/80 font-semibold">70°C à 35°C</strong>, sans travaux lourds ni interruption d'activité.</>)}
            </p>
            <a
              href={ctaHref}
              className="group inline-flex items-center gap-2 cta-gradient text-white font-semibold text-sm pl-6 pr-2 py-2 rounded-full active:scale-[0.97]"
            >
              {ctaLabel}
              <span className="flex items-center justify-center w-8 h-8 rounded-full bg-white/20 transition-transform duration-700 ease-[cubic-bezier(0.32,0.72,0,1)] group-hover:translate-x-0.5 group-hover:scale-105">
                <ArrowRight className="w-3.5 h-3.5" />
              </span>
            </a>
          </ScrollReveal>
        </div>

      </div>


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

export default CoolRoofExplainerSection;