// Trial booking page — the final CTA destination
function TrialBooking() {
  const [step, setStep] = React.useState(1);
  const [form, setForm] = React.useState({
    service: 'voice',
    date: '04.22 TUE',
    time: '18:30',
    name: '', email: '', phone: '',
    experience: 'none',
    goal: '',
  });

  const update = (k, v) => setForm({ ...form, [k]: v });

  const services = [
    { id:'voice', label:'ボイストレーニング', en:'VOICE', note:'MAIN · 一番人気' },
    { id:'guitar', label:'弾き語り', en:'GUITAR & VOCAL', note:'SIDE B1' },
    { id:'dtm', label:'DTM', en:'MUSIC PRODUCTION', note:'SIDE B2' },
  ];

  const dates = [
    { d:'04.22 TUE', avail:4 },
    { d:'04.23 WED', avail:2 },
    { d:'04.24 THU', avail:5 },
    { d:'04.25 FRI', avail:1 },
    { d:'04.26 SAT', avail:3 },
    { d:'04.27 SUN', avail:0 },
  ];

  const times = ['11:00','12:30','14:00','15:30','17:00','18:30','20:00','21:30'];

  return (
    <section className="section grain" style={{
      position:'relative', padding:'160px 0 80px', minHeight:'100vh',
    }}>
      <div style={{
        position:'absolute', inset:0,
        backgroundImage:'url(https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=1800&q=80)',
        backgroundSize:'cover', backgroundPosition:'center',
        filter:'brightness(0.18) contrast(1.2) saturate(0.6) hue-rotate(200deg)',
      }} />
      <div style={{
        position:'absolute', inset:0,
        background:'radial-gradient(ellipse 800px 500px at 50% 30%, oklch(65% 0.24 250 / 0.35), transparent 60%)',
        mixBlendMode:'screen',
      }} />

      <div className="section-inner" style={{ position:'relative', zIndex:5, maxWidth:1080 }}>
        {/* breadcrumbs */}
        <div className="mono" style={{
          display:'flex', alignItems:'center', gap:14,
          fontSize:11, letterSpacing:2, color:'var(--ink-3)', marginBottom:20,
        }}>
          <a href="index.html" style={{ color:'var(--ink-3)' }}>HOME</a>
          <span style={{ color:'var(--ink-4)' }}>/</span>
          <span style={{ color:'var(--accent-2)' }}>FREE TRIAL LESSON</span>
        </div>

        <div className="aim-trial-layout" style={{ display:'grid', gridTemplateColumns:'1.3fr 1fr', gap:60, alignItems:'start' }}>
          <div>
            <span className="eyebrow"><span className="dot" /> FREE · 60 MIN · 入会金¥0</span>
            <h1 style={{
              margin:'16px 0 20px', fontWeight:900, letterSpacing:-2,
              fontSize:'clamp(48px, 6vw, 84px)', lineHeight:1.02,
            }}>
              無料体験<br/>
              <em style={{ fontStyle:'normal', color:'var(--accent)',
                textShadow:'0 0 30px oklch(70% 0.25 250 / 0.5)' }}>レッスン予約</em>
            </h1>
            <p className="lead" style={{ maxWidth:440, fontSize:16 }}>
              3ステップ、90秒で完了。体験当日の勧誘は一切ありません。
              返信は24時間以内（営業時間内）。
            </p>

            {/* step indicator */}
            <div className="aim-steps" style={{ display:'flex', gap:12, marginTop:36, marginBottom:32 }}>
              {[1,2,3].map(n => (
                <div key={n} style={{
                  flex:1,
                  padding:'12px 14px',
                  background: step >= n ? 'rgba(232,237,247,0.06)' : 'transparent',
                  border:'1px solid ' + (step === n ? 'var(--accent)' : step > n ? 'var(--rule-strong)' : 'var(--rule)'),
                  borderLeft: '3px solid ' + (step >= n ? 'var(--accent)' : 'var(--rule)'),
                }}>
                  <div className="mono" style={{ fontSize:10, letterSpacing:2,
                    color: step >= n ? 'var(--accent)' : 'var(--ink-4)' }}>
                    STEP {n}
                  </div>
                  <div style={{ fontSize:13, fontWeight:700, marginTop:4,
                    color: step >= n ? 'var(--ink)' : 'var(--ink-3)' }}>
                    {n === 1 && 'コースを選ぶ'}
                    {n === 2 && '日時を選ぶ'}
                    {n === 3 && '連絡先を入力'}
                  </div>
                </div>
              ))}
            </div>

            <div className="aim-form-card" style={{
              padding:'36px 40px 32px', background:'rgba(10,14,25,0.85)',
              border:'1px solid var(--rule-strong)',
              backdropFilter:'blur(20px)',
            }}>
              {step === 1 && (
                <div>
                  <div className="mono" style={{ fontSize:11, letterSpacing:2, color:'var(--accent-2)', marginBottom:16 }}>
                    STEP 1 · SELECT YOUR COURSE
                  </div>
                  <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
                    {services.map(s => (
                      <label key={s.id} className="aim-course-option" style={{
                        display:'grid', gridTemplateColumns:'24px 1fr auto', gap:16, alignItems:'center',
                        padding:'18px 20px',
                        background: form.service === s.id ? 'rgba(100,140,220,0.08)' : 'transparent',
                        border:'1px solid ' + (form.service === s.id ? 'var(--accent)' : 'var(--rule)'),
                        cursor:'pointer',
                        boxShadow: form.service === s.id ? 'inset 0 0 20px oklch(70% 0.25 250 / 0.1)' : 'none',
                      }}>
                        <input type="radio" name="service" checked={form.service === s.id}
                          onChange={() => update('service', s.id)}
                          style={{ accentColor:'var(--accent)' }} />
                        <div>
                          <div style={{ fontSize:18, fontWeight:900 }}>{s.label}</div>
                          <div className="mono" style={{ fontSize:11, letterSpacing:2,
                            color:'var(--accent-2)', marginTop:4 }}>{s.en}</div>
                        </div>
                        <span className="tag">{s.note}</span>
                      </label>
                    ))}
                  </div>
                </div>
              )}

              {step === 2 && (
                <div>
                  <div className="mono" style={{ fontSize:11, letterSpacing:2, color:'var(--accent-2)', marginBottom:16 }}>
                    STEP 2 · PICK DATE & TIME
                  </div>
                  <div style={{ fontSize:13, color:'var(--ink-3)', marginBottom:10 }}>希望日</div>
                  <div className="aim-date-grid" style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:8, marginBottom:24 }}>
                    {dates.map(d => (
                      <button key={d.d} onClick={() => update('date', d.d)}
                        disabled={d.avail === 0}
                        style={{
                          padding:'12px 10px',
                          background: form.date === d.d ? 'rgba(100,140,220,0.12)' : 'transparent',
                          border:'1px solid ' + (form.date === d.d ? 'var(--accent)' : 'var(--rule)'),
                          cursor: d.avail === 0 ? 'not-allowed' : 'pointer',
                          opacity: d.avail === 0 ? 0.4 : 1,
                          color:'var(--ink)', fontFamily:'var(--ff-mono)',
                        }}>
                        <div style={{ fontSize:12 }}>{d.d}</div>
                        <div style={{ fontSize:10, color: d.avail === 0 ? 'var(--ink-4)' : 'var(--accent-2)',
                          marginTop:3 }}>
                          {d.avail === 0 ? '満席' : `空き${d.avail}`}
                        </div>
                      </button>
                    ))}
                  </div>
                  <div style={{ fontSize:13, color:'var(--ink-3)', marginBottom:10 }}>希望時間</div>
                  <div className="aim-time-grid" style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:8 }}>
                    {times.map(t => (
                      <button key={t} onClick={() => update('time', t)}
                        style={{
                          padding:'12px 0',
                          background: form.time === t ? 'rgba(100,140,220,0.12)' : 'transparent',
                          border:'1px solid ' + (form.time === t ? 'var(--accent)' : 'var(--rule)'),
                          cursor:'pointer', color:'var(--ink)',
                          fontFamily:'var(--ff-mono)', fontSize:13,
                        }}>
                        {t}
                      </button>
                    ))}
                  </div>
                </div>
              )}

              {step === 3 && (
                <div>
                  <div className="mono" style={{ fontSize:11, letterSpacing:2, color:'var(--accent-2)', marginBottom:16 }}>
                    STEP 3 · YOUR INFO
                  </div>
                  <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
                    <Field label="お名前" ph="山田 太郎"
                      val={form.name} onChange={v => update('name', v)} />
                    <Field label="メールアドレス" ph="you@example.com"
                      val={form.email} onChange={v => update('email', v)} />
                    <Field label="電話番号（任意）" ph="090-0000-0000"
                      val={form.phone} onChange={v => update('phone', v)} />
                    <div>
                      <div style={{ fontSize:12, color:'var(--ink-3)', marginBottom:8, letterSpacing:1 }}>
                        音楽経験
                      </div>
                      <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>
                        {[
                          { v:'none', l:'まったく初心者' },
                          { v:'some', l:'少しだけ' },
                          { v:'hobby', l:'趣味で続けている' },
                          { v:'returning', l:'ブランクあり' },
                        ].map(o => (
                          <button key={o.v} onClick={() => update('experience', o.v)}
                            style={{
                              padding:'8px 14px', fontSize:13,
                              background: form.experience === o.v ? 'rgba(100,140,220,0.15)' : 'transparent',
                              border:'1px solid ' + (form.experience === o.v ? 'var(--accent)' : 'var(--rule)'),
                              color:'var(--ink)', cursor:'pointer',
                            }}>{o.l}</button>
                        ))}
                      </div>
                    </div>
                    <div>
                      <div style={{ fontSize:12, color:'var(--ink-3)', marginBottom:8, letterSpacing:1 }}>
                        やってみたいこと（任意）
                      </div>
                      <textarea rows={3} value={form.goal}
                        onChange={e => update('goal', e.target.value)}
                        placeholder="例：カラオケで◯◯を歌えるようになりたい / 会社の忘年会で歌う予定がある 等"
                        style={{
                          width:'100%', padding:'12px 14px',
                          background:'transparent', border:'1px solid var(--rule)',
                          color:'var(--ink)', fontFamily:'inherit', fontSize:14,
                          resize:'vertical',
                        }} />
                    </div>
                  </div>
                </div>
              )}

              <div className="aim-form-actions" style={{ display:'flex', justifyContent:'space-between', gap:14, marginTop:32 }}>
                <button onClick={() => setStep(Math.max(1, step - 1))}
                  disabled={step === 1}
                  className="btn btn-ghost"
                  style={{ padding:'14px 20px', fontSize:13,
                    opacity: step === 1 ? 0.4 : 1,
                    cursor: step === 1 ? 'not-allowed' : 'pointer' }}>
                  ← 戻る
                </button>
                {step < 3 ? (
                  <button onClick={() => setStep(step + 1)} className="btn btn-primary"
                    style={{ padding:'14px 22px', fontSize:13 }}>
                    次へ <span className="arrow">→</span>
                  </button>
                ) : (
                  <button onClick={() => alert('体験レッスンのご予約を受け付けました！24時間以内にメールでご連絡します。')}
                    className="btn btn-primary" style={{ padding:'14px 22px', fontSize:13 }}>
                    予約を確定する <span className="arrow">→</span>
                  </button>
                )}
              </div>
            </div>
          </div>

          {/* Sidebar summary */}
          <aside className="aim-booking-summary" style={{
            position:'sticky', top:100,
            padding:'28px 28px 24px',
            background:'rgba(10,14,25,0.7)',
            border:'1px solid var(--rule-strong)',
            backdropFilter:'blur(16px)',
          }}>
            <div className="mono" style={{ fontSize:11, letterSpacing:2, color:'var(--ink-3)', marginBottom:4 }}>
              BOOKING SUMMARY
            </div>
            <div style={{ fontSize:22, fontWeight:900, letterSpacing:-0.5 }}>ご予約内容</div>
            <hr className="rule" style={{ margin:'18px 0' }} />

            <Row k="コース" v={services.find(s => s.id === form.service)?.label} />
            <Row k="日付" v={form.date} />
            <Row k="時間" v={`${form.time} – ${addMin(form.time, 60)}`} />
            <Row k="料金" v={<span style={{ color:'var(--accent)', fontWeight:900 }}>¥0</span>} />

            <hr className="rule" style={{ margin:'18px 0' }} />
            <div style={{ display:'flex', flexDirection:'column', gap:10,
              fontSize:12, color:'var(--ink-3)' }}>
              <div>● 手ぶらでOK（筆記用具も不要）</div>
              <div>● 服装自由（スーツでも可）</div>
              <div>● 当日入会の義務はなし</div>
              <div>● キャンセル無料（前日まで）</div>
            </div>

            <hr className="rule" style={{ margin:'18px 0' }} />
            <div className="mono" style={{ fontSize:11, letterSpacing:1.5, color:'var(--ink-3)' }}>
              QUESTIONS?
            </div>
            <a href="tel:" style={{ fontSize:18, fontWeight:900, color:'var(--accent-2)',
              marginTop:6, display:'block' }}>
              📞 03-0000-0000
            </a>
            <div style={{ fontSize:11, color:'var(--ink-3)', marginTop:4 }}>
              平日 12:00–22:00 / 土日 10:00–20:00
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}

function Field({ label, ph, val, onChange }) {
  return (
    <div>
      <div style={{ fontSize:12, color:'var(--ink-3)', marginBottom:8, letterSpacing:1 }}>{label}</div>
      <input type="text" value={val} onChange={e => onChange(e.target.value)} placeholder={ph}
        style={{
          width:'100%', padding:'12px 14px',
          background:'transparent', border:'1px solid var(--rule)',
          color:'var(--ink)', fontFamily:'inherit', fontSize:14,
        }} />
    </div>
  );
}

function Row({ k, v }) {
  return (
    <div style={{ display:'flex', justifyContent:'space-between',
      padding:'8px 0', fontSize:14 }}>
      <span style={{ color:'var(--ink-3)' }}>{k}</span>
      <span style={{ fontWeight:700 }}>{v}</span>
    </div>
  );
}

function addMin(t, m) {
  const [h, mm] = t.split(':').map(Number);
  const total = h * 60 + mm + m;
  return `${String(Math.floor(total/60)).padStart(2,'0')}:${String(total%60).padStart(2,'0')}`;
}

window.TrialBooking = TrialBooking;