// OpenDayPromo.jsx — site-wide Open Day promotion: a top announcement bar
// (tucks away on scroll, driven by the header's is-scrolled state) plus a
// one-per-visit welcome pop-up. Booking link = window.OPEN_DAY_URL.
// Rendered AFTER <Header/> in App so the `.site-header.is-scrolled ~ .openday-bar`
// selector can hide the bar on scroll. Dismiss states:
//   - bar   -> localStorage 'oday_bar_dismissed' (stays closed for good)
//   - popup -> sessionStorage 'oday_popup_seen'  (once per visit)

function OpenDayPromo() {
  const URL = window.OPEN_DAY_URL || 'https://forms.cloud.microsoft/r/xG1msKqW8N';
  const [barOpen, setBarOpen] = React.useState(false);
  const [modalOpen, setModalOpen] = React.useState(false);

  React.useEffect(() => {
    let barDismissed = false, popupSeen = false;
    try { barDismissed = localStorage.getItem('oday_bar_dismissed') === '1'; } catch (e) {}
    try { popupSeen = sessionStorage.getItem('oday_popup_seen') === '1'; } catch (e) {}

    if (!barDismissed) {
      setBarOpen(true);
      document.documentElement.classList.add('openday-bar-on');
    }
    let t;
    if (!popupSeen) t = setTimeout(() => setModalOpen(true), 1300);
    return () => { if (t) clearTimeout(t); };
  }, []);

  const closeBar = () => {
    setBarOpen(false);
    document.documentElement.classList.remove('openday-bar-on');
    try { localStorage.setItem('oday_bar_dismissed', '1'); } catch (e) {}
  };
  const closeModal = () => {
    setModalOpen(false);
    try { sessionStorage.setItem('oday_popup_seen', '1'); } catch (e) {}
  };

  React.useEffect(() => {
    if (!modalOpen) return;
    const onKey = (e) => { if (e.key === 'Escape') closeModal(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [modalOpen]);

  const arrow = (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" aria-hidden="true"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
  );

  return (
    <>
      {barOpen && (
        <div className="openday-bar" role="region" aria-label="Open Day announcement">
          <a className="openday-bar__inner" href={URL} target="_blank" rel="noopener noreferrer">
            <span className="openday-bar__badge">Open Day</span>
            <span className="openday-bar__text">
              <strong><span className="openday-bar__date-lg">12 September 2026</span><span className="openday-bar__date-sm">12 Sept 2026</span></strong>
              <span className="openday-bar__tag"> — come and see our campuses</span>
            </span>
            <span className="openday-bar__cta">Book now {arrow}</span>
          </a>
          <button className="openday-bar__close" onClick={closeBar} aria-label="Dismiss Open Day announcement" title="Dismiss">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg>
          </button>
        </div>
      )}

      {modalOpen && (
        <div className="openday-modal" role="dialog" aria-modal="true" aria-labelledby="oday-modal-title" onClick={closeModal}>
          <div className="openday-modal__card" onClick={(e) => e.stopPropagation()}>
            <button className="openday-modal__close" onClick={closeModal} aria-label="Close">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg>
            </button>
            <div className="openday-modal__kicker">You’re invited</div>
            <h2 className="openday-modal__title" id="oday-modal-title">Open Day</h2>
            <div className="openday-modal__date">12 September 2026</div>
            <p className="openday-modal__copy">Tour our campuses, meet our teachers and see <em>learning, naturally</em> in action. We’d love to show you around.</p>
            <a className="openday-modal__btn" href={URL} target="_blank" rel="noopener noreferrer" onClick={closeModal}>Book your spot {arrow}</a>
            <button className="openday-modal__later" onClick={closeModal}>Maybe later</button>
          </div>
        </div>
      )}
    </>
  );
}

Object.assign(window, { OpenDayPromo });