/* Roadmap timeline */
function Roadmap() {
  const phases = [
    {
      tag: 'PHASE 01',
      date: '〜2026 / 07',
      title: 'クローズドβ',
      desc: '先着10社限定。プロダクト基盤の検証と、コア機能のフィードバック収集。',
      status: 'active',
      bullets: ['全プラット連携検証', '電帳法フロー実装', '完全無料'],
    },
    {
      tag: 'PHASE 02',
      date: '2026 / 08 〜 11',
      title: 'βローンチ',
      desc: 'クローズドβ卒業企業からの紹介制で拡大。GoQSystem等の外部連携を順次展開。',
      status: 'upcoming',
      bullets: ['外部API公開', 'GoQSystem連携開発', '招待コード制'],
    },
    {
      tag: 'PHASE 03',
      date: '2027',
      title: 'SaaS 一般公開',
      desc: 'スターター/エンタープライズの2プランで正式リリース。',
      status: 'future',
      bullets: ['正式プラン公開', '24/7サポート', 'JIIMA認証取得（予定）'],
    },
  ];

  return (
    <section id="roadmap" style={{ position: 'relative', padding: '120px 0' }}>
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <Reveal>
          <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 80px' }}>
            <span className="section-tag">◆ Roadmap · 工程表</span>
            <h2 className="section-h2">
              魔法を、<span className="gold-text serif">段階的に解き放つ。</span>
            </h2>
          </div>
        </Reveal>

        <div style={{ position: 'relative', maxWidth: 1100, margin: '0 auto' }}>
          {/* Connecting line */}
          <div style={{
            position: 'absolute',
            top: 60, left: '8.33%', right: '8.33%',
            height: 1,
            background: 'linear-gradient(90deg, var(--gold) 0%, var(--gold) 33%, var(--ink-4) 66%, var(--line) 100%)',
            zIndex: 1,
          }} />

          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
            gap: 24,
            position: 'relative',
          }}>
            {phases.map((p, i) => {
              const isActive = p.status === 'active';
              const isUpcoming = p.status === 'upcoming';
              return (
                <Reveal key={p.tag} delay={i * 150}>
                  <div style={{ position: 'relative', paddingTop: 60 }}>
                    {/* Node */}
                    <div style={{
                      position: 'absolute',
                      top: 60, left: '50%',
                      transform: 'translate(-50%, -50%) rotate(45deg)',
                      width: 24, height: 24,
                      background: isActive ? 'var(--grad-gold)' : isUpcoming ? 'var(--bg-3)' : 'var(--bg-2)',
                      border: `1px solid ${isActive ? 'var(--gold)' : 'var(--line-strong)'}`,
                      boxShadow: isActive ? '0 0 20px rgba(245,200,66,0.6)' : 'none',
                      zIndex: 2,
                    }} />
                    {isActive && (
                      <div style={{
                        position: 'absolute',
                        top: 60, left: '50%',
                        transform: 'translate(-50%, -50%) rotate(45deg)',
                        width: 36, height: 36,
                        border: '1px solid var(--gold)',
                        opacity: 0.4,
                        animation: 'pulse-gold 2s ease-in-out infinite',
                      }} />
                    )}

                    <div className="card" style={{
                      marginTop: 40,
                      borderColor: isActive ? 'rgba(245,200,66,0.3)' : 'var(--line)',
                      background: isActive
                        ? 'linear-gradient(180deg, rgba(245,200,66,0.06) 0%, rgba(245,200,66,0) 100%)'
                        : 'linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0) 100%)',
                    }}>
                      <div className="mono" style={{
                        fontSize: 10,
                        color: isActive ? 'var(--gold)' : 'var(--ink-3)',
                        letterSpacing: '0.2em',
                        marginBottom: 8,
                      }}>{p.tag}</div>
                      <div className="mono" style={{
                        fontSize: 13,
                        color: 'var(--ink)',
                        letterSpacing: '0.1em',
                        marginBottom: 16,
                      }}>{p.date}</div>
                      <h3 className="serif" style={{
                        fontSize: 24,
                        fontWeight: 600,
                        margin: '0 0 12px',
                        color: isActive ? 'var(--gold)' : 'var(--ink)',
                        letterSpacing: '0.04em',
                      }}>{p.title}</h3>
                      <p style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.8, margin: '0 0 20px' }}>{p.desc}</p>
                      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 6 }}>
                        {p.bullets.map((b) => (
                          <li key={b} style={{
                            fontSize: 12,
                            color: 'var(--ink-3)',
                            display: 'flex',
                            gap: 8,
                            alignItems: 'center',
                          }}>
                            <span style={{ color: isActive ? 'var(--gold)' : 'var(--ink-4)' }}>◆</span>
                            {b}
                          </li>
                        ))}
                      </ul>
                      {isActive && (
                        <div style={{
                          marginTop: 20,
                          paddingTop: 20,
                          borderTop: '1px solid rgba(245,200,66,0.2)',
                          display: 'flex',
                          alignItems: 'center',
                          gap: 8,
                          fontFamily: 'JetBrains Mono, monospace',
                          fontSize: 10,
                          color: 'var(--gold)',
                          letterSpacing: '0.15em',
                        }}>
                          <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--gold)', boxShadow: '0 0 8px var(--gold)', animation: 'pulse-gold 2s ease-in-out infinite' }} />
                          NOW ACCEPTING
                        </div>
                      )}
                    </div>
                  </div>
                </Reveal>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

window.Roadmap = Roadmap;