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

const faqs = [
  {
    q: "¿Qué necesito para registrar mi empresa?",
    a: "Necesitas RUC activo y habido, usuario y clave SOL de SUNAT y datos básicos de tu empresa."
  },
  {
    q: "¿Puedo administrar múltiples empresas en mi cuenta?",
    a: "Sí, puedes gestionar varias empresas desde una sola cuenta, cada una con su propia configuración."
  },
  {
    q: "¿Puedo personalizar mis comprobantes?",
    a: "Claro, puedes personalizar logo, formato, datos adicionales y mensajes en tus comprobantes."
  },
  {
    q: "¿El sistema funciona sin internet?",
    a: "La versión local funciona sin internet. La versión en la nube requiere conexión."
  },
  {
    q: "¿Brindan soporte técnico?",
    a: "Sí, ofrecemos soporte técnico especializado por teléfono, WhatsApp y asistencia remota."
  }
];

const Faq = () => {
  const [open, setOpen] = useState(null);

  return (
    <section className="faq">
      <div className="faq-container">
        {/* IZQUIERDA */}
        <div className="faq-left">
          <span className="faq-tag">QUESTIONS</span>
          <h2>Preguntas y respuestas más frecuentes</h2>
          <button className="faq-btn">Ver todas</button>
        </div>

        {/* DERECHA */}
        <div className="faq-right">
          {faqs.map((item, i) => (
            <div
              key={i}
              className={`faq-item ${open === i ? "open" : ""}`}
              onClick={() => setOpen(open === i ? null : i)}
            >
              <div className="faq-question">
                <span>{item.q}</span>
                <span className="faq-icon">
                  {open === i ? "−" : "›"}
                </span>
              </div>

              <div className="faq-answer">
                <p>{item.a}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default Faq;
