// page-conductor.jsx — 指揮者・伴奏者紹介

(function() {
  window.PageConductor = function PageConductor({ mobile }) {
    const T = window.A_TOKENS;
    const isM = mobile;
    return (
      <>
        <window.APageTitle en="CONDUCTOR & PIANIST" jp="指揮者・伴奏者" mobile={isM}/>

        <section style={{padding: isM ? '50px 24px' : '90px 60px'}}>
          <div style={{maxWidth:1000, margin:'0 auto'}}>
            {window.A_DATA_MEMBERS.map((p, i) => (
              <div key={i} style={{
                marginBottom: isM ? 60 : 100,
                paddingBottom: i < window.A_DATA_MEMBERS.length - 1 ? (isM ? 50 : 80) : 0,
                borderBottom: i < window.A_DATA_MEMBERS.length - 1 ? `1px solid ${T.rule}` : 'none',
              }}>
                {/* Section heading */}
                <div style={{
                  display:'flex', alignItems:'baseline', gap:18,
                  marginBottom: isM ? 28 : 44,
                  paddingBottom:14,
                  borderBottom:`1px solid ${T.rule}`,
                }}>
                  <h2 style={{
                    fontFamily: T.fontSerif, fontWeight:500,
                    fontSize: isM ? 22 : 28,
                    margin:0, color: T.wine,
                    letterSpacing:'.12em',
                  }}>{p.role}紹介</h2>
                  <span style={{
                    fontFamily: T.fontSerifEn, fontStyle:'italic',
                    fontSize: isM ? 12 : 14, letterSpacing:'.3em',
                    color: T.gold,
                  }}>{p.roleEn}</span>
                </div>

                {/* Profile body */}
                <div style={{
                  display:'grid',
                  gridTemplateColumns: isM ? '1fr' : '320px 1fr',
                  gap: isM ? 28 : 60,
                  alignItems:'flex-start',
                }}>
                  <div style={{position:'relative', maxWidth: isM ? 240 : 'none', margin: isM ? '0 auto' : 0}}>
                    <div style={{
                      width: isM ? 240 : 320,
                      height: isM ? 300 : 400,
                      backgroundImage:`url(${p.img})`,
                      backgroundSize:'cover',
                      backgroundPosition:'center top',
                      boxShadow:`0 6px 28px rgba(122,34,48,.18)`,
                      position:'relative',
                    }}>
                      <div style={{position:'absolute', inset:-8, border:`1px solid ${T.gold}`, pointerEvents:'none'}}/>
                    </div>
                  </div>
                  <div>
                    <div style={{
                      fontFamily: T.fontSerifEn, fontStyle:'italic',
                      fontSize:13, letterSpacing:'.25em',
                      color: T.gold,
                    }}>{p.roleEn}</div>
                    <div style={{
                      fontFamily: T.fontSerif, fontSize:14,
                      color: T.inkSoft, marginTop:6, letterSpacing:'.1em',
                    }}>{p.role}</div>
                    <h3 style={{
                      fontFamily: T.fontSerif, fontWeight:500,
                      fontSize: isM ? 28 : 36,
                      margin:'6px 0 6px', letterSpacing:'.05em',
                      color: T.ink,
                    }}>{p.name}</h3>
                    <div style={{fontSize:13, color: T.inkSoft, letterSpacing:'.15em'}}>{p.kana}</div>

                    <div style={{width:30, height:1, background: T.gold, margin:'22px 0'}}/>

                    <p style={{
                      fontFamily: T.fontSerif,
                      fontSize: isM ? 14.5 : 16,
                      lineHeight:2,
                      color: T.ink,
                      margin:'0 0 18px',
                      whiteSpace:'pre-line',
                    }}>{p.bio}</p>
                    <p style={{
                      fontFamily: T.fontSerif,
                      fontSize: isM ? 14.5 : 16,
                      lineHeight:1.9,
                      color: T.inkSoft,
                      margin:0,
                      paddingLeft: 16,
                      borderLeft: `2px solid ${T.gold}`,
                    }}>{p.affiliation}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </section>
      </>
    );
  };
})();