"use client";

import type { ReactNode } from 'react';
import { ArrowRight, Layers, Clock, Flag, Wrench } from 'lucide-react';
import ScrollReveal from './ScrollReveal';
import { localizedUri } from '@/config/i18nRoutes';
import { useLocale } from '@/components/blocks/localeContext';
import { MICROCOPY } from '@/components/blocks/microcopy';

export const defaultCards = [
  {
    featured: true,
    icon: Layers,
    title: 'Compatible avec tous les toits',
    text: 'Membrane bitumineuse, bac acier, toiture terrasse... Notre procédé s\'adapte à chaque support sans travaux préparatoires lourds.',
  },
  {
    featured: false,
    icon: Clock,
    title: 'Chantier bouclé en 2 à 5 jours',
    text: 'De la préparation à la réception, on s\'organise pour intervenir vite et libérer votre site rapidement.',
  },
  {
    featured: false,
    icon: Flag,
    title: 'Fabriqué en France',
    text: 'Nos résines sont formulées et produites en France, dans un laboratoire partenaire spécialisé. Traçabilité complète, qualité contrôlée à chaque lot.',
  },
  {
    featured: false,
    icon: Wrench,
    title: 'Nos machines, nos équipes',
    text: 'Matériel propre, applicateurs formés et certifiés. Pas de sous-traitance en cascade à des non-spécialistes.',
  },
];

export type ExpertiseCard = (typeof defaultCards)[number];

interface ExpertiseSectionProps {
  badge?: string;
  titre?: ReactNode;
  intro?: string;
  cards?: ExpertiseCard[];
}

const ExpertiseSection = ({
  badge = 'Notre différence',
  titre,
  intro = 'Des produits formulés en France, des équipes formées par nos soins, une méthode éprouvée sur +500 chantiers.',
  cards = defaultCards,
}: ExpertiseSectionProps = {}) => {
  const locale = useLocale();
  return (
  <section className="py-16 lg:py-32 bg-cream">
    <div className="container mx-auto px-4 lg:px-8">
      <div className="flex flex-col lg:flex-row gap-8 lg:gap-12 items-stretch">

        {/* Left */}
        <div className="lg:w-[38%] flex flex-col justify-between">
          <ScrollReveal>
            <div>
              <p className="text-[10px] uppercase tracking-[0.25em] font-semibold text-primary/50 font-body mb-6">
                {badge}
              </p>
              <h2
                className="font-satoshi text-3xl sm:text-4xl lg:text-[3rem] font-black text-foreground !leading-[1.05] mb-6"
                style={{ letterSpacing: '-0.03em' }}
              >
                {titre ?? (<>Conçu en France.<span className="text-foreground/30"> Posé par nos équipes.</span></>)}
              </h2>
              <p className="text-muted-foreground text-base lg:text-lg leading-relaxed">
                {intro}
              </p>
            </div>
          </ScrollReveal>
          <ScrollReveal>
            <div className="mt-10 lg:mt-0">
              <a
                href={localizedUri(locale, '/diagnostic')}
                className="group inline-flex items-center gap-2 cta-gradient text-white font-semibold pl-6 pr-2 py-2 rounded-full"
              >
                <span className="text-sm">{MICROCOPY[locale].demanderDevis}</span>
                <span className="flex items-center justify-center w-8 h-8 rounded-full bg-white/20 transition-transform duration-500 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>
            </div>
          </ScrollReveal>
        </div>

        {/* Right : 2x2 grid */}
        <div className="lg:w-[62%] grid grid-cols-1 sm:grid-cols-2 gap-4">
          {cards.map((card) => (
            <ScrollReveal key={card.title}>
              <div
                className={`rounded-2xl p-6 lg:p-7 h-full flex flex-col gap-5 ${
                  card.featured
                    ? 'bg-foreground'
                    : 'bg-white border border-foreground/[0.06] shadow-[0_2px_20px_rgba(26,42,58,0.05)]'
                }`}
              >
                <div
                  className={`w-10 h-10 rounded-full flex items-center justify-center ${
                    card.featured ? 'bg-white/10' : 'bg-primary/10'
                  }`}
                >
                  <card.icon
                    className={`w-5 h-5 ${card.featured ? 'text-white' : 'text-primary'}`}
                  />
                </div>
                <div>
                  <h3
                    className={`font-bold text-base mb-2 ${
                      card.featured ? 'text-white' : 'text-foreground'
                    }`}
                  >
                    {card.title}
                  </h3>
                  <p
                    className={`text-sm leading-relaxed ${
                      card.featured ? 'text-white/55' : 'text-muted-foreground'
                    }`}
                  >
                    {card.text}
                  </p>
                </div>
              </div>
            </ScrollReveal>
          ))}
        </div>

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

export default ExpertiseSection;