/* tenroin-top/series.jsx — SERIES 読書クラブ / COLUMN BOOKLove / BOOKSHELF 今月の一冊 */

/* ---------- ⑥ 今月の水曜会スケジュール（ライブAPI → フォールバック） ---------- */
function WednesdaySchedule(){
  const [st,setSt] = useState({ status:'loading', weekly:[], special:[], live:false });

  useEffect(()=>{
    /* 2026/9/7＝期限は 15秒・一度だけやり直す・読めなければ架空の控えを出さず「取得できませんでした」 */
    let alive=true;
    let ctrl=null;
    const attempt = (n)=>{
      ctrl = new AbortController();
      const timer = setTimeout(()=>ctrl.abort(), 15000);
      fetch('/api/tenroin/wednesday-club', { signal:ctrl.signal, headers:{ Accept:'application/json' } })
        .then(r=>{ if(!r.ok) throw new Error('bad'); return r.json(); })
        .then(d=>{ if(!alive) return; clearTimeout(timer);
          setSt({ status:'live', weekly:d.weekly||[], special:d.special||[], live:true, updatedAt:d.updatedAt }); })
        .catch(()=>{ if(!alive) return; clearTimeout(timer);
          if(n<1){ setTimeout(()=>{ if(alive) attempt(n+1); }, 1500); return; }
          setSt({ status:'error', weekly:[], special:[], live:false }); });
    };
    attempt(0);
    return ()=>{ alive=false; if(ctrl) ctrl.abort(); };
  },[]);

  const Row = ({ ev, special })=>(
    <a className={'ws-row'+(special?' is-special':'')} href={ev.bookUrl||'#'}
       target="_blank" rel="noopener" onClick={e=>{ if(!ev.bookUrl||ev.bookUrl==='#') e.preventDefault(); }}
       data-cta="single" data-event-type={ev.type||'special'} data-event-date={ev.label}>
      <span className="ws-date"><b>{ev.label}</b><i>{ev.weekday}</i></span>
      <span className={'ws-type'+(special?' is-sp':'')}>{special?'特別':(ev.type||'∞')}</span>
      <span className="ws-main">
        <span className="ws-title">{ev.title}</span>
        <span className="ws-time">OPEN {ev.time}{special?'　·　特別回':''}</span>
      </span>
      <span className="ws-go">この回に出る<i>▸</i></span>
    </a>
  );

  return (
    <div className="cc-sched" data-section="club">
      <div className="ws-head">
        <div className="ws-head-l">
          <div className="ws-kick">今月の水曜会スケジュール</div>
          <div className="ws-series">インフィニティ∞リーディング</div>
        </div>
        <div className={'ws-live'+(st.live?' is-on':'')}>
          <span className="ws-dot"></span>{st.status==='loading'?'更新中':(st.live?'LIVE 更新':'取得できませんでした')}
        </div>
      </div>

      {st.status==='loading' ? (
        <div className="ws-list">
          {[0,1,2,3].map(i=><div className="ws-skel" key={i}><span></span><span></span></div>)}
        </div>
      ) : (
        <div className="ws-list">
          {st.status==='error' && <div className="cal-empty">いま日程を取得できませんでした。最新の日程は下のリンクからご覧ください。</div>}
          {st.status!=='error' && st.weekly.length===0 && st.special.length===0 && <div className="cal-empty">直近の水曜会の日程は、まだ暦に載っていません。</div>}
          {st.weekly.map((ev,i)=><Row key={'w'+i} ev={ev}/>)}
          {st.special.length>0 && (
            <div className="ws-spdiv"><span>特別回</span></div>
          )}
          {st.special.map((ev,i)=><Row key={'s'+i} ev={ev} special/>)}
        </div>
      )}

      <div className="ws-foot">
        <span>前半は、非会員も <b>¥3,850</b> で参加できます。</span>
        <a className="ws-foot-link" href="https://tenro-in.com/event/infinity" target="_blank" rel="noopener">最新の日程はこちら<i>▸</i></a>
      </div>
    </div>
  );
}

