import { useEffect, useRef, useState } from "react";
import "./Features.css";

const data = [
  { icon: "✔", color: "green", title: "Validación OSE-SUNAT", titleColor: "#000", desc: "Normativa SUNAT vigente.", descColor: "green" },
  { icon: "🛠", color: "purple", title: "Soluciones a Medida", titleColor: "#000", desc: "Para cualquier rubro.", descColor: "#581c87" },
  { icon: "👩‍💼", color: "pink", title: "Asesoría Personalizada", titleColor: "#000", desc: "Atención directa.", descColor: "#9d174d" },
  { icon: "🛡️", color: "teal", title: "Seguridad", titleColor: "#000", desc: "ISO 27001.", descColor: "#115e59" },
  { icon: "⚡", color: "green", title: "Rápido", titleColor: "#000", desc: "Sistema ágil.", descColor: "#166534" },
  { icon: "📦", color: "purple", title: "Inventarios", titleColor: "#000", desc: "Control total.", descColor: "#581c87" },
  { icon: "📊", color: "teal", title: "Reportes", titleColor: "#000", desc: "Datos claros.", descColor: "#115e59" },
  { icon: "☁️", color: "pink", title: "En la Nube", titleColor: "#000", desc: "Acceso 24/7.", descColor: "#9d174d" }
];

const Features = () => {
  const [index, setIndex] = useState(0);
  const [visible, setVisible] = useState(3);
  const startX = useRef(0);

  /* RESPONSIVE */
  useEffect(() => {
    const update = () => {
      if (window.innerWidth <= 600) setVisible(1);
      else if (window.innerWidth <= 900) setVisible(2);
      else setVisible(3);
    };
    update();
    window.addEventListener("resize", update);
    return () => window.removeEventListener("resize", update);
  }, []);

  const maxIndex = Math.max(data.length - visible, 0);

  /* AUTOPLAY */
  useEffect(() => {
    const interval = setInterval(() => {
      setIndex((prev) => (prev >= maxIndex ? 0 : prev + 1));
    }, 3000);
    return () => clearInterval(interval);
  }, [maxIndex]);

  /* TOUCH */
  const onTouchStart = (e) => (startX.current = e.touches[0].clientX);

  const onTouchEnd = (e) => {
    const diff = startX.current - e.changedTouches[0].clientX;
    if (diff > 50 && index < maxIndex) setIndex(index + 1);
    if (diff < -50 && index > 0) setIndex(index - 1);
  };

  return (
    <section className="features">
      <h4 className="section-tag">PLATAFORMA</h4>
      <h2 className="section-title">¿Qué ofrecemos?</h2>

      <div className="carousel" onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>
        <div
          className="carousel-track"
          style={{ transform: `translateX(-${(100 / visible) * index}%)` }}
        >
          {data.map((item, i) => (
            <div className="feature-card" key={i}>
              <div className={`icon ${item.color}`}>{item.icon}</div>
              <h3 style={{ color: item.titleColor }}>{item.title}</h3>
              <p style={{ color: item.descColor }}>{item.desc}</p>
            </div>
          ))}
        </div>
      </div>

      <div className="dots">
        {Array.from({ length: maxIndex + 1 }).map((_, i) => (
          <span
            key={i}
            className={`dot ${i === index ? "active" : ""}`}
            onClick={() => setIndex(i)}
          />
        ))}
      </div>
    </section>
  );
};

export default Features;
