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

const steps = [
  {
    num: '01',
    icon: ClipboardCheck,
    title: 'Presupuesto gratuito',
    text: 'Un técnico analiza su cubierta y calcula su ahorro.',
  },
  {
    num: '02',
    icon: CalendarClock,
    title: 'Planificación a medida',
    text: 'La obra se organiza en torno a sus necesidades. Cero interrupciones.',
  },
  {
    num: '03',
    icon: Shield,
    title: 'Aplicación segura desde el suelo',
    text: 'Las máquinas permanecen junto al edificio. Solo suben mangueras a la cubierta. Cero carga sobre su cubierta, cero riesgo de hundimiento. Aplicación en 2 a 5 días.',
  },
  {
    num: '04',
    icon: TrendingDown,
    title: 'Ahorro inmediato',
    text: 'Notará la diferencia desde el primer verano. Sensores de medición opcionales.',
  },
];

const ProcessSectionES = () => {
  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">
                El proceso
              </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 etapas. Cero interrupciones.
                <span className="text-foreground/30"> Cero riesgo.</span>
              </h2>
              <p className="text-muted-foreground text-base lg:text-lg leading-relaxed mb-8">
                Todo se realiza desde el exterior. Usted sigue trabajando con normalidad. Sin impacto en sus certificaciones.
              </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">Ver una obra en 2 minutos</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">
                        Etapa {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">
                  Duración media: 3 días · Sin parada de la actividad
                </p>
              </div>
            </ScrollReveal>
          </div>
        </div>

        <ScrollReveal>
          <div className="flex flex-col items-center mt-16 pt-12 border-t border-border">
            <a
              href="/es#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">Solicitar presupuesto</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">Nos desplazamos, analizamos y calculamos</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, una aplicación en 2 minutos"
            />
          </div>
        </DialogContent>
      </Dialog>
    </section>
  );
};

export default ProcessSectionES;