/* ---------- 04 読書クラブ — READING LIFE 編集部入口 ---------- */
function Series(){
  return (
    <section className="club section" id="series" data-section="club">
      <div className="wrap">
        <FeatHead no="03" en="Series — Book Club with AI" genre="天狼院読書クラブ with AI" jp="読んで、書いて、世に出る。月額11,000円、全部入り。"/>

        {/* 節の顔。クラブのLPに在る司書の絵を、軽い写しにして置いている。
             ⚠️動く素材は使わない（既定で切る決まりのため）。 */}
        <figure className="club-key" data-reveal>
          <img src="assets/club-key.jpg" alt="天狼院読書クラブ with AI ── AI司書とラウンジ" loading="lazy"/>
          <figcaption>AI司書が待つラウンジ ── 会員だけの、もうひとつの天狼院。</figcaption>
        </figure>

        {/* ① identity ＋ ② offer */}
        <div className="club-id" data-reveal>
          <div className="club-id-l">
            <h3 className="club-h">読書クラブに入る ＝<br/><span className="ch-em">天狼院のぜんぶ</span>を使う。</h3>
            <p className="club-sub">読んで、書いて、世に出る。</p>
            <p className="club-lead">毎週水曜の読書会を中核に、全講座が半額、AI司書のラウンジ、楽市の店。読む人が、書く人・作る人になる場所です。</p>
          </div>
          <div className="club-offer">
            <div className="co-en">MEMBERSHIP</div>
            <div className="co-price"><b>11,000</b><span className="co-cur">円</span><span className="co-per">／ 月</span></div>
            <div className="co-allin">全部入り</div>
            <ul className="co-list">
              <li>毎週水曜の読書会に、出放題</li>
              <li>天狼院の全講座が、半額</li>
              <li>楽市に店を持ち、作品を売れる</li>
            </ul>
          </div>
        </div>

        {/* ③ 主役：水曜会の位置づけ ＋ ⑥ スケジュール（必ず隣接） */}
        <div className="club-core" data-reveal>
          <div className="cc-proof">
            <div className="cc-kick"><span className="cc-mark">主役</span>水曜会は、会費に含まれる。</div>
            <h3 className="cc-h">毎週水曜の読書会に、<br/>出放題。</h3>
            <p className="cc-p">看板読書会〈インフィニティ∞リーディング〉が、会費に含まれる。毎週水曜、何度でも。</p>
            <div className="cc-eq">
              <div className="eq-side eq-win">
                <span className="eq-cap">毎週・月4回ぶん</span>
                <span className="eq-calc">¥3,850 <i>×</i> 4回</span>
                <span className="eq-sum">15,400<small>円相当</small></span>
              </div>
              <div className="eq-gt" aria-label="greater than">＞</div>
              <div className="eq-side eq-fee">
                <span className="eq-cap">会費</span>
                <span className="eq-calc">全部入り</span>
                <span className="eq-sum">11,000<small>円/月</small></span>
              </div>
            </div>
            <p className="cc-foot">—— 出るほどに、得をする。</p>
          </div>
          <WednesdaySchedule/>
        </div>

        {/* ④ 全講座半額 ／ ⑤ 共著者 */}
        <div className="club-duo">
          <div className="club-card" data-reveal>
            <div className="cd-icon">半</div>
            <h4 className="cd-h">天狼院の全講座が、半額。</h4>
            <p className="cd-p">ライティングも、写真も、AIも。学べば学ぶほど、得をする会員価格で受けられる。</p>
            <button className="melt-cta" onClick={()=>smooth('learn')} data-cta="half">半額で、全系を学ぶ<span className="ar">▸</span></button>
          </div>
          <div className="club-card" data-reveal data-d="1">
            <div className="cd-icon">著</div>
            <h4 className="cd-h">あなたの作品が、店に並ぶ。</h4>
            <p className="cd-p">AI司書のラウンジで書き、SEA-SCROLL 対応の講座で鍛え、天狼院楽市に自分の店を持つ。売れたら、作者へ70%。</p>
            <button className="melt-cta" onClick={()=>smooth('gallery')} data-cta="author">楽市を、見る<span className="ar">▸</span></button>
          </div>
        </div>

        {/* 主CTA */}
        <div className="club-join-row" data-reveal>
          <a className="club-join" href="/reading-club" data-cta="join">
            読書クラブに入る ／ 詳しく見る<span className="ar">→</span>
          </a>
          <p className="club-note">＊SEA-SCROLL 対応講座の受講と、楽市への出店の入口は、読書クラブです。</p>
        </div>
      </div>
    </section>
  );
}

