/* global React, CharMark */
/* PHASE 3 (Brand Kit V2) — Collab (C-1 symmetry) · Brand Story (4 blocks, copy fixed).
   YAKUJIHŌ: confirmed copy per BRIEF V2 §6. Do not auto-soften. */

const { useEffect: _u3useEffect, useRef: _u3useRef, useState: _u3useState } = React;

/* Can this browser actually DECODE a .webm? iOS/iPadOS Safari (WebKit) cannot
   reliably decode VP8/VP9 WebM — the <video> renders nothing, leaving only the
   element's CSS background. So on those browsers we must show a still <img>
   instead. Reuses the shared cached gate if another component already defined
   it; otherwise defines the same logic. UA only EXCLUDES (iOS/Safari); the
   positive signal is canPlayType feature detection. Safe side = false = still. */
var canPlayWebmVideo = window.__mmCanPlayTransparentVideo || (window.__mmCanPlayTransparentVideo = (function () {
  var cached = null;
  return function () {
    if (cached !== null) return cached;
    cached = (function () {
      try {
        if (typeof navigator === 'undefined' || typeof document === 'undefined') return false;
        var ua = navigator.userAgent || '';
        var plat = navigator.platform || '';
        var isIOS = /iPad|iPhone|iPod/.test(ua) || (plat === 'MacIntel' && (navigator.maxTouchPoints || 0) > 1);
        if (isIOS) return false;
        var isSafari = /safari/i.test(ua) && !/chrome|chromium|crios|fxios|android|edg|opr/i.test(ua);
        if (isSafari) return false;
        var probe = document.createElement('video');
        if (!probe || typeof probe.canPlayType !== 'function') return false;
        var ok = function (t) { return t === 'probably' || t === 'maybe'; };
        return ok(probe.canPlayType('video/webm; codecs="vp9"')) || ok(probe.canPlayType('video/webm; codecs="vp8"'));
      } catch (e) {
        return false;
      }
    })();
    return cached;
  };
})());

// =====================================================================
// 1. COLLAB — 白瀬あかり × MY MONSTERS · C-1 symmetry layout
//    Left half: green 10-day  ·  あかり 3D center  ·  pink 30-day
//    Right half: text + lockup + quote + CTAs
// =====================================================================
function CollabSection() {
  // Background concert-scene loop (あかりちゃん飛び出し) — snap back near the end
  // so the loop seam doesn't visibly stall on browsers that pause before re-loop.
  const onCollabBgTimeUpdate = (e) => {
    const v = e.currentTarget;
    if (!v.duration) return;
    if (v.duration - v.currentTime < 0.1) {
      try { v.currentTime = 0; } catch (_) {}
    }
  };
  return (
    <section className="mm-collab" id="collab" data-screen-label="06 Collab">
      {/* Full-bleed background video — sits behind all content (z-index lowest).
          Lavender section gradient stays as the fallback. */}
      <video
        className="mm-collab__bg-video"
        autoPlay
        loop
        muted
        playsInline
        preload="auto"
        aria-hidden="true"
        onTimeUpdate={onCollabBgTimeUpdate}
      >
        <source src="assets/akari-jump-bg.webm" type="video/webm" />
      </video>
      {/* Sticker — pinned to section corner so it doesn't sit on top of the 10-day pkg */}
      <div className="mm-collab__sticker" aria-hidden="true">
        <span>LIMITED</span>
        <span>EDITION</span>
        <span className="mm-collab__sticker-num">№ 001</span>
      </div>

      <div className="mm-collab__inner">
        {/* ---------- Announcement card — over full-bleed あかり pop-out video ---------- */}
        {/* ---------- RIGHT — Text ---------- */}
        <div className="mm-collab__right">
          <h2 className="mm-collab__title">
            <span>限定コラボ<br />パッケージ、</span>
            <span className="mm-collab__title-2">登場。</span>
          </h2>
          <div className="mm-collab__lockup" aria-label="白瀬あかり × MY MONSTERS">
            <span className="mm-collab__partner">白瀬あかり</span>
            <span className="mm-collab__x" aria-hidden="true">×</span>
            <span className="mm-collab__brand">MY MONSTERS</span>
          </div>
          <blockquote className="mm-collab__quote">
            {/* Design not yet revealed — black silhouette of the collab pkg with a ? */}
            <div className="mm-collab__reveal" aria-label="デザイン公開前">
              <img
                className="mm-collab__reveal-img"
                src="assets/cho-akari-30day.png"
                alt=""
                aria-hidden="true"
              />
              <span className="mm-collab__reveal-q" aria-hidden="true">?</span>
            </div>
          </blockquote>
          <div className="mm-collab__actions">
            <a
              className="mm-btn mm-btn--outline"
              href="https://www.tiktok.com/@shiraseakari"
              target="_blank"
              rel="noopener noreferrer"
            >
              FOLLOW @AKARI <span className="mm-btn__chev">↗</span>
            </a>
          </div>
          <p className="mm-collab__footnote">※ SHOP NOW は発売開始後に有効化</p>
        </div>
      </div>
    </section>
  );
}

// =====================================================================
// 2. BRAND STORY — 4 blocks (Brand Kit V2)
//    Block 2: symptom names → euphemism rewrite per BRIEF V2 §6-7
//    Block 3: ハピモン② (商品を抱える) inserted
// =====================================================================
function BrandStoryVideo() {
  return (
    <div className="mm-story__video">
      <video
        autoPlay
        loop
        muted
        playsInline
        preload="metadata"
        aria-hidden="true"
      >
        <source src="assets/brand-story-after-door.webm" type="video/webm" />
      </video>
    </div>
  );
}

function BrandStory() {
  return (
    <section className="mm-story" id="world" data-screen-label="07 Brand Story">
      {/* BLOCK 1 — birth declaration */}
      <div className="mm-story__b1 mm-story__block">
        <h2 className="mm-story__shout">
          <span>WE WERE BORN</span>
          <span>TO EAT YOUR PAIN.</span>
        </h2>
        <p className="mm-story__shout-jp"><span style={{display:'inline-block', whiteSpace:'nowrap'}}>私たちは、君の PAIN を</span><span style={{display:'inline-block', whiteSpace:'nowrap'}}>食べるために生まれた。</span></p>
      </div>

      {/* VIDEO — 扉を開けた後の映像 (full-bleed, 16:9, autoplay muted, audio toggle) */}
      <BrandStoryVideo />

      {/* BLOCK 2 — Monster Land mythos (symptoms → euphemism) */}
      <div className="mm-story__b2 mm-story__block">
        {/* Cast — transparent PNGs flanking + grounding the centered text.
            Decorative only (aria-hidden); soft white halo lifts them off the dark bg. */}
        <img
          className="mm-story__b2-char mm-story__b2-char--left"
          src="assets/oimon-with-pain.png"
          onError={(e)=>{if(e.target.dataset.fb)return void(e.target.style.display='none');e.target.dataset.fb='1';e.target.src='../marketing-site/assets/oimon-with-pain.png';}}
          alt=""
          aria-hidden="true"
        />
        <img
          className="mm-story__b2-char mm-story__b2-char--right"
          src="assets/hapimon-with-pain.png"
          onError={(e)=>{if(e.target.dataset.fb)return void(e.target.style.display='none');e.target.dataset.fb='1';e.target.src='../marketing-site/assets/hapimon-with-pain.png';}}
          alt=""
          aria-hidden="true"
        />
        <img
          className="mm-story__b2-floor"
          src="assets/seepers-with-pain.png"
          onError={(e)=>{if(e.target.dataset.fb)return void(e.target.style.display='none');e.target.dataset.fb='1';e.target.src='../marketing-site/assets/seepers-with-pain.png';}}
          alt=""
          aria-hidden="true"
        />
        <div className="mm-story__col">
          <p className="mm-story__lede-jp">
            人間界の隣に、モンスターランドがある。
          </p>
          <p className="mm-story__body-jp">
            眠れない夜。<br />
            温まらない体。<br />
            理由もなく、重たい朝。
          </p>
          <p className="mm-story__body-jp mm-story__body-jp--em">
            それは全部——<br />
            まだ<span className="mm-story__hl">「食べられていない」</span>だけだ。
          </p>
          <p className="mm-story__body-jp">
            モンスター達は今夜も腹を空かせて、<br />
            あなたのそばで待っている。
          </p>
          <p
            className="mm-story__body-jp mm-story__body-jp--em"
            style={{ fontSize: 'clamp(28px, 2.6vw, 42px)', fontWeight: 900, marginTop: '8px' }}
          >
            さあ、食べてもらおう。
          </p>
        </div>
      </div>

      {/* BLOCK 3 — philosophy + ハピモン② holding package */}
      <div className="mm-story__b3 mm-story__block">
        <div className="mm-story__col mm-story__col--with-art">
          <p className="mm-story__lede-jp">
            モンスター達は、本気でしか PAIN を食べない。
          </p>
          <p className="mm-story__body-jp">
            <span style={{display:'inline-block', whiteSpace:'nowrap'}}>気休めでは、モンスターの</span><span style={{display:'inline-block', whiteSpace:'nowrap'}}>お腹は満たされない。</span><br />
            <span style={{display:'inline-block', whiteSpace:'nowrap'}}>だから、推奨量を超える本格処方。</span>
          </p>

          <div className="mm-story__art" aria-hidden="true">
            <div className="mm-story__art-glow"></div>
            <img src="../marketing-site/assets/hapimon-2.png" onError={(e)=>{if(e.target.dataset.fb)return void(e.target.style.display='none');e.target.dataset.fb='1';e.target.src='assets/hapimon-2.png';}} alt="ハピモン② — C.H.O活 MONSTER を抱える" style={{width:'min(360px, 70vw)', height:'auto', display:'block', filter:'drop-shadow(0 24px 40px rgba(204,0,0,0.35))'}} />
          </div>

          <p className="mm-story__body-jp mm-story__body-jp--em">
            <span className="mm-story__hl-warn"><span style={{display:'inline-block', whiteSpace:'nowrap'}}>かわいい見た目に、</span><span style={{display:'inline-block', whiteSpace:'nowrap'}}><span className="mm-story__hl-emph" style={{fontSize:'45px'}}>騙されるな</span>。</span></span>
          </p>
        </div>
      </div>

      {/* BLOCK 4 — manifesto — full-bleed brand red · text burned into video.
          PC (webm-capable) plays the video; iOS Safari / uncertain cannot decode
          the WebM (would show only the red CSS background), so it gets a still
          PNG of the same burned-in "NO PLACEBO. JUST VIOLENCE." + fire frame. */}
      <div className="mm-story__b4 mm-story__block">
        {canPlayWebmVideo() ? (
          <video
            className="mm-story__manifesto-video"
            autoPlay
            loop
            muted
            playsInline
            preload="auto"
            poster="assets/no-placebo-just-violence.png"
            aria-label="No placebo. Just violence."
          >
            <source src="assets/NO_PLACEBO_JUST_VIOLENCE_final.webm" type="video/webm" />
          </video>
        ) : (
          <img
            className="mm-story__manifesto-video"
            src="assets/no-placebo-just-violence.png"
            alt="No placebo. Just violence."
          />
        )}
      </div>
    </section>
  );
}

Object.assign(window, { CollabSection, BrandStory, BrandStoryVideo });