import { useState, useEffect } from "react";
import Link from "next/link";

export default function CookieConsent() {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    try {
      const consent = localStorage.getItem("blb_cookie_consent");
      if (!consent) {
        setVisible(true);
      }
    } catch {
      // localStorage not available
    }
  }, []);

  function accept() {
    try {
      localStorage.setItem("blb_cookie_consent", "true");
    } catch {
      // ignore
    }
    setVisible(false);
  }

  if (!visible) return null;

  return (
    <div
      style={{
        position: "fixed",
        bottom: 0,
        left: 0,
        right: 0,
        zIndex: 9999,
        background: "#1a1510",
        borderTop: "1px solid rgba(232,220,200,0.18)",
        padding: "16px 24px",
        display: "flex",
        flexWrap: "wrap",
        alignItems: "center",
        gap: "12px",
        justifyContent: "space-between",
      }}
    >
      <p
        style={{
          color: "#e8dcc8",
          fontSize: "0.92rem",
          lineHeight: 1.5,
          maxWidth: "680px",
          margin: 0,
        }}
      >
        We use cookies to improve your experience and analyze site traffic. By
        continuing, you agree to our cookie policy.
      </p>
      <div style={{ display: "flex", gap: "10px", flexShrink: 0 }}>
        <Link
          href="/privacy"
          style={{
            padding: "9px 18px",
            border: "1px solid rgba(232,220,200,0.3)",
            borderRadius: "4px",
            color: "#e8dcc8",
            fontSize: "0.88rem",
            cursor: "pointer",
            background: "transparent",
            textDecoration: "none",
            lineHeight: 1,
            display: "inline-flex",
            alignItems: "center",
          }}
        >
          Privacy Policy
        </Link>
        <button
          onClick={accept}
          style={{
            padding: "9px 18px",
            background: "#c0392b",
            border: "none",
            borderRadius: "4px",
            color: "#e8dcc8",
            fontSize: "0.88rem",
            cursor: "pointer",
            fontWeight: 600,
          }}
        >
          Accept
        </button>
      </div>
    </div>
  );
}
