"use client";

import type { ReactNode } from 'react';
import { ClipboardCheck, Brush, SprayCan, CheckCircle2, ShieldCheck, GraduationCap, type LucideIcon } from 'lucide-react';
import ScrollReveal from '@/components/ScrollReveal';
import { useLocale } from '@/components/blocks/localeContext';
import { MICROCOPY } from '@/components/blocks/microcopy';

export type IndustrieMethodStep = {
  num: string;
  icon: LucideIcon;
  title: string;
  desc: string;
};

type Step = IndustrieMethodStep;

export const defaultSteps: Step[] = [
  {
    num: '01',
    icon: ClipboardCheck,
    title: 'Diagnostic',
    desc: "Analyse de votre toiture, de l'état du support, des contraintes d'accès et de vos objectifs thermiques.",
  },
  {
    num: '02',
    icon: Brush,
    title: 'Préparation',
    desc: "Nettoyage, sécurisation de la zone et préparation du support pour garantir l'adhérence du revêtement.",
  },
  {
    num: '03',
    icon: SprayCan,
    title: 'Application sécurisée',
    desc: 'Projection de la solution en continu, depuis l\'extérieur, avec une organisation adaptée au site.',
  },
  {
    num: '04',
    icon: CheckCircle2,
    title: 'Contrôle & suivi',
    desc: "Vérification de la qualité d'application et accompagnement dans le temps.",
  },
];

export type IndustrieMethodReassurance = {
  icon: LucideIcon;
  title: string;
  desc: string;
};

export const defaultReassurances: IndustrieMethodReassurance[] = [
  {
    icon: ShieldCheck,
    title: 'Machines au pied du bâtiment',
    desc: 'Seuls les flexibles montent sur le toit. Pas de charge, pas de vibration, pas de risque d\'effondrement.',
  },
  {
    icon: GraduationCap,
    title: 'Applicateurs formés par Covalba',
    desc: 'Une application maîtrisée par des professionnels formés aux systèmes cool roof.',
  },
];

const defaultTitre = (
  <>
    Notre approche
    <span className="text-foreground/35"> en 4 étapes.</span>
  </>
);

type IndustrieMethodProps = {
  badge?: string;
  titre?: ReactNode;
  intro?: string;
  steps?: Step[];
  reassurances?: IndustrieMethodReassurance[];
};

const IndustrieMethod = ({
  badge = 'Une intervention simple et sécurisée',
  titre = defaultTitre,
  intro = "Tout se passe depuis l'extérieur du bâtiment. Vous continuez à travailler normalement, sans interrompre la production ni perturber vos certifications.",
  steps = defaultSteps,
  reassurances = defaultReassurances,
}: IndustrieMethodProps = {}) => {
  const locale = useLocale();
  return (
  <section id="methode" className="relative bg-white py-16 lg:py-32 overflow-hidden">
    <div className="container mx-auto px-4 lg:px-8">
      <div className="flex flex-col lg:flex-row gap-12 lg:gap-20 items-start">
        {/* LEFT — sticky header */}
        <div className="lg:w-[40%] lg:sticky lg:top-[120px]">
          <ScrollReveal>
            <p className="text-[10px] uppercase tracking-[0.25em] font-semibold text-primary/55 font-body mb-5">
              {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}
            </h2>
            <p className="text-foreground/65 text-base lg:text-lg font-body leading-relaxed">
              {intro}
            </p>
          </ScrollReveal>
        </div>

        {/* RIGHT — timeline */}
        <div className="lg:w-[60%] relative">
          <div className="absolute left-5 lg:left-6 top-4 bottom-4 w-px bg-gradient-to-b from-primary/25 via-primary/10 to-transparent" />

          <div className="flex flex-col">
            {steps.map((s, i) => {
              const Icon = s.icon;
              return (
                <ScrollReveal key={s.num}>
                  <div className="relative flex items-start gap-5 lg:gap-7 py-8 lg:py-10 group">
                    <div className="relative z-10 shrink-0 w-10 h-10 lg:w-12 lg:h-12 rounded-full bg-primary/10 border border-primary/20 flex items-center justify-center group-hover:bg-primary/15 transition-colors duration-500">
                      <Icon className="w-4 h-4 lg:w-5 lg:h-5 text-primary" strokeWidth={1.8} />
                    </div>
                    <div className="pt-1">
                      <span className="text-xs font-bold text-primary/55 uppercase tracking-widest mb-2 block font-body">
                        {MICROCOPY[locale].etape} {s.num}
                      </span>
                      <h3
                        className="font-satoshi text-foreground text-xl lg:text-2xl font-bold mb-2"
                        style={{ letterSpacing: '-0.015em' }}
                      >
                        {s.title}
                      </h3>
                      <p className="text-foreground/65 text-sm lg:text-[15px] font-body leading-relaxed max-w-md">
                        {s.desc}
                      </p>
                    </div>
                  </div>
                  {i < steps.length - 1 && <div className="ml-5 lg:ml-6 h-px bg-border" />}
                </ScrollReveal>
              );
            })}
          </div>
        </div>
      </div>

      {/* Réassurances — 2 blocs en bas */}
      <ScrollReveal>
        <div className="mt-16 lg:mt-20 pt-10 lg:pt-12 border-t border-foreground/10">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-5 lg:gap-7">
            {reassurances.map((r, i) => {
              const Icon = r.icon;
              return (
                <div
                  key={i}
                  className="flex items-start gap-5 p-7 lg:p-8 rounded-2xl bg-cream"
                >
                  <div className="shrink-0 w-11 h-11 rounded-xl bg-primary/15 flex items-center justify-center mt-0.5">
                    <Icon className="w-5 h-5 text-primary" strokeWidth={1.8} />
                  </div>
                  <div>
                    <h3
                      className="font-satoshi text-foreground text-base lg:text-lg font-bold mb-1.5"
                      style={{ letterSpacing: '-0.01em' }}
                    >
                      {r.title}
                    </h3>
                    <p className="text-foreground/65 text-sm font-body leading-relaxed">
                      {r.desc}
                    </p>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </ScrollReveal>
    </div>
  </section>
  );
};

export default IndustrieMethod;