/* tenroin-top/top-2027.jsx — 13周年の帯と、FEATURE「2027、新しい講座。」
   （CTO 2026/9/20 1:46・代表「様々な講座ができたので新サイトのトップページに紐づけが必要」）

   ⚠️Babel がそのまま読む面なので、ビルドは要らない。直したら index.html の ?v= を上げる。
   ⚠️字と絵は各 LP の正本から写した（data.jsx の NEW2027／ANNIV13）。**額は書かない**（LP の口が正）。
   ⚠️意匠は既存のトップの作法に合わせる（FeatHead・feat-head などは features.jsx の器）。 */

/* 13周年の帯 ── ヒーローの直下に一本。会期を過ぎたら面が自分で畳む（刻だけを見る）。 */
function Anniv13Bar(){
  const { ANNIV13 } = window.MAG;
  if(!ANNIV13) return null;
  const end = new Date(ANNIV13.until).getTime();
  if(!isNaN(end) && Date.now() > end) return null;   /* 会期が終わったら出さない */
  /* 2026/9/20 代表「帯が窮屈」＝札（横長のカード・絵つき）にして新講座の節の頭に置く */
  return (
    <a className="a13card" href={ANNIV13.href} data-reveal>
      <span className="a13-media"><img src="assets/13th-hero-04.jpg" alt="" loading="lazy" /></span>
      <span className="a13-body">
        <span className="a13-eb"><i className="n27-kind">お知らせ</i>13th Anniversary ／ 9月19日–9月30日</span>
        <b className="a13-t">{ANNIV13.text.split(' ／ ')[0]}</b>
        <span className="a13-s">{ANNIV13.sub}</span>
        <span className="a13-c">{ANNIV13.cta} →</span>
      </span>
    </a>
  );
}

/* FEATURE — 2027、新しい講座。 */
function New2027(){
  const { NEW2027 } = window.MAG;
  if(!NEW2027 || !NEW2027.length) return null;
  return (
    <section className="feat n27 section" id="new2027">
      <div className="wrap">
        <FeatHead no="00" en="NEWS" genre="ニュース" jp="いま、天狼院で起きていること。" />
        <Anniv13Bar/>
        <p className="n27-lead" data-reveal>新しい講座、催し、お知らせ。天狼院のいまを、ここに集めます。2027年に向けて、講座がまとめて増えました。</p>
        <div className="n27-grid">
          {NEW2027.map(function(c,i){
            return (
              <a className="n27-card" href={c.href} key={i} data-reveal data-d={String(i%3)}>
                <span className="n27-media"><img src={c.img} alt="" loading="lazy" /></span>
                <span className="n27-body">
                  <span className="n27-g"><i className="n27-kind">{c.kind||"新講座"}</i>{c.g}</span>
                  <span className="n27-when">{c.when}</span>
                  <b className="n27-name">{c.name}</b>
                  <span className="n27-copy">{c.copy}</span>
                  <span className="n27-go">くわしく見る →</span>
                </span>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}