/* tenroin-top/cover.jsx — COVER 表紙 + CONTENTS 目次 */

function Cover(){
  return (
    <section className="cover is-intro" id="cover">
      <div className="cover-bg" data-parallax="0.06"></div>
      <div className="cover-scrim"></div>
      <div className="cover-vign"></div>
      <div className="cover-in">
        <div className="cover-masthead">
          <img src={R('logoCream','assets/logo-wordmark-cream.png')} alt="天狼院書店 — READING LIFE — TENRO-IN"/>
          <div className="cm-en">READING LIFE BOOKSTORE ・ SINCE 2013 ・ TENRO-IN</div>
        </div>

        <div className="cover-body">
          <span className="cover-tab">巻頭特集</span>
          <p className="cover-theme">{(window.MAG && window.MAG.ISSUE ? window.MAG.ISSUE.theme : '')}</p>
          <h1 className="cover-title">人生を変える、<br/>”本”と出合う場所。</h1>
          <p className="cover-lead">読むだけではない。書く、撮る、語る、出会う。<br/>本を一冊めくるように、この街の天狼院をめぐっていく——めくった先に、あなたの次の物語がある。</p>
        </div>

        <div className="cover-baseline">
          <button className="cover-scroll" onClick={()=>smooth('contents')} aria-label="目次へスクロール">
            <span>SCROLL — 目次へ</span>
            <span className="csl"></span>
          </button>
          <span className="cover-issue">No.{window.MAG.ISSUE.no} ／ {window.MAG.ISSUE.en}</span>
        </div>
      </div>
    </section>
  );
}

function Contents(){
  const { TOC } = window.MAG;
  return (
    <section className="toc section-paper" id="contents">
      <div className="wrap-narrow">
        <div className="toc-head" data-reveal>
          <div className="th-l">
            <div className="th-kick">In This Issue</div>
            <div className="th-en">Contents</div>
          </div>
          <div className="th-jp">目次</div>
        </div>
        <p className="toc-issue-note" data-reveal>{window.MAG.ISSUE.ja}「{window.MAG.ISSUE.theme}」 — 全国4店舗のグラビアから、誌面で発表されるクリエイターズの作品まで。</p>

        <ol className="toc-list">
          {TOC.map((t,i)=>(
            <li key={t.no} className="toc-item" data-reveal data-d={String((i%4)+1)} onClick={()=>smooth(t.target)}>
              <span className="toc-no">{t.no}<span className="tn-pg">{t.pg}</span></span>
              <div className="toc-main">
                <div className="toc-cat">{t.cat}</div>
                <h3 className="toc-title"><span className="toc-genre">{t.label}</span><span className="toc-dash">―</span><span className="toc-lead-in">{t.t}</span></h3>
                <div className="toc-by">{t.by}</div>
              </div>
              <span className="toc-arrow">→</span>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

Object.assign(window, { Cover, Contents });