/* Home lower board — image2 style */

const ConceptTeaser = () => {
  const [faceFlip, setFaceFlip] = React.useState(false);
  const [lifeSwitchOn, setLifeSwitchOn] = React.useState(false);
  React.useEffect(()=>{
    let ticking = false;
    const onScroll = () => {
      if(ticking) return;
      ticking = true;
      requestAnimationFrame(()=>{
        setFaceFlip(Math.floor(window.scrollY / 70) % 2 === 1);
        ticking = false;
      });
    };
    window.addEventListener('scroll', onScroll, {passive:true});
    onScroll();
    return()=>window.removeEventListener('scroll', onScroll);
  },[]);

  const tracks = [
    {title:'逸脱 / 言語',sub:'2026 2.21 RELEASE',dur:'',color:'var(--blue)',jacket:'itsudatsu_jacket.png',href:'https://linkco.re/9uGdMzu3?lang=ja'},
    {title:'いただきます',sub:'2025 12.1 RELEASE',dur:'',color:'var(--red)',jacket:'itadakimasu_jacket.jpg',href:'https://linkco.re/veCTGDRe?lang=ja'},
  ];
  const chat = [
    ['kobayashi_face.PNG','小林','哲学トークという名のラジオ番組将来的にやってもいいな'],
    ['yoshinaga_face.PNG','吉永','普通の哲学トークじゃないか'],
    ['kobayashi_face.PNG','小林','毎回ゲスト呼ぶとおもろい'],
    ['yoshinaga_face.PNG','吉永','かなりあり'],
  ];
  return (
    <section style={{padding:'0 var(--page-px) 34px'}}>
      <div style={{
        maxWidth:1240,margin:'0 auto',display:'grid',
        gridTemplateColumns:'minmax(310px,1.1fr) minmax(290px,.92fr) minmax(280px,.9fr)',
        gap:'clamp(22px,3vw,34px)',alignItems:'start',
      }}>
        <div>
          <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',borderBottom:'2px solid var(--border)',paddingBottom:10}}>
            <div className="sticker yellow" style={{fontSize:20}}>NEW RELEASE</div>
            <a href="music.html" style={{fontSize:13,fontWeight:900}}>▶ もっと見る</a>
          </div>
          <div style={{background:'#fff',border:'2px solid var(--border)',borderTop:0,borderRadius:'0 0 8px 8px',overflow:'hidden'}}>
            {tracks.map((t,i)=>(
              <a key={t.title} href={t.href} target="_blank" rel="noopener noreferrer" style={{
                display:'grid',gridTemplateColumns:'76px 1fr 38px',gap:16,alignItems:'center',
                padding:'14px 18px',borderBottom:i<2?'2px solid var(--border)':'none',
              }}>
                <div style={{width:58,height:58,background:t.color,borderRadius:4,border:'2px solid var(--ink)',display:'grid',placeItems:'center',fontSize:26,fontWeight:900,overflow:'hidden'}}>
                  {t.jacket ? <img src={t.jacket} alt={t.title} style={{width:'100%',height:'100%',objectFit:'cover',display:'block'}} /> : t.icon}
                </div>
                <div>
                  <div style={{display:'flex',gap:8,alignItems:'center',flexWrap:'wrap'}}>
                    <span style={{fontSize:18,fontWeight:900}}>{t.title}</span>
                    {i===0&&<span style={{background:'var(--red)',color:'#fff',borderRadius:999,padding:'2px 7px',fontSize:10}}>NEW</span>}
                  </div>
                  {t.dur&&<div style={{fontSize:12,color:'var(--ink-mid)'}}>{t.dur}</div>}
                  <div style={{fontSize:12,color:'var(--ink-mid)',lineHeight:1.55}}>{t.sub}</div>
                </div>
                <span style={{width:30,height:30,border:'3px solid var(--ink)',borderRadius:'50%',display:'grid',placeItems:'center',fontSize:13}}>▶</span>
              </a>
            ))}
          </div>
          <div style={{display:'flex',alignItems:'center',gap:18,marginTop:12}}>
            <div className="stamp" style={{fontSize:15}}>曲作っててえらい</div>
            <a href="music.html" style={{fontWeight:900,color:'var(--blue)'}}>○ 曲一覧へ</a>
          </div>
        </div>

        <div>
          <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',paddingBottom:10}}>
            <div className="sticker red" style={{fontSize:20,border:'none',boxShadow:'none'}}>TTT（Podcast）</div>
            <a href="podcast.html" style={{fontSize:13,fontWeight:900}}>▶ もっと読む</a>
          </div>
          <div style={{background:'#fff',border:'2px dashed var(--red)',borderRadius:8,padding:'22px 22px 18px',position:'relative'}}>
            {chat.map(([icon,name,t],i)=>(
              <div key={i} style={{display:'grid',gridTemplateColumns:'54px 1fr',gap:8,alignItems:'center',marginBottom:12,position:'relative'}}>
                <div style={{width:64,height:64,background:'transparent',overflow:'visible',marginLeft:-12,zIndex:2}}>
                  <img src={icon} alt={name} style={{
                    width:'100%',height:'100%',objectFit:'cover',display:'block',borderRadius:'50%',
                    transform:`scaleX(${faceFlip?-1:1}) translateX(${faceFlip?(i%2?-7:7):(i%2?5:-5)}px) rotate(${faceFlip?(i%2?-9:9):(i%2?7:-7)}deg)`,
                    transition:'transform .22s var(--transition)',
                  }} />
                </div>
                <div style={{background:'#fff',border:'2px solid var(--border)',borderRadius:8,padding:'8px 12px',fontSize:14,lineHeight:1.55}}>{t}</div>
              </div>
            ))}
            <a href="podcast.html" style={{color:'var(--red)',fontWeight:900}}>▷ TTT一覧へ</a>
            <span style={{position:'absolute',right:26,top:'50%',fontSize:28,color:'var(--blue)',fontWeight:900}}>?</span>
          </div>
        </div>

        <div style={{display:'grid',gap:16}}>
          <a href="concept.html" style={{background:'#fff',border:'2px solid var(--yellow)',borderRadius:8,padding:22,position:'relative'}}>
            <div className="sticker yellow" style={{fontSize:18}}>哲学トークとは？</div>
            <p style={{marginTop:14,fontSize:15,lineHeight:1.8}}>友達の人生を、勝手に歌へと昇華しているボランティア団体です（福祉的！）。2025年2月に発足しました。</p>
            <div style={{marginTop:10,color:'var(--blue)',fontWeight:900}}>くわしく見る ▶</div>
          </a>
          <a href="contact.html" className="contact-pop-btn">お仕事・通報はこちら ✉</a>
          <div className="life-switch-loose" aria-live="polite">
            <div className="switch-container tetsu-switch">
              <input
                id="life-switch"
                className="toggle-checkbox"
                type="checkbox"
                checked={lifeSwitchOn}
                onChange={(e)=>setLifeSwitchOn(e.target.checked)}
              />
              <label className="switch" htmlFor="life-switch" aria-label="人生変更スイッチ">
                <span className="toggle"><span className="led"></span></span>
              </label>
            </div>
            {lifeSwitchOn && (
              <div className="life-switch-message">人生そんなに簡単に変わりません</div>
            )}
          </div>
        </div>
      </div>
      <style>{`
        @media(max-width: 980px){
          section div[style*="grid-template-columns: minmax(310px"]{grid-template-columns:1fr!important}
        }
      `}</style>
    </section>
  );
};

const FeaturedTracks = () => null;
const PageLinks = () => null;

Object.assign(window, { ConceptTeaser, FeaturedTracks, PageLinks });