import type { ReactNode } from 'react';
import { Euro, Shield, BadgeCheck, type LucideIcon } from 'lucide-react';
import chantierCoolRoof from '@/assets/chantier-cool-roof.jpg';
import ScrollReveal from './ScrollReveal';

export const defaultItems = [
  {
    icon: Euro,
    title: "Éligible primes CEE",
    text: "Dossier monté par Covalba, prime déduite de votre investissement.",
  },
  {
    icon: BadgeCheck,
    title: "Compatible ISO 50001, BREEAM, HQE",
    text: "S'intègre dans vos démarches de certification bâtiment existantes.",
  },
  {
    icon: Shield,
    title: "Garanti 10 ans par contrat",
    text: "Garantie écrite sur la performance réflective et l'adhérence.",
  },
];

interface RSESectionProps {
  badge?: string;
  titre?: ReactNode;
  items?: { icon: LucideIcon; title: string; text: string }[];
  imageSrc?: string;
  imageAlt?: string;
}

const RSESection = ({
  badge = 'Certifications & garanties',
  titre,
  items = defaultItems,
  imageSrc = chantierCoolRoof.src,
  imageAlt = 'Chantier Cool Roof Covalba',
}: RSESectionProps = {}) => (
  <section className="relative z-10 -mt-8 -mb-8 lg:-mt-16 lg:-mb-16 py-10 lg:py-16" style={{ background: 'linear-gradient(to bottom, #F6FAFB 50%, #192A3A 50%)' }}>
    <div className="container mx-auto px-4 lg:px-8">
      <ScrollReveal>
        <div className="flex flex-col lg:flex-row rounded-2xl overflow-hidden shadow-[0_8px_50px_rgba(26,42,58,0.12)] border border-foreground/[0.05] bg-white">

          {/* Photo */}
          <div className="lg:w-[42%] aspect-[4/3] lg:aspect-auto flex-shrink-0 overflow-hidden">
            <img
              src={imageSrc}
              alt={imageAlt}
              className="w-full h-full object-cover"
              loading="lazy"
            />
          </div>

          {/* Texte */}
          <div className="flex flex-col justify-center px-8 py-10 lg:px-12 lg:py-12 lg:w-[58%]">
            <p className="text-[10px] uppercase tracking-[0.25em] font-semibold text-primary/50 font-body mb-5">
              {badge}
            </p>

            <h2
              className="font-satoshi text-3xl lg:text-4xl font-black text-foreground !leading-[1.05] mb-8"
              style={{ letterSpacing: '-0.03em' }}
            >
              {titre ?? (<>Des produits qui répondent à vos<span className="text-foreground/30"> engagements RSE et labels.</span></>)}
            </h2>

            <div className="flex flex-col gap-6">
              {items.map((item) => (
                <div key={item.title} className="flex items-start gap-4">
                  <div className="flex-shrink-0 w-9 h-9 rounded-full bg-primary/10 flex items-center justify-center mt-0.5">
                    <item.icon className="w-4 h-4 text-primary" />
                  </div>
                  <div>
                    <p className="font-semibold text-foreground text-sm mb-1">{item.title}</p>
                    <p className="text-muted-foreground text-sm leading-relaxed">{item.text}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>

        </div>
      </ScrollReveal>
    </div>
  </section>
);

export default RSESection;