GRV-Summit-Site/components/layout/SiteEntryPrompt.tsx

"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { X } from "lucide-react";
import { dataConsent } from "@/content/consent";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";
import { cn } from "@/lib/utils";

const copy = dataConsent.siteEntry;

function hasAcceptedConsent(): boolean {
  if (typeof window === "undefined") return false;
  return localStorage.getItem(copy.storageKey) === "accepted";
}

export function SiteEntryPrompt() {
  const pathname = usePathname();
  const [open, setOpen] = useState(false);
  const [visible, setVisible] = useState(false);
  const [checked, setChecked] = useState(false);

  useEffect(() => {
    if (hasAcceptedConsent()) {
      setOpen(false);
      setVisible(false);
      return;
    }
    setOpen(true);
    setChecked(false);
    const show = requestAnimationFrame(() => setVisible(true));
    return () => cancelAnimationFrame(show);
  }, [pathname]);

  const dismiss = () => {
    setVisible(false);
    window.setTimeout(() => setOpen(false), 280);
  };

  const handleAccept = () => {
    if (!checked) return;
    localStorage.setItem(copy.storageKey, "accepted");
    dismiss();
  };

  const handleDecline = () => {
    dismiss();
  };

  if (!open) return null;

  return (
    <div
      role="dialog"
      aria-labelledby="entry-consent-title"
      aria-describedby="entry-consent-desc"
      className={cn(
        "fixed bottom-4 right-4 z-[200] w-[min(calc(100vw-2rem),24rem)] rounded-2xl border border-[#1a5c38]/15 bg-white p-5 shadow-[0_12px_40px_rgba(13,61,38,0.18)] transition-all duration-500 ease-out",
        visible ? "translate-y-0 opacity-100" : "translate-y-3 opacity-0"
      )}
    >
      <button
        type="button"
        onClick={handleDecline}
        className="absolute top-3 right-3 rounded-full p-1 text-[#3d5248] transition-colors hover:bg-[#1a5c38]/8 hover:text-[#0d3d26]"
        aria-label="Decline and close"
      >
        <X className="size-4" />
      </button>

      <h2
        id="entry-consent-title"
        className="pr-6 text-lg font-bold leading-snug text-[#0d3d26]"
      >
        {copy.title}
      </h2>
      <p id="entry-consent-desc" className="mt-2 text-sm leading-relaxed text-[#3d5248]">
        {copy.description}
      </p>

      <div className="mt-4 flex items-start gap-3 rounded-lg border border-[#1a5c38]/12 bg-[#f0f5f2]/80 p-3">
        <Checkbox
          id="site-entry-consent"
          checked={checked}
          onCheckedChange={(v) => setChecked(v === true)}
          className="mt-0.5 border-[#1a5c38]/40 data-[state=checked]:border-[#1a5c38] data-[state=checked]:bg-[#1a5c38]"
        />
        <Label
          htmlFor="site-entry-consent"
          className="text-sm font-normal leading-snug text-[#3d5248]"
        >
          {copy.checkboxLabel}{" "}
          <Link
            href={copy.privacyHref}
            className="font-medium text-[#1a5c38] underline underline-offset-2"
          >
            {dataConsent.privacyLinkText}
          </Link>
          .
        </Label>
      </div>

      <div className="mt-4 flex flex-col gap-2 sm:flex-row">
        <Button
          type="button"
          disabled={!checked}
          onClick={handleAccept}
          className="rounded-full bg-[#1a5c38] text-white hover:bg-[#0d3d26] disabled:opacity-50"
        >
          {copy.acceptCta}
        </Button>
        <Button
          type="button"
          variant="outline"
          onClick={handleDecline}
          className="rounded-full border-[#1a5c38]/30 text-[#1a5c38] hover:bg-[#1a5c38]/6"
        >
          {copy.declineCta}
        </Button>
      </div>
    </div>
  );
}