/* global React */

const STORAGE_KEY = "peoplecake.cookieConsent";

function CookieBanner({ navigate }) {
  const [visible, setVisible] = React.useState(false);
  const [denied, setDenied] = React.useState(false);

  React.useEffect(() => {
    try {
      const v = localStorage.getItem(STORAGE_KEY);
      if (!v) setVisible(true);
    } catch (e) {
      setVisible(true);
    }
  }, []);

  const accept = () => {
    try { localStorage.setItem(STORAGE_KEY, "accepted"); } catch (e) {}
    setVisible(false);
  };

  const deny = () => {
    setDenied(true);
  };

  if (denied) {
    return (
      <div className="cookie-overlay" role="dialog" aria-modal="true">
        <div className="cookie-card cookie-card--deny">
          <h3 className="cookie-card__title">Consent required</h3>
          <p className="cookie-card__body">
            We're unable to provide this website without basic visitor tracking.
            Please close this tab to leave the site, or accept to continue.
          </p>
          <div className="cookie-card__actions">
            <button className="btn btn--ghost" onClick={() => setDenied(false)}>
              Back
            </button>
            <button className="btn btn--primary" onClick={accept}>
              Accept and continue
            </button>
          </div>
        </div>
      </div>
    );
  }

  if (!visible) return null;

  return (
    <div className="cookie-banner" role="dialog" aria-label="Cookie consent">
      <div className="cookie-banner__inner">
        <div className="cookie-banner__copy">
          <div className="cookie-banner__title">Cookies on this website</div>
          <p className="cookie-banner__body">
            This website uses the most basic of visitor information tracking
            (such as Google Analytics or equivalent). No further
            information is recorded, and we never sell your data to third parties.
            See our{" "}
            <a className="cookie-banner__link" onClick={() => { accept(); navigate("privacy"); }}>
              Privacy Policy
            </a>{" "}
            for details.
          </p>
        </div>
        <div className="cookie-banner__actions">
          <button className="btn btn--ghost" onClick={deny}>Deny</button>
          <button className="btn btn--primary" onClick={accept}>OK, accept</button>
        </div>
      </div>
    </div>
  );
}

const cookieBannerStyle = document.createElement("style");
cookieBannerStyle.textContent = `
  .cookie-banner {
    position: fixed;
    left: 16px; right: 16px; bottom: 16px;
    z-index: 300;
    background: var(--color-white);
    color: var(--color-black);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    padding: 20px 24px;
    max-width: 1080px;
    margin: 0 auto;
    animation: cookie-rise 280ms ease both;
  }
  @keyframes cookie-rise {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }
  .cookie-banner__inner {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
  }
  .cookie-banner__copy { flex: 1 1 360px; min-width: 0; }
  .cookie-banner__title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 4px;
  }
  .cookie-banner__body {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-mid-grey);
    margin: 0;
  }
  .cookie-banner__link {
    color: var(--color-purple);
    cursor: pointer;
    border-bottom: 1px solid currentColor;
  }
  .cookie-banner__actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
  }
  @media (max-width: 640px) {
    .cookie-banner { padding: 18px; }
    .cookie-banner__actions { width: 100%; }
    .cookie-banner__actions .btn { flex: 1; }
  }

  .cookie-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 13, 11, 0.72);
    z-index: 400;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    backdrop-filter: blur(4px);
  }
  .cookie-card {
    background: var(--color-white);
    border-radius: 12px;
    max-width: 480px;
    padding: 32px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
  }
  .cookie-card__title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 500;
    margin: 0 0 12px;
  }
  .cookie-card__body {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-mid-grey);
    margin: 0 0 24px;
  }
  .cookie-card__actions {
    display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap;
  }
`;
document.head.appendChild(cookieBannerStyle);

window.CookieBanner = CookieBanner;