// page-home.jsx — ホームページ（A案）

(function() {
  const SLIDES_HOME = [
    'assets/concert2025-yu6-stage1.jpg',
    'assets/concert2025-yu6-stage4.jpg',
  ];

  function Slideshow() {
    const [i, setI] = React.useState(0);
    React.useEffect(() => {
      const t = setInterval(() => setI(p => (p + 1) % SLIDES_HOME.length), 4500);
      return () => clearInterval(t);
    }, []);
    return (
      <div style={{position:'relative', width:'100%', height:'100%', overflow:'hidden', background:'#1a1410'}}>
        {SLIDES_HOME.map((src, idx) => (
          <div key={idx} style={{
            position:'absolute', inset:0,
            backgroundImage:`url(${src})`,
            backgroundSize:'cover',
            backgroundPosition:'center 15%',
            opacity: i===idx ? 1 : 0,
            transition:'opacity 1.2s ease',
          }}/>
        ))}
        <div style={{position:'absolute', inset:0, background:'rgba(20,14,10,.42)'}}/>
        <div style={{position:'absolute', inset:0, background:'linear-gradient(180deg, rgba(20,14,10,.35) 0%, rgba(20,14,10,.1) 35%, rgba(20,14,10,.1) 60%, rgba(20,14,10,.55) 100%)'}}/>
        <div style={{position:'absolute', bottom:20, left:'50%', transform:'translateX(-50%)', display:'flex', gap:8}}>
          {SLIDES_HOME.map((_, idx) => (
            <div key={idx} style={{
              width: i===idx ? 28 : 8, height:3,
              background: i===idx ? '#fff' : 'rgba(255,255,255,.5)',
              transition:'all .3s', borderRadius:2,
            }}/>
          ))}
        </div>
      </div>
    );
  }

  window.PageHome = function PageHome({ mobile, onNav }) {
    const T = window.A_TOKENS;
    const upcoming = window.A_DATA_UPCOMING[0];
    const isM = mobile;
    return (
      <>
        {/* Hero */}
        <section style={{position:'relative', width:'100%', height: isM ? 420 : 700}}>
          <Slideshow/>
          <div style={{
            position:'absolute', inset:0,
            display:'flex', alignItems:'center', justifyContent:'flex-start',
            flexDirection:'column', color:'#fff', textAlign:'center',
            paddingTop: isM ? 52 : 90,
            paddingLeft: isM ? 24 : 40,
            paddingRight: isM ? 24 : 40,
          }}>
            <div style={{
              fontFamily: T.fontSerifEn, fontStyle:'italic',
              fontSize: isM ? 13 : 18, letterSpacing:'.25em',
              opacity:.85, marginBottom: isM ? 10 : 16,
              textShadow:'0 1px 8px rgba(0,0,0,.7), 0 2px 24px rgba(0,0,0,.5)',
            }}>— A resonating life, carried on the wings of song. —</div>
            <h1 style={{
              fontFamily: T.fontSerif, fontWeight:500,
              fontSize: isM ? 28 : 58,
              letterSpacing: isM ? '.08em' : '.15em',
              margin:0, lineHeight:1.4, whiteSpace:'nowrap',
              textShadow:'0 2px 12px rgba(0,0,0,.8), 0 4px 32px rgba(0,0,0,.5)',
            }}>響きあう人生、歌声にのせて</h1>
            <div style={{width: isM ? 50 : 80, height:1, background: T.gold, margin: isM ? '16px 0' : '26px 0'}}/>
            <div style={{
              fontFamily: T.fontSerif, fontSize: isM ? 12 : 16,
              letterSpacing:'.2em', opacity:.9,
              textShadow:'0 1px 8px rgba(0,0,0,.7), 0 2px 20px rgba(0,0,0,.5)',
            }}>わたしたちは神戸で活動する混声合唱団です</div>
          </div>
        </section>

        {/* Intro */}
        <section style={{padding: isM ? '50px 24px' : '90px 60px', textAlign:'center'}}>
          <div style={{
            fontFamily: T.fontSerifEn, fontStyle:'italic',
            fontSize:13, letterSpacing:'.3em',
            color: T.gold, marginBottom:14,
          }}>ABOUT US</div>
          <h2 style={{
            fontFamily: T.fontSerif, fontWeight:500,
            fontSize: isM ? 24 : 36,
            letterSpacing:'.12em',
            margin:'0 0 8px', color: T.wine,
          }}>混声合唱団ハーモニーゆう　のこと</h2>
          <div style={{width:40, height:1, background: T.gold, margin:'24px auto 36px'}}/>
          <p style={{
            maxWidth:720, margin:'0 auto',
            fontSize: isM ? 15 : 18, lineHeight:2.1,
            color: T.inkSoft, fontFamily: T.fontSerif,
            textAlign: 'left',
          }}>
            ハーモニーゆうは2012年に設立された、神戸市内を中心に活動する
            主にシニア世代で構成された混声合唱団です。<br/>
            創立以来、地域の各種団体の演奏会等に積極的に出演する他、
            「全国シルバー合唱コンクール」や「こうべシルバー合唱フェスティバル」
            などにも出場しています。<br/>
            また、日頃の練習の成果を発表する機会として隔年に定期演奏会を開催しています。
          </p>
          <div style={{marginTop: isM ? 32 : 48}}>
            <a href="#" onClick={(e) => { e.preventDefault(); onNav('recruit'); }} style={{
              display:'inline-block', padding: isM ? '14px 32px' : '16px 44px',
              background: T.wine, color:'#fff', textDecoration:'none',
              fontFamily: T.fontSerif, fontSize: isM ? 14 : 16,
              letterSpacing:'.15em', border:`1px solid ${T.wine}`, position:'relative',
            }}>
              <span style={{position:'absolute', inset:4, border:`1px solid rgba(255,255,255,.3)`, pointerEvents:'none'}}/>
              一緒に歌う仲間を募集しています
            </a>
          </div>
        </section>

        {/* News + Next concert */}
        <section style={{
          background: T.bgAlt, padding: isM ? '50px 24px' : '80px 60px',
          borderTop:`1px solid ${T.rule}`, borderBottom:`1px solid ${T.rule}`,
        }}>
          <div style={{
            display:'grid',
            gridTemplateColumns: isM ? '1fr' : '1fr 1fr',
            gap: isM ? 36 : 60, maxWidth:1100, margin:'0 auto',
          }}>
            <div>
              <div style={{display:'flex', alignItems:'baseline', gap:14, marginBottom:24}}>
                <h3 style={{
                  fontFamily: T.fontSerif, fontSize: isM ? 22 : 28,
                  fontWeight:500, margin:0, color: T.wine,
                }}>お知らせ</h3>
                <span style={{
                  fontFamily: T.fontSerifEn, fontStyle:'italic',
                  fontSize:14, color: T.gold, letterSpacing:'.2em',
                }}>NEWS</span>
              </div>
              {window.A_DATA_NEWS.slice(0, 5).map((n, i) => (
                <div key={i} style={{
                  padding:'18px 0',
                  borderBottom: `1px dashed ${T.rule}`,
                }}>
                  <div style={{fontSize:12, color: T.gold, fontFamily: T.fontSerifEn, letterSpacing:'.1em', marginBottom:4}}>
                    {n.date}
                  </div>
                  <div style={{
                    fontFamily: T.fontSerif, fontSize: isM ? 15 : 16, fontWeight:500,
                    color: T.ink,
                  }}>{n.title}</div>
                </div>
              ))}
              <div style={{
                marginTop:20, padding:'14px 16px',
                background: T.bg, border:`1px solid ${T.rule}`,
                borderLeft:`3px solid ${T.wine}`,
              }}>
                <div style={{
                  fontFamily: T.fontSerif, fontSize: isM ? 14 : 15,
                  fontWeight:600, color: T.wine, marginBottom:6,
                }}>ホームページをリニューアルしました。</div>
                <a href="https://harmonyyu.jimdofree.com/" target="_blank" rel="noopener"
                  style={{ fontFamily: T.fontSerif, fontSize:14, color: T.inkSoft, textDecoration:'none' }}
                >従来のホームページはこちら →</a>
              </div>
              <div style={{marginTop:16}}>
                <a href="#" onClick={(e) => { e.preventDefault(); onNav('concerts'); }} style={{
                  fontFamily: T.fontSerif, fontSize:14, color: T.wine, textDecoration:'none',
                }}>演奏会の記録をすべて見る →</a>
              </div>
            </div>

            <div style={{
              background: T.bg, padding: isM ? 28 : 36,
              border:`1px solid ${T.rule}`, position:'relative',
            }}>
              <div style={{
                position:'absolute', top:-1, left:-1, right:-1, height:4,
                background: `linear-gradient(90deg, ${T.wine}, ${T.gold}, ${T.wine})`,
              }}/>
              <div style={{
                fontFamily: T.fontSerifEn, fontStyle:'italic',
                fontSize:13, letterSpacing:'.3em', color: T.gold,
              }}>NEXT STAGE</div>
              <h3 style={{
                fontFamily: T.fontSerif, fontSize: isM ? 22 : 26, fontWeight:500,
                margin:'12px 0 4px', color: T.wine,
              }}>{upcoming.title}</h3>
              <div style={{width:30, height:1, background: T.gold, margin:'18px 0'}}/>
              <div style={{display:'grid', gridTemplateColumns:'auto 1fr', gap:'10px 18px', fontSize: isM ? 14 : 15, lineHeight:1.7}}>
                <div style={{color: T.gold, fontFamily: T.fontSerif}}>日 時</div>
                <div>{upcoming.date}</div>
                <div style={{color: T.gold, fontFamily: T.fontSerif}}>会 場</div>
                <div>{upcoming.venue}</div>

              </div>
            </div>
          </div>
        </section>

        {/* Recruit CTA */}
        <section style={{
          color:'#fff', padding: isM ? '70px 24px' : '110px 60px',
          textAlign:'center', position:'relative', overflow:'hidden',
          backgroundImage: `linear-gradient(135deg, rgba(90,22,30,.82) 0%, rgba(122,34,48,.72) 100%), url(assets/concert5-2.jpg)`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
        }}>
          <div style={{position:'absolute', inset:20, border:`1px solid rgba(255,255,255,.18)`, pointerEvents:'none'}}/>
          <div style={{
            fontFamily: T.fontSerifEn, fontStyle:'italic',
            fontSize:13, letterSpacing:'.3em',
            color: T.gold, marginBottom:12,
          }}>JOIN US</div>
          <h2 style={{
            fontFamily: T.fontSerif, fontWeight:500,
            fontSize: isM ? 22 : 32,
            margin:'0 0 16px', letterSpacing:'.1em',
          }}>一緒に歌いませんか</h2>
          <p style={{
            fontFamily: T.fontSerif, fontSize: isM ? 14 : 16,
            lineHeight:1.9, opacity:.92,
            maxWidth:600, margin:'0 auto 28px',
          }}>合唱経験は問いません。<br/>
          練習日は毎月第２、第４、第５水曜日の午後。<br/>
          是非一度、見学にお越しください。</p>
          <a href="#" onClick={(e) => { e.preventDefault(); onNav('recruit'); }} style={{
            display:'inline-block', padding: isM ? '14px 32px' : '16px 44px',
            background:'transparent', color:'#fff', textDecoration:'none',
            fontFamily: T.fontSerif, fontSize: isM ? 14 : 15,
            letterSpacing:'.2em', border:`1px solid ${T.gold}`,
          }}>団員募集のご案内 →</a>
        </section>
      </>
    );
  };
})();