import "./Hero.css";
import { FaWhatsapp } from "react-icons/fa";

const Hero = () => {
  const whatsappNumbers = [
    "51947717368", // turno 1
    "51947717368"  // turno 2
  ];

  const handleSubmit = (e) => {
    e.preventDefault();

    const nombre = e.target.nombre.value;
    const documento = e.target.documento.value;
    const rubro = e.target.rubro.value;
    const telefono = e.target.telefono.value;

    // Turno automático
    const index = new Date().getMinutes() % whatsappNumbers.length;
    const whatsapp = whatsappNumbers[index];

    const mensaje = `
Hola, solicito información sobre VIETICASOFT:

Nombre: ${nombre}
RUC/DNI: ${documento}
Rubro: ${rubro}
Teléfono: ${telefono}
    `;

    const url = `https://wa.me/${whatsapp}?text=${encodeURIComponent(mensaje)}`;
    window.open(url, "_blank");
  };

  return (
    <section className="hero">
      <div className="hero-overlay"></div>

      <div className="hero-container">
        {/* TEXTO */}
        <div className="hero-text">
          <span className="hero-tag">Digitaliza tu negocio con un:</span>
          <h1> Software de Gestión <br/>     
          <strong> Y Facturación Electronica </strong>
          </h1>
          <p>
            Plataforma de gestión de ventas, compras e inventarios
            diseñada para empresas de todos los rubros en el Perú.
          </p>
        </div>

        {/* FORMULARIO */}
        <div className="hero-form">
          <h3>¿Necesitas información?</h3>
          <p>Ingresa tus datos y nos comunicaremos contigo</p>

          <form onSubmit={handleSubmit}>
            <input name="nombre" type="text" required placeholder="Nombre *" />
            <input name="documento" type="text" required placeholder="RUC o DNI *" />
            <input name="rubro" type="text" required placeholder="Rubro *" />
            <input name="telefono" type="text" required placeholder="Teléfono *" />
            <button type="submit">
  <FaWhatsapp /> Solicitar Información
</button>
          </form>
        </div>
      </div>
    </section>
  );
};

export default Hero;
