// Services — Voice main (story-driven), Guitar/DTM sub
function Services() {
  return (
    <section id="services" className="section">
      <div className="section-inner">
        <div style={{ marginBottom:56, maxWidth:720 }}>
          <span className="eyebrow"><span className="dot" /> <span className="hash">#03</span> サービス案内</span>
          <h2 className="h2">
            歌が真ん中、<br/>
            その周りに<em className="accent">音楽</em>がある。
          </h2>
          <p className="lead" style={{ marginTop:18 }}>
            All in Musicの中心は、ボイストレーニング。弾き語りとDTMは「歌と一緒に楽しむ」という共通点で、ボイトレの世界を広げるサブとして併走します。
          </p>
        </div>

        {/* Voice — main, story-driven */}
        <div id="voice" style={{
          position:'relative', background:'var(--bg-1)',
          border:'1px solid var(--rule)',
          padding:'0', overflow:'hidden', marginBottom:40,
        }}>
          <div className="aim-service-main-grid" style={{
            display:'grid', gridTemplateColumns:'1fr 1fr', alignItems:'stretch',
          }}>
            <div className="aim-service-copy" style={{ padding:'56px 56px 48px', position:'relative' }}>
              <div style={{
                position:'absolute', top:-10, left:0, right:0,
                display:'flex', alignItems:'center', gap:14, padding:'0 56px',
              }}>
                <span style={{ height:1, background:'var(--accent)', flex:1,
                  boxShadow:'0 0 10px var(--accent)' }} />
                <span className="display" style={{ fontSize:12, letterSpacing:3, color:'var(--accent)' }}>SIDE A · MAIN</span>
                <span style={{ height:1, background:'var(--rule)', flex:1 }} />
              </div>

              <div style={{ marginTop:30 }}>
                <div className="mono" style={{ fontSize:12, letterSpacing:2, color:'var(--ink-3)' }}>
                  01 VOICE TRAINING
                </div>
                <h3 className="aim-service-title" style={{
                  margin:'14px 0 0', fontSize:56, fontWeight:900, lineHeight:1.02, letterSpacing:-2,
                }}>
                  ボイス<br/>トレーニング<span style={{ color:'var(--accent)' }}>.</span>
                </h3>
                <div className="display" style={{ fontSize:14, letterSpacing:4, color:'var(--accent-2)',
                  marginTop:10 }}>FIND&nbsp;YOUR&nbsp;REAL&nbsp;VOICE</div>
              </div>

              <div style={{ marginTop:36, display:'flex', flexDirection:'column', gap:14 }}>
                {[
                  { step:'I', t:'呼吸と姿勢の土台', d:'発声の9割は「息」。まず、立ち方と呼吸から整える。' },
                  { step:'II', t:'あなたの声の地図を描く', d:'録音→分析。音域・クセ・強み。客観的に自分の声を知る。' },
                  { step:'III', t:'憧れの曲を、歌いこなす', d:'課題曲を決めて、フレーズ単位で仕上げていく。発表会で披露。' },
                ].map(s => (
                  <div key={s.step} style={{
                    display:'grid', gridTemplateColumns:'40px 1fr', gap:16,
                    paddingBottom:14, borderBottom:'1px dashed var(--rule)',
                  }}>
                    <div className="display" style={{
                      fontSize:22, color:'var(--accent-2)',
                    }}>{s.step}</div>
                    <div>
                      <div style={{ fontWeight:800, fontSize:16 }}>{s.t}</div>
                      <div style={{ fontSize:13, color:'var(--ink-3)', marginTop:4, lineHeight:1.7 }}>{s.d}</div>
                    </div>
                  </div>
                ))}
              </div>

              <div style={{ display:'flex', gap:16, marginTop:32, flexWrap:'wrap' }}>
                <a href="trial.html" className="btn btn-primary" style={{ padding:'14px 20px', fontSize:13 }}>
                  ボイトレを体験する <span className="arrow">→</span>
                </a>
                <a href="pricing.html" className="btn btn-ghost" style={{ padding:'14px 20px', fontSize:13 }}>料金を見る</a>
              </div>
            </div>

            {/* right visual */}
            <div className="aim-service-visual" style={{
              position:'relative', minHeight:620, overflow:'hidden',
              backgroundImage:'url(https://images.unsplash.com/photo-1516280440614-37939bbacd81?w=1400&q=80)',
              backgroundSize:'cover', backgroundPosition:'center',
              filter:'contrast(1.1)',
            }}>
              <div style={{
                position:'absolute', inset:0,
                background:'linear-gradient(270deg, transparent, oklch(70% 0.25 250 / 0.35) 40%, oklch(30% 0.2 260 / 0.7))',
                mixBlendMode:'multiply',
              }} />
              <div style={{
                position:'absolute', inset:0,
                background:'radial-gradient(ellipse at 50% 50%, transparent 40%, var(--bg-1) 100%)',
              }} />
              {/* waveform */}
              <div style={{
                position:'absolute', bottom:36, left:36, right:36,
                display:'flex', alignItems:'flex-end', gap:3, height:60,
              }}>
                {Array.from({ length:60 }).map((_, i) => {
                  const h = 10 + Math.abs(Math.sin(i * 0.5) * 50) + Math.abs(Math.cos(i * 1.2) * 20);
                  return <div key={i} style={{
                    flex:1, height:`${h}%`, background:'var(--accent)',
                    boxShadow:'0 0 6px var(--accent)', opacity: 0.4 + (i%5)*0.1,
                  }} />;
                })}
              </div>
              <div className="mono" style={{
                position:'absolute', top:36, right:36,
                fontSize:11, letterSpacing:2, color:'#fff',
                padding:'6px 10px', background:'rgba(5,8,17,0.5)',
                border:'1px solid var(--rule-strong)', backdropFilter:'blur(8px)',
              }}>
                ● REC  42dB / 126bpm
              </div>
              <div style={{
                position:'absolute', top:'50%', left:'50%',
                transform:'translate(-50%, -50%)',
                width:140, height:140, borderRadius:'50%',
                border:'1px solid var(--accent)',
                boxShadow:'0 0 40px oklch(70% 0.25 250 / 0.6), inset 0 0 30px oklch(70% 0.25 250 / 0.3)',
                display:'flex', alignItems:'center', justifyContent:'center',
              }}>
                <div style={{
                  width:70, height:70, borderRadius:'50%',
                  background:'var(--accent)',
                  display:'flex', alignItems:'center', justifyContent:'center',
                  boxShadow:'0 0 30px var(--accent)',
                }}>
                  <span style={{ fontSize:28, color:'var(--bg-0)' }}>🎤</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Subs: Guitar & DTM */}
        <div className="aim-subservice-grid" style={{
          display:'grid', gridTemplateColumns:'1fr 1fr', gap:24,
        }}>
          <SubService
            side="B1"
            num="02"
            title={<>弾き語り<br/>レッスン</>}
            en="GUITAR & VOCAL"
            body="ギターと歌を同時にコントロールする技術を、課題曲ベースで。歌が好きな大人の、もうひとつの武器。"
            photo="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=1000&q=80"
            tags={['ギター経験不問','月2〜','発表会あり']}
          />
          <SubService
            side="B2"
            num="03"
            title={<>DTM<br/>レッスン</>}
            en="MUSIC PRODUCTION"
            body="Logic / Ableton で、自分の歌を録って編集する。作詞作曲からリリースまで伴走。"
            photo="https://images.unsplash.com/photo-1598653222000-6b7b7a552625?w=1000&q=80"
            tags={['Mac / Win 対応','機材貸出','作品発表サポート']}
          />
        </div>
      </div>
    </section>
  );
}

