/**
 * IndustrieMethodES — Spanish variant of the shared industry "method" section.
 *
 * Faithful copy of IndustrieMethod, translated to Castilian Spanish. The ES copy
 * file has no dedicated [method] block, so strings are translated from the FR
 * source and aligned with the product pivot used across the ES site: the coating
 * is applied by the buyer's own trained contractor, supported by Covalba.
 */

import { ClipboardCheck, Brush, SprayCan, CheckCircle2, ShieldCheck, GraduationCap, type LucideIcon } from 'lucide-react';
import ScrollReveal from '@/components/ScrollReveal';

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

const steps: Step[] = [
  {
    num: '01',
    icon: ClipboardCheck,
    title: 'Diagnóstico',
    desc: 'Análisis de su cubierta, del estado del soporte, de las restricciones de acceso y de sus objetivos térmicos.',
  },
  {
    num: '02',
    icon: Brush,
    title: 'Preparación',
    desc: 'Limpieza, balizamiento de la zona y preparación del soporte para garantizar la adherencia del recubrimiento.',
  },
  {
    num: '03',
    icon: SprayCan,
    title: 'Aplicación segura',
    desc: 'Proyección continua de la solución, desde el exterior, con una organización adaptada a la instalación.',
  },
  {
    num: '04',
    icon: CheckCircle2,
    title: 'Control y seguimiento',
    desc: 'Verificación de la calidad de aplicación y acompañamiento a lo largo del tiempo.',
  },
];

const reassurances = [
  {
    icon: ShieldCheck,
    title: 'Maquinaria al pie del edificio',
    desc: 'Solo los flexibles suben a la cubierta. Sin carga, sin vibraciones, sin riesgo de hundimiento.',
  },
  {
    icon: GraduationCap,
    title: 'Aplicado por su propio instalador formado',
    desc: 'Covalba acompaña a su instalador con las especificaciones de aplicación de nuestros sistemas cool roof.',
  },
];

const IndustrieMethodES = () => (
  <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">
              Una intervención simple y segura
            </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' }}
            >
              Nuestro enfoque
              <span className="text-foreground/35"> en 4 etapas.</span>
            </h2>
            <p className="text-foreground/65 text-base lg:text-lg font-body leading-relaxed">
              Todo se realiza desde el exterior del edificio. Usted sigue trabajando con normalidad,
              sin interrumpir la actividad ni alterar sus certificaciones.
            </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">
                        Etapa {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>

      {/* Reassurances — 2 blocks at the bottom */}
      <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 IndustrieMethodES;