/* global React, CharMark */
/* PHASE 3b (Brand Kit V2) — JOIN THE LAND.
   Replaces the old "Another World" cracks concept with a bright, Pixar-tone
   "monsters live here" social hub. Each card is a window frame with a
   monster peeking in and a mocked feed inside.

   Per BRIEF V2 §6-8:
   - Row 1: Instagram + TikTok (large cards)  — ハピモン① / オイモン
   - Row 2: Official LINE (medium card)        — シーパーズ右版
   - Row 3: X / YouTube / note (small, COMING SOON)
*/

// ---------- Mocked feed contents (reused from old AnotherWorld, on-tone) ----------
const IG_TILES = [
  { kind: 'photo',  src: 'assets/product-ase-transparent.png', bg: '#CC0000' },
  { kind: 'text',   bg: '#F2B845', color: '#0A0A0A', text: 'EAT\nYOUR\nPAIN.' },
  { kind: 'photo',  src: 'assets/product-cho-transparent.png', bg: '#F5F0EB' },
  { kind: 'text',   bg: '#0A0A0A', color: '#FFFFFF', text: '150,000+\nPAINS\nEATEN.' },
  { kind: 'photo',  src: 'assets/product-cho-akari-collab.png', bg: '#7C3AED' },
  { kind: 'text',   bg: '#CC0000', color: '#FFFFFF', text: '★ AMAZON\nNo. 1\nCAPSAICIN' },
];

const TT_TILES = [
  { bg: '#CC0000', hash: '#オイモン',  cap: 'カプサイシン、暴力的。' },
  { bg: '#7C3AED', hash: '#コラボ予告', cap: '白瀬あかり × CHO' },
  { bg: '#F2B845', hash: '#腸活',      cap: '31種類の菌。' },
  { bg: '#0A0A0A', hash: '#WORLD',     cap: 'NO PLACEBO. JUST VIOLENCE.' },
];

const LINE_MSGS = [
  { side: 'them', text: 'おはよう！今日のモンスターレポート、届いた？' },
  { side: 'me',   text: 'うん、見たよ' },
  { side: 'them', text: '今夜から、シーパーズの新メニュー始まる🌙' },
  { side: 'them', text: '友だち追加で限定クーポン配布中。' },
];

// =====================================================================
// Big window card — Instagram / TikTok
// =====================================================================
function WindowCardBig({ kind, handle, charId, charPhoto, charLabel, url, frameColor }) {
  return (
    <a className={`mm-jtl-card mm-jtl-card--big mm-jtl-card--${kind}`}
       href={url} target="_blank" rel="noopener noreferrer"
       aria-label={`Open ${kind} ${handle} in new tab`}>
      <div className="mm-jtl-card__frame" style={{ '--frame': frameColor }}>
        <div className="mm-jtl-card__frame-inner">
          {/* Window content — feed mock */}
          {kind === 'instagram' ? (
            <div className="mm-jtl-igfeed">
              {IG_TILES.map((t, i) => (
                <div className="mm-jtl-igfeed__tile" key={i} style={{ background: t.bg, color: t.color }}>
                  {t.kind === 'photo'
                    ? <img src={t.src} alt="" />
                    : <pre className="mm-jtl-igfeed__txt">{t.text}</pre>}
                </div>
              ))}
            </div>
          ) : (
            <div className="mm-jtl-ttfeed">
              {TT_TILES.map((t, i) => (
                <div className="mm-jtl-ttfeed__tile" key={i} style={{ background: t.bg }}>
                  <div className="mm-jtl-ttfeed__hash">{t.hash}</div>
                  <div className="mm-jtl-ttfeed__cap">{t.cap}</div>
                  <div className="mm-jtl-ttfeed__play" aria-hidden="true">▶</div>
                </div>
              ))}
            </div>
          )}
        </div>
        {/* Monster peeking from the window edge */}
        <div className={`mm-jtl-card__peek mm-jtl-card__peek--${kind}`} aria-hidden="true">
          {charPhoto
            ? <img src={charPhoto} alt="" className="mm-jtl-card__peek-photo" />
            : <CharMark id={charId} size={170} />}
        </div>
      </div>
      <div className="mm-jtl-card__meta">
        <span className="mm-jtl-card__platform">{kind === 'instagram' ? 'INSTAGRAM' : 'TIKTOK'}</span>
        <span className="mm-jtl-card__handle">{handle}</span>
        <span className="mm-jtl-card__follow">FOLLOW ME <span className="mm-jtl-card__arr">↗</span></span>
      </div>
    </a>
  );
}