function SubService({ side, num, title, en, body, photo, tags }) {
  return (
    <div style={{
      position:'relative', background:'var(--bg-2)',
      border:'1px solid var(--rule)',
      overflow:'hidden',
    }}>
      <div style={{
        height:200, overflow:'hidden', position:'relative',
        backgroundImage:`url(${photo})`, backgroundSize:'cover', backgroundPosition:'center',
      }}>
        <div style={{
          position:'absolute', inset:0,
          background:'linear-gradient(180deg, transparent, rgba(17,22,39,0.9)), linear-gradient(45deg, oklch(70% 0.25 250 / 0.25), transparent)',
          mixBlendMode:'multiply',
        }} />
        <div className="mono" style={{
          position:'absolute', top:16, left:16,
          fontSize:11, letterSpacing:2, color:'#fff',
          padding:'4px 10px', background:'rgba(5,8,17,0.7)',
          border:'1px solid var(--rule-strong)',
        }}>
          SIDE {side}
        </div>
      </div>
      <div style={{ padding:'28px 32px 32px' }}>
        <div className="mono" style={{ fontSize:12, letterSpacing:2, color:'var(--ink-3)' }}>{num} · {en}</div>
        <h3 style={{ margin:'10px 0 0', fontSize:32, fontWeight:900, lineHeight:1.1, letterSpacing:-1 }}>
          {title}
        </h3>
        <p style={{ margin:'16px 0 0', fontSize:14, lineHeight:1.9, color:'var(--ink-2)' }}>{body}</p>
        <div style={{ display:'flex', gap:8, flexWrap:'wrap', marginTop:20 }}>
          {tags.map(t => <span key={t} className="tag">{t}</span>)}
        </div>
        <div style={{
          marginTop:24, paddingTop:16, 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 }}>READ MORE</span>
          <a href="trial.html" style={{ color:'var(--accent-2)', fontSize:13, fontWeight:700 }}>
            体験する <span>→</span>
          </a>
        </div>
      </div>
    </div>
  );
}

window.Services = Services;