// import React, { useState, useEffect, useRef } from 'react';

const { useState, useEffect, useRef } = React;
// Animated background with forward-looking constellation effect
const RoadmapConstellation = () => {
  const canvasRef = useRef(null);
  
  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    let animationFrameId;
    let particles = [];
    
    const resizeCanvas = () => {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    };
    
    resizeCanvas();
    window.addEventListener('resize', resizeCanvas);
    
    // Create particles with directional flow
    for (let i = 0; i < 60; i++) {
      particles.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        vx: 0.1 + Math.random() * 0.2, // Slight rightward drift
        vy: (Math.random() - 0.5) * 0.15,
        size: Math.random() * 1.5 + 0.5,
        opacity: Math.random() * 0.3 + 0.05
      });
    }
    
    const animate = () => {
      ctx.fillStyle = 'rgba(10, 12, 16, 0.03)';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      
      particles.forEach((p, i) => {
        p.x += p.vx;
        p.y += p.vy;
        
        // Wrap around
        if (p.x > canvas.width) p.x = 0;
        if (p.x < 0) p.x = canvas.width;
        if (p.y < 0 || p.y > canvas.height) p.vy *= -1;
        
        // Gradient color based on x position (teal to purple)
        const progress = p.x / canvas.width;
        const r = Math.floor(94 + (167 - 94) * progress);
        const g = Math.floor(234 + (139 - 234) * progress);
        const b = Math.floor(212 + (250 - 212) * progress);
        
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${p.opacity})`;
        ctx.fill();
        
        particles.forEach((p2, j) => {
          if (i === j) return;
          const dx = p.x - p2.x;
          const dy = p.y - p2.y;
          const dist = Math.sqrt(dx * dx + dy * dy);
          
          if (dist < 100) {
            ctx.beginPath();
            ctx.moveTo(p.x, p.y);
            ctx.lineTo(p2.x, p2.y);
            ctx.strokeStyle = `rgba(${r}, ${g}, ${b}, ${0.03 * (1 - dist / 100)})`;
            ctx.lineWidth = 0.5;
            ctx.stroke();
          }
        });
      });
      
      animationFrameId = requestAnimationFrame(animate);
    };
    
    animate();
    
    return () => {
      cancelAnimationFrame(animationFrameId);
      window.removeEventListener('resize', resizeCanvas);
    };
  }, []);
  
  return (
    <canvas
      ref={canvasRef}
      style={{
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        pointerEvents: 'none',
        zIndex: 0,
        opacity: 0.6
      }}
    />
  );
};

// Timeline Phase Card
const PhaseCard = ({ phase, title, status, description, items, color, statusColor }) => (
  <div style={{
    background: 'linear-gradient(135deg, rgba(30, 35, 45, 0.6), rgba(20, 25, 35, 0.6))',
    borderRadius: '20px',
    border: `1px solid ${color}25`,
    padding: '32px',
    position: 'relative',
    overflow: 'hidden'
  }}>
    {/* Status badge */}
    <div style={{
      position: 'absolute',
      top: '24px',
      right: '24px',
      padding: '6px 14px',
      background: `${statusColor}15`,
      border: `1px solid ${statusColor}30`,
      borderRadius: '100px',
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: '10px',
      fontWeight: '600',
      color: statusColor,
      textTransform: 'uppercase',
      letterSpacing: '0.5px'
    }}>
      {status}
    </div>
    
    {/* Phase label */}
    <div style={{
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: '11px',
      color: color,
      textTransform: 'uppercase',
      letterSpacing: '1px',
      marginBottom: '8px'
    }}>
      {phase}
    </div>
    
    {/* Title */}
    <h3 style={{
      fontFamily: '"Sora", sans-serif',
      fontSize: '24px',
      fontWeight: '600',
      color: '#fff',
      marginBottom: '12px',
      paddingRight: '100px'
    }}>
      {title}
    </h3>
    
    {/* Description */}
    <p style={{
      fontFamily: '"DM Sans", sans-serif',
      fontSize: '15px',
      lineHeight: '1.6',
      color: 'rgba(255, 255, 255, 0.55)',
      marginBottom: '24px'
    }}>
      {description}
    </p>
    
    {/* Items */}
    <div style={{
      display: 'grid',
      gridTemplateColumns: 'repeat(2, 1fr)',
      gap: '12px'
    }}>
      {items.map((item, i) => (
        <div key={i} style={{
          padding: '16px',
          background: 'rgba(0, 0, 0, 0.2)',
          borderRadius: '12px',
          borderLeft: `3px solid ${color}60`
        }}>
          <h4 style={{
            fontFamily: '"Sora", sans-serif',
            fontSize: '14px',
            fontWeight: '600',
            color: '#fff',
            marginBottom: '6px'
          }}>{item.title}</h4>
          <p style={{
            fontFamily: '"DM Sans", sans-serif',
            fontSize: '13px',
            lineHeight: '1.5',
            color: 'rgba(255, 255, 255, 0.5)'
          }}>{item.description}</p>
        </div>
      ))}
    </div>
  </div>
);

// Theme Card
const ThemeCard = ({ number, title, description, color }) => (
  <div style={{
    background: 'linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01))',
    border: '1px solid rgba(255, 255, 255, 0.06)',
    borderRadius: '16px',
    padding: '28px',
    transition: 'all 0.3s ease',
    position: 'relative'
  }}>
    <div style={{
      position: 'absolute',
      top: '20px',
      right: '20px',
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: '48px',
      fontWeight: '700',
      color: `${color}15`,
      lineHeight: 1
    }}>
      {number}
    </div>
    
    <div style={{
      width: '40px',
      height: '40px',
      borderRadius: '10px',
      background: `linear-gradient(135deg, ${color}30, ${color}10)`,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      marginBottom: '18px'
    }}>
      <div style={{
        width: '12px',
        height: '12px',
        borderRadius: '50%',
        background: color
      }}/>
    </div>
    
    <h4 style={{
      fontFamily: '"Sora", sans-serif',
      fontSize: '17px',
      fontWeight: '600',
      color: '#fff',
      marginBottom: '10px'
    }}>{title}</h4>
    
    <p style={{
      fontFamily: '"DM Sans", sans-serif',
      fontSize: '14px',
      lineHeight: '1.65',
      color: 'rgba(255, 255, 255, 0.55)'
    }}>{description}</p>
  </div>
);

// Audience Card
const AudienceCard = ({ title, description, icon }) => (
  <div style={{
    padding: '24px',
    background: 'rgba(255, 255, 255, 0.02)',
    borderRadius: '14px',
    border: '1px solid rgba(255, 255, 255, 0.05)',
    transition: 'all 0.3s ease'
  }}>
    <div style={{
      width: '44px',
      height: '44px',
      borderRadius: '10px',
      background: 'linear-gradient(135deg, rgba(94, 234, 212, 0.15), rgba(94, 234, 212, 0.05))',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      marginBottom: '16px'
    }}>
      {icon}
    </div>
    
    <h4 style={{
      fontFamily: '"Sora", sans-serif',
      fontSize: '16px',
      fontWeight: '600',
      color: '#fff',
      marginBottom: '10px'
    }}>{title}</h4>
    
    <p style={{
      fontFamily: '"DM Sans", sans-serif',
      fontSize: '14px',
      lineHeight: '1.6',
      color: 'rgba(255, 255, 255, 0.5)'
    }}>{description}</p>
  </div>
);

// Principle Badge
const PrincipleBadge = ({ title, description, icon }) => (
  <div style={{
    display: 'flex',
    alignItems: 'flex-start',
    gap: '16px',
    padding: '20px 24px',
    background: 'rgba(255, 255, 255, 0.02)',
    borderRadius: '12px',
    border: '1px solid rgba(255, 255, 255, 0.05)'
  }}>
    <div style={{
      width: '40px',
      height: '40px',
      borderRadius: '10px',
      background: 'linear-gradient(135deg, rgba(167, 139, 250, 0.2), rgba(167, 139, 250, 0.05))',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      flexShrink: 0
    }}>
      {icon}
    </div>
    <div>
      <h4 style={{
        fontFamily: '"Sora", sans-serif',
        fontSize: '15px',
        fontWeight: '600',
        color: '#fff',
        marginBottom: '4px'
      }}>{title}</h4>
      <p style={{
        fontFamily: '"DM Sans", sans-serif',
        fontSize: '13px',
        lineHeight: '1.5',
        color: 'rgba(255, 255, 255, 0.5)'
      }}>{description}</p>
    </div>
  </div>
);

// Main Roadmap Page
// export default function RoadmapPage() {
const RoadmapPage = () => {
  const [scrollY, setScrollY] = useState(0);
  
  useEffect(() => {
    const handleScroll = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);
  
  const phases = [
    {
      phase: 'Now',
      title: 'Live in the product',
      status: 'Available',
      statusColor: '#5eead4',
      color: '#5eead4',
      description: 'Focus on research quality, catalyst tracking, and documented simulation.',
      items: [
        { title: 'Core research engine', description: 'Company and catalyst reports for a growing universe of names, with consistent structure and clear sourcing.' },
        { title: 'Top movers and catalyst feed', description: 'Daily coverage of notable price moves with explanations of the main drivers behind each move.' },
        { title: 'Portfolio Management Program v1', description: 'Simulated portfolios with thesis fields, risk tags, exit notes, and a full activity log.' },
        { title: 'Cohort dashboards and exports', description: 'Views that let cohorts share portfolios and reports with sponsors, faculty, or internal leads.' }
      ]
    },
    {
      phase: 'Next',
      title: 'Near-term development',
      status: 'In Progress',
      statusColor: '#fbbf24',
      color: '#a78bfa',
      description: 'Expansion of coverage, portfolio analytics, and the first Strategic Memory features.',
      items: [
        { title: 'Expanded coverage and sectors', description: 'Broader lists of companies across more sectors and themes, with more consistent updates through earnings cycles.' },
        { title: 'Portfolio analytics upgrades', description: 'Exposure breakdowns by sector, theme, and factor, clearer drawdown tracking, and better concentration visibility.' },
        { title: 'Strategic Memory v1', description: 'A first layer that stores closed trades and outcomes, then uses that history to inform prompts and post-trade review.' },
        { title: 'Cohort tooling', description: 'Features that make it easy to set up cohorts, tag them, and export summaries without administrative overhead.' }
      ]
    },
    {
      phase: 'Later',
      title: 'Longer-term plans',
      status: 'Planned',
      statusColor: '#8b8b9a',
      color: '#f87171',
      description: 'Steps toward a full wealth-management environment with appropriate licensing and controls.',
      items: [
        { title: 'Multi-account portfolio hub', description: 'A unified view that can hold paper portfolios, personal accounts, and managed strategies in one interface.' },
        { title: 'Advanced strategy and screening', description: 'Custom screeners, reusable playbooks, scenario analysis, and deeper tools for building portfolio strategies.' },
        { title: 'Strategic Memory v2', description: 'A richer intelligence layer that observes patterns across trades, themes, and catalysts and surfaces structured insights.' },
        { title: 'Live trading layer', description: 'Live trading on top of the research environment. Arrives only after regulatory approvals and licensing are in place.' }
      ]
    }
  ];
  
  const themes = [
    {
      number: '01',
      title: 'Research depth and coverage',
      description: 'Broader company coverage, richer sector and theme context, and clearer views of catalysts and risk.',
      color: '#5eead4'
    },
    {
      number: '02',
      title: 'Portfolio environment and tools',
      description: 'Stronger support for strategy design, position sizing, exposure analysis, and long-term portfolio review.',
      color: '#a78bfa'
    },
    {
      number: '03',
      title: 'Strategic Memory and intelligence',
      description: 'Systems that store and study closed positions and recurring patterns, then feed insights back into prompts and dashboards.',
      color: '#fbbf24'
    },
    {
      number: '04',
      title: 'Programs, cohorts, and live trading',
      description: 'Capabilities that support cohorts and structured programs today, preparing the foundation for regulated live trading.',
      color: '#f87171'
    }
  ];
  
  return (
    <div style={{
      minHeight: '100vh',
      background: 'linear-gradient(180deg, #0a0c10 0%, #0f1218 50%, #0a0c10 100%)',
      color: '#fff',
      fontFamily: '"DM Sans", sans-serif',
      position: 'relative',
      overflow: 'hidden'
    }}>
      {/* Global styles */}
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=JetBrains+Mono:wght@400;500;600&family=Sora:wght@300;400;500;600;700&display=swap');
        
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        
        html {
          scroll-behavior: smooth;
        }
        
        @keyframes fadeInUp {
          from {
            opacity: 0;
            transform: translateY(30px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        
        .nav-link {
          color: rgba(255, 255, 255, 0.7);
          text-decoration: none;
          font-size: 14px;
          font-weight: 500;
          position: relative;
          transition: color 0.2s ease;
        }
        
        .nav-link:hover {
          color: #fff;
        }
        
        .nav-link::after {
          content: '';
          position: absolute;
          bottom: -4px;
          left: 0;
          width: 0;
          height: 1px;
          background: linear-gradient(90deg, #5eead4, #a78bfa);
          transition: width 0.3s ease;
        }
        
        .nav-link:hover::after {
          width: 100%;
        }
        
        .nav-link.active {
          color: #5eead4;
        }
        
        .nav-link.active::after {
          width: 100%;
        }
        
        .primary-btn {
          background: linear-gradient(135deg, #5eead4 0%, #2dd4bf 100%);
          color: #0a0c10;
          padding: 12px 24px;
          border-radius: 8px;
          font-weight: 600;
          font-size: 14px;
          border: none;
          cursor: pointer;
          transition: all 0.3s ease;
          text-decoration: none;
          display: inline-block;
        }
        
        .primary-btn:hover {
          transform: translateY(-2px);
          box-shadow: 0 10px 30px -10px rgba(94, 234, 212, 0.5);
        }
        
        .section-fade {
          animation: fadeInUp 0.8s ease forwards;
        }
      `}</style>
      
      {/* Animated background */}
      <RoadmapConstellation />
      
      {/* Navigation */}
      <nav style={{
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        zIndex: 100,
        padding: '16px 48px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        background: scrollY > 50 ? 'rgba(10, 12, 16, 0.9)' : 'transparent',
        backdropFilter: scrollY > 50 ? 'blur(20px)' : 'none',
        borderBottom: scrollY > 50 ? '1px solid rgba(255, 255, 255, 0.05)' : 'none',
        transition: 'all 0.3s ease'
      }}>
        <a href="/" style={{
          fontFamily: '"Sora", sans-serif',
          fontSize: '24px',
          fontWeight: '700',
          background: 'linear-gradient(135deg, #5eead4 0%, #a78bfa 100%)',
          WebkitBackgroundClip: 'text',
          WebkitTextFillColor: 'transparent',
          textDecoration: 'none'
        }}>
          Vestiq
        </a>
        
        <div style={{ display: 'flex', alignItems: 'center', gap: '32px' }}>
          <a href="/#platform" className="nav-link">Platform</a>
          <a href="/portfolio-program" className="nav-link">Portfolio Program</a>
          <a href="/universities" className="nav-link">For Universities</a>
          <a href="/roadmap" className="nav-link active">Roadmap</a>
          <a href="/about_us" className="nav-link">About</a>
        </div>
        
        <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
          <a href="/login_page" className="nav-link">Sign In</a>
          <a href="/register_page" className="primary-btn">Get Early Access</a>
        </div>
      </nav>
      
      {/* Hero Section */}
      <section style={{
        padding: '160px 48px 100px',
        position: 'relative',
        zIndex: 1
      }}>
        <div style={{
          maxWidth: '900px',
          margin: '0 auto',
          textAlign: 'center'
        }}>
          <div style={{
            display: 'inline-flex',
            alignItems: 'center',
            gap: '8px',
            padding: '8px 16px',
            background: 'rgba(94, 234, 212, 0.1)',
            border: '1px solid rgba(94, 234, 212, 0.2)',
            borderRadius: '100px',
            marginBottom: '24px'
          }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#5eead4" strokeWidth="2">
              <circle cx="12" cy="12" r="10"/>
              <polyline points="12,6 12,12 16,14"/>
            </svg>
            <span style={{
              fontFamily: '"JetBrains Mono", monospace',
              fontSize: '12px',
              color: '#5eead4'
            }}>Product Roadmap</span>
          </div>
          
          <h1 style={{
            fontFamily: '"Sora", sans-serif',
            fontSize: '52px',
            fontWeight: '600',
            lineHeight: '1.15',
            marginBottom: '24px',
            letterSpacing: '-0.02em'
          }}>
            Vestiq Roadmap
          </h1>
          
          <p style={{
            fontSize: '19px',
            lineHeight: '1.7',
            color: 'rgba(255, 255, 255, 0.6)',
            maxWidth: '700px',
            margin: '0 auto'
          }}>
            A clear view of how Vestiq grows from today's research and simulation platform into a deeper market-intelligence and portfolio environment. Vestiq expands in measured steps around research quality, portfolio tools, and controls.
          </p>
        </div>
      </section>
      
      {/* Where Vestiq Stands Today */}
      <section style={{
        padding: '60px 48px 100px',
        position: 'relative',
        zIndex: 1
      }}>
        <div style={{ maxWidth: '1000px', margin: '0 auto' }}>
          <div style={{
            background: 'linear-gradient(135deg, rgba(94, 234, 212, 0.08), rgba(94, 234, 212, 0.02))',
            borderRadius: '20px',
            border: '1px solid rgba(94, 234, 212, 0.15)',
            padding: '40px'
          }}>
            <div style={{
              display: 'flex',
              alignItems: 'center',
              gap: '12px',
              marginBottom: '20px'
            }}>
              <div style={{
                width: '10px',
                height: '10px',
                borderRadius: '50%',
                background: '#5eead4',
                boxShadow: '0 0 12px rgba(94, 234, 212, 0.5)'
              }}/>
              <h2 style={{
                fontFamily: '"Sora", sans-serif',
                fontSize: '28px',
                fontWeight: '600',
                letterSpacing: '-0.02em'
              }}>
                Where Vestiq stands today
              </h2>
            </div>
            
            <p style={{
              fontSize: '16px',
              lineHeight: '1.7',
              color: 'rgba(255, 255, 255, 0.6)',
              marginBottom: '24px'
            }}>
              Vestiq operates today as a research and simulation platform. The system reads filings, earnings, news, regulatory actions, and macro data, then turns that information into company reports, catalyst explanations, and tools for running simulated portfolios with documented decisions.
            </p>
            
            <div style={{
              padding: '16px 20px',
              background: 'rgba(0, 0, 0, 0.2)',
              borderRadius: '10px',
              fontFamily: '"JetBrains Mono", monospace',
              fontSize: '12px',
              color: 'rgba(255, 255, 255, 0.5)'
            }}>
              <span style={{ color: '#5eead4' }}>Note:</span> Vestiq does not execute live trades, route orders, or act as a broker. Current capabilities focus on research, simulation, and documentation.
            </div>
          </div>
        </div>
      </section>
      
      {/* Themes Section */}
      <section style={{
        padding: '80px 48px',
        background: 'linear-gradient(180deg, rgba(20, 24, 32, 0.3) 0%, transparent 100%)',
        position: 'relative',
        zIndex: 1
      }}>
        <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
          <h2 style={{
            fontFamily: '"Sora", sans-serif',
            fontSize: '36px',
            fontWeight: '600',
            marginBottom: '16px',
            textAlign: 'center',
            letterSpacing: '-0.02em'
          }}>
            Themes that guide the roadmap
          </h2>
          <p style={{
            fontSize: '16px',
            color: 'rgba(255, 255, 255, 0.5)',
            textAlign: 'center',
            marginBottom: '48px'
          }}>
            Four themes shape every step on the roadmap
          </p>
          
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(4, 1fr)',
            gap: '20px'
          }}>
            {themes.map((theme, i) => (
              <ThemeCard key={i} {...theme} />
            ))}
          </div>
        </div>
      </section>
      
      {/* Timeline Section */}
      <section style={{
        padding: '100px 48px',
        position: 'relative',
        zIndex: 1
      }}>
        <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
          <h2 style={{
            fontFamily: '"Sora", sans-serif',
            fontSize: '36px',
            fontWeight: '600',
            marginBottom: '16px',
            textAlign: 'center',
            letterSpacing: '-0.02em'
          }}>
            Timeline at a glance
          </h2>
          <p style={{
            fontSize: '16px',
            color: 'rgba(255, 255, 255, 0.5)',
            textAlign: 'center',
            marginBottom: '56px'
          }}>
            Timelines are directional and may adjust as Vestiq learns from users, partners, and regulators
          </p>
          
          {/* Timeline connector */}
          <div style={{
            position: 'relative',
            marginBottom: '32px'
          }}>
            <div style={{
              position: 'absolute',
              top: '50%',
              left: '0',
              right: '0',
              height: '4px',
              background: 'linear-gradient(90deg, #5eead4, #a78bfa, #f87171)',
              borderRadius: '2px',
              opacity: 0.3
            }}/>
            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              position: 'relative'
            }}>
              {['Now', 'Next', 'Later'].map((label, i) => (
                <div key={i} style={{
                  display: 'flex',
                  flexDirection: 'column',
                  alignItems: 'center',
                  gap: '8px'
                }}>
                  <div style={{
                    width: '16px',
                    height: '16px',
                    borderRadius: '50%',
                    background: i === 0 ? '#5eead4' : i === 1 ? '#a78bfa' : '#f87171',
                    boxShadow: `0 0 20px ${i === 0 ? 'rgba(94, 234, 212, 0.5)' : i === 1 ? 'rgba(167, 139, 250, 0.5)' : 'rgba(248, 113, 113, 0.5)'}`
                  }}/>
                  <span style={{
                    fontFamily: '"JetBrains Mono", monospace',
                    fontSize: '12px',
                    color: i === 0 ? '#5eead4' : i === 1 ? '#a78bfa' : '#f87171',
                    fontWeight: '600'
                  }}>{label}</span>
                </div>
              ))}
            </div>
          </div>
          
          {/* Phase Cards */}
          <div style={{
            display: 'flex',
            flexDirection: 'column',
            gap: '32px'
          }}>
            {phases.map((phase, i) => (
              <PhaseCard key={i} {...phase} />
            ))}
          </div>
        </div>
      </section>
      
      {/* What This Means Section */}
      <section style={{
        padding: '100px 48px',
        background: 'linear-gradient(180deg, rgba(20, 24, 32, 0.3) 0%, transparent 100%)',
        position: 'relative',
        zIndex: 1
      }}>
        <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
          <h2 style={{
            fontFamily: '"Sora", sans-serif',
            fontSize: '36px',
            fontWeight: '600',
            marginBottom: '48px',
            textAlign: 'center',
            letterSpacing: '-0.02em'
          }}>
            What this roadmap means in practice
          </h2>
          
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(2, 1fr)',
            gap: '20px'
          }}>
            <AudienceCard
              title="For student groups and academic programs"
              description="Cohorts gain a structured place to run portfolios, study companies, and document decisions using real market data. Dashboards and reports can be shared with faculty sponsors or program leads when context on performance and process is helpful."
              icon={
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#5eead4" strokeWidth="2">
                  <path d="M22 10v6M2 10l10-5 10 5-10 5z"/>
                  <path d="M6 12v5c3 3 9 3 12 0v-5"/>
                </svg>
              }
            />
            <AudienceCard
              title="For individual users"
              description="The platform continues to add better tools for idea discovery, research, strategy design, portfolio analytics, and self-review inside a simulation environment that keeps capital separate."
              icon={
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#5eead4" strokeWidth="2">
                  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                  <circle cx="12" cy="7" r="4"/>
                </svg>
              }
            />
            <AudienceCard
              title="For institutions and firms"
              description="Teams can use Vestiq to track portfolios, generate reports, and review decision quality for internal training, research exercises, or competitions. Vestiq provides the environment and tools; each organization decides how to fold them into its own structure."
              icon={
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#5eead4" strokeWidth="2">
                  <rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>
                  <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
                </svg>
              }
            />
            <AudienceCard
              title="For regulators and oversight teams"
              description="The roadmap keeps documentation, controls, and transparency at the center. Any live trading layer sits on top of a core that already emphasizes data integrity, auditability, and clear separation between research tools and external accounts."
              icon={
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#5eead4" strokeWidth="2">
                  <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
                </svg>
              }
            />
          </div>
        </div>
      </section>
      
      {/* Principles Section */}
      <section style={{
        padding: '100px 48px',
        position: 'relative',
        zIndex: 1
      }}>
        <div style={{ maxWidth: '900px', margin: '0 auto' }}>
          <h2 style={{
            fontFamily: '"Sora", sans-serif',
            fontSize: '36px',
            fontWeight: '600',
            marginBottom: '16px',
            textAlign: 'center',
            letterSpacing: '-0.02em'
          }}>
            Principles for shipping
          </h2>
          <p style={{
            fontSize: '16px',
            color: 'rgba(255, 255, 255, 0.5)',
            textAlign: 'center',
            marginBottom: '40px'
          }}>
            Vestiq releases new capabilities in measured steps
          </p>
          
          <div style={{
            display: 'flex',
            flexDirection: 'column',
            gap: '16px'
          }}>
            <PrincipleBadge
              title="Research-driven"
              description="Every feature strengthens understanding of companies, catalysts, or portfolios."
              icon={
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#a78bfa" strokeWidth="2">
                  <circle cx="11" cy="11" r="8"/>
                  <line x1="21" y1="21" x2="16.65" y2="16.65"/>
                </svg>
              }
            />
            <PrincipleBadge
              title="Evidence-guided"
              description="Product decisions lean on user behavior, cohort results, and performance patterns observed inside the simulation environment."
              icon={
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#a78bfa" strokeWidth="2">
                  <polyline points="22,12 18,12 15,21 9,3 6,12 2,12"/>
                </svg>
              }
            />
            <PrincipleBadge
              title="Control-oriented"
              description="Documentation, transparency, and clarity of roles remain central as the platform grows toward more advanced capabilities."
              icon={
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#a78bfa" strokeWidth="2">
                  <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
                  <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
                </svg>
              }
            />
          </div>
        </div>
      </section>
      
      {/* Staying Informed / CTA Section */}
      <section style={{
        padding: '100px 48px',
        position: 'relative',
        zIndex: 1
      }}>
        <div style={{
          maxWidth: '800px',
          margin: '0 auto',
          textAlign: 'center',
          padding: '60px',
          background: 'linear-gradient(135deg, rgba(94, 234, 212, 0.08), rgba(167, 139, 250, 0.08))',
          borderRadius: '24px',
          border: '1px solid rgba(94, 234, 212, 0.15)'
        }}>
          <h2 style={{
            fontFamily: '"Sora", sans-serif',
            fontSize: '32px',
            fontWeight: '600',
            marginBottom: '16px',
            letterSpacing: '-0.02em'
          }}>
            Staying informed
          </h2>
          <p style={{
            fontSize: '16px',
            lineHeight: '1.7',
            color: 'rgba(255, 255, 255, 0.6)',
            marginBottom: '32px'
          }}>
            Follow Vestiq's progress and roadmap updates by joining the early access list or reaching out to the team.
          </p>
          
          <div style={{ display: 'flex', justifyContent: 'center', gap: '16px', flexWrap: 'wrap' }}>
            <a href="/register_page" className="primary-btn" style={{ padding: '14px 28px', fontSize: '15px' }}>
              Join Early Access
            </a>
            <a href="mailto:ben@vestiq.ai" style={{
              color: 'rgba(255, 255, 255, 0.7)',
              textDecoration: 'none',
              padding: '14px 28px',
              fontSize: '15px',
              fontWeight: '500',
              border: '1px solid rgba(255, 255, 255, 0.2)',
              borderRadius: '8px',
              transition: 'all 0.3s ease'
            }}>
              Contact the team
            </a>
          </div>
        </div>
      </section>
      
      {/* Footer */}
      <footer style={{
        padding: '48px',
        borderTop: '1px solid rgba(255, 255, 255, 0.05)',
        position: 'relative',
        zIndex: 1
      }}>
        <div style={{
          maxWidth: '1400px',
          margin: '0 auto',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          flexWrap: 'wrap',
          gap: '24px'
        }}>
          <div>
            <div style={{
              fontFamily: '"Sora", sans-serif',
              fontSize: '20px',
              fontWeight: '700',
              background: 'linear-gradient(135deg, #5eead4 0%, #a78bfa 100%)',
              WebkitBackgroundClip: 'text',
              WebkitTextFillColor: 'transparent',
              marginBottom: '8px'
            }}>
              Vestiq
            </div>
            <p style={{
              fontFamily: '"DM Sans", sans-serif',
              fontSize: '14px',
              color: 'rgba(255, 255, 255, 0.4)'
            }}>
              Market-intelligence and portfolio management.
            </p>
          </div>
          
          <div style={{ display: 'flex', gap: '32px' }}>
            {['About', 'Legal', 'Privacy', 'Terms', 'Disclosures'].map((link, i) => (
              <a key={i} href="#" style={{
                fontFamily: '"DM Sans", sans-serif',
                fontSize: '14px',
                color: 'rgba(255, 255, 255, 0.4)',
                textDecoration: 'none',
                transition: 'color 0.2s ease'
              }}>
                {link}
              </a>
            ))}
          </div>
        </div>
        
        <div style={{
          maxWidth: '1400px',
          margin: '32px auto 0',
          paddingTop: '24px',
          borderTop: '1px solid rgba(255, 255, 255, 0.03)',
          textAlign: 'center'
        }}>
          <p style={{
            fontFamily: '"JetBrains Mono", monospace',
            fontSize: '12px',
            color: 'rgba(255, 255, 255, 0.3)'
          }}>
            Vestiq is a research and simulation platform. It does not execute trades, act as a broker, or provide personalized investment advice. Any future live trading features will launch only after required regulatory approvals and licensing are in place.
          </p>
        </div>
      </footer>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<RoadmapPage />);