// Scattered pop deco for the LINE promo card — random-ish size + rotation.
const PROMO_DECO = [
  { ch: '💬', size: 50, rot: -16, top: '6%',  right: '9%'  },
  { ch: '✨', size: 30, rot: 8,   top: '11%', right: '38%' },
  { ch: '❤️', size: 34, rot: 14,  top: '26%', right: '23%' },
  { ch: '👍', size: 44, rot: -10, top: '44%', right: '7%'  },
  { ch: '🌙', size: 30, rot: 20,  top: '63%', right: '32%' },
  { ch: '🍪', size: 42, rot: -14, bottom: '12%', right: '11%' },
];

// =====================================================================
// Official LINE — 2-column renewal:
//   LEFT  : existing chat-preview window (frame switched to black so it
//           doesn't read green-on-green against the promo)
//   RIGHT : pop LINE-green promo card (halftone dots, big headline,
//           scattered icons, sticker CTA)
// =====================================================================
function WindowCardLine() {
  return (
    <div className="mm-jtl-line">
      {/* LEFT — chat preview (existing wording kept verbatim) */}
      <a className="mm-jtl-card mm-jtl-card--mid mm-jtl-card--line"
         href="https://lin.ee/surYQ1m" target="_blank" rel="noopener noreferrer" aria-label="Add MY MONSTERS official LINE">
        <div className="mm-jtl-card__frame" style={{ '--frame': '#0A0A0A' }}>
          <div className="mm-jtl-card__frame-inner mm-jtl-card__frame-inner--line">
            <div className="mm-jtl-linefeed">
              <div className="mm-jtl-linefeed__header">
                <div className="mm-jtl-linefeed__avatar">M</div>
                <div>
                  <div className="mm-jtl-linefeed__name">MY MONSTERS</div>
                  <div className="mm-jtl-linefeed__sub">公式アカウント</div>
                </div>
              </div>
              {LINE_MSGS.map((m, i) => (
                <div key={i} className={`mm-jtl-bubble mm-jtl-bubble--${m.side}`}>{m.text}</div>
              ))}
            </div>
          </div>
          <div className="mm-jtl-card__peek mm-jtl-card__peek--line" aria-hidden="true">
            <video
              className="mm-jtl-card__peek-photo mm-jtl-card__peek-photo--line mm-jtl-card__peek-video is-blackbg"
              autoPlay
              loop
              muted
              playsInline
              poster="assets/seapaz-right.png"
            >
              <source src="assets/seapaz-right.webm" type="video/webm" />
              <img src="assets/seapaz-right.png" alt="" className="mm-jtl-card__peek-photo mm-jtl-card__peek-photo--line" />
            </video>
          </div>
        </div>
        <div className="mm-jtl-card__meta">
          <span className="mm-jtl-card__platform">OFFICIAL LINE</span>
          <span className="mm-jtl-card__handle">@mymonsters</span>
        </div>
      </a>

      {/* RIGHT — pop promo card */}
      <a className="mm-jtl-promo" href="https://lin.ee/surYQ1m" target="_blank" rel="noopener noreferrer" aria-label="友だち追加 — MY MONSTERS 公式LINE">
        <div className="mm-jtl-promo__dots" aria-hidden="true"></div>
        <div className="mm-jtl-promo__deco" aria-hidden="true">
          {PROMO_DECO.map((d, i) => (
            <span
              key={i}
              style={{
                fontSize: d.size + 'px',
                top: d.top, bottom: d.bottom, left: d.left, right: d.right,
                transform: `rotate(${d.rot}deg)`,
              }}
            >{d.ch}</span>
          ))}
        </div>
        <div className="mm-jtl-promo__body">
          <p className="mm-jtl-promo__label">— OFFICIAL LINE / 公式アカウント</p>
          <h3 className="mm-jtl-promo__title">
            友だち追加で、<br />
            <span className="mm-jtl-promo__hl">限定クーポン</span><br />
            配布中。
          </h3>
          <p className="mm-jtl-promo__sub">Add friend, get exclusive monster reports &amp; coupons.</p>
          <span className="mm-jtl-promo__cta">
            友だち追加 <span className="mm-jtl-promo__cta-arr">→</span>
          </span>
          <span className="mm-jtl-promo__handle">@mymonsters</span>
        </div>
      </a>
    </div>
  );
}

