// Cookie consent — a calm card that rises from the bottom-left after a short
// pause. Accept All / Decline both persist in localStorage so it only ever
// shows once. Sits above the mobile Call/WhatsApp bar on small screens.
const { useState: useStateCk } = React;
const useEffectCk = React.useLayoutEffect;

const COOKIE_KEY = 'fp-cookie-consent';

function CookieBar() {
  const [shown, setShown] = useStateCk(false);
  const [leaving, setLeaving] = useStateCk(false);
  const reduced = usePrefersReducedMotion();
  const staticRender = useStaticRender();

  useEffectCk(() => {
    let stored = null;
    try { stored = window.localStorage.getItem(COOKIE_KEY); } catch (e) { /* private mode */ }
    if (stored) return undefined;
    const t = setTimeout(() => setShown(true), staticRender || reduced ? 0 : 1100);
    return () => clearTimeout(t);
  }, [staticRender, reduced]);

  const choose = (value) => {
    try { window.localStorage.setItem(COOKIE_KEY, value); } catch (e) { /* private mode */ }
    if (staticRender || reduced) { setShown(false); return; }
    setLeaving(true);
    setTimeout(() => setShown(false), 380);
  };

  if (!shown) return null;

  return (
    <div
      role="dialog"
      aria-label="Cookie consent"
      aria-live="polite"
      className="fixed left-4 right-4 z-[70] sm:left-6 sm:right-auto sm:w-[400px] bottom-[92px] lg:bottom-6"
      style={{
        opacity: leaving ? 0 : 1,
        transform: leaving ? 'translateY(14px)' : 'translateY(0)',
        transition: staticRender || reduced ? 'none' : 'opacity 380ms ' + EASE + ', transform 380ms ' + EASE,
        animation: staticRender || reduced ? 'none' : 'riseIn 520ms ' + EASE + ' both',
      }}
    >
      <div
        className="relative overflow-hidden rounded-[22px] bg-white p-6"
        style={{ boxShadow: '0 30px 70px -28px rgba(26,48,102,0.55), 0 0 0 1px rgba(26,48,102,0.07)' }}
      >
        <div aria-hidden="true" style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 5, background: 'linear-gradient(90deg,#FFCC57,#F0B83C)' }} />
        <div className="flex items-start gap-3.5">
          <span className="inline-flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-full" style={{ background: 'rgba(255,204,87,0.22)', color: '#C9912A' }}>
            {/* Cookie glyph */}
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <path d="M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5" />
              <path d="M8.5 8.5v.01" />
              <path d="M16 15.5v.01" />
              <path d="M12 12v.01" />
              <path d="M11 17v.01" />
              <path d="M7 14v.01" />
            </svg>
          </span>
          <div className="min-w-0">
            <p className="font-display font-normal text-navy" style={{ fontSize: 19, letterSpacing: '-0.01em' }}>We use cookies</p>
            <p className="mt-1.5 font-sans text-stone" style={{ fontSize: 13.5, lineHeight: 1.55 }}>
              We use cookies to improve your experience. See our{' '}
              <a href="cookie-policy.html" className="font-medium text-navy underline-offset-2 hover:underline">Cookie Policy</a>
              {' '}and{' '}
              <a href="privacy-policy.html" className="font-medium text-navy underline-offset-2 hover:underline">Privacy Policy</a>.
            </p>
          </div>
        </div>
        <div className="mt-5 flex gap-2.5">
          <button
            type="button"
            onClick={() => choose('accepted')}
            className="flex-1 rounded-full bg-gold px-5 py-2.5 font-sans font-semibold text-[14.5px] text-navy hover:bg-gold-deep"
            style={{ boxShadow: '0 10px 22px -10px rgba(240,184,60,0.85)', transition: 'background-color 250ms ' + EASE }}
          >
            Accept All
          </button>
          <button
            type="button"
            onClick={() => choose('declined')}
            className="flex-1 rounded-full px-5 py-2.5 font-sans font-semibold text-[14.5px] text-navy"
            style={{ boxShadow: 'inset 0 0 0 1.5px rgba(26,48,102,0.3)', transition: 'background-color 250ms ' + EASE }}
            onMouseEnter={(e) => (e.currentTarget.style.background = 'rgba(26,48,102,0.05)')}
            onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}
          >
            Decline
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CookieBar });