/* ---------- COLUMN — BOOKLove（本で出会う） ---------- */
function Column(){
  return (
    <section className="column section" id="column">
      <div className="wrap">
        <FeatHead no="06" en="Column — BOOKLove" genre="結婚相談所" jp="本で出会う、というはじまり"/>
        <div className="col-card" data-reveal>
          <div className="col-media ph-c">
            <image-slot id="booklove" shape="rect" placeholder="本を介して出会う二人"></image-slot>
            <span className="cm-badge">結婚相談所 BOOKLove</span>
          </div>
          <div className="col-body">
            <div className="col-kick">A quiet column</div>
            <h3 className="col-h">「好きな本が同じ」から、<br/>はじまる人生もある。</h3>
            <p className="col-p">プロフィール写真より先に、本棚を見せ合う。BOOKLoveは、天狼院が運営する“本で出会う”結婚相談所です。同じ物語に心を動かされた二人なら、きっと続きも一緒に読んでいける——そんな小さな確信から、この場所をはじめました。</p>
            <div className="col-quiz">
              <span className="cq-t"><b>あなたの一冊で、恋愛を診断。</b><br/>好きな本から読み解く、96キャラクター判定。無料の「恋愛プロファイリング診断」。</span>
              <button className="btn btn-ink" style={{flex:'none'}} onClick={()=>{ location.href='https://sea-publishing.com/api/diagnosis/love'; }}>診断する →</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- BOOKSHELF — 今月の一冊（海の出版社・相互送客） ---------- */
function Bookshelf(){
  return (
    <section className="bookshelf section" id="bookshelf">
      <div className="wrap">
        <FeatHead no="08" en="Bookshelf — Book of the Month" genre="出版" jp="今月の一冊"/>
        <div className="bs-grid">
          <div className="bs-book" data-reveal>
            <div className="bsk">
              <div className="bsk-spine"></div>
              <image-slot id="bom-cover" shape="rect" placeholder="書影"></image-slot>
              <div className="bsk-band"><div className="bb-en">海の出版社</div><div className="bb-t">AIパイロット養成マニュアル</div></div>
            </div>
            <div className="bsk-tag"><b>今月の</b><span>一冊</span></div>
          </div>
          <div className="bs-body" data-reveal data-d="1">
            <div className="bs-kick">Review — 書評</div>
            <h3 className="bs-h">AI時代に、本を読むということ。</h3>
            <div className="bs-meta">『AIパイロット養成マニュアル with AI』／ 海の出版社 ・ ¥4,950（マスターAI利用権つき）</div>
            <p className="bs-review"><span className="lead-q">「本とは、紙ではない。その中に書かれた知識であり、世界である。」</span>——天狼院書店が掲げてきたこの思想を、AIという新しい相棒とともに更新する一冊。書籍と「マスターAI」、学習プラットフォームの体験までがひとつになった、“書籍 with AI”の第一号。</p>
            <p className="bs-review">海の出版社は、天狼院書店がつくる出版社。本を買うと、AIと学びがついてくる——読書のかたちを更新する試みが、ここから始まっている。</p>
            <div className="bs-cta-row">
              <button className="btn btn-ink" onClick={()=>{ location.href='https://sea-publishing.com/products/ai-pilot'; }}>この一冊を読む →</button>
              <a className="melt-cta" href="https://sea-publishing.com">海の出版社へ<span className="ar">▸</span></a>
              <span className="bs-sister">sea-publishing.com</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Series, Column, Bookshelf });