// v3 welcome modal — square offer image, shown on every home page load
const { useState: useStateWM, useEffect: useEffectWM, useRef: useRefWM } = React;

// Offer switch: set to true (and update WM_IMG / WM_ALT) for the next campaign.
const WM_ENABLED = false;       // Onam offer ended 26 August — modal disabled

const WM_IMG = 'assets/offer/onam_offer.webp';
const WM_ALT = 'Onam Offer — 16 August to 26 August';
const WM_DELAY = 500;           // ms after load before it appears

function WelcomeModal() {
  const [open, setOpen] = useStateWM(false);
  const cardRef  = useRefWM(null);
  const closeRef = useRefWM(null);
  const prevFocus = useRefWM(null);

  useEffectWM(() => {
    if (!WM_ENABLED) return;
    const t = setTimeout(() => setOpen(true), WM_DELAY);
    return () => clearTimeout(t);
  }, []);

  const close = () => setOpen(false);

  /* Esc to close, focus kept inside the card, page scroll locked while open */
  useEffectWM(() => {
    if (!open) return;
    prevFocus.current = document.activeElement;
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    const raf = requestAnimationFrame(() => closeRef.current && closeRef.current.focus());

    const onKey = (e) => {
      if (e.key === 'Escape') { close(); return; }
      if (e.key !== 'Tab' || !cardRef.current) return;
      const f = cardRef.current.querySelectorAll('button, a[href], [tabindex]:not([tabindex="-1"])');
      if (!f.length) return;
      const first = f[0], last = f[f.length - 1];
      if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
      else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
    };
    document.addEventListener('keydown', onKey);
    return () => {
      document.removeEventListener('keydown', onKey);
      cancelAnimationFrame(raf);
      document.body.style.overflow = prevOverflow;
      if (prevFocus.current && prevFocus.current.focus) prevFocus.current.focus();
    };
  }, [open]);

  if (!open) return null;

  return (
    <div
      className="wm-backdrop"
      onClick={close}
      style={{
        position:'fixed', inset:0, zIndex:200,
        display:'flex', alignItems:'center', justifyContent:'center',
        padding:16,
        background:'rgba(7,15,42,0.62)',
        backdropFilter:'blur(6px)', WebkitBackdropFilter:'blur(6px)',
        animation:'wm-fade .35s ease both',
      }}
    >
      <div
        ref={cardRef}
        className="wm-card"
        role="dialog"
        aria-modal="true"
        aria-label="Onam offer"
        onClick={(e) => e.stopPropagation()}
        style={{
          /* square: width is capped by viewport height too, so it never overflows */
          position:'relative',
          width:'min(92vw, 620px, 84vh)',
          aspectRatio:'1 / 1',
          overflow:'hidden',
          borderRadius:'var(--r-md)',
          border:'1px solid rgba(212,162,74,0.35)',
          background:'var(--paper)',
          boxShadow:'0 48px 100px -30px rgba(7,15,42,0.75), 0 2px 10px rgba(7,15,42,0.35)',
          animation:'wm-pop .55s cubic-bezier(.2,.7,.2,1) both',
        }}
      >
        <img
          src={WM_IMG}
          alt={WM_ALT}
          style={{ width:'100%', height:'100%', objectFit:'contain', display:'block' }}
        />

        <button
          ref={closeRef}
          onClick={close}
          aria-label="Close"
          style={{
            position:'absolute', top:14, right:14, zIndex:2,
            width:36, height:36, borderRadius:'50%',
            display:'inline-flex', alignItems:'center', justifyContent:'center',
            background:'rgba(7,15,42,0.72)',
            border:'1px solid rgba(212,162,74,0.45)',
            color:'var(--cream)', cursor:'pointer',
            transition:'background .25s ease, border-color .25s ease',
          }}
          onMouseEnter={(e) => { e.currentTarget.style.background='var(--date)'; e.currentTarget.style.borderColor='var(--gold-3)'; }}
          onMouseLeave={(e) => { e.currentTarget.style.background='rgba(7,15,42,0.72)'; e.currentTarget.style.borderColor='rgba(212,162,74,0.45)'; }}
        >
          <Icon.X width="16" height="16"/>
        </button>
      </div>

      <style>{`
        @keyframes wm-fade { from { opacity:0; } to { opacity:1; } }
        @keyframes wm-pop {
          from { opacity:0; transform: translateY(16px) scale(.94); }
          to   { opacity:1; transform: none; }
        }
        @media (prefers-reduced-motion: reduce) {
          .wm-backdrop, .wm-card { animation: none !important; }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { WelcomeModal });