Accordion Suave

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

const ITEMS = [
  { q: "Posso cancelar quando quiser?", a: "Sim. Sem multa, sem burocracia: dois cliques e pronto." },
  { q: "Tem período de teste?", a: "14 dias grátis com acesso completo, sem pedir cartão." },
  { q: "Vocês emitem nota fiscal?", a: "Emitimos automaticamente em todo pagamento aprovado." },
];

export default function App() {
  const [open, setOpen] = useState(0);

  return (
    <div className="stage">
      <div className="acc">
        {ITEMS.map((it, i) => {
          const isOpen = open === i;
          return (
            <div key={i} className={isOpen ? "item open" : "item"}>
              <button className="head" onClick={() => setOpen(isOpen ? -1 : i)}>
                {it.q}
                <span className="plus">+</span>
              </button>
              <div className="body">
                <div className="body-inner">{it.a}</div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}