// Lesson Flow
function Flow() {
  const steps = [
    { n:'01', t:'お問い合わせ', d:'フォームまたはLINEから、30秒で仮予約。当日予約も対応可能。', time:'≈ 30秒' },
    { n:'02', t:'カウンセリング（15分）', d:'あなたの「歌いたい」を、じっくり聞きます。レベル・目標・好きな曲。', time:'15分' },
    { n:'03', t:'無料体験レッスン', d:'現在の声や目標を確認しながら、60分たっぷり本気のレッスン。', time:'60分 / ¥0' },
    { n:'04', t:'カリキュラム提案', d:'体験をふまえて、あなた専用のカリキュラムを提案。押し売りはしません。', time:'即日〜3日' },
    { n:'05', t:'ご入会 → 初回レッスン', d:'料金プラン選択→初回レッスン。次の一歩は、翌週。', time:'翌週スタート' },
  ];

  return (
    <section id="flow" className="section" style={{ background:'var(--bg-1)' }}>
      <div className="section-inner">
        <div style={{ marginBottom:56, maxWidth:720 }}>
          <span className="eyebrow"><span className="dot" /> <span className="hash">#04</span> レッスンの流れ</span>
          <h2 className="h2">
            体験から入会まで、<br/>
            <em className="accent">迷わない</em>5ステップ。
          </h2>
        </div>

        <div style={{ position:'relative' }}>
          {/* timeline */}
          <div style={{
            position:'absolute', left:36, top:0, bottom:0, width:1,
            background:'linear-gradient(180deg, var(--accent) 0%, var(--rule) 100%)',
          }} />
          <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
            {steps.map((s, i) => (
              <div key={s.n} style={{
                display:'grid', gridTemplateColumns:'72px 1fr auto',
                alignItems:'center', gap:24,
                padding:'22px 28px 22px 0',
                background: i === 0 ? 'linear-gradient(90deg, oklch(70% 0.25 250 / 0.08), transparent 70%)' : 'transparent',
                borderBottom:'1px solid var(--rule)',
                position:'relative',
              }}>
                <div style={{
                  width:72, height:72,
                  display:'flex', alignItems:'center', justifyContent:'center',
                  background: i === 0 ? 'var(--accent)' : 'var(--bg-2)',
                  border: i === 0 ? 'none' : '1px solid var(--rule-strong)',
                  borderRadius:'50%',
                  boxShadow: i === 0 ? 'var(--accent-glow-strong)' : 'none',
                  position:'relative', zIndex:2,
                }}>
                  <span className="display" style={{
                    fontSize:20, color: i === 0 ? 'var(--bg-0)' : 'var(--accent-2)',
                  }}>{s.n}</span>
                </div>
                <div>
                  <div style={{ fontSize:26, fontWeight:900, letterSpacing:-0.5 }}>{s.t}</div>
                  <div style={{ fontSize:14, color:'var(--ink-2)', marginTop:6, lineHeight:1.7 }}>{s.d}</div>
                </div>
                <div className="mono" style={{
                  fontSize:12, letterSpacing:1.5, color:'var(--accent-2)',
                  border:'1px solid var(--rule-strong)',
                  padding:'6px 12px', whiteSpace:'nowrap',
                }}>{s.time}</div>
              </div>
            ))}
          </div>
        </div>

        <div style={{
          marginTop:40, padding:'24px 28px',
          background:'oklch(70% 0.25 250 / 0.08)',
          border:'1px solid oklch(70% 0.25 250 / 0.35)',
          display:'flex', justifyContent:'space-between', alignItems:'center', gap:24, flexWrap:'wrap',
        }}>
          <div>
            <div className="display" style={{ fontSize:12, letterSpacing:2.5, color:'var(--accent-2)' }}>
              NO PRESSURE POLICY
            </div>
            <div style={{ fontSize:16, fontWeight:700, marginTop:6 }}>
              体験当日の入会勧誘はしません。じっくり考えてから決めてください。
            </div>
          </div>
          <a href="trial.html" className="btn btn-primary" style={{ padding:'14px 20px', fontSize:13 }}>
            いま体験を予約 <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </section>
  );
}
window.Flow = Flow;