/**
 * IndustrieMethodEN — English variant of the shared industry "method" section.
 *
 * Faithful copy with EN strings from the [method] copy block. The product pivot
 * is respected: the coating is applied by the buyer's own trained contractor,
 * supported by Covalba (never a recruit).
 */

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: 'Assessment',
    desc: 'Analysis of the roof, the condition of the substrate, access constraints and your thermal objectives.',
  },
  {
    num: '02',
    icon: Brush,
    title: 'Preparation',
    desc: 'Cleaning, securing the area and preparing the substrate so the coating adheres properly.',
  },
  {
    num: '03',
    icon: SprayCan,
    title: 'Application',
    desc: 'Continuous spray application of the coating, from the outside, with a setup tailored to the site.',
  },
  {
    num: '04',
    icon: CheckCircle2,
    title: 'Inspection & follow-up',
    desc: 'Verification of application quality and long-term performance.',
  },
];

const reassurances = [
  {
    icon: ShieldCheck,
    title: 'Equipment stays at ground level',
    desc: 'Only the hoses go up onto the roof. No load, no vibration, no risk to the structure.',
  },
  {
    icon: GraduationCap,
    title: 'Applied by your own trained contractor',
    desc: 'Covalba supports your contractor with application specs and guidance for our cool roof systems.',
  },
];

const IndustrieMethodEN = () => (
  <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">
              A simple, low-risk application method
            </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' }}
            >
              How the coating
              <span className="text-foreground/35"> is applied, in 4 steps.</span>
            </h2>
            <p className="text-foreground/65 text-base lg:text-lg font-body leading-relaxed">
              Everything happens from the outside of the building. Your operations keep running
              normally throughout application, without interrupting production or affecting your
              certifications. Here is the recommended method to share with your contractor.
            </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">
                        Step {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 IndustrieMethodEN;