/* tenroin-top/features.jsx — FEATURE 01 店舗グラビア / 02 イベント / 03 学び */

function FeatHead({ no, en, genre, jp, link, onLink, dark }){
  return (
    <div className={'feat-head'+(dark?' is-dark':'')} data-reveal>
      <div className="fh-no">{no}</div>
      <div>
        <div className="fh-en">{en}</div>
        <h2 className="fh-jp">
          {genre
            ? <React.Fragment><span className="fh-genre">{genre}</span><span className="fh-dash">―</span><span className="fh-lead">{jp}</span></React.Fragment>
            : jp}
        </h2>
      </div>
      {link ? <button className="fh-link" onClick={onLink}>{link}</button> : <span/>}
    </div>
  );
}

/* ---------- FEATURE 01 — 4つの天狼院（scrollytelling crossfade） ---------- */
function Stores(){
  const { STORES } = window.MAG;
  const [active,setActive] = useState(0);
  const stepRefs = useRef([]);

  useEffect(()=>{
    let raf=0;
    const compute=()=>{
      raf=0;
      const mid = innerHeight*0.5;
      let best=0, bestDist=Infinity;
      stepRefs.current.forEach((el,i)=>{
        if(!el) return;
        const r = el.getBoundingClientRect();
        const c = r.top + r.height/2;
        const d = Math.abs(c-mid);
        if(d<bestDist){ bestDist=d; best=i; }
      });
      setActive(best);
    };
    const onScroll=()=>{ if(!raf) raf=requestAnimationFrame(compute); };
    compute();
    addEventListener('scroll',onScroll,{passive:true});
    addEventListener('resize',onScroll);
    return ()=>{ removeEventListener('scroll',onScroll); removeEventListener('resize',onScroll); cancelAnimationFrame(raf); };
  },[]);

  return (
    <section className="stores" id="stores">
      <div className="stores-intro">
        <FeatHead no="05" en="Feature — Four Stores" genre="店舗" jp="4つの天狼院をめぐる、本のある旅" dark/>
        <p className="stores-lead" data-reveal>ただの本屋ではない。CAFE & BAR があり、舞台があり、スタジオがあり、劇場がある。全国4つの天狼院は、それぞれにまったく違う夜と昼を持っている。一冊の本をめくるように、この街の天狼院を旅してみよう。</p>
      </div>

      <div className="scrolly">
        <div className="scrolly-media">
          <div className="scrolly-media-inner">
            <div className="scrolly-frame">
              {STORES.map((s,i)=>(
                <div key={s.id} className={'scrolly-img'+(active===i?' is-on':'')}>
                  <image-slot id={'store-'+s.id} class={s.ph} src={R('store-'+s.id, s.img)} shape="rect" placeholder={s.name+' の写真'}></image-slot>
                </div>
              ))}
              <div className="scrolly-imgcap">{STORES[active].cap}</div>
              <div className="scrolly-count">0{active+1} <span style={{opacity:.6}}>/ 04</span></div>
            </div>
          </div>
        </div>

        <div className="scrolly-steps">
          {STORES.map((s,i)=>(
            <div key={s.id} className="scrolly-step" data-i={i} ref={el=>stepRefs.current[i]=el}>
              <div className="scrolly-mob"><image-slot id={'store-m-'+s.id} class={s.ph} src={R('store-'+s.id, s.img)} shape="rect" placeholder={s.name}></image-slot></div>
              <div data-reveal>
                <span className="store-en">{s.en}</span><span className="store-no">0{i+1} / 04</span>
                <h3 className="store-name">{s.name}</h3>
                <div className="store-area">{s.area}</div>
                <div className="store-tags">{s.tags.map(t=><span className="store-tag" key={t}>{t}</span>)}</div>
                <p className="store-essay"><span className="drop">{s.essay.charAt(0)}</span>{s.essay.slice(1)}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- FEATURE 02 — 今月、天狼院で起きること（イベント・ダイジェスト） ---------- */
function Events(){
  return (
    <section className="events section" id="events">
      <div className="wrap">
        <FeatHead no="02" en="Feature — This Month" genre="イベント" jp="今月、天狼院で起きること"
          link="カレンダーを見る ▸" onLink={()=>{ location.href='events.html'; }}/>
        <p className="ev-lead" data-reveal>撮影会も、ゼミも、トークも、読書会も。全国4つの天狼院でひらかれる催しから、近い数件を抜き書きで。日程の全体は、カレンダーでどうぞ。</p>
        <EventsDigest/>
      </div>
    </section>
  );
}

/* ---------- FEATURE 03 — 学びの物語（ライティング・ゼミ / 社会的証明） ---------- */
function Learn(){
  const proof = [
    ['12','年',"続いてきた\u3000開講"],
    ['12,000','名超','学んだ受講生'],
    ['11,000','+',"生まれた\u3000記事"],
    ['2013','—',"はじまりの年"],
  ];
  return (
    <section className="learn" id="learn">
      <div className="learn-bg" data-parallax="0.05"></div>
      <div className="learn-scrim"></div>
      <div className="learn-in section">
        <div className="wrap">
          <FeatHead no="03" en="Feature — Writing Seminar with AI" genre="講座" jp="人生を変えるライティング・ゼミ with AI" dark/>
          <div className="learn-grid">
            <div className="learn-l">
              <div className="learn-eyebrow" data-reveal>A Story of Learning — 受講生の、変化の物語</div>
              <h2 className="learn-h" data-reveal>なぜ、ふつうの教室では<br/>人生は<span className="em">変わらない</span>のか。</h2>
              <p className="learn-p" data-reveal data-d="1">天狼院の看板、<b style={{color:'#fff',fontWeight:600}}>ライティング・ゼミ</b>。「ABCユニット」という独自のメソッドで、伝わる文章の書き方を4ヶ月かけて学ぶ。受講生の記事は次々とバズを起こし、賞を取り、プロの書き手さえも通い続ける。</p>
              <blockquote className="learn-quote" data-reveal data-d="2">「書けるようになったのではない。<br/>“自分の人生を、語れる”ようになったんです。」
                <cite>— 2025年春期 受講生・40代・会社員</cite></blockquote>
              <div className="learn-cta-row" data-reveal data-d="3">
                <button className="btn btn-gold" onClick={()=>{ location.href='/learn/zemi/writing'; }}>この講座で学ぶ →</button>
                <button className="melt-cta light" onClick={()=>{ location.href='/learn/zemi/writing'; }}>受講生の物語を読む<span className="ar">▸</span></button>
              </div>
            </div>
            <div className="learn-r" data-reveal data-d="2">
              <div className="proof">
                {proof.map(([n,u,l])=>(
                  <div className="proof-cell" key={l}>
                    <div className="proof-num">{n}<span className="pn-u">{u}</span></div>
                    <div className="proof-lbl">{l}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { FeatHead, Stores, Events });