import { ArrowRight, Leaf, SprayCan, Layers, type LucideIcon } from 'lucide-react';
import ScrollReveal from '@/components/ScrollReveal';
import classicRoof from '@/assets/industrie/principe-classique.webp';
import coolRoof from '@/assets/industrie/principe-cool-roof.webp';

export type IndustriePrincipleBenefit = { icon: LucideIcon; label: string };

export const defaultBenefits: IndustriePrincipleBenefit[] = [
  { icon: Leaf, label: 'Solution passive' },
  { icon: SprayCan, label: "Posée depuis l'extérieur" },
  { icon: Layers, label: 'Compatible avec de nombreux supports' },
];

type IndustriePrincipleProps = {
  badge?: string;
  titre?: string;
  intro?: string;
  classicTitle?: string;
  classicPoint?: string;
  classicImageSrc?: string;
  classicImageAlt?: string;
  coolTitle?: string;
  coolPoint?: string;
  coolImageSrc?: string;
  coolImageAlt?: string;
  benefits?: IndustriePrincipleBenefit[];
  ctaLabel?: string;
  ctaHref?: string;
};

const IndustriePrinciple = ({
  badge = 'La solution Covalba',
  titre = 'Le cool roof agit à la source.',
  intro = "Une toiture sombre absorbe la chaleur. Une toiture réfléchissante limite l'échauffement de la surface et réduit la chaleur transmise dans le bâtiment.",
  classicTitle = 'Toiture classique',
  classicPoint = 'Absorbe la chaleur',
  classicImageSrc = classicRoof.src,
  classicImageAlt = 'Toiture industrielle classique, surface sombre absorbant le rayonnement solaire',
  coolTitle = 'Toiture cool roof',
  coolPoint = 'Réfléchit la chaleur',
  coolImageSrc = coolRoof.src,
  coolImageAlt = 'Toiture industrielle traitée cool roof, surface claire réfléchissant le rayonnement',
  benefits = defaultBenefits,
  ctaLabel = 'Découvrir la méthode',
  ctaHref = '#methode',
}: IndustriePrincipleProps = {}) => (
  <section className="relative bg-[#192A3A] py-28 lg:py-40 overflow-hidden">
    {/* Diagonal line pattern — subtle, angled */}
    <div
      className="absolute inset-0 pointer-events-none opacity-[0.6]"
      style={{
        backgroundImage:
          'repeating-linear-gradient(135deg, transparent 0, transparent 88px, rgba(255,255,255,0.04) 88px, rgba(255,255,255,0.04) 89px)',
      }}
      aria-hidden="true"
    />
    {/* Second pattern at opposite angle, even more subtle, for depth */}
    <div
      className="absolute inset-0 pointer-events-none opacity-[0.5]"
      style={{
        backgroundImage:
          'repeating-linear-gradient(45deg, transparent 0, transparent 140px, rgba(58,173,173,0.05) 140px, rgba(58,173,173,0.05) 141px)',
      }}
      aria-hidden="true"
    />
    {/* Soft radial glow */}
    <div
      className="absolute inset-0 pointer-events-none"
      style={{
        background:
          'radial-gradient(ellipse 60% 50% at 50% 0%, rgba(58,173,173,0.10) 0%, transparent 70%)',
      }}
      aria-hidden="true"
    />

    <div className="relative container mx-auto px-4 lg:px-8">
      {/* Centered header */}
      <ScrollReveal>
        <div className="text-center max-w-3xl mx-auto mb-14 lg:mb-20">
          <div className="inline-flex items-center gap-3 mb-6 lg:mb-8">
            <span className="h-px w-8 bg-teal-vivid/60" aria-hidden="true" />
            <span className="text-teal-vivid text-[11px] uppercase tracking-[0.22em] font-bold font-body">
              {badge}
            </span>
            <span className="h-px w-8 bg-teal-vivid/60" aria-hidden="true" />
          </div>

          <h2
            className="font-satoshi font-black text-white !leading-[1.05] mb-7 lg:mb-8"
            style={{ fontSize: 'clamp(2rem, 4.2vw, 3.5rem)', letterSpacing: '-0.03em' }}
          >
            {titre}
          </h2>

          <p className="text-white/65 text-base lg:text-[17px] font-body leading-relaxed max-w-[640px] mx-auto">
            {intro}
          </p>
        </div>
      </ScrollReveal>

      {/* 2 comparative cards */}
      <ScrollReveal>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-5 lg:gap-7 mb-14 lg:mb-20">
          {/* Classique */}
          <article
            className="
              relative group bg-cream rounded-2xl overflow-hidden
              aspect-[3/2]
              ring-1 ring-white/10
              shadow-[0_30px_70px_-25px_rgba(0,0,0,0.4)]
              transition-shadow duration-500 hover:shadow-[0_36px_80px_-25px_rgba(0,0,0,0.5)]
            "
          >
            <img
              src={classicImageSrc}
              alt={classicImageAlt}
              className="absolute inset-0 w-full h-full object-cover"
              loading="lazy"
            />
            <div className="relative z-10 p-7 lg:p-9">
              <h3
                className="font-satoshi font-bold text-foreground text-lg lg:text-xl mb-3"
                style={{ letterSpacing: '-0.02em' }}
              >
                {classicTitle}
              </h3>
              <div className="flex items-center gap-2.5">
                <span className="w-2 h-2 rounded-full bg-terracotta shrink-0" aria-hidden="true" />
                <span className="text-foreground/70 text-sm font-body">{classicPoint}</span>
              </div>
            </div>
          </article>

          {/* Cool roof */}
          <article
            className="
              relative group bg-cream rounded-2xl overflow-hidden
              aspect-[3/2]
              ring-1 ring-white/10
              shadow-[0_30px_70px_-25px_rgba(0,0,0,0.4)]
              transition-shadow duration-500 hover:shadow-[0_36px_80px_-25px_rgba(0,0,0,0.5)]
            "
          >
            <img
              src={coolImageSrc}
              alt={coolImageAlt}
              className="absolute inset-0 w-full h-full object-cover"
              loading="lazy"
            />
            <div className="relative z-10 p-7 lg:p-9">
              <h3
                className="font-satoshi font-bold text-foreground text-lg lg:text-xl mb-3"
                style={{ letterSpacing: '-0.02em' }}
              >
                {coolTitle}
              </h3>
              <div className="flex items-center gap-2.5">
                <span className="w-2 h-2 rounded-full bg-primary shrink-0" aria-hidden="true" />
                <span className="text-foreground/70 text-sm font-body">{coolPoint}</span>
              </div>
            </div>
          </article>
        </div>
      </ScrollReveal>

      {/* 3 benefits + CTA */}
      <ScrollReveal>
        <div className="flex flex-col items-center">
          <ul className="flex flex-col sm:flex-row flex-wrap items-center justify-center gap-y-5 gap-x-10 lg:gap-x-16 mb-10 lg:mb-12">
            {benefits.map((b, i) => {
              const Icon = b.icon;
              return (
                <li key={i} className="flex items-center gap-3">
                  <span className="shrink-0 w-10 h-10 rounded-full bg-white/[0.05] flex items-center justify-center">
                    <Icon className="w-4 h-4 text-teal-vivid" strokeWidth={1.75} />
                  </span>
                  <span className="text-white/75 text-sm lg:text-[15px] font-body">
                    {b.label}
                  </span>
                </li>
              );
            })}
          </ul>

          <a
            href={ctaHref}
            className="group inline-flex items-center gap-2 text-white/65 hover:text-white transition-colors text-sm font-body font-semibold"
          >
            {ctaLabel}
            <ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5" />
          </a>
        </div>
      </ScrollReveal>
    </div>
  </section>
);

export default IndustriePrinciple;