// Cookie banner — GDPR compliant, essential cookies only (merch site only)

const { useState: useStateC, useEffect: useEffectC } = React;

function CookieBanner({ route }) {
  const [show, setShow] = useStateC(false);
  const isMerchRoute = route?.name !== 'landing';

  useEffectC(() => {
    if (!isMerchRoute) {
      setShow(false);
      return;
    }
    const dismissed = localStorage.getItem('pvl-cookies-dismissed');
    if (!dismissed) {
      setShow(true);
    }
  }, [isMerchRoute]);

  const handleDismiss = () => {
    localStorage.setItem('pvl-cookies-dismissed', 'true');
    setShow(false);
  };

  if (!show) return null;

  return (
    <div className="cookie-banner">
      <div className="cookie-banner-content">
        <svg className="cookie-icon" viewBox="0 0 24 24" width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M9 16H9.01M12 11H12.01M7 10H7.01M15 16H15.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C12 5.76142 13.7909 8 16 8C16 10.2091 18.2386 12 21 12Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path>
        </svg>
        <p className="cookie-banner-text">
          We use essential cookies to make checkout work and protect your data. No tracking or ads.{' '}
          <a href="/merch/privacy" className="cookie-banner-link">Privacy policy</a>
        </p>
        <button
          className="cookie-banner-btn"
          onClick={handleDismiss}
          onMouseEnter={() => onCursor('hover')}
          onMouseLeave={() => onCursor('default')}
        >
          Got it
        </button>
      </div>
    </div>
  );
}

window.CookieBanner = CookieBanner;