import { Badge } from '@/components/ui/badge';
import { CheckCircle, ArrowRight } from 'lucide-react';

const defaultBenefits = [
  "Formation à l'application de nos produits cool roof certifiés",
  'Accompagnement technique et commercial dédié',
  'Produits en direct fabricant aux meilleures conditions',
];

interface ApplicatorsSectionProps {
  title?: string;
  badge?: string;
  description?: string;
  benefits?: string[];
  imageSrc?: string;
  imageAlt?: string;
  ctaLabel?: string;
  ctaHref?: string;
}

const ApplicatorsSection = ({
  title = 'Devenez applicateur cool roof certifié',
  badge = "Réseau d'applicateurs",
  description = "Vous êtes pro de la toiture ou de l'étanchéité ? Rejoignez le réseau : formation, accompagnement, produits en direct fabricant.",
  benefits = defaultBenefits,
  imageSrc = 'https://covalba-admin.paf-studio.dev/wp-content/uploads/2026/06/devenir-applicateur-2x-1.jpg',
  imageAlt = 'Devenir applicateur Cool Roof Covalba',
  ctaLabel = 'En savoir plus',
  ctaHref = '/devenir-applicateur',
}: ApplicatorsSectionProps) => (
  <section className="py-20 lg:py-28 bg-teal-light">
    <div className="container mx-auto px-4 lg:px-8">
      <div className="grid lg:grid-cols-2 gap-12 items-center">
        <div>
          <Badge className="mb-4 bg-primary/10 text-primary border-primary/20">{badge}</Badge>
          <h2 className="text-3xl lg:text-4xl font-bold text-foreground mb-4">
            {title}
          </h2>
          <p className="text-muted-foreground text-lg mb-8">
            {description}
          </p>
          <ul className="space-y-4 mb-8">
            {benefits.map((b) => (
              <li key={b} className="flex items-start gap-3">
                <CheckCircle className="w-5 h-5 text-primary flex-shrink-0 mt-0.5" />
                <span className="text-muted-foreground">{b}</span>
              </li>
            ))}
          </ul>
          <a
            href={ctaHref}
            className="group inline-flex items-center gap-3 border border-primary/30 text-primary font-semibold pl-7 pr-2 py-2 rounded-full transition-all duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] hover:bg-primary hover:text-white hover:border-primary"
          >
            <span className="text-[15px]">{ctaLabel}</span>
            <span className="flex items-center justify-center w-9 h-9 rounded-full bg-primary/10 group-hover:bg-white/20 transition-all duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] group-hover:translate-x-0.5 group-hover:scale-105">
              <ArrowRight className="w-4 h-4" />
            </span>
          </a>
        </div>
        <div className="rounded-xl overflow-hidden shadow-xl">
          <img
            src={imageSrc}
            alt={imageAlt}
            className="w-full h-full object-cover"
            loading="lazy"
          />
        </div>
      </div>
    </div>
  </section>
);

export default ApplicatorsSection;