Acordeón.

<div class="ui-sample ui-accordion" data-accordion><details open><summary><span>Qué incluye el servicio</span><span aria-hidden="true">+</span></summary><p>Acceso, soporte y actualizaciones de contrato.</p></details><details><summary><span>Cómo se factura</span><span aria-hidden="true">+</span></summary><p>Período, IVA y renovación aparecen antes de confirmar.</p></details></div>

<div class="ui-sample ui-accordion border border-slate-300 bg-white p-4 text-slate-950" data-accordion><details open><summary><span>Qué incluye el servicio</span><span aria-hidden="true">+</span></summary><p>Acceso, soporte y actualizaciones de contrato.</p></details><details><summary><span>Cómo se factura</span><span aria-hidden="true">+</span></summary><p>Período, IVA y renovación aparecen antes de confirmar.</p></details></div>

import type { ReactNode } from "react";

export interface AccordionItem {
  /** Texto del encabezado que abre y cierra la sección. */
  title: string;
  /** Contenido de la sección; un texto se envuelve en un párrafo. */
  content: ReactNode;
  /** Sección abierta (atributo nativo `open` de `<details>`). */
  open?: boolean;
}

export interface AccordionProps {
  items?: AccordionItem[];
  /** Nombre compartido de las secciones: con él, abrir una cierra las demás (atributo nativo `name`). */
  name?: string;
  /** Se llama cuando una sección se abre o se cierra, con su posición y su estado nuevo. */
  onToggle?: (index: number, open: boolean) => void;
  className?: string;
}

const ITEMS: AccordionItem[] = [
  { title: "Qué incluye el servicio", content: "Acceso, soporte y actualizaciones de contrato.", open: true },
  { title: "Cómo se factura", content: "Período, IVA y renovación aparecen antes de confirmar." },
];

/**
 * Lista de secciones plegables para preguntas frecuentes o detalles secundarios que no todos necesitan leer.
 *
 * Usa `<details>` y `<summary>` nativos: abre y cierra sin JavaScript, y `open` fija el estado inicial de cada sección.
 *
 * @example <Accordion items={[{ title: "Cómo se factura", content: "Período, IVA y renovación aparecen antes de confirmar.", open: true }]} />
 * @example <Accordion name="preguntas" items={preguntas} onToggle={registrarApertura} />
 */
export function Accordion({ items = ITEMS, name, onToggle, className }: AccordionProps) {
  if (!items.length) return null;
  return (
    <div className={["ui-accordion", className].filter(Boolean).join(" ")} data-accordion>
      {items.map((item, i) => (
        <details
          open={item.open}
          name={name}
          onToggle={onToggle ? (event) => onToggle(i, event.currentTarget.open) : undefined}
          key={`${item.title}-${i}`}
        >
          <summary>
            <span>{item.title}</span>
            <span aria-hidden="true">+</span>
          </summary>
          {typeof item.content === "string" ? <p>{item.content}</p> : item.content}
        </details>
      ))}
    </div>
  );
}