import { useState } from "react";
import "./Contact.css";

export default function Contact() {
  const [tab, setTab] = useState("info");

  return (
    <section className="contact-section">
      <div className="contact-container">

        {/* FORMULARIO */}
        <div className="contact-form">
          <h2>¿Tienes alguna consulta?</h2>
          <p>Escríbenos y te contactaremos lo más pronto posible</p>

          <form>
            <div className="row">
              <input type="text" placeholder="Nombre *" required />
              <input type="email" placeholder="Email *" required />
            </div>

            <input type="tel" placeholder="Teléfono *" required />

            <textarea
              placeholder="Por favor, describe lo que necesitas *"
              rows="5"
              required
            ></textarea>

            <button type="submit">Enviar</button>
          </form>
        </div>

        {/* INFO / MAPA */}
        <div className="contact-info">
          {tab === "info" && (
            <div className="info-list">


              <div className="info-item">
                <span className="icon">✉️</span>
                <div>
                  <h4>ENVÍANOS UN EMAIL</h4>
                  <p>ventas@vieticasoft.com</p>
                  <p>soporte@vieticasoft.com</p>
                  <p>contacto@vieticasoft.com</p>
                </div>
              </div>

              <div className="info-item">
                <span className="icon">📞</span>
                <div>
                  <h4>WHATSAPP / SOPORTE</h4>
                  <p>+51 954 756 036</p>
                </div>
              </div>
            </div>
          )}
        </div>

      </div>
    </section>
  );
}
