/* global React, CharMark */
/* PHASE 4-A (Brand Kit V2) — Final CTA + Follow Us modal.
   Per BRIEF V2 §6-9:
   - Top: 3-monster lineup (ハピモン① / オイモン王座Ver / シーパーズ右版)
   - Center: FEED THE MONSTERS. (brand red) / モンスターに、PAINを食わせろ。
   - White background, Pixar-tone bright.
   Closer beat: voice flips from monster→user to user-as-actor. */
const { useEffect: _useE4, useState: _useS4 } = React;

// ============= Final CTA =============
function FinalCTA({ onFollow }) {
  return (
    <section className="mm-cta" id="cta" data-screen-label="09 Final CTA">
      <div className="mm-cta__inner">
        <h2 className="mm-cta__head">
          <span className="mm-cta__head-en">FEED THE MONSTERS.</span>
        </h2>
        <p className="mm-cta__jp">モンスターに、PAIN を食わせろ。</p>

        <div className="mm-cta__actions">
          <a className="mm-cta__btn mm-cta__btn--prim" href="shop.html">
            SHOP NOW <span className="mm-cta__arr">→</span>
          </a>
          <button className="mm-cta__btn mm-cta__btn--sec" onClick={onFollow} type="button">
            FOLLOW US <span className="mm-cta__arr">→</span>
          </button>
        </div>
      </div>
    </section>
  );
}

// ============= Follow Us modal =============
function FollowModal({ open, onClose }) {
  _useE4(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, onClose]);

  _useE4(() => {
    if (!open) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = prev; };
  }, [open]);

  if (!open) return null;

  const onBackdrop = (e) => { if (e.target === e.currentTarget) onClose(); };

  return (
    <div className="mm-modal" role="dialog" aria-modal="true" aria-label="Follow MY MONSTERS" onMouseDown={onBackdrop}>
      <div className="mm-modal__bg" aria-hidden="true"></div>

      <button className="mm-modal__close" onClick={onClose} aria-label="Close" type="button">
        <span aria-hidden="true">✕</span>
      </button>

      <div className="mm-modal__inner">
        <p className="mm-modal__eyebrow">— GATEWAY · 入り口</p>
        <h3 className="mm-modal__head">
          <span>ANOTHER WORLD AWAITS.</span>
        </h3>
        <p className="mm-modal__jp">モンスターランドの入り口、開放中。</p>

        <div className="mm-modal__portals">
          <a className="mm-portal mm-portal--ig"
             href="https://www.instagram.com/mymonsters_hq"
             target="_blank" rel="noopener noreferrer">
            <span className="mm-portal__platform">INSTAGRAM</span>
            <span className="mm-portal__handle">@mymonsters_hq</span>
            <span className="mm-portal__line"></span>
            <span className="mm-portal__cta">
              <span>ENTER</span>
              <span className="mm-portal__arr">↗</span>
            </span>
          </a>

          <a className="mm-portal mm-portal--tt"
             href="https://www.tiktok.com/@mymonlab"
             target="_blank" rel="noopener noreferrer">
            <span className="mm-portal__platform">TIKTOK</span>
            <span className="mm-portal__handle">@mymonlab</span>
            <span className="mm-portal__line"></span>
            <span className="mm-portal__cta">
              <span>ENTER</span>
              <span className="mm-portal__arr">↗</span>
            </span>
          </a>
        </div>

        <p className="mm-modal__foot">— Esc / ✕ / 外側クリックで戻る —</p>
      </div>
    </div>
  );
}

Object.assign(window, { FinalCTA, FollowModal });