// MUSIC-PENDRAMA — section components

const { useState, useEffect } = React;

// Latest feature block
function LatestFeature({ data }) {
  return (
    <section className="section" id="latest">
      <div className="section-head">
        <h2>LATEST RELEASE</h2>
        <span className="kr-tag">최신 발매</span>
        <span className="play-all"><span className="tri">▶</span> 재생</span>
      </div>

      <div className="latest">
        <div className="v-wrap">
          <VideoThumbPlaceholder title={data.title + ' — M/V'} group={data.group} genre="wuxia" variant="mv" cover={data.cover} />
          {/* duration */}
          <div style={{position:'absolute', right:10, bottom:10, background:'rgba(0,0,0,.85)', color:'#fff', padding:'3px 6px', borderRadius:3, fontSize:11, fontFamily:'JetBrains Mono, monospace'}}>
            {data.duration}
          </div>
        </div>
        <div className="meta">
          <span className="tag">{data.tag}</span>
          <h3>{data.title}</h3>
          <div className="kr-sub">{data.kr}</div>
          <div className="row">
            {data.chips.map(c => <span className="chip" key={c}>{c}</span>)}
            <span className="dot" style={{width:3, height:3, background:'#555', borderRadius:'50%'}}/>
            <span>by {data.group}</span>
          </div>
          <p>{data.desc}</p>
        </div>
      </div>
    </section>
  );
}

// Albums (발표곡)
function AlbumsStrip({ albums, titles, showGenre }) {
  return (
    <section className="section" id="albums">
      <div className="section-head">
        <h2>발표곡 / ALBUMS</h2>
        <span className="kr-tag">OST Discography</span>
        <span className="more">모두 보기 →</span>
      </div>
      <div className="albums">
        {albums.map((a) => {
          const g = GENRES[a.genre] || {};
          const ms = MUSIC_STYLES[a.style_tag] || {};
          const origIdx = ALBUMS.indexOf(a);
          const editedTitle = titles[origIdx] || a.id;
          return (
            <div className="album" key={a.id}>
              <div className="cover-wrap">
                <AlbumJacket album={a} title={editedTitle} />
                <span className="count">{a.tracks}곡</span>
              </div>
              <div className="meta">
                <div className="t" style={{textTransform:'uppercase'}}>{editedTitle}</div>
                <div className="s">{a.kr} · MUSIC-PENDRAMA · 앨범</div>
                <div className="s2" style={{marginTop:2, fontSize:11}}>{a.novel}{a.novel !== 'Coming Soon' ? ` · ${a.novelGenre}` : ''}</div>
                {a.platform && PLATFORMS[a.platform] && (
                  <a className="read-chip" href={a.readUrl} target="_blank" rel="noopener" title={`《${a.novel}》 읽으러 가기 — ${PLATFORMS[a.platform].name}`}>
                    <span className="read-chip-cover">
                      {a.cover ? <img src={a.cover} alt="" /> : <span className="ph" style={{background:PLATFORMS[a.platform].color}}/>}
                    </span>
                    <span className="read-chip-text">
                      <span className="read-chip-label">웹소설 읽기 →</span>
                      <span className="read-chip-platform" style={{color: PLATFORMS[a.platform].color}}>
                        {PLATFORMS[a.platform].name}
                      </span>
                    </span>
                  </a>
                )}
                {showGenre && (
                  <div style={{marginTop:6, display:'flex', gap:6, flexWrap:'wrap'}}>
                    <span className="genre-label-chip" style={{color: g.color, marginTop:0}}>● {g.en}</span>
                    {ms.en && <span className="style-chip">{ms.en}</span>}
                  </div>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

// Genre playlists (plays like BLACKPINK's lists but themed)
function GenrePlaylists({ showGenre }) {
  const keys = ['wuxia', 'modern', 'fantasy', 'bl'];
  return (
    <section className="section" id="playlists">
      <div className="section-head">
        <h2>장르 플레이리스트</h2>
        <span className="kr-tag">By Genre</span>
        <span className="more">모두 보기 →</span>
      </div>
      <div className="section-sub">웹소설 장르별로 모은 OST 큐레이션. 버츄얼 아이돌 유닛이 장르를 대표합니다.</div>
      <div className="videos">
        {keys.map(k => {
          const g = GENRES[k];
          const group = GROUPS.find(gr => gr.genre === k);
          if (!group || !g) return null;
          const trackCounts = { wuxia:'14곡', modern:'11곡', fantasy:'9곡', bl:'7곡' };
          return (
            <div className="video" key={k}>
              <div className="thumb">
                <GroupCover group={group} />
                <div className="dur">{trackCounts[k] || '6곡'}</div>
                <div className="label-tl">{g.en} · 플레이리스트</div>
              </div>
              <div className="title">{g.kr} 장르 OST 컬렉션</div>
              <div className="ch">{group.en} · {group.kr}</div>
              <div className="stats">MUSIC-PENDRAMA · 재생목록</div>
              {showGenre && <span className="genre" style={{color: g.color}}>● {g.en}</span>}
            </div>
          );
        })}
      </div>
    </section>
  );
}

// MV strip
function VideosStrip({ title, krTag, items, variant='mv', showGenre }) {
  const id = variant === 'lyric' ? 'lyric' : 'mv';
  return (
    <section className="section" id={id}>
      <div className="section-head">
        <h2>{title}</h2>
        <span className="kr-tag">{krTag}</span>
        <span className="play-all"><span className="tri">▶</span> 모두 재생</span>
        <span className="more">모두 보기 →</span>
      </div>
      <div className="videos">
        {items.map((v, i) => {
          const g = GENRES[v.genre] || {};
          const ms = MUSIC_STYLES[v.style_tag] || {};
          return (
            <div className="video" key={i}>
              <div className="thumb">
                <VideoThumbPlaceholder title={v.t} group={v.group} genre={v.genre} variant={variant} cover={v.cover} />
                <div className="dur">{v.dur}</div>
                <div className="label-tl">{v.tag}</div>
              </div>
              <div className="title">{v.t}</div>
              <div className="ch">{v.group} · MUSIC-PENDRAMA</div>
              <div className="stats">{v.views} · 4주 전</div>
              {showGenre && (
                <div style={{marginTop:4, display:'flex', gap:6, flexWrap:'wrap'}}>
                  <span className="genre" style={{color: g.color}}>● {g.en}</span>
                  {ms.en && <span className="style-chip">{ms.en}</span>}
                </div>
              )}
            </div>
          );
        })}
      </div>
    </section>
  );
}

// Virtual idol groups section
function GroupsSection({ showGenre }) {
  return (
    <section className="section" id="groups">
      <div className="section-head">
        <h2>버츄얼 아이돌</h2>
        <span className="kr-tag">VIRTUAL UNITS</span>
        <span className="more">모두 보기 →</span>
      </div>
      <div className="section-sub">장르마다 데뷔하는 버츄얼 아이돌 그룹. 웹소설 일러스트에서 추출된 가상의 아티스트들이 OST를 부릅니다.</div>
      <div className="groups">
        {GROUPS.slice(0,4).map(g => {
          const gm = GENRES[g.genre];
          return (
            <div className="group" key={g.id}>
              <div className="g-cover"><GroupCover group={g} /></div>
              <div className="g-meta">
                <div className="name">{g.en}</div>
                <div className="kr">{g.kr} · {g.tag}</div>
                <div className="desc">{g.desc}</div>
                <div className="members">
                  {g.members.map(m => <span className="m" key={m}>{m}</span>)}
                </div>
                {showGenre && (
                  <div style={{marginTop:10, display:'flex', gap:6, flexWrap:'wrap'}}>
                    <span className="genre-label-chip" style={{color: gm.color, marginTop:0}}>● {gm.en} · {gm.kr}</span>
                    {(g.styles||[]).map(s => {
                      const ms = MUSIC_STYLES[s];
                      return ms ? <span className="style-chip" key={s}>{ms.en}</span> : null;
                    })}
                  </div>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

// Shorts
function ShortsStrip({ showGenre }) {
  return (
    <section className="section" id="shorts">
      <div className="section-head">
        <h2>Shorts</h2>
        <span className="kr-tag">하이라이트</span>
        <span className="more">모두 보기 →</span>
      </div>
      <div className="shorts">
        {SHORTS_LIST.map((s, i) => {
          const g = GENRES[s.genre] || {};
          return (
            <div className="short" key={i}>
              <div className="box">
                <ShortThumbPlaceholder title={s.t} group={s.group} genre={s.genre} cover={s.cover} />
              </div>
              <div className="t">{s.t}</div>
              <div className="views">{s.views}</div>
              {showGenre && <span className="genre-label-chip" style={{color: g.color, fontSize:9}}>● {g.en}</span>}
            </div>
          );
        })}
      </div>
    </section>
  );
}

// Banner
function Banner({ copy, krSub }) {
  return (
    <div className="channel-banner">
      <div className="bg"/>
      <div className="rule top"/>
      <div className="rule mid"/>
      <div className="rule bot"/>
      <div className="corner tl">MUSIC · PENDRAMA</div>
      <div className="corner tr">Vol. 01 — 2026</div>
      <div className="corner bl">Original Soundtrack · 웹소설 OST</div>
      <div className="corner br">@MUSIC-PENDRAMA</div>
      <div className="brandmark">
        <img src="assets/logo-horizontal.jpg" alt="PENDRAMA" />
      </div>
      <div className="hero">
        <div className="kr">{krSub}</div>
        <div className="title">{copy}</div>
      </div>
    </div>
  );
}

// Profile row
function ProfileRow() {
  return (
    <div className="profile-row">
      <div className="avatar-big" style={{background:'#fff', padding:14, overflow:'hidden'}}>
        <img src="assets/logo-vertical.jpg" alt="PENDRAMA" style={{width:'100%', height:'100%', objectFit:'contain', display:'block'}}/>
      </div>
      <div>
        <h1>MUSIC-PENDRAMA <span className="verified" title="Official Artist">✓</span></h1>
        <div className="handle-line">
          <span>@MUSIC-PENDRAMA</span>
          <span className="dot"></span>
          <span>구독자 —</span>
          <span className="dot"></span>
          <span>동영상 {MV_LIST.length + LYRIC_LIST.length + SHORTS_LIST.length}개</span>
        </div>
        <div className="bio">
          펜드라마(Pendrama) 웹소설 공식 OST 채널. 각 작품의 세계관에서 태어난 <b>버츄얼 아이돌</b>이 부르는 오리지널 사운드트랙.
          무협 · 현대판타지 · 헌터 · 로맨스 · 대체역사 · BL 장르의 OST를 모두 만나보세요.
          <span className="more"> ...더보기</span>
        </div>
        <div className="links">pendrama.com · 외 링크 3개</div>
        <div className="actions">
          <button className="btn btn-primary">구독</button>
          <button className="btn btn-ghost">⌕ 가입</button>
          <button className="btn btn-ghost">⋯</button>
        </div>
      </div>
    </div>
  );
}

function Tabs() {
  const items = ['홈', '동영상', 'Shorts', '발표곡', '재생목록', '커뮤니티'];
  return (
    <div className="yt-tabs">
      {items.map((t, i) => <div key={t} className={'tab' + (i===0 ? ' active' : '')}>{t}</div>)}
      <div className="tab" style={{marginLeft:'auto'}}>⌕</div>
    </div>
  );
}

function StreamingRow() {
  return (
    <section className="streaming">
      <div>
        <div className="label">Coming Soon · 스트리밍</div>
        <h3>Listen everywhere OSTs play.</h3>
        <div className="kr">유튜브 외 주요 음원 플랫폼에서도 MUSIC-PENDRAMA OST를 만나보실 수 있습니다.</div>
      </div>
      <div className="platforms">
        <span className="p"><span className="ic">S</span>Spotify <span className="dt">· AVAILABLE</span></span>
        <span className="p"><span className="ic" style={{background:'#fa233b'}}>A</span>Apple Music <span className="dt">· AVAILABLE</span></span>
        <span className="p soon"><span className="ic" style={{background:'#1dd05d'}}>M</span>Melon <span className="dt">· SOON</span></span>
        <span className="p soon"><span className="ic" style={{background:'#ffcc00', color:'#000'}}>Y</span>YouTube Music <span className="dt">· SOON</span></span>
      </div>
    </section>
  );
}

// Sponsor / Partnerships / Promo board — built into the page
function SponsorBoard() {
  return (
    <section className="sponsor-board" id="partnerships">
      <div className="sb-head">
        <div>
          <div className="sb-eyebrow">PARTNERSHIPS · 광고 / 협찬 / 홍보</div>
          <h3>Brand &amp; Studio Partnerships</h3>
          <p>웹소설 OST 채널은 장르별 타겟 시청자를 보유합니다. 영상 인트로 / 미드롤 / 엔딩 카드, 가사 영상 코멘터리, 채널 배너 등 다양한 슬롯을 통해 브랜드와 작품을 함께 노출할 수 있습니다.</p>
        </div>
        <a className="sb-cta" href="mailto:partner@pendrama.com">
          <span>Partner Inquiry</span>
          <span className="sb-cta-arrow">→</span>
        </a>
      </div>

      <div className="sb-grid">
        <div className="sb-slot">
          <div className="sb-slot-tag">SLOT · 01</div>
          <div className="sb-slot-name">M/V Pre-roll</div>
          <div className="sb-slot-desc">신규 OST 영상 시작 5–10초.<br/>브랜드 풀스크린 카드 + 음성 멘션.</div>
          <div className="sb-slot-meta">avg. 8K – 25K views / 1주</div>
        </div>
        <div className="sb-slot featured">
          <div className="sb-slot-tag">SLOT · 02</div>
          <div className="sb-slot-name">Lyric Video End-card</div>
          <div className="sb-slot-desc">가사 영상 마지막 10초.<br/>로고 + 카피 + 클릭 가능한 카드 표시.</div>
          <div className="sb-slot-meta">CTR-friendly · 목적형 광고</div>
          <div className="sb-slot-pop">RECOMMENDED</div>
        </div>
        <div className="sb-slot">
          <div className="sb-slot-tag">SLOT · 03</div>
          <div className="sb-slot-name">Channel Banner Co-brand</div>
          <div className="sb-slot-desc">홈 배너 코너 영역 노출.<br/>월간 단위로 운영, 4주 고정.</div>
          <div className="sb-slot-meta">always-on · 홈 진입 100%</div>
        </div>
        <div className="sb-slot">
          <div className="sb-slot-tag">SLOT · 04</div>
          <div className="sb-slot-name">Original OST 협업</div>
          <div className="sb-slot-desc">브랜드/작품과 공동 제작 OST.<br/>영상 + 음원 + SNS 패키지 포함.</div>
          <div className="sb-slot-meta">맞춤 견적</div>
        </div>
      </div>

      <div className="sb-logos">
        <div className="sb-logos-label">As featured with</div>
        <div className="sb-logos-row">
          <div className="sb-logo-ph">YOUR LOGO</div>
          <div className="sb-logo-ph">YOUR LOGO</div>
          <div className="sb-logo-ph">YOUR LOGO</div>
          <div className="sb-logo-ph">YOUR LOGO</div>
          <div className="sb-logo-ph">YOUR LOGO</div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { LatestFeature, AlbumsStrip, GenrePlaylists, VideosStrip, GroupsSection, ShortsStrip, Banner, ProfileRow, Tabs, StreamingRow, SponsorBoard });