// a-shared.jsx — A案のデザイントークン、Header、Footer
// すべてのページで共通利用するパーツ。

window.A_TOKENS = {
  bg: '#faf6ef',
  bgAlt: '#f3ebdc',
  bgDeep: '#1f1612',
  ink: '#2a1e1a',
  inkSoft: '#3e2e28',
  wine: '#7a2230',
  wineDeep: '#5a161e',
  gold: '#5c3e10',
  goldSoft: '#b89352',
  rule: '#d8c8b0',
  fontSerif: "'Shippori Mincho', serif",
  fontSerifEn: "'Cormorant Garamond', serif",
  fontSans: "'Noto Sans JP', sans-serif",
};

window.A_NAV = [
  ['home', 'ホーム'],
  ['conductor', '指揮者・伴奏者'],
  ['venue', '練習会場'],
  ['schedule', '練習・行事予定'],
  ['concerts', '演奏会の記録'],
  ['recruit', '団員募集'],
];

// === Header ===
window.AHeader = function AHeader({ currentPage, onNav, mobile }) {
  const T = window.A_TOKENS;
  const NAV = window.A_NAV;
  const isM = mobile;
  const [open, setOpen] = React.useState(false);

  return (
    <header style={{
      background: T.bg,
      borderBottom: `1px solid ${T.rule}`,
      padding: isM ? '14px 18px' : '20px 60px',
      display:'flex', alignItems:'center', justifyContent:'space-between',
      position:'sticky', top:0, zIndex:100,
      boxShadow:'0 2px 8px rgba(0,0,0,.06)',
    }}>
      <a href="#" onClick={(e) => { e.preventDefault(); onNav('home'); }} style={{
        display:'flex', alignItems:'center', gap: isM ? 10 : 16,
        textDecoration:'none', color:'inherit',
      }}>
        <div>
          <div style={{
            fontFamily: T.fontSerif,
            fontSize: isM ? 16 : 22,
            fontWeight:700,
            letterSpacing:'.05em',
            color: T.wine,
            lineHeight:1.3,
          }}>混声合唱団ハーモニーゆう</div>
          <div style={{
            fontFamily: T.fontSerifEn,
            fontStyle:'italic',
            fontSize: isM ? 10 : 11,
            letterSpacing:'.2em',
            color: T.gold,
            marginTop:2,
          }}>Harmony Yu　Kobe since2012</div>
        </div>
      </a>

      {isM ? (
        <>
          <button
            onClick={() => setOpen(o => !o)}
            aria-label="メニュー"
            style={{
              background:'none', border:'none', padding:8,
              cursor:'pointer', display:'flex',
              flexDirection:'column', gap:5,
            }}
          >
            {open ? (
              <div style={{position:'relative', width:24, height:18}}>
                <div style={{position:'absolute', top:8, left:0, width:24, height:2, background: T.wine, transform:'rotate(45deg)'}}/>
                <div style={{position:'absolute', top:8, left:0, width:24, height:2, background: T.wine, transform:'rotate(-45deg)'}}/>
              </div>
            ) : (
              [0,1,2].map(i => <div key={i} style={{width:24, height:2, background: T.wine}}/>)
            )}
          </button>
          {open && (
            <div style={{
              position:'absolute',
              top:'100%', left:0, right:0,
              background: T.bg,
              borderBottom:`1px solid ${T.rule}`,
              boxShadow:'0 10px 24px rgba(0,0,0,.08)',
              padding:'10px 0',
              zIndex:10,
            }}>
              {NAV.map(([id, label]) => (
                <a key={id} href="#" onClick={(e) => { e.preventDefault(); setOpen(false); onNav(id); }}
                  style={{
                    display:'block',
                    padding:'14px 22px',
                    fontFamily: T.fontSerif,
                    fontSize:16,
                    color: currentPage === id ? T.wine : T.ink,
                    fontWeight: currentPage === id ? 600 : 400,
                    textDecoration:'none',
                    borderLeft: currentPage === id ? `3px solid ${T.wine}` : '3px solid transparent',
                  }}
                >{label}</a>
              ))}
            </div>
          )}
        </>
      ) : (
        <nav style={{display:'flex', gap:32, fontFamily: T.fontSerif, fontSize:15}}>
          {NAV.map(([id, label]) => (
            <a key={id} href="#" onClick={(e) => { e.preventDefault(); onNav(id); }}
              style={{
                color: T.ink,
                textDecoration:'none',
                position:'relative',
                paddingBottom:4,
                borderBottom: currentPage === id ? `2px solid ${T.wine}` : '2px solid transparent',
                fontWeight: currentPage === id ? 600 : 500,
              }}
            >{label}</a>
          ))}
        </nav>
      )}
    </header>
  );
};

// === Page title section (used by sub-pages) ===
window.APageTitle = function APageTitle({ en, jp, mobile }) {
  const T = window.A_TOKENS;
  const isM = mobile;
  return (
    <section style={{
      background: T.bgAlt,
      padding: isM ? '50px 24px' : '80px 60px',
      textAlign:'center',
      borderBottom:`1px solid ${T.rule}`,
      position:'relative',
    }}>
      <div style={{
        fontFamily: T.fontSerifEn,
        fontStyle:'italic',
        fontSize: isM ? 12 : 14,
        letterSpacing:'.35em',
        color: T.gold,
        marginBottom:12,
      }}>{en}</div>
      <h1 style={{
        fontFamily: T.fontSerif,
        fontWeight:500,
        fontSize: isM ? 28 : 44,
        letterSpacing:'.15em',
        margin:0,
        color: T.wine,
      }}>{jp}</h1>
      <div style={{
        width: isM ? 36 : 50, height:1, background: T.gold,
        margin: isM ? '22px auto 0' : '28px auto 0',
      }}/>
    </section>
  );
};

// === Footer ===
window.AFooter = function AFooter({ onNav, mobile }) {
  const T = window.A_TOKENS;
  const NAV = window.A_NAV;
  const isM = mobile;
  return (
    <footer style={{
      background: T.bgDeep,
      color:'rgba(255,255,255,.75)',
      padding: isM ? '40px 24px 24px' : '50px 60px 32px',
    }}>
      <div style={{
        display: isM ? 'block' : 'flex',
        justifyContent:'space-between',
        alignItems:'flex-start',
        gap:40,
        maxWidth:1100, margin:'0 auto',
      }}>
        <div style={{flex:'1 1 auto', marginBottom: isM ? 24 : 0}}>
          <div style={{
            fontFamily: T.fontSerif,
            fontSize:18, color:'#fff',
            letterSpacing:'.08em',
          }}>混声合唱団 ハーモニーゆう</div>
          <div style={{
            fontFamily: T.fontSerifEn,
            fontStyle:'italic',
            fontSize:11, color: T.goldSoft,
            letterSpacing:'.3em',
            marginTop:6,
          }}>HARMONY YU · SINCE 2012</div>
          <div style={{fontSize:13, marginTop:14, lineHeight:1.7}}>
            神戸市内を中心に活動する混声合唱団<br/>
            <a href="#" onClick={(e) => { e.preventDefault(); onNav('recruit'); }}
              style={{color:T.goldSoft, textDecoration:'none'}}>お問い合わせ・団員募集 →</a>
          </div>
          <div style={{marginTop:16}}>
            <a href="https://www.facebook.com/2012harmonyyou/" target="_blank" rel="noopener noreferrer"
              style={{
                display:'inline-flex', alignItems:'center', gap:9,
                background:'#1877f2', color:'#fff',
                textDecoration:'none', fontSize:14, fontWeight:600,
                padding:'8px 18px', borderRadius:4,
                fontFamily: T.fontSans,
              }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                <path d="M24 12.073C24 5.405 18.627 0 12 0S0 5.405 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047V9.41c0-3.025 1.792-4.697 4.533-4.697 1.312 0 2.686.236 2.686.236v2.97h-1.513c-1.491 0-1.956.93-1.956 1.886v2.268h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073z"/>
              </svg>
              Facebookページ
            </a>
          </div>
        </div>
        <div style={{flex:'0 0 auto', fontSize:13, lineHeight:2}}>
          {NAV.map(([id, label]) => (
            <div key={id}>
              <a href="#" onClick={(e) => { e.preventDefault(); onNav(id); }}
                style={{color:'rgba(255,255,255,.7)', textDecoration:'none'}}
              >{label}</a>
            </div>
          ))}
        </div>
      </div>
      <div style={{
        marginTop: isM ? 28 : 36,
        paddingTop: 20,
        borderTop:'1px solid rgba(255,255,255,.1)',
        display: isM ? 'block' : 'flex',
        justifyContent:'space-between',
        fontSize:11,
        letterSpacing:'.1em',
      }}>
        <div style={{marginBottom: isM ? 8 : 0}}>© 2026 混声合唱団 ハーモニーゆう</div>
        <a href="https://harmonyyu.jimdofree.com/" target="_blank" rel="noopener" style={{
          color: T.goldSoft, textDecoration:'none',
        }}>従来のホームページはこちら →</a>
      </div>
    </footer>
  );
};