// Strengths — All in Music が解決します
function Strengths() {
  const items = [
    {
      n:'A',
      kicker:'INDIVIDUAL CURRICULUM',
      title:'"上手くなりたい"の、正体を掘る。',
      body:'一人ひとり「カッコよく」の基準は違う。初回カウンセリングで、好きなアーティスト・歌いたい場面・ゴールを丁寧に聞いて、あなた専用のカリキュラムを組みます。',
      stat:'98%',
      statLabel:'目標到達率 / 半年',
      photo:'https://images.unsplash.com/photo-1511379938547-c1f69419868d?w=1200&q=80',
    },
    {
      n:'B',
      kicker:'ADULTS-ONLY VIBE',
      title:'「大人の趣味」として、本気で遊ぶ。',
      body:'プロ志向の養成所ではありません。仕事や家庭のある大人が、月2回でも続けやすい雰囲気と時間帯。発表会はライブハウス。カッコよく歌う大人を、全力で応援します。',
      stat:'30-50',
      statLabel:'主な生徒の年齢層',
      photo:'https://images.unsplash.com/photo-1527169402691-feff5539e52c?w=1200&q=80',
    },
  ];
  return (
    <section id="strengths" className="section" style={{ background:'var(--bg-1)' }}>
      <div className="section-inner">
        <div style={{ marginBottom:72, maxWidth:720 }}>
          <span className="eyebrow"><span className="dot" /> <span className="hash">#02</span> All in Musicが解決します</span>
          <h2 className="h2">
            2つの<em className="accent">強み</em>で、<br/>
            あなたの "歌" を前に進める。
          </h2>
        </div>

        <div style={{ display:'grid', gap:24 }}>
          {items.map((it, i) => (
            <div key={it.n} className="aim-strength-row" style={{
              display:'grid',
              gridTemplateColumns: i % 2 === 0 ? '1.1fr 0.9fr' : '0.9fr 1.1fr',
              gap:28, alignItems:'stretch',
              minHeight:420,
            }}>
              {/* photo */}
              <div className="grain aim-strength-photo" style={{
                position:'relative',
                order: i % 2 === 0 ? 1 : 2,
                background:`linear-gradient(180deg, transparent, oklch(15% 0.05 260 / 0.4)), url(${it.photo})`,
                backgroundSize:'cover', backgroundPosition:'center',
                overflow:'hidden',
              }}>
                <div style={{
                  position:'absolute', inset:0,
                  background:'linear-gradient(135deg, oklch(70% 0.25 250 / 0.15), transparent 70%)',
                  mixBlendMode:'screen',
                }} />
                <div style={{
                  position:'absolute', top:24, left:24,
                  padding:'6px 12px',
                  background:'rgba(5,8,17,0.8)', backdropFilter:'blur(8px)',
                  border:'1px solid var(--rule-strong)',
                }}>
                  <span className="mono" style={{ fontSize:11, letterSpacing:2, color:'var(--accent-2)' }}>
                    STRENGTH / {it.n}
                  </span>
                </div>
                <div style={{
                  position:'absolute', bottom:0, left:0, right:0,
                  padding:'24px',
                  display:'flex', justifyContent:'space-between', alignItems:'flex-end',
                  background:'linear-gradient(180deg, transparent, rgba(5,8,17,0.9))',
                }}>
                  <div>
                    <div className="display" style={{ fontSize:44, color:'var(--accent-2)',
                      textShadow:'0 0 20px oklch(70% 0.25 250 / 0.5)' }}>{it.stat}</div>
                    <div className="mono" style={{ fontSize:11, color:'var(--ink-3)', letterSpacing:1.5, marginTop:4 }}>
                      {it.statLabel}
                    </div>
                  </div>
                </div>
              </div>

              {/* copy */}
              <div className="aim-strength-copy" style={{
                order: i % 2 === 0 ? 2 : 1,
                padding:'40px 44px',
                background:'var(--bg-2)',
                border:'1px solid var(--rule)',
                display:'flex', flexDirection:'column', justifyContent:'space-between',
                position:'relative', overflow:'hidden',
              }}>
                <div style={{
                  position:'absolute', top:-40, right:-20,
                  fontFamily:'var(--ff-display)', fontSize:220,
                  color:'rgba(232,237,247,0.03)', lineHeight:1,
                  pointerEvents:'none',
                }}>{it.n}</div>

                <div>
                  <div className="display" style={{
                    fontSize:12, letterSpacing:2.5, color:'var(--accent)', marginBottom:16,
                  }}>{it.kicker}</div>
                  <h3 className="aim-strength-title" style={{
                    margin:0, fontSize:32, fontWeight:900, lineHeight:1.3, letterSpacing:-0.5,
                  }}>{it.title}</h3>
                  <p style={{
                    margin:'20px 0 0', fontSize:15, lineHeight:1.9, color:'var(--ink-2)',
                  }}>{it.body}</p>
                </div>

                <div style={{ marginTop:32, paddingTop:20, borderTop:'1px solid var(--rule)',
                  display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                  <span className="mono" style={{ fontSize:11, color:'var(--ink-3)', letterSpacing:1.5 }}>
                    0{i+1} / 0{items.length}
                  </span>
                  <a href="trial.html" style={{ color:'var(--accent-2)', fontSize:13, fontWeight:700 }}>
                    詳しく見る <span style={{ marginLeft:6 }}>→</span>
                  </a>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Strengths = Strengths;