// Pricing
function Pricing() {
  const [cycle, setCycle] = React.useState('month2');
  const plans = [
    { id:'light', name:'Light', en:'月2回プラン',
      price:{ month2:'11,000', month4:'—' }, per:'¥/月', tax:'税込',
      bullets:['50分 × 月2回','予約キャンセル無料（前日まで）','レッスン後の練習メモ共有','発表会参加 可'],
      best:false, ctaNote:'まず始めてみる' },
    { id:'standard', name:'Standard', en:'月4回プラン',
      price:{ month2:'—', month4:'19,800' }, per:'¥/月', tax:'税込',
      bullets:['50分 × 月4回','予約キャンセル無料（前日まで）','個別練習メニュー作成','録音チェック 月1回','発表会参加 + 優先枠'],
      best:true, ctaNote:'一番人気' },
    { id:'pro', name:'Pro Hobby', en:'月4回 + DTMプラン',
      price:{ month2:'—', month4:'28,600' }, per:'¥/月', tax:'税込',
      bullets:['ボイトレ 50分 × 月4回','DTM 60分 × 月2回','作品制作ロードマップ作成','録音チェック 月2回','作品リリースサポート','発表会 + 発表動画制作'],
      best:false, ctaNote:'本気で残したい人に' },
  ];

  return (
    <section id="pricing" className="section">
      <div className="section-inner">
        <div style={{ display:'flex', alignItems:'flex-end', gap:40, marginBottom:48, flexWrap:'wrap' }}>
          <div style={{ flex:'1 1 460px' }}>
            <span className="eyebrow"><span className="dot" /> <span className="hash">#05</span> 料金プラン</span>
            <h2 className="h2">
              迷わない、<br/>
              <em className="accent">シンプルな</em>3プラン。
            </h2>
          </div>
          <p className="lead" style={{ flex:'1 1 360px' }}>
            入会金は¥11,000（体験当日入会で¥0）。追加費用は発生しません。月途中からの入会は日割り計算。月単位の変更・休会もOK。
          </p>
        </div>

        {/* toggle */}
        <div style={{
          display:'inline-flex', padding:4,
          border:'1px solid var(--rule-strong)', marginBottom:32,
        }}>
          {[
            { id:'month2', label:'月2回' },
            { id:'month4', label:'月4回〜' },
          ].map(t => (
            <button key={t.id} onClick={() => setCycle(t.id)} style={{
              padding:'10px 18px', fontSize:13, fontWeight:700, cursor:'pointer',
              border:'none', fontFamily:'inherit',
              background: cycle === t.id ? 'var(--accent)' : 'transparent',
              color: cycle === t.id ? 'var(--bg-0)' : 'var(--ink-2)',
              transition:'all .15s',
            }}>{t.label}</button>
          ))}
        </div>

        <div className="aim-pricing-grid" style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:20 }}>
          {plans.map(p => {
            const price = p.price[cycle];
            const disabled = price === '—';
            return (
              <div key={p.id} style={{
                position:'relative',
                background: p.best ? 'linear-gradient(180deg, oklch(70% 0.25 250 / 0.15), var(--bg-2))' : 'var(--bg-2)',
                border: p.best ? '1px solid var(--accent)' : '1px solid var(--rule)',
                padding:'40px 32px 32px',
                opacity: disabled ? 0.5 : 1,
                boxShadow: p.best ? '0 0 40px oklch(70% 0.25 250 / 0.2)' : 'none',
              }}>
                {p.best && (
                  <div style={{
                    position:'absolute', top:-14, left:24,
                    padding:'6px 12px', background:'var(--accent)', color:'var(--bg-0)',
                    fontFamily:'var(--ff-display)', fontSize:11, letterSpacing:2,
                    boxShadow:'var(--accent-glow)',
                  }}>{p.ctaNote}</div>
                )}
                <div>
                  <div className="mono" style={{ fontSize:11, letterSpacing:2, color:'var(--ink-3)' }}>{p.en}</div>
                  <div style={{ fontSize:30, fontWeight:900, marginTop:6 }}>{p.name}</div>
                </div>

                <div style={{
                  marginTop:20, display:'flex', alignItems:'baseline', gap:6,
                  paddingBottom:20, borderBottom:'1px dashed var(--rule-strong)',
                }}>
                  <span className="display" style={{ fontSize:14, color:'var(--ink-3)' }}>¥</span>
                  <span className="display" style={{ fontSize:54, color: p.best ? 'var(--accent-2)' : 'var(--ink)',
                    letterSpacing:-1, textShadow: p.best ? '0 0 20px oklch(70% 0.25 250 / 0.4)' : 'none' }}>
                    {disabled ? '—' : price}
                  </span>
                  <span className="mono" style={{ fontSize:12, color:'var(--ink-3)', letterSpacing:1.5, marginLeft:4 }}>
                    / 月 ({p.tax})
                  </span>
                </div>

                <ul style={{ margin:'24px 0 28px', padding:0, listStyle:'none',
                  display:'flex', flexDirection:'column', gap:12 }}>
                  {p.bullets.map(b => (
                    <li key={b} style={{
                      display:'grid', gridTemplateColumns:'20px 1fr', gap:10,
                      fontSize:14, lineHeight:1.6,
                    }}>
                      <span style={{ color:'var(--accent)' }}>♪</span>
                      <span style={{ color:'var(--ink-2)' }}>{b}</span>
                    </li>
                  ))}
                </ul>

                <a href="trial.html" className={p.best ? 'btn btn-primary' : 'btn btn-ghost'} style={{
                  width:'100%', justifyContent:'center', padding:'14px',
                  opacity: disabled ? 0.4 : 1, pointerEvents: disabled ? 'none' : 'auto',
                }}>
                  {p.name}で体験する <span className="arrow">→</span>
                </a>
              </div>
            );
          })}
        </div>

        <div className="aim-pricing-notes" style={{
          marginTop:32, display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:16,
        }}>
          {[
            { k:'入会金', v:'¥11,000', n:'体験当日入会で無料' },
            { k:'事務手数料', v:'¥0', n:'初月以降も発生しません' },
            { k:'契約期間', v:'月単位', n:'休会・退会いつでも' },
            { k:'お支払い', v:'カード / 口座', n:'手数料なし' },
          ].map(f => (
            <div key={f.k} style={{
              padding:'18px 20px', border:'1px solid var(--rule)',
              background:'var(--bg-1)',
            }}>
              <div className="mono" style={{ fontSize:11, letterSpacing:1.5, color:'var(--ink-3)' }}>{f.k}</div>
              <div style={{ fontSize:22, fontWeight:900, marginTop:6, color:'var(--accent-2)' }}>{f.v}</div>
              <div style={{ fontSize:12, color:'var(--ink-3)', marginTop:4 }}>{f.n}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Pricing = Pricing;