/* 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;

// =====================================================================
// 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">
          <p className="mm-collab__eyebrow">— COLLAB / 04 · 期間限定</p>
          <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>
            <footer className="mm-collab__quote-foot">— 白瀬あかり</footer>
          </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">私たちは、君の PAIN を食べるために生まれた。</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)=>{e.target.src='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)=>{e.target.src='assets/hapimon-with-pain.png';}}
          alt=""
          aria-hidden="true"
        />
        <img
          className="mm-story__b2-floor"
          src="assets/seepers-with-pain.png"
          onError={(e)=>{e.target.src='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">
            気休めでは、モンスターのお腹は満たされない。<br />
            だから、推奨量を超える本格処方。
          </p>

          <div className="mm-story__art" aria-hidden="true">
            <div className="mm-story__art-glow"></div>
            <img src="assets/hapimon-2.png" onError={(e)=>{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>
          </p>
        </div>
      </div>

      {/* BLOCK 4 — manifesto — full-bleed brand red · text burned into video */}
      <div className="mm-story__b4 mm-story__block">
        <video
          className="mm-story__manifesto-video"
          autoPlay
          loop
          muted
          playsInline
          preload="auto"
          aria-label="No placebo. Just violence."
        >
          <source src="assets/NO_PLACEBO_JUST_VIOLENCE_final.webm" type="video/webm" />
        </video>
      </div>
    </section>
  );
}

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