import React, { useEffect, useState } from "react";
import "./Rubros.css";

import VLicoreria from "../assets/video/LICORERIAVIETICASOFT.mp4";
import VAbarrotes from "../assets/video/VIDEODEMARKETVIETICASOFT.mp4";
import videoFarmacia from "../assets/video/LICORERIAVIETICASOFT.mp4";

function Rubros() {
  const [visibleSections, setVisibleSections] = useState([]);

  useEffect(() => {
    const handleScroll = () => {
      const scrollTop = window.scrollY + window.innerHeight * 0.8;
      document.querySelectorAll(".rubro-section").forEach((sec, i) => {
        if (sec.offsetTop < scrollTop && !visibleSections.includes(i)) {
          setVisibleSections(prev => [...prev, i]);
        }
      });
    };

    window.addEventListener("scroll", handleScroll);
    handleScroll();
    return () => window.removeEventListener("scroll", handleScroll);
  }, [visibleSections]);

  const secciones = [
    {
      titulo: "Licorería",
      videoUrl: VLicoreria,
      caracteristicas: [
        "Control completo de inventario de bebidas",
        "Registro automático de ventas con historial detallado",
        "Gestión de clientes frecuentes y crédito",
        "Control de ingresos y egresos diarios",
        "Reportes avanzados de ganancias por producto",
        "Alertas de productos con bajo stock",
        "Compatible con lector de código de barras",
        "Múltiples usuarios con roles y permisos",
        "Historial de ventas por fechas y horarios",
        "Exportación de reportes en PDF y Excel",
        "Sistema seguro con backups automáticos",
        "Panel de control intuitivo",
      ],
    },
    {
      titulo: "Abarrotes",
      videoUrl: VAbarrotes,
      caracteristicas: [
        "Inventario de productos secos y frescos",
        "Registro de ventas por caja y por turno",
        "Gestión de proveedores y pedidos",
        "Control de precios y promociones",
        "Reportes de ventas semanales y mensuales",
        "Alertas de productos con bajo stock",
        "Registro de clientes frecuentes",
        "Control de pérdidas y devoluciones",
        "Gestión de cupones y descuentos",
        "Dashboard con estadísticas gráficas",
      ],
    },
    {
      titulo: "Farmacia",
      videoUrl: videoFarmacia,
      caracteristicas: [
        "Control de stock de medicamentos",
        "Alertas de vencimiento",
        "Gestión de recetas médicas digitales",
        "Historial de clientes",
        "Reportes de ventas por tipo de medicamento",
        "Registro de proveedores y pedidos",
        "Gestión de recetas electrónicas",
        "Alertas de stock mínimo y máximo",
        "Reportes de ingresos diarios y mensuales",
        "Panel administrativo fácil de usar",
      ],
    },
  ];

  return (
    <div className="app-container">
      <h1 className="main-title">Sistema de Ventas por Rubros</h1>

      {secciones.map((sec, index) => (
        <section
          key={index}
          className={`rubro-section ${index % 2 === 0 ? "bg-light" : "bg-soft"} ${
            visibleSections.includes(index) ? "visible" : ""
          }`}
        >
          <div className={`rubro-content ${index % 2 === 0 ? "" : "reverse"}`}>
            <div className="rubro-video">
              <div className="video-vertical-container">
                <video controls className="main-video-vertical">
                  <source src={sec.videoUrl} type="video/mp4" />
                </video>
              </div>
            </div>
            <div className="rubro-info">
              <h2>{sec.titulo}</h2>
              <div className="features-columns">
                {sec.caracteristicas.map((item, i) => (
                  <div key={i} className="feature-item">
                    <span className="icon">✔</span>
                    {item}
                  </div>
                ))}
              </div>
              <button className="demo-btn">Solicitar Demo</button>
            </div>
          </div>
        </section>
      ))}
    </div>
  );
}

export default Rubros;