// Sub-service detail sections (for guitar / dtm pages)
function SubServiceDetail({ kind }) {
  const specs = kind === 'guitar' ? {
    title:'弾き語りレッスン', en:'GUITAR & VOCAL',
    photo:'https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=1600&q=80',
    body:'ギターと歌を同時にコントロールする技術を、課題曲ベースで習得。初心者はコード3つから、経験者は表現の幅を広げる方向で。',
    feats:[
      { k:'課題曲ベース', v:'好きな曲で学ぶ。基礎練ばかりで飽きません。' },
      { k:'楽器相談', v:'手元の楽器やレンタル利用から始めて、必要になったら選び方も相談できます。' },
      { k:'録音・動画化', v:'演奏を定期的に録画。上達が目で見えます。' },
      { k:'発表会優先枠', v:'弾き語り専用のライブ枠あり。' },
    ],
  } : {
    title:'DTMレッスン', en:'MUSIC PRODUCTION',
    photo:'https://images.unsplash.com/photo-1598653222000-6b7b7a552625?w=1600&q=80',
    body:'Logic Pro / Ableton Live を使って、自分の歌を録って編集する。作詞作曲からミックス・リリースまで一気通貫で伴走します。',
    feats:[
      { k:'DAW対応', v:'Logic / Ableton / Cubase。好みのDAWで。' },
      { k:'機材貸出', v:'MacBook / オーディオIF / マイクを貸出可。' },
      { k:'リリース支援', v:'配信サービス登録まで一緒にやります。' },
      { k:'作品発表会', v:'年2回、作品のみ発表する会を開催。' },
    ],
  };
  return (
    <section className="section">
      <div className="section-inner">
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:40, alignItems:'stretch' }}>
          <div style={{
            position:'relative', minHeight:460, overflow:'hidden',
            backgroundImage:`url(${specs.photo})`, backgroundSize:'cover', backgroundPosition:'center',
          }}>
            <div style={{ position:'absolute', inset:0,
              background:'linear-gradient(180deg, transparent 50%, rgba(5,8,17,0.9)), linear-gradient(45deg, oklch(70% 0.25 250 / 0.25), transparent 60%)',
              mixBlendMode:'multiply' }} />
            <div className="mono" style={{
              position:'absolute', bottom:24, left:24, padding:'6px 12px',
              background:'rgba(5,8,17,0.8)', border:'1px solid var(--rule-strong)',
              fontSize:11, letterSpacing:2, color:'var(--accent-2)',
            }}>{specs.en}</div>
          </div>
          <div style={{ padding:'12px 0' }}>
            <h2 style={{ margin:0, fontSize:40, fontWeight:900, letterSpacing:-1, lineHeight:1.15 }}>{specs.title}</h2>
            <p style={{ margin:'18px 0 0', fontSize:16, lineHeight:1.9, color:'var(--ink-2)' }}>{specs.body}</p>
            <div style={{ marginTop:28 }}>
              {specs.feats.map(f => (
                <div key={f.k} style={{
                  display:'grid', gridTemplateColumns:'140px 1fr', gap:20,
                  padding:'14px 0', borderBottom:'1px dashed var(--rule)',
                }}>
                  <div className="mono" style={{ fontSize:12, letterSpacing:1.5, color:'var(--accent)' }}>{f.k}</div>
                  <div style={{ fontSize:14, color:'var(--ink-2)', lineHeight:1.7 }}>{f.v}</div>
                </div>
              ))}
            </div>
            <div style={{ marginTop:28, display:'flex', gap:14, 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>
        </div>
      </div>
    </section>
  );
}

// Home summary — strengths + service preview, minus the long in-page stuff
function HomePreview() {
  const routeTo = (href) => {
    const routes = (window.ALLIN_MUSIC_CONFIG && window.ALLIN_MUSIC_CONFIG.routes) || {};
    return routes[href] || href;
  };
  const cards = [
    { href:'voice.html', tag:'MAIN · SIDE A', title:'ボイストレーニング', en:'FIND YOUR REAL VOICE',
      photo:'https://images.unsplash.com/photo-1516280440614-37939bbacd81?w=1200&q=80' },
    { href:'guitar.html', tag:'SIDE B1', title:'弾き語り', en:'GUITAR & VOCAL',
      photo:'https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=1200&q=80' },
    { href:'dtm.html', tag:'SIDE B2', title:'DTM', en:'MUSIC PRODUCTION',
      photo:'https://images.unsplash.com/photo-1598653222000-6b7b7a552625?w=1200&q=80' },
  ];
  return (
    <section className="section">
      <div className="section-inner">
        <div style={{ marginBottom:48, maxWidth:720 }}>
          <span className="eyebrow"><span className="dot" /> <span className="hash">#03</span> サービス案内</span>
          <h2 className="h2">歌が真ん中、<br/>その周りに<em className="accent">音楽</em>がある。</h2>
        </div>
        <div className="aim-home-preview-grid" style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr', gap:20 }}>
          {cards.map((c, i) => (
            <a key={c.href} href={routeTo(c.href)} className="aim-home-preview-card" style={{
              position:'relative', minHeight: i === 0 ? 520 : 420,
              display:'flex', flexDirection:'column', justifyContent:'flex-end',
              padding:'28px 30px', color:'#fff',
              backgroundImage:`url(${c.photo})`, backgroundSize:'cover', backgroundPosition:'center',
              border:'1px solid var(--rule)', overflow:'hidden',
            }}>
              <div style={{ position:'absolute', inset:0,
                background:'linear-gradient(180deg, transparent 40%, rgba(5,8,17,0.95)), linear-gradient(45deg, oklch(70% 0.25 250 / 0.2), transparent 60%)',
                mixBlendMode:'multiply' }} />
              <div style={{ position:'relative' }}>
                <div className="mono" style={{ fontSize:11, letterSpacing:2, color:'var(--accent-2)' }}>{c.tag}</div>
                <div className="aim-home-preview-title" style={{ fontSize: i === 0 ? 42 : 30, fontWeight:900, marginTop:8, letterSpacing:-0.5 }}>{c.title}</div>
                <div className="display aim-home-preview-en" style={{ fontSize:12, letterSpacing:3, color:'var(--accent-2)', marginTop:6 }}>{c.en}</div>
                <div style={{ marginTop:18, fontSize:13, fontWeight:700, color:'var(--accent-2)' }}>
                  詳しく見る →
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

window.SubServiceDetail = SubServiceDetail;
window.HomePreview = HomePreview;