RoadmapTimeline

'use client';
import { useState } from 'react';

export default function RoadmapTimeline() {
  const [expanded, setExpanded] = useState(null);
  const items = [
    { id: 1, quarter: 'Q1 2026', title: 'Core Platform Launch', status: 'done', desc: 'Released core product with authentication, billing, and basic API endpoints.', items: ['User auth', 'Stripe integration', 'REST API v1'] },
    { id: 2, quarter: 'Q2 2026', title: 'AI Feature Suite', status: 'active', desc: 'Shipping intelligent automation and AI-powered workflows.', items: ['LLM integration', 'Smart suggestions', 'Auto-tagging'] },
    { id: 3, quarter: 'Q3 2026', title: 'Enterprise & Scale', status: 'planned', desc: 'Enterprise SSO, audit logs, and multi-region deployment.', items: ['SSO/SAML', 'Audit trail', 'EU data center'] },
    { id: 4, quarter: 'Q4 2026', title: 'Platform Ecosystem', status: 'planned', desc: 'Third-party marketplace and plugin developer SDK.', items: ['Plugin SDK', 'Marketplace', 'Webhooks v2'] },
  ];

  const statusConfig = {
    done: { color: '#4ade80', label: 'Shipped', icon: '✓' },
    active: { color: '#C9A84C', label: 'In Progress', icon: '◉' },
    planned: { color: 'rgba(255,255,255,0.25)', label: 'Planned', icon: '○' },
  };

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', maxWidth: '480px' }}>
      <h3 style={{ color: '#F5F5F0', margin: '0 0 24px 0', fontSize: '16px', fontWeight: 700 }}>Product Roadmap</h3>
      {items.map((item, i) => {
        const s = statusConfig[item.status];
        const isExp = expanded === item.id;
        return (
          <div key={item.id} style={{ display: 'flex', gap: '16px', marginBottom: '4px' }}>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}>
              <div style={{
                width: '32px', height: '32px', borderRadius: '50%',
                background: item.status === 'done' ? s.color + '20' : item.status === 'active' ? s.color + '20' : 'rgba(255,255,255,0.05)',
                border: `2px solid ${s.color}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: s.color, fontSize: '14px', fontWeight: 700,
                boxShadow: item.status === 'active' ? `0 0 16px ${s.color}60` : 'none',
              }}>{s.icon}</div>
              {i < items.length - 1 && <div style={{ width: '2px', flex: 1, minHeight: '24px', background: 'rgba(255,255,255,0.07)', margin: '6px 0' }} />}
            </div>
            <div style={{ flex: 1, paddingBottom: '20px' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '6px', cursor: 'pointer' }} onClick={() => setExpanded(isExp ? null : item.id)}>
                <div>
                  <span style={{ color: 'rgba(245,245,240,0.35)', fontSize: '11px', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{item.quarter}</span>
                  <h4 style={{ color: '#F5F5F0', margin: '2px 0 0 0', fontSize: '14px', fontWeight: 700 }}>{item.title}</h4>
                </div>
                <span style={{ background: s.color + '15', color: s.color, border: `1px solid ${s.color}30`, borderRadius: '6px', padding: '2px 8px', fontSize: '11px', fontWeight: 600 }}>{s.label}</span>
              </div>
              {isExp && (
                <div style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.07)', borderRadius: '10px', padding: '12px 16px' }}>
                  <p style={{ color: 'rgba(245,245,240,0.6)', fontSize: '13px', lineHeight: 1.6, margin: '0 0 10px 0' }}>{item.desc}</p>
                  {item.items.map(feature => (
                    <div key={feature} style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '6px' }}>
                      <span style={{ color: s.color, fontSize: '12px' }}>•</span>
                      <span style={{ color: 'rgba(245,245,240,0.7)', fontSize: '13px' }}>{feature}</span>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        );
      })}
    </div>
  );
}

Component info

About

Product roadmap timeline with status indicators