import type { ReactNode } from 'react';
import { ArrowRight } from 'lucide-react';
import ScrollReveal from '@/components/ScrollReveal';

export type IndustrieApplication = {
  name: string;
  line: string;
  img: string;
};

type Application = IndustrieApplication;

export const defaultApplications: Application[] = [
  {
    name: 'Usines de production',
    line: 'Maîtriser la chaleur en zone de production',
    img: '/images/secteur-industrie.jpg',
  },
  {
    name: 'Agroalimentaire',
    line: 'Soulager les équipements de froid',
    img: '/images/secteur-distribution.jpg',
  },
  {
    name: 'Pharma & santé',
    // TODO image dédiée pharma/santé
    line: 'Stabilité thermique pour les installations',
    img: '/images/secteur-collectivite.jpg',
  },
  {
    name: 'Aéronautique & défense',
    // TODO image dédiée hangar aéronautique
    line: 'Préserver les environnements techniques',
    img: '/images/secteur-logistique.jpg',
  },
  {
    name: 'Tertiaire industriel',
    line: 'Confort des équipes en été',
    img: '/images/secteur-tertiaire.jpg',
  },
  {
    name: 'Hangars techniques',
    line: "Réduire l'échauffement des grands volumes",
    img: '/images/secteur-logistique.jpg',
  },
];

const defaultTitre = (
  <>
    Une solution pensée
    <br />
    <span className="text-foreground/40">
      pour les bâtiments industriels exposés à la chaleur.
    </span>
  </>
);

type IndustrieApplicationsProps = {
  badge?: string;
  titre?: ReactNode;
  intro?: string;
  applications?: Application[];
  ctaLabel?: string;
};

const IndustrieApplications = ({
  badge = 'Applications industrielles',
  titre = defaultTitre,
  intro = 'Covalba accompagne les sites où la maîtrise thermique est critique pour le confort, la production et la sobriété énergétique.',
  applications = defaultApplications,
  ctaLabel = 'Voir les réalisations',
}: IndustrieApplicationsProps = {}) => (
  <section className="relative bg-cream py-28 lg:py-40 overflow-hidden">
    <div className="container mx-auto px-4 lg:px-8">
      {/* Header — centered */}
      <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-primary/55" aria-hidden="true" />
            <span className="text-primary text-[11px] font-bold font-body uppercase tracking-[0.22em]">
              {badge}
            </span>
            <span className="h-px w-8 bg-primary/55" aria-hidden="true" />
          </div>

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

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

      {/* Grid of 6 sector cards (SectorsGrid pattern from the homepage) */}
      <ScrollReveal stagger>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 lg:gap-6">
          {applications.map((a) => (
            <a
              key={a.name}
              href="#preuves"
              className="
                group relative aspect-[3/4] rounded-2xl overflow-hidden
                shadow-[0_4px_24px_-8px_hsl(var(--navy)/0.15)]
                hover:shadow-[0_20px_60px_-15px_hsl(var(--navy)/0.35)]
                transition-shadow duration-500
              "
            >
              {/* Background image */}
              <img
                src={a.img}
                alt={a.name}
                className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-110"
                loading="lazy"
              />

              {/* Navy gradient for legibility */}
              <div className="absolute inset-0 bg-gradient-to-t from-navy/90 via-navy/30 to-transparent" />

              {/* Arrow top-right */}
              <div className="absolute top-4 right-4 w-10 h-10 rounded-full bg-white/15 backdrop-blur-sm flex items-center justify-center transition-all duration-300 group-hover:bg-white group-hover:scale-110">
                <ArrowRight
                  className="w-4 h-4 text-white transition-colors duration-300 group-hover:text-navy"
                  strokeWidth={2.2}
                />
              </div>

              {/* Bottom-left text */}
              <div className="absolute bottom-0 left-0 right-0 p-6 lg:p-7">
                <h3
                  className="font-satoshi font-black text-white text-2xl lg:text-[1.7rem] !leading-[1.05] mb-2"
                  style={{ letterSpacing: '-0.02em' }}
                >
                  {a.name}
                </h3>
                <p className="text-white/80 text-sm font-body leading-snug">
                  {a.line}
                </p>
              </div>
            </a>
          ))}
        </div>
      </ScrollReveal>

      {/* CTA */}
      <ScrollReveal>
        <div className="mt-14 lg:mt-16 flex justify-center">
          <a
            href="#preuves"
            className="group inline-flex items-center gap-2 text-primary font-semibold text-sm hover:gap-2.5 transition-all"
          >
            {ctaLabel} <ArrowRight className="w-4 h-4" />
          </a>
        </div>
      </ScrollReveal>
    </div>
  </section>
);

export default IndustrieApplications;