// Los textos legales viven en packages/shared/src/legal.ts: fuente ÚNICA para
// el panel y la tienda (antes eran copias que se desviaban en acentos y frases).
// Aquí queda solo el modal que los muestra, y se re-exportan para el resto del
// panel (AuthModal y AceptarLegal registran LEGAL_VERSION al aceptar).
import { LEGAL_VIGENCIA, PRIVACIDAD, TERMINOS } from '@gustito/shared';

export { LEGAL_VERSION, LEGAL_VIGENCIA, PRIVACIDAD, TERMINOS } from '@gustito/shared';

export function LegalModal({ doc, onCerrar }: { doc: 'terminos' | 'privacidad'; onCerrar: () => void }) {
  const d = doc === 'terminos' ? TERMINOS : PRIVACIDAD;
  return (
    <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 p-4" onClick={onCerrar}>
      <div
        className="flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-3xl bg-superficie text-white shadow-2xl ring-1 ring-white/10"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex items-start justify-between gap-3 border-b border-white/10 p-5">
          <div>
            <h2 className="text-xl font-extrabold text-white">{d.titulo}</h2>
            <p className="mt-0.5 text-xs text-niebla">Gustito Xpress · {LEGAL_VIGENCIA}</p>
          </div>
          <button
            onClick={onCerrar}
            className="grid h-9 w-9 shrink-0 place-items-center rounded-lg text-niebla hover:bg-white/10 hover:text-white"
            aria-label="Cerrar"
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
              <path d="M6 6l12 12M18 6L6 18" />
            </svg>
          </button>
        </div>
        <div className="overflow-y-auto p-5">
          <p className="text-sm text-niebla">{d.intro}</p>
          <div className="mt-4 space-y-4">
            {d.secciones.map((s) => (
              <section key={s.h}>
                <h3 className="text-sm font-extrabold text-dorado">{s.h}</h3>
                <div className="mt-1 space-y-1.5">
                  {s.p.map((par, i) => (
                    <p key={i} className="text-sm leading-relaxed text-niebla">
                      {par}
                    </p>
                  ))}
                </div>
              </section>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}
