shieldx/ai-act-kompass/src/ui/DisclaimerGate.tsx

import { useState } from 'react';
import { useI18n } from '../i18n/context';

const ACK_KEY = 'ai-act-kompass/legal-ack/v1';

function hasAcknowledged(): boolean {
  try {
    return localStorage.getItem(ACK_KEY) !== null;
  } catch {
    return false;
  }
}

/**
 * Rechtlicher Hinweis beim ersten Start: Die Nutzung ist erst nach
 * ausdrücklicher Bestätigung möglich, dass das Tool nur eine Arbeitshilfe
 * und keine Rechtsberatung ist. Die Bestätigung wird mit Zeitstempel
 * lokal gespeichert.
 */
export function DisclaimerGate(): JSX.Element | null {
  const { t } = useI18n();
  const [acknowledged, setAcknowledged] = useState<boolean>(() => hasAcknowledged());

  if (acknowledged) return null;

  return (
    <div className="gate-backdrop" role="dialog" aria-modal="true" aria-label={t.legalGateTitle}>
      <div className="gate">
        <h1>{t.legalGateTitle}</h1>
        <p>{t.legalGateBody1}</p>
        <p>
          <strong>{t.legalGateBody2}</strong>
        </p>
        <p>{t.legalGateBody3}</p>
        <button
          className="primary"
          onClick={() => {
            localStorage.setItem(ACK_KEY, new Date().toISOString());
            setAcknowledged(true);
          }}
        >
          {t.legalGateAccept}
        </button>
      </div>
    </div>
  );
}