import { useState } from 'react';
import { ClipboardCheck, CalendarClock, Shield, TrendingDown, Play, ArrowRight } from 'lucide-react';
import { Dialog, DialogContent } from '@/components/ui/dialog';
import ScrollReveal from '../../ScrollReveal';

const steps = [
  {
    num: '01',
    icon: ClipboardCheck,
    title: 'Free quote',
    text: "A technician analyzes your roof and quantifies your savings.",
  },
  {
    num: '02',
    icon: CalendarClock,
    title: 'Tailored planning',
    text: "The project is organized around your constraints. Zero interruption.",
  },
  {
    num: '03',
    icon: Shield,
    title: 'Safe application from the ground',
    text: "The machines stay at the foot of the building. Only hoses run up to the roof. Zero load on your waterproofing, no risk of collapse. Application in 2 to 5 days.",
  },
  {
    num: '04',
    icon: TrendingDown,
    title: 'Immediate savings',
    text: "You notice the difference from the very first summer. Measurement sensors available as an option.",
  },
];

const ProcessSectionEN = () => {
  const [videoOpen, setVideoOpen] = useState(false);

  return (
    <section className="py-16 lg:py-32 bg-white">
      <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 : titre sticky */}
          <div className="lg:w-[40%] lg:sticky lg:top-[120px]">
            <ScrollReveal>
              <p className="text-[10px] uppercase tracking-[0.25em] font-semibold text-primary/50 font-body mb-6">
                The process
              </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' }}
              >
                4 steps. Zero interruption.
                <span className="text-foreground/30"> Zero risk.</span>
              </h2>
              <p className="text-muted-foreground text-base lg:text-lg leading-relaxed mb-8">
                Everything happens from the outside. You keep working as usual, with no impact on your quality certifications or your processes.
              </p>

              {/* Video CTA intégré */}
              <button
                onClick={() => setVideoOpen(true)}
                className="group flex items-center gap-3 text-primary hover:text-primary transition-colors"
              >
                <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
                  <Play className="w-5 h-5" />
                </div>
                <span className="font-semibold text-sm">See a project in 2 minutes</span>
              </button>
            </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 gap-0">
              {steps.map((s, i) => (
                <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 flex-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">
                      <s.icon className="w-4 h-4 lg:w-5 lg:h-5 text-primary" />
                    </div>
                    <div className="pt-1">
                      <span className="text-xs font-bold text-primary/50 uppercase tracking-widest mb-2 block font-body">
                        Step {s.num}
                      </span>
                      <h3 className="text-xl lg:text-2xl text-foreground mb-2">
                        {s.title}
                      </h3>
                      <p className="text-muted-foreground text-sm lg:text-base leading-relaxed max-w-md">
                        {s.text}
                      </p>
                    </div>
                  </div>
                  {i < steps.length - 1 && <div className="ml-5 lg:ml-6 h-px bg-border" />}
                </ScrollReveal>
              ))}
            </div>

            <ScrollReveal>
              <div className="ml-16 lg:ml-20 mt-4">
                <p className="text-muted-foreground/50 text-xs font-medium">
                  Average duration: 3 days · No interruption to operations
                </p>
              </div>
            </ScrollReveal>
          </div>
        </div>

        <ScrollReveal>
          <div className="flex flex-col items-center mt-16 pt-12 border-t border-border">
            <a
              href="/en#estimate"
              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">Request a quote</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>
            <p className="text-xs text-muted-foreground mt-3">We visit your site, assess it, and provide a quote.</p>
          </div>
        </ScrollReveal>
      </div>

      <Dialog open={videoOpen} onOpenChange={setVideoOpen}>
        <DialogContent className="max-w-4xl p-0 bg-black border-none overflow-hidden">
          <div className="aspect-video">
            <iframe
              src="https://www.youtube.com/embed/9HOB5OVH0Ac?autoplay=1"
              className="w-full h-full"
              allow="autoplay; encrypted-media"
              allowFullScreen
              title="Covalba Cool Roof, a project in 2 minutes"
            />
          </div>
        </DialogContent>
      </Dialog>
    </section>
  );
};

export default ProcessSectionEN;