import React, { useState, useEffect, useRef } from "react";

// Soluciones que iluminan — Storytelling visual (sin palabras)
// Componente React de página única que presenta una historia solo con imágenes.
// Instrucciones:
// 1) Reemplaza las URLs en la constante `IMAGES` por tus imágenes (pueden ser rutas locales o URLs).
// 2) Cada imagen representa una 'pantalla' de la historia. No hay texto visible.
// 3) Para accesibilidad, cada imagen tiene alt="" por defecto (sin texto visible). Si quieres mejorar accesibilidad,
//    coloca descripciones en los atributos alt (no se mostrarán visualmente).
// 4) Usa Tailwind CSS en tu proyecto o adapta las clases por tu propio CSS.

const IMAGES = [
  // sustituye estas URLs por tus imágenes reales
  "/images/hero-1.jpg",
  "/images/hero-2.jpg",
  "/images/hero-3.jpg",
  "/images/hero-4.jpg",
  "/images/hero-5.jpg",
];

export default function SolucionesQueIluminanStory() {
  const [index, setIndex] = useState(0);
  const timeoutRef = useRef(null);

  // auto-advance every 6s (configurable)
  useEffect(() => {
    resetTimeout();
    timeoutRef.current = setTimeout(() => {
      setIndex((prev) => (prev + 1) % IMAGES.length);
    }, 6000);
    return () => {
      resetTimeout();
    };
  }, [index]);

  function resetTimeout() {
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }
  }

  // swipe handlers for touch devices
  const touchStartX = useRef(null);
  const touchEndX = useRef(null);

  function handleTouchStart(e) {
    touchStartX.current = e.touches[0].clientX;
  }
  function handleTouchMove(e) {
    touchEndX.current = e.touches[0].clientX;
  }
  function handleTouchEnd() {
    if (touchStartX.current == null || touchEndX.current == null) return;
    const diff = touchStartX.current - touchEndX.current;
    const threshold = 50; // swipe threshold in px
    if (diff > threshold) {
      // swipe left -> next
      setIndex((i) => (i + 1) % IMAGES.length);
    } else if (diff < -threshold) {
      // swipe right -> prev
      setIndex((i) => (i - 1 + IMAGES.length) % IMAGES.length);
    }
    touchStartX.current = null;
    touchEndX.current = null;
  }

  // keyboard navigation
  useEffect(() => {
    function onKey(e) {
      if (e.key === "ArrowRight") setIndex((i) => (i + 1) % IMAGES.length);
      if (e.key === "ArrowLeft") setIndex((i) => (i - 1 + IMAGES.length) % IMAGES.length);
    }
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  return (
    <div className="min-h-screen w-screen bg-black text-white overflow-hidden">
      {/* Fullscreen container */}
      <div
        className="relative h-screen w-full touch-none select-none"
        onTouchStart={handleTouchStart}
        onTouchMove={handleTouchMove}
        onTouchEnd={handleTouchEnd}
      >
        {/* Image slides (absolute stacked) */}
        {IMAGES.map((src, i) => (
          <figure
            key={i}
            className={`absolute inset-0 transition-opacity duration-900 ease-in-out transform-gpu
              ${i === index ? "opacity-100 z-10" : "opacity-0 z-0 scale-105"}`}
            aria-hidden={i === index ? "false" : "true"}
          >
            <img
              src={src}
              alt=""
              className="object-cover w-full h-full block"
              draggable={false}
              onDragStart={(e) => e.preventDefault()}
            />
            {/* Decorative gradient to make transitions feel cinematic - no text */}
            <div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent via-black/10 to-black/30" />
          </figure>
        ))}

        {/* Small visual pager: dots only (no text) */}
        <nav className="absolute bottom-8 left-1/2 -translate-x-1/2 z-20 flex gap-3">
          {IMAGES.map((_, i) => (
            <button
              key={i}
              aria-label={`slide ${i + 1}`}
              onClick={() => setIndex(i)}
              className={`w-3 h-3 rounded-full transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-white/40
                ${i === index ? "scale-125 opacity-100" : "opacity-50"}`}
            />
          ))}
        </nav>

        {/* Invisible left/right click areas for desktop navigation */}
        <button
          onClick={() => setIndex((i) => (i - 1 + IMAGES.length) % IMAGES.length)}
          aria-hidden="true"
          className="hidden md:block absolute left-0 top-0 h-full w-1/4 z-30"
        />
        <button
          onClick={() => setIndex((i) => (i + 1) % IMAGES.length)}
          aria-hidden="true"
          className="hidden md:block absolute right-0 top-0 h-full w-1/4 z-30"
        />
      </div>

      {/* Optional: progress bar (subtle) */}
      <div className="absolute top-4 left-4 right-4 z-40 pointer-events-none">
        <div className="h-1 bg-white/10 rounded-full overflow-hidden">
          <div
            style={{ width: `${((index + 1) / IMAGES.length) * 100}%` }}
            className="h-full transition-all duration-500"
          />
        </div>
      </div>
    </div>
  );
}