// Cookie banner — appears bottom of every page until dismissed
// Stored choice persists in localStorage (key: cb_cookie_consent)

const { useState: useStateCB, useEffect: useEffectCB } = React;

function CookieBanner({ navigate }) {
  const [visible, setVisible] = useStateCB(false);
  const [showDetail, setShowDetail] = useStateCB(false);

  useEffectCB(() => {
    try {
      const choice = localStorage.getItem('cb_cookie_consent');
      if (!choice) {
        // Small delay so banner doesn't fight the page load animation
        const t = setTimeout(() => setVisible(true), 800);
        return () => clearTimeout(t);
      }
    } catch (e) { /* localStorage blocked — show banner */
      setVisible(true);
    }
  }, []);

  const persist = (choice) => {
    try {
      localStorage.setItem('cb_cookie_consent', JSON.stringify({
        choice,
        at: new Date().toISOString(),
      }));
    } catch (e) { /* no-op if blocked */ }
    setVisible(false);
  };

  if (!visible) return null;

  return (
    <div className="cookie-banner" role="dialog" aria-label="Cookie preferences">
      <div className="cookie-banner-inner">
        <div className="cookie-banner-icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
            <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
            <circle cx="9.5" cy="11" r="0.8" fill="currentColor"/>
            <circle cx="14" cy="9" r="0.8" fill="currentColor"/>
            <circle cx="14.5" cy="14" r="0.8" fill="currentColor"/>
          </svg>
        </div>

        <div className="cookie-banner-text">
          <h4>A small note about cookies.</h4>
          {!showDetail ? (
            <p>
              We use a few essential cookies to make the site work, and anonymous analytics
              to see what&apos;s working. No tracking across other sites, no ad networks, no selling data.{' '}
              <button type="button" className="cookie-banner-link" onClick={() => setShowDetail(true)}>
                What are these?
              </button>
            </p>
          ) : (
            <p>
              <strong>Essential cookies</strong> remember things like your in-progress order and
              whether you&apos;ve logged in. <strong>Anonymous analytics</strong> tell us which pages
              parents read most, so we can write less of the rest. We don&apos;t use advertising or
              cross-site tracking cookies. Read more in our{' '}
              <a
                href="#"
                onClick={(e) => { e.preventDefault(); persist('declined'); navigate('/privacy'); setTimeout(() => document.getElementById('cookies')?.scrollIntoView({ behavior: 'smooth' }), 100); }}
              >privacy policy</a>.
            </p>
          )}
        </div>

        <div className="cookie-banner-actions">
          <button type="button" className="cookie-banner-btn cookie-banner-btn-ghost" onClick={() => persist('essential-only')}>
            Essential only
          </button>
          <button type="button" className="cookie-banner-btn cookie-banner-btn-primary" onClick={() => persist('accepted')}>
            Sounds good
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CookieBanner });