/* tenroin-top/seminars.jsx — FEATURE 03 · THE SYLLABUS
   天狼院ゼミ、年間時間割（巻頭・首席講義つき履修ガイド）
   描画は data.jsx の SEMINARS 単一配列から：
     学部インデックス = SEMINARS.map
     首席講義 hero    = SEMINARS.find(flagship)
     時間割マトリクス  = SEMINARS.filter(!flagship)
*/

function sylScroll(id){
  const el = document.getElementById('syl-'+id) || document.getElementById(id);
  if(el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior:'smooth' });
}

/* ---- count-up for the flagship proof (書のみ全開) ---- */
function useCountUp(ref, value){
  useEffect(()=>{
    const el = ref.current; if(!el) return;
    const m = String(value).match(/^([\d,]+)(.*)$/);
    if(!m){ el.textContent = value; return; }
    const target = parseInt(m[1].replace(/,/g,''),10), suffix = m[2];
    if(matchMedia('(prefers-reduced-motion:reduce)').matches){ el.textContent = value; return; }
    let done = false;
    const io = new IntersectionObserver((ents)=>{
      ents.forEach(e=>{
        if(e.isIntersecting && !done){
          done = true;
          const dur = 1100, t0 = performance.now();
          const tick = (t)=>{
            const p = Math.min(1,(t-t0)/dur), eased = 1-Math.pow(1-p,3);
            const cur = Math.round(target*eased);
            el.textContent = cur.toLocaleString('en-US')+suffix;
            if(p<1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    },{ threshold:.5 });
    io.observe(el);
    return ()=>io.disconnect();
  },[value]);
}

function ProofNum({ n, u, l }){
  const ref = useRef(null);
  useCountUp(ref, n);
  return (
    <div className="proof-cell">
      <div className="proof-num"><span ref={ref}>{n}</span><span className="pn-u">{u}</span></div>
      <div className="proof-lbl">{l}</div>
    </div>
  );
}

/* ===== Block 2＋3 — FLAGSHIP SLIDER（全8学部の旗艦グラビアを巡る） ===== */
/* nav ＝ 学部目録。クリックでその学部の旗艦スライドへ。現在表示中をハイライト */
function FacultyNav({ items, active, onPick }){
  return (
    <div className="fac-index" data-reveal>
      <p className="fac-intro">天狼院は、本を起点にした“人生の大学”。八つの系、ひとつの学校。気になる系を選ぶと、その旗艦講座が誌面にひらきます。</p>
      <div className="fac-rail-head">
        <span className="fac-rail-en">Field Index</span>
        <span className="fac-rail-jp">系統目録 — 8 FIELDS</span>
      </div>
      <ul className="fac-list">
        {items.map((f,i)=>(
          <li key={f.id} className={'fac-row'+(i===active?' is-active':'')+(f.coming?' is-coming':'')}
              aria-current={i===active?'true':undefined}
              onClick={()=>onPick(i)} style={{'--acc':f.accent}}>
            <span className="fac-no">{f.no}</span>
            <span className="fac-glyph">{f.glyph}</span>
            <div className="fac-main">
              <div className="fac-name">{f.name}<span className="fac-en">{f.en}</span></div>
              <div className="fac-meta">{f.indexMeta}{f.coming && <span className="fac-soon">開講準備中</span>}</div>
            </div>
            <span className="fac-arrow">{i===active?'●':'→'}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

/* 各学部の旗艦スライド（共通テンプレート・均等） */
function HeroSlide({ fac }){
  const h = fac.hero;
  const cols = h.proof.length===1 ? 1 : 2;
  return (
    <div className="fslide" key={fac.id} style={{'--acc':fac.accent}}>
      <div className="learn-grid">
        <div className="learn-l">
          <div className="hero-tag"><span className="hero-glyph">{fac.glyph}</span>{fac.name}<span className="hero-en">{fac.en}</span></div>
          <div className="learn-eyebrow">{h.eyebrow}</div>
          <h3 className="learn-h">{h.headline}</h3>
          <p className="learn-p">{h.body}</p>
          {h.quote && (
            <blockquote className="learn-quote">{h.quote.text}<cite>{h.quote.cite}</cite></blockquote>
          )}
          <div className="learn-cta-row">
            {(fac.href||h.coming) && <button className={'melt-cta light is-strong'+(h.coming?' is-soon':'')} onClick={()=>{ if(h.coming) return; if(fac.href){ location.href=fac.href; } }}>
              {h.cta}<span className="ar">{h.arrow}</span>
            </button>}
          </div>
          {/* もう一段先の受け皿へ渡す一行（この系だけが持つ。既定では出ない） */}
          {h.more && <a className="learn-more-go" href={h.more.href}>{h.more.t}<span className="ar">▸</span></a>}
        </div>
        <div className="learn-r">
          <div className="proof" style={{gridTemplateColumns:`repeat(${cols},1fr)`}}>
            {h.proof.map((p,i)=><ProofNum key={i} n={p[0]} u={p[1]} l={p[2]}/>)}
          </div>
          <div className="flagship-price">{h.coming?<b>{h.price}</b>:<><b>{h.price}</b></>}　·　{h.sub}</div>
        </div>
      </div>
    </div>
  );
}

function FlagshipSlider(){
  const { SEMINARS } = window.MAG;
  const n = SEMINARS.length;
  const [active,setActive] = useState(0);
  const [paused,setPaused] = useState(false);

  useEffect(()=>{
    if(paused || matchMedia('(prefers-reduced-motion:reduce)').matches) return;
    const t = setInterval(()=>setActive(a=>(a+1)%n), 6800);
    return ()=>clearInterval(t);
  },[paused, n]);

  const go = (i)=>setActive((i%n+n)%n);
  const fac = SEMINARS[active];

  return (
    <div className="fslider"
         onMouseEnter={()=>setPaused(true)} onMouseLeave={()=>setPaused(false)}
         onFocusCapture={()=>setPaused(true)} onBlurCapture={()=>setPaused(false)}>
      <FacultyNav items={SEMINARS} active={active} onPick={go}/>
      <div className="fslide-stage">
        <HeroSlide fac={fac}/>
        <div className="fslide-controls">
          <button className="fslide-arrow" onClick={()=>go(active-1)} aria-label="前の系">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M15 6l-6 6 6 6"/></svg>
          </button>
          <div className="fslide-dots">
            {SEMINARS.map((f,i)=>(
              <button key={f.id} className={'fslide-dot'+(i===active?' is-on':'')} aria-label={f.name}
                      onClick={()=>go(i)}><span>{f.glyph}</span></button>
            ))}
          </div>
          <button className="fslide-arrow" onClick={()=>go(active+1)} aria-label="次の系">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M9 6l6 6-6 6"/></svg>
          </button>
        </div>
      </div>
    </div>
  );
}

/* ===== Block 5 — SYLLABUS MATRIX（時間割本体・light） ===== */
function SylCard({ cell, accent }){
  const coming = cell.status === 'coming';
  const cls = 'syl-cell'
    + (cell.main ? ' is-main' : '')
    + (coming ? ' is-coming' : '')
    + (cell.status==='free' ? ' is-free' : '')
    + (cell.status==='limited' ? ' is-limited' : '');
  return (
    <div className={cls} style={{'--acc':accent}} onClick={()=>{ if(coming) return; if(cell.href){ location.href=cell.href; } }}>
      <div className="syl-cell-top">
        <span className="syl-code">{cell.code}</span>
        <span className={'syl-tag'+(cell.main?' is-main':'')+(cell.status==='free'?' is-free':'')+(coming?' is-coming':'')}>{cell.tag}</span>
      </div>
      {cell.main && <span className="syl-star">★ 主力</span>}
      <h4 className="syl-name">{cell.name}</h4>
      <p className="syl-hook">{cell.hook}</p>
      <div className="syl-proof">{cell.proof}</div>
      <div className="syl-foot">
        <span className="syl-price">{cell.price}</span>
        <button className={'melt-cta sm'+(coming?' is-soon':'')}>{cell.cta}<span className="ar">{coming?'▸':'→'}</span></button>
      </div>
      {coming && <span className="syl-stamp">来期カリキュラム・準備中</span>}

    </div>
  );
}

/* one stage column for a faculty: 0 = empty 空きコマ (hatch, no copy),
   1+ = stacked 選択科目; 3rd+ folds to the faculty page link */
function StageSlot({ seminars, facName, accent }){
  if(!seminars.length) return <div className="syl-slot is-empty" aria-hidden="true"></div>;
  const MAX = 2;
  const shown = seminars.slice(0, MAX);
  const extra = seminars.length - MAX;
  return (
    <div className="syl-slot">
      {shown.map(c=><SylCard key={c.code} cell={c} accent={accent}/>)}

    </div>
  );
}

/* 創の系だけが持つ帯 ── つくるものの札と、学んだ先の流れ。
   ⚠️札は「つくるもの」＝ジャンル。講座の数ではない（講座は上のコマ）。
   ⚠️流れの繋ぎ先は既にある戸口だけ。新しい住所を作らない。 */
function CraftBand({ fac }){
  return (
    <div className="syl-craft">
      <div className="syl-craft-genres">
        <span className="syl-craft-lab">つくるもの</span>
        {fac.genres.map((g,i)=>(<span className="syl-genre" key={i}>{g}</span>))}
      </div>
      {fac.flow && (
        <ol className="syl-flow">
          {fac.flow.map((s,i)=>(
            <li className="syl-flow-step" key={i}>
              <span className="syl-flow-t">{s.t}</span>
              <span className="syl-flow-d">
                {s.href
                  ? <a className="syl-flow-go" href={s.href}>{s.d}<span className="ar">▸</span></a>
                  : s.d}
              </span>
            </li>
          ))}
        </ol>
      )}
    </div>
  );
}

function SyllabusMatrix(){
  const { SEMINARS, STAGES } = window.MAG;
  const rows = SEMINARS.filter(s=>!s.flagship);
  const [open, setOpen] = useState(rows[0].id); // SP accordion

  return (
    <div className="syl-matrix">
      {/* desktop column headers */}
      <div className="syl-colhead">
        <div className="syl-colhead-corner">
          <span className="sch-en">The Syllabus</span>
          <span className="sch-jp">学びの段階 →</span>
        </div>
        {STAGES.map(s=>(
          <div className="syl-col" key={s.id}>
            <span className="syl-col-jp">{s.jp}</span>
            <span className="syl-col-sub">{s.sub}</span>
          </div>
        ))}
      </div>

      {rows.map(fac=>{
        /* ⚠️alwaysOpen の行は畳まない（常に開いたまま展示する）。
             押しても閉じないので、＋の印も出さない ── 出すと押せる約束に見える。 */
        const isOpen = fac.alwaysOpen || open === fac.id;
        return (
          <div key={fac.id} id={'syl-'+fac.id}
               className={'syl-row'+(fac.coming?' is-coming-row':'')+(isOpen?' is-open':'')+(fac.alwaysOpen?' is-always':'')}
               style={{'--acc':fac.accent}}>
            <button className="syl-rowhead" onClick={()=>{ if(fac.alwaysOpen) return; setOpen(isOpen?null:fac.id); }}>
              <span className="syl-glyph">{fac.glyph}</span>
              <span className="syl-rowname">{fac.name}<span className="syl-rowen">{fac.en}</span></span>
              <span className="syl-rowmeta">{fac.indexMeta}</span>
              <span className="syl-rowtoggle" aria-hidden="true">{fac.alwaysOpen?'':'＋'}</span>
            </button>
            <div className="syl-cells">
              {fac.coming
                ? <div className="syl-slot syl-slot-span"><SylCard cell={fac.cells[0]} accent={fac.accent}/></div>
                : STAGES.map(stage=>(
                    <StageSlot key={stage.id} accent={fac.accent} facName={fac.name.replace('系','')}
                               seminars={fac.cells.filter(c=>c.stage===stage.id)}/>
                  ))}
            </div>
            {fac.genres && <CraftBand fac={fac}/>}
          </div>
        );
      })}
    </div>
  );
}

/* ===== Section 03 root ===== */
function Seminars(){
  return (
    <section className="learn syl-section" id="learn">
      {/* dark half — FeatHead + index + flagship */}
      <div className="syl-dark">
        <div className="learn-bg" data-parallax="0.05"></div>
        <div className="learn-scrim"></div>
        <div className="syl-dark-in">
          <div className="wrap">
            <FeatHead no="01" en="Feature — The Syllabus" genre="講座"
              jp="天狼院ゼミ、年間時間割。── 8つの系、ひとつの学校。" dark/>
            <p className="syl-sub" data-reveal>Course Catalogue — Summer 2026 ／ 8つの系、ひとつの学校。あなたの学びは、どのコマから始まる？</p>
            <FlagshipSlider/>
            <div className="syl-turn" data-reveal>―― 8つの系、ひとつの学校。時間割で、学びの地図を見渡そう。</div>
          </div>
        </div>
      </div>

      {/* light half — the timetable */}
      <div className="syl-light">
        <div className="wrap">
          <div className="syl-light-head" data-reveal>
            <span className="slh-en">The Syllabus — Course Catalogue</span>
            <h3 className="slh-jp">時間割で、系をめぐる。</h3>
            <p className="slh-note">横軸は学びの段階〈入口 → 本講座 → 年間プログラム → 上級・認定〉、縦軸は7つの系。気になったコマから、教室（各ページ）へ進学してください。</p>
          </div>
          <SyllabusMatrix/>
          <div className="syl-cta" data-reveal>
            <p className="syl-cta-line">どの系から始めても、人生は動き出す。</p>
            <div className="syl-cta-row">
              <button className="melt-cta" onClick={()=>smooth('column')}>自分に合う系を診断する<span className="ar">▸</span></button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Seminars });