muitas melhorias pra descrever

frontend/src/components/CookieConsent.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useState } from "react";
+import { getConsent, setConsent, startHeartbeat, type ConsentValue } from "../lib/analytics.js";
+
+export function CookieConsent() {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const current = getConsent();
+    if (current === null) {
+      setVisible(true);
+    } else if (current === "accepted") {
+      startHeartbeat();
+    }
+  }, []);
+
+  function choose(value: ConsentValue) {
+    setConsent(value);
+    setVisible(false);
+    if (value === "accepted") startHeartbeat();
+  }
+
+  if (!visible) return null;
+
+  return (
+    <div className="fixed inset-x-0 bottom-0 z-50 border-t border-white/10 bg-panel/95 backdrop-blur px-4 py-3 sm:px-6">
+      <div className="mx-auto flex max-w-4xl flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <p className="text-xs text-slate-300 sm:text-sm">
+          Este site coleta dados básicos de uso (endereço IP, país aproximado e páginas
+          acessadas) apenas para estatísticas anônimas de acesso. Nenhum dado é vendido ou
+          compartilhado com terceiros. Você pode recusar sem perder acesso ao atlas.
+        </p>
+        <div className="flex shrink-0 gap-2">
+          <button
+            onClick={() => choose("declined")}
+            className="rounded px-3 py-1.5 text-xs text-slate-300 hover:bg-white/5 sm:text-sm"
+          >
+            Recusar
+          </button>
+          <button
+            onClick={() => choose("accepted")}
+            className="rounded bg-accent px-3 py-1.5 text-xs font-medium text-white hover:opacity-90 sm:text-sm"
+          >
+            Aceitar
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}