/* tenroin-top/gallery.jsx — GALLERY 天狼院クリエイターズ（横スワイプ）+ note 連載 */

/* ---------- GALLERY — 横スワイプ グラビア（能動的にめくる） ---------- */
function Gallery(){
  /* ⚠️横に送る仕掛けは、送る先の器ごと落とした（架名の作家を実績に見せないため）。
       器を戻す日は、この関数の履歴から一緒に戻す。 */
  return (
    <section className="gallery" id="gallery">
      <div className="gallery-bg" data-parallax="0.04"></div>
      <div className="gallery-scrim"></div>
      <div className="gallery-in">
        <div className="gallery-intro">
          <FeatHead no="04" en="Market — CREATORS MARKET" genre="天狼院楽市" jp="クリエイターのための町、ひらく。" dark/>
          {/* 町そのものを見せる。字は楽市LP の正本から写す（新しい約束を作らない）。 */}
          <figure className="mk-key" data-reveal>
            <img src="assets/mk-key.jpg" alt="天狼院楽市 ── クリエイターのための町" loading="lazy"/>
          </figure>
          <p className="gallery-tease" data-reveal>クリエイターのための町「天狼院楽市」。書き手も、写真家も、絵本作家も、映画作家も、つくったものをそのまま並べて売れる場所です。売れたら、作者70%（市30%）。出すものには AIが検印。売れた数が、番付になる — 楽市グランプリ。</p>
          <div className="gallery-note" data-reveal>町の戸口はふたつ ── はじめての方は楽市のご案内へ、会員の方は町へ。</div>
          <div className="mk-gates" data-reveal>
            <a className="mk-gate" href="/creators/market">楽市を見る<span className="ar">▸</span></a>
            <a className="mk-gate is-in" href="/rakuichi">町へ行く<span className="ar">▸</span></a>
          </div>
        </div>

        {/* 架名の作家のファイルは、実績に見えるので出さない（裁定#9）。
             器と部品は残してあるので、実在の作家が並ぶ日に戻せる。 */}
      </div>
    </section>
  );
}

/* ---------- note / 連載・読み物 ---------- */
function Note(){
  const { NOTES } = window.MAG;
  return (
    <section className="note section" id="note">
      <div className="wrap">
        <FeatHead no="05" en="Serialized — note magazine" genre="連載" jp="天狼院の物語を読む"
          link="note マガジンへ ▸" onLink={()=>{ window.open('https://note.com/tenroin','_blank'); }}/>
        <div className="note-grid">
          {NOTES.map((n,i)=>(
            <article className="note-card" key={n.id} data-reveal data-d={String(i+1)} onClick={()=>{ if(n.href) window.open(n.href,'_blank'); }}>
              <div className="note-cover">
                <image-slot id={'note-'+n.id} class={n.ph} shape="rect" placeholder="記事の写真"></image-slot>
                <span className="nc-cat">{n.cat}</span>
              </div>
              <div className="note-b">
                <div className="note-ser">{n.ser}</div>
                <h3 className="note-t">{n.t}</h3>
                <div className="note-m">{n.m}</div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Gallery, Note });