// page-venue.jsx — 練習会場

(function() {
  window.PageVenue = function PageVenue({ mobile }) {
    const T = window.A_TOKENS;
    const V = window.A_DATA_VENUES;
    const isM = mobile;

    return (
      <>
        <window.APageTitle en="PRACTICE VENUE" jp="練習会場" mobile={isM}/>

        {/* Main venue */}
        <section style={{padding: isM ? '50px 24px' : '80px 60px'}}>
          <div style={{maxWidth:1100, margin:'0 auto'}}>
            <div style={{
              display:'flex', alignItems:'baseline', gap:14, marginBottom:24,
              paddingBottom:14, borderBottom:`1px solid ${T.rule}`,
            }}>
              <h2 style={{
                fontFamily: T.fontSerif, fontWeight:500,
                fontSize: isM ? 22 : 28, margin:0, color: T.wine,
                letterSpacing:'.1em',
              }}>{V.main.name}</h2>
              <span style={{
                fontFamily: T.fontSerif, fontSize:13,
                color: T.gold, letterSpacing:'.1em',
              }}>（{V.main.note}）</span>
            </div>

            <div style={{
              display:'grid',
              gridTemplateColumns: isM ? '1fr' : '1fr 1fr',
              gap: isM ? 28 : 50,
            }}>
              {/* Address & access */}
              <div>
                <div style={{display:'grid', gridTemplateColumns:'auto 1fr', gap:'14px 18px', fontSize: isM ? 14 : 15, lineHeight:1.7}}>
                  <div style={{color: T.gold, fontFamily: T.fontSerif, letterSpacing:'.1em'}}>所在地</div>
                  <div style={{fontFamily: T.fontSerif, whiteSpace:'pre-line'}}>
                    〒{V.main.zip}{'\n'}{V.main.address}
                  </div>
                  <div style={{color: T.gold, fontFamily: T.fontSerif, letterSpacing:'.1em'}}>T E L</div>
                  <div style={{fontFamily: T.fontSerif}}>{V.main.tel}</div>
                </div>

                <div style={{marginTop:28}}>
                  <div style={{
                    fontFamily: T.fontSerifEn, fontStyle:'italic',
                    fontSize:12, letterSpacing:'.3em',
                    color: T.gold, marginBottom:10,
                  }}>ACCESS</div>
                  <ul style={{
                    listStyle:'none', padding:0, margin:0,
                    fontFamily: T.fontSerif,
                    fontSize: isM ? 14 : 15, lineHeight:2,
                  }}>
                    {V.main.access.map((line, i) => (
                      <li key={i} style={{
                        paddingLeft:18, position:'relative',
                      }}>
                        <span style={{
                          position:'absolute', left:0, top:'.85em',
                          width:8, height:1, background: T.gold,
                        }}/>
                        {line}
                      </li>
                    ))}
                  </ul>
                  <div style={{
                    marginTop:14, fontSize: isM ? 13 : 14,
                    color: T.inkSoft, fontFamily: T.fontSerif,
                  }}>{V.main.note2}</div>
                </div>
              </div>

              {/* Map */}
              <div>
                <div style={{
                  width:'100%', aspectRatio:'4/3',
                  border:`1px solid ${T.rule}`,
                  overflow:'hidden', position:'relative',
                  background: T.bgAlt,
                }}>
                  <iframe
                    title="神戸文化ホール 地図"
                    src={`https://maps.google.com/maps?q=${encodeURIComponent('神戸市男女協同参画センター あすてっぷKOBE')}&z=16&output=embed`}
                    style={{width:'100%', height:'100%', border:0}}
                    loading="lazy"
                  />
                </div>
                <a
                  href={`https://maps.google.com/maps?q=${encodeURIComponent('神戸市男女協同参画センター あすてっぷKOBE')}`}
                  target="_blank" rel="noopener"
                  style={{
                    display:'inline-block', marginTop:12,
                    fontFamily: T.fontSerif, fontSize:13,
                    color: T.wine, textDecoration:'none',
                  }}
                >Google Mapで開く →</a>
              </div>
            </div>
          </div>
        </section>

        {/* Practice atmosphere photos */}
        <section style={{
          padding: isM ? '40px 24px 50px' : '70px 60px 80px',
          background: T.bg,
          borderTop:`1px solid ${T.rule}`,
        }}>
          <div style={{maxWidth:1100, margin:'0 auto'}}>
            <div style={{
              display:'flex', alignItems:'baseline', gap:14, marginBottom:24,
            }}>
              <h2 style={{
                fontFamily: T.fontSerif, fontWeight:500,
                fontSize: isM ? 22 : 26, margin:0, color: T.wine,
                letterSpacing:'.1em',
              }}>練習風景</h2>
              <span style={{
                fontFamily: T.fontSerifEn, fontStyle:'italic',
                fontSize:13, letterSpacing:'.25em', color: T.gold,
              }}>SCENE OF PRACTICE</span>
            </div>
            <p style={{
              fontFamily: T.fontSerif, fontSize: isM ? 14 : 15,
              color: T.inkSoft, lineHeight:1.9,
              margin:'0 0 28px',
            }}>植田先生・阪田先生のご指導のもと、毎回アットホームな雰囲気で練習しています。</p>
            <div style={{
              display:'grid',
              gridTemplateColumns: isM ? '1fr' : '1fr 1fr',
              gap: isM ? 12 : 18,
            }}>
              {['assets/practice-1.jpg', 'assets/practice-2.jpg'].map((src, i) => (
                <div key={i} style={{
                  position:'relative',
                  aspectRatio:'4/3',
                  backgroundImage:`url(${src})`,
                  backgroundSize:'cover',
                  backgroundPosition:'center',
                  background:`#1a1410 url(${src}) center/cover`,
                  boxShadow:'0 4px 18px rgba(0,0,0,.1)',
                }}>
                  <div style={{
                    position:'absolute', inset:-6,
                    border:`1px solid ${T.gold}`,
                    pointerEvents:'none',
                    opacity:.4,
                  }}/>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Other venues */}
        <section style={{
          padding: isM ? '40px 24px 60px' : '60px 60px 100px',
          background: T.bgAlt,
          borderTop:`1px solid ${T.rule}`,
        }}>
          <div style={{maxWidth:1100, margin:'0 auto'}}>
            <div style={{
              display:'flex', alignItems:'baseline', gap:14, marginBottom:24,
            }}>
              <h2 style={{
                fontFamily: T.fontSerif, fontWeight:500,
                fontSize: isM ? 22 : 26, margin:0, color: T.wine,
                letterSpacing:'.1em',
              }}>その他の練習会場</h2>
              <span style={{
                fontFamily: T.fontSerifEn, fontStyle:'italic',
                fontSize:13, letterSpacing:'.25em', color: T.gold,
              }}>OTHER VENUES</span>
            </div>
            <p style={{
              fontFamily: T.fontSerif, fontSize: isM ? 14 : 15,
              color: T.inkSoft, lineHeight:1.9,
              margin:'0 0 30px',
            }}>上記のほか、以下の会場で練習を行う場合があります。</p>

            <div style={{
              display:'grid',
              gridTemplateColumns: isM ? '1fr' : '1fr 1fr',
              gap: isM ? 16 : 24,
            }}>
              {V.others.map((v, i) => (
                <div key={i} style={{
                  background: T.bg, padding: isM ? 22 : 28,
                  border:`1px solid ${T.rule}`, position:'relative',
                }}>
                  <div style={{
                    position:'absolute', top:0, left:0, width:4, height:'100%',
                    background: T.gold,
                  }}/>
                  <h3 style={{
                    fontFamily: T.fontSerif, fontWeight:500,
                    fontSize: isM ? 17 : 19, margin:'0 0 12px',
                    color: T.wine, letterSpacing:'.05em',
                  }}>{v.name}</h3>
                  <div style={{display:'grid', gridTemplateColumns:'auto 1fr', gap:'8px 14px', fontSize: isM ? 13 : 14, lineHeight:1.7, fontFamily: T.fontSerif}}>
                    <div style={{color: T.gold}}>所在地</div>
                    <div>〒{v.zip}<br/>{v.address}</div>
                    <div style={{color: T.gold}}>T E L</div>
                    <div>{v.tel}</div>
                    <div style={{color: T.gold}}>アクセス</div>
                    <div>{v.access}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      </>
    );
  };
})();