import { useState } from 'react';
import { AlertTriangle, X } from 'lucide-react';
import { IS_HOMOLOGATION } from '@/config/mautic';

/**
 * Banner visual que aparece em ambiente de homologacao
 * Avisa que Mautic, Google Ads e Facebook Pixel estao em modo simulacao
 */
export default function HomologationBanner() {
  const [dismissed, setDismissed] = useState(false);

  if (!IS_HOMOLOGATION || dismissed) return null;

  return (
    <div className="fixed bottom-4 right-4 z-[100] max-w-md">
      <div className="bg-amber-500 text-[#0e0e0e] rounded-xl shadow-2xl p-4 border-2 border-amber-400">
        <div className="flex items-start gap-3">
          <AlertTriangle className="w-5 h-5 shrink-0 mt-0.5" />
          <div className="flex-1">
            <p className="font-bold text-sm">Ambiente de Homologacao</p>
            <p className="text-xs mt-1 opacity-90">
              Mautic, Google Ads e Facebook Pixel estao em modo <strong>simulacao</strong>.
              Nenhum dado real e enviado. Verifique o console (F12) para ver o que seria enviado.
            </p>
          </div>
          <button
            onClick={() => setDismissed(true)}
            className="shrink-0 p-1 hover:bg-amber-600 rounded-lg transition-colors"
            aria-label="Fechar"
          >
            <X className="w-4 h-4" />
          </button>
        </div>
      </div>
    </div>
  );
}