// Official platform marks — wordmarks ARE the brand; use the SVG paths
// verbatim (no simplification). fill="currentColor" so CSS color picks
// the per-platform brand color via the data-platform attribute below.
const SNS_ICONS = {
  X: (
    <svg className="mm-jtl-card__sns-icon" role="img" aria-hidden="true" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
      <path d="M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z" />
    </svg>
  ),
  YOUTUBE: (
    <svg className="mm-jtl-card__sns-icon" role="img" aria-hidden="true" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
      <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
    </svg>
  ),
  NOTE: (
    <svg className="mm-jtl-card__sns-icon" role="img" aria-hidden="true" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
      <path d="M0 .279c4.623 0 10.953-.235 15.498-.117 6.099.156 8.39 2.813 8.468 9.374.077 3.71 0 14.335 0 14.335h-6.598c0-9.296.04-10.83 0-13.759-.078-2.578-.814-3.807-2.795-4.041-2.097-.235-7.975-.04-7.975-.04v17.84H0Z" />
    </svg>
  ),
};

// =====================================================================
// Small placeholder — X / YouTube / note
// =====================================================================
function SmallSoonCard({ label }) {
  return (
    <div className="mm-jtl-card mm-jtl-card--small" data-platform={label}>
      <div className="mm-jtl-card__small-inner">
        {SNS_ICONS[label] || null}
        <div className="mm-jtl-card__small-platform">{label}</div>
        <div className="mm-jtl-card__small-soon">COMING SOON</div>
      </div>
    </div>
  );
}

// =====================================================================
// JOIN THE LAND. section
// =====================================================================
function JoinTheLand() {
  return (
    <section className="mm-jtl" id="anotherworld" data-screen-label="08 Join the Land">
      <header className="mm-jtl__head">
        <h2 className="mm-jtl__title">
          <span>JOIN THE LAND.</span>
        </h2>
        <p className="mm-jtl__sub">モンスター達は、ここに住んでいる。</p>
      </header>

      <div className="mm-jtl__grid">
        <div className="mm-jtl__row mm-jtl__row--big">
          <WindowCardBig
            kind="instagram"
            handle="@mymonsters_hq"
            charId="hapimon"
            charPhoto="assets/hapimon-1.png"
            charLabel="ハピモン"
            url="https://www.instagram.com/mymonsters_hq"
            frameColor="#CC0000"
          />
          <WindowCardBig
            kind="tiktok"
            handle="@mymonlab"
            charId="oimon"
            charPhoto="assets/oimon.png"
            charLabel="オイモン"
            url="https://www.tiktok.com/@mymonlab"
            frameColor="#7C3AED"
          />
        </div>

        <div className="mm-jtl__row mm-jtl__row--mid">
          <WindowCardLine />
        </div>

        <div className="mm-jtl__row mm-jtl__row--small">
          <SmallSoonCard label="X" />
          <SmallSoonCard label="YOUTUBE" />
          <SmallSoonCard label="NOTE" />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { JoinTheLand });