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

const { useState, useEffect, useRef } = React;

// Animated background with data constellation effect (dimmed version)
const DataConstellation = () => {
  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);
    
    for (let i = 0; i < 60; i++) {
      particles.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        vx: (Math.random() - 0.5) * 0.2,
        vy: (Math.random() - 0.5) * 0.2,
        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;
        
        if (p.x < 0 || p.x > canvas.width) p.vx *= -1;
        if (p.y < 0 || p.y > canvas.height) p.vy *= -1;
        
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(94, 234, 212, ${p.opacity * 0.7})`;
        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 < 120) {
            ctx.beginPath();
            ctx.moveTo(p.x, p.y);
            ctx.lineTo(p2.x, p2.y);
            ctx.strokeStyle = `rgba(94, 234, 212, ${0.04 * (1 - dist / 120)})`;
            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.7
      }}
    />
  );
};

// Portfolio Overview Mock for Hero
const PortfolioMock = () => {
  const [showAlert, setShowAlert] = useState(false);
  
  useEffect(() => {
    const timer = setTimeout(() => setShowAlert(true), 2000);
    return () => clearTimeout(timer);
  }, []);
  
  return (
    <div style={{
      position: 'relative',
      width: '100%',
      maxWidth: '540px',
      height: '520px'
    }}>
      {/* Main Portfolio Card */}
      <div style={{
        position: 'absolute',
        top: '0',
        left: '0',
        width: '420px',
        background: 'linear-gradient(135deg, rgba(30, 35, 45, 0.95), rgba(20, 25, 35, 0.95))',
        borderRadius: '16px',
        border: '1px solid rgba(94, 234, 212, 0.15)',
        padding: '24px',
        backdropFilter: 'blur(20px)',
        animation: 'float1 6s ease-in-out infinite',
        boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5)'
      }}>
        <div style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          marginBottom: '20px'
        }}>
          <span style={{
            fontFamily: '"JetBrains Mono", monospace',
            fontSize: '11px',
            color: 'rgba(94, 234, 212, 0.7)',
            textTransform: 'uppercase',
            letterSpacing: '1px'
          }}>Portfolio Overview</span>
          <span style={{
            fontFamily: '"JetBrains Mono", monospace',
            fontSize: '12px',
            color: 'rgba(255, 255, 255, 0.4)'
          }}>Simulated</span>
        </div>
        
        {/* Portfolio Stats */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: '16px',
          marginBottom: '24px'
        }}>
          <div>
            <div style={{
              fontFamily: '"JetBrains Mono", monospace',
              fontSize: '10px',
              color: 'rgba(255, 255, 255, 0.4)',
              textTransform: 'uppercase',
              marginBottom: '4px'
            }}>Total Equity</div>
            <div style={{
              fontFamily: '"JetBrains Mono", monospace',
              fontSize: '18px',
              fontWeight: '600',
              color: '#fff'
            }}>$127,450</div>
          </div>
          <div>
            <div style={{
              fontFamily: '"JetBrains Mono", monospace',
              fontSize: '10px',
              color: 'rgba(255, 255, 255, 0.4)',
              textTransform: 'uppercase',
              marginBottom: '4px'
            }}>Cash</div>
            <div style={{
              fontFamily: '"JetBrains Mono", monospace',
              fontSize: '18px',
              fontWeight: '600',
              color: '#fff'
            }}>$18,230</div>
          </div>
          <div>
            <div style={{
              fontFamily: '"JetBrains Mono", monospace',
              fontSize: '10px',
              color: 'rgba(255, 255, 255, 0.4)',
              textTransform: 'uppercase',
              marginBottom: '4px'
            }}>Today's P&L</div>
            <div style={{
              fontFamily: '"JetBrains Mono", monospace',
              fontSize: '18px',
              fontWeight: '600',
              color: '#5eead4'
            }}>+$1,847</div>
          </div>
        </div>
        
        {/* Positions Table */}
        <div style={{
          background: 'rgba(0, 0, 0, 0.2)',
          borderRadius: '10px',
          padding: '12px'
        }}>
          <div style={{
            display: 'grid',
            gridTemplateColumns: '1fr 0.7fr 0.9fr 0.9fr 0.8fr',
            gap: '8px',
            padding: '8px 0',
            borderBottom: '1px solid rgba(255, 255, 255, 0.06)',
            marginBottom: '4px'
          }}>
            {['Ticker', 'Weight', 'Cost', 'Price', 'P&L'].map((h, i) => (
              <span key={i} style={{
                fontFamily: '"JetBrains Mono", monospace',
                fontSize: '9px',
                color: 'rgba(255, 255, 255, 0.35)',
                textTransform: 'uppercase',
                letterSpacing: '0.5px'
              }}>{h}</span>
            ))}
          </div>
          
          {[
            { ticker: 'ARWR', weight: '24%', cost: '$42.15', price: '$47.82', pnl: '+13.5%', positive: true },
            { ticker: 'PLTR', weight: '18%', cost: '$21.40', price: '$23.16', pnl: '+8.2%', positive: true },
            { ticker: 'DDOG', weight: '15%', cost: '$118.50', price: '$124.60', pnl: '+5.1%', positive: true },
            { ticker: 'NET', weight: '12%', cost: '$89.20', price: '$86.45', pnl: '-3.1%', positive: false }
          ].map((pos, i) => (
            <div key={i} style={{
              display: 'grid',
              gridTemplateColumns: '1fr 0.7fr 0.9fr 0.9fr 0.8fr',
              gap: '8px',
              padding: '10px 0',
              borderBottom: i < 3 ? '1px solid rgba(255, 255, 255, 0.04)' : 'none'
            }}>
              <span style={{
                fontFamily: '"JetBrains Mono", monospace',
                fontSize: '13px',
                fontWeight: '600',
                color: '#fff'
              }}>{pos.ticker}</span>
              <span style={{
                fontFamily: '"JetBrains Mono", monospace',
                fontSize: '12px',
                color: 'rgba(255, 255, 255, 0.5)'
              }}>{pos.weight}</span>
              <span style={{
                fontFamily: '"JetBrains Mono", monospace',
                fontSize: '12px',
                color: 'rgba(255, 255, 255, 0.5)'
              }}>{pos.cost}</span>
              <span style={{
                fontFamily: '"JetBrains Mono", monospace',
                fontSize: '12px',
                color: 'rgba(255, 255, 255, 0.7)'
              }}>{pos.price}</span>
              <span style={{
                fontFamily: '"JetBrains Mono", monospace',
                fontSize: '12px',
                color: pos.positive ? '#5eead4' : '#f87171'
              }}>{pos.pnl}</span>
            </div>
          ))}
        </div>
      </div>
      
      {/* Position Detail Card */}
      <div style={{
        position: 'absolute',
        bottom: '30px',
        right: '0',
        width: '280px',
        background: 'linear-gradient(135deg, rgba(30, 35, 45, 0.98), rgba(20, 25, 35, 0.98))',
        borderRadius: '14px',
        border: '1px solid rgba(167, 139, 250, 0.2)',
        padding: '18px',
        backdropFilter: 'blur(20px)',
        animation: 'float2 6s ease-in-out infinite',
        boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5)'
      }}>
        <div style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          marginBottom: '14px'
        }}>
          <span style={{
            fontFamily: '"JetBrains Mono", monospace',
            fontSize: '10px',
            color: 'rgba(167, 139, 250, 0.7)',
            textTransform: 'uppercase',
            letterSpacing: '1px'
          }}>Position Detail</span>
          <span style={{
            fontFamily: '"JetBrains Mono", monospace',
            fontSize: '15px',
            fontWeight: '600',
            color: '#fff'
          }}>ARWR</span>
        </div>
        
        <p style={{
          fontFamily: '"DM Sans", sans-serif',
          fontSize: '12px',
          lineHeight: '1.5',
          color: 'rgba(255, 255, 255, 0.6)',
          marginBottom: '14px'
        }}>
          <span style={{ color: 'rgba(167, 139, 250, 0.8)', fontWeight: '500' }}>Thesis:</span> RNAi platform with near-term catalysts from Phase 3 readouts and expanded Novo partnership.
        </p>
        
        <div style={{
          display: 'flex',
          flexWrap: 'wrap',
          gap: '6px',
          marginBottom: '14px'
        }}>
          {['FDA Decision Q1', 'Novo Partnership', 'Pipeline Expansion'].map((cat, i) => (
            <span key={i} style={{
              padding: '4px 10px',
              background: 'rgba(94, 234, 212, 0.1)',
              borderRadius: '100px',
              fontFamily: '"JetBrains Mono", monospace',
              fontSize: '9px',
              color: '#5eead4'
            }}>{cat}</span>
          ))}
        </div>
        
        <div style={{
          padding: '10px',
          background: 'rgba(251, 191, 36, 0.08)',
          borderRadius: '8px',
          border: '1px solid rgba(251, 191, 36, 0.15)'
        }}>
          <span style={{
            fontFamily: '"JetBrains Mono", monospace',
            fontSize: '9px',
            color: 'rgba(251, 191, 36, 0.8)',
            textTransform: 'uppercase'
          }}>Risk Note</span>
          <p style={{
            fontFamily: '"DM Sans", sans-serif',
            fontSize: '11px',
            color: 'rgba(255, 255, 255, 0.6)',
            marginTop: '4px',
            lineHeight: '1.4'
          }}>Binary event risk on FDA decision. Position sized for 20% drawdown tolerance.</p>
        </div>
      </div>
      
      {/* Alert Bubble */}
      <div style={{
        position: 'absolute',
        top: '80px',
        right: '20px',
        background: 'linear-gradient(135deg, rgba(94, 234, 212, 0.15), rgba(94, 234, 212, 0.08))',
        border: '1px solid rgba(94, 234, 212, 0.3)',
        borderRadius: '10px',
        padding: '12px 16px',
        display: 'flex',
        alignItems: 'center',
        gap: '10px',
        opacity: showAlert ? 1 : 0,
        transform: showAlert ? 'translateX(0)' : 'translateX(20px)',
        transition: 'all 0.5s ease',
        boxShadow: '0 10px 30px -10px rgba(94, 234, 212, 0.3)'
      }}>
        <div style={{
          width: '8px',
          height: '8px',
          borderRadius: '50%',
          background: '#5eead4',
          animation: 'pulse 2s ease-in-out infinite'
        }}/>
        <span style={{
          fontFamily: '"DM Sans", sans-serif',
          fontSize: '12px',
          color: '#fff'
        }}>Earnings update published – review thesis</span>
      </div>
    </div>
  );
};

// Step component for "How it works"
const StepCard = ({ number, title, description, icon }) => (
  <div style={{
    flex: 1,
    textAlign: 'center',
    padding: '32px 24px',
    position: 'relative'
  }}>
    {/* Connector line */}
    {number < 4 && (
      <div style={{
        position: 'absolute',
        top: '56px',
        right: '-50%',
        width: '100%',
        height: '2px',
        background: 'linear-gradient(90deg, rgba(94, 234, 212, 0.3), rgba(167, 139, 250, 0.15))',
        zIndex: 0
      }}/>
    )}
    
    <div style={{
      width: '56px',
      height: '56px',
      borderRadius: '50%',
      background: 'linear-gradient(135deg, rgba(94, 234, 212, 0.2), rgba(94, 234, 212, 0.05))',
      border: '2px solid rgba(94, 234, 212, 0.3)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      margin: '0 auto 20px',
      position: 'relative',
      zIndex: 1
    }}>
      <span style={{
        fontFamily: '"JetBrains Mono", monospace',
        fontSize: '18px',
        fontWeight: '600',
        color: '#5eead4'
      }}>{number}</span>
    </div>
    
    <h4 style={{
      fontFamily: '"Sora", sans-serif',
      fontSize: '18px',
      fontWeight: '600',
      color: '#fff',
      marginBottom: '12px'
    }}>{title}</h4>
    
    <p style={{
      fontFamily: '"DM Sans", sans-serif',
      fontSize: '14px',
      lineHeight: '1.6',
      color: 'rgba(255, 255, 255, 0.6)',
      maxWidth: '240px',
      margin: '0 auto'
    }}>{description}</p>
  </div>
);

// Dashboard View Card
const DashboardViewCard = ({ title, description, features, color }) => (
  <div style={{
    background: 'linear-gradient(135deg, rgba(30, 35, 45, 0.6), rgba(20, 25, 35, 0.6))',
    borderRadius: '14px',
    border: `1px solid ${color}20`,
    padding: '24px',
    marginBottom: '16px',
    transition: 'all 0.3s ease'
  }}>
    <h4 style={{
      fontFamily: '"Sora", sans-serif',
      fontSize: '17px',
      fontWeight: '600',
      color: '#fff',
      marginBottom: '10px',
      display: 'flex',
      alignItems: 'center',
      gap: '10px'
    }}>
      <span style={{
        width: '8px',
        height: '8px',
        borderRadius: '50%',
        background: color
      }}/>
      {title}
    </h4>
    <p style={{
      fontFamily: '"DM Sans", sans-serif',
      fontSize: '14px',
      lineHeight: '1.65',
      color: 'rgba(255, 255, 255, 0.6)'
    }}>{description}</p>
  </div>
);

// FAQ Accordion Item
const FAQItem = ({ question, answer, isOpen, onClick }) => (
  <div style={{
    borderBottom: '1px solid rgba(255, 255, 255, 0.06)',
    overflow: 'hidden'
  }}>
    <button
      onClick={onClick}
      style={{
        width: '100%',
        padding: '24px 0',
        background: 'none',
        border: 'none',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        cursor: 'pointer',
        textAlign: 'left'
      }}
    >
      <span style={{
        fontFamily: '"DM Sans", sans-serif',
        fontSize: '17px',
        fontWeight: '500',
        color: '#fff'
      }}>{question}</span>
      <svg 
        width="20" 
        height="20" 
        viewBox="0 0 24 24" 
        fill="none" 
        stroke="rgba(255,255,255,0.4)" 
        strokeWidth="2"
        style={{
          transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
          transition: 'transform 0.3s ease'
        }}
      >
        <polyline points="6,9 12,15 18,9"/>
      </svg>
    </button>
    <div style={{
      maxHeight: isOpen ? '200px' : '0',
      opacity: isOpen ? 1 : 0,
      transition: 'all 0.3s ease',
      overflow: 'hidden'
    }}>
      <p style={{
        fontFamily: '"DM Sans", sans-serif',
        fontSize: '15px',
        lineHeight: '1.7',
        color: 'rgba(255, 255, 255, 0.6)',
        paddingBottom: '24px'
      }}>{answer}</p>
    </div>
  </div>
);

// Main Portfolio Program Page
// export default function PortfolioProgramPage() {
const PortfolioProgramPage = () => {
  const [scrollY, setScrollY] = useState(0);
  const [openFAQ, setOpenFAQ] = useState(null);
  
  useEffect(() => {
    const handleScroll = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);
  
  const faqs = [
    {
      question: 'Is this real money?',
      answer: 'No. The program uses simulated accounts funded with virtual capital and real market data. All trading activity is purely for practice and education.'
    },
    {
      question: 'Does Vestiq execute trades?',
      answer: 'Vestiq does not execute live trades or route orders to any exchange or broker. The program focuses entirely on research, simulation, and documentation of investment decisions.'
    },
    {
      question: 'Is this investment advice?',
      answer: 'Vestiq provides tools and information for educational and research purposes only. Participants decide how to use those tools and remain fully responsible for any separate real-world investment decisions they may make.'
    },
    {
      question: 'Can universities run cohorts?',
      answer: 'Yes. University programs can set up cohorts with class rosters, instructor dashboards, and shared reporting. Faculty members receive access to portfolio performance, trade documentation, and process metrics for grading and evaluation.'
    }
  ];
  
  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 float1 {
          0%, 100% { transform: translateY(0) rotate(0deg); }
          50% { transform: translateY(-10px) rotate(0.5deg); }
        }
        
        @keyframes float2 {
          0%, 100% { transform: translateY(0) rotate(0deg); }
          50% { transform: translateY(-8px) rotate(-0.5deg); }
        }
        
        @keyframes fadeInUp {
          from {
            opacity: 0;
            transform: translateY(30px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        
        @keyframes pulse {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.5; }
        }
        
        .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);
        }
        
        .secondary-btn {
          color: rgba(255, 255, 255, 0.8);
          text-decoration: none;
          font-size: 14px;
          font-weight: 500;
          display: inline-flex;
          align-items: center;
          gap: 8px;
          transition: all 0.2s ease;
        }
        
        .secondary-btn:hover {
          color: #5eead4;
          gap: 12px;
        }
        
        .feature-card {
          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);
          border-radius: 16px;
          padding: 28px;
          transition: all 0.4s ease;
        }
        
        .feature-card:hover {
          border-color: rgba(94, 234, 212, 0.2);
          transform: translateY(-4px);
        }
        
        .section-fade {
          animation: fadeInUp 0.8s ease forwards;
        }
        
        .rule-card {
          padding: 20px;
          background: rgba(255, 255, 255, 0.02);
          border-radius: 12px;
          border: 1px solid rgba(255, 255, 255, 0.04);
        }
        
        .rule-card:hover {
          border-color: rgba(94, 234, 212, 0.15);
          background: rgba(94, 234, 212, 0.03);
        }
        
        .badge {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 12px 20px;
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 10px;
        }
      `}</style>
      
      {/* Animated background */}
      <DataConstellation />
      
      {/* 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 active">Portfolio Program</a>
          <a href="/universities" className="nav-link">For Universities</a>
          <a href="/roadmap" className="nav-link">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={{
        minHeight: '100vh',
        display: 'flex',
        alignItems: 'center',
        padding: '120px 48px 80px',
        position: 'relative',
        zIndex: 1
      }}>
        <div style={{
          maxWidth: '1400px',
          margin: '0 auto',
          width: '100%',
          display: 'grid',
          gridTemplateColumns: '1fr 1.1fr',
          gap: '60px',
          alignItems: 'center'
        }}>
          {/* Left: Copy */}
          <div className="section-fade" style={{ animationDelay: '0.2s' }}>
            <h1 style={{
              fontFamily: '"Sora", sans-serif',
              fontSize: '48px',
              fontWeight: '600',
              lineHeight: '1.15',
              marginBottom: '20px',
              letterSpacing: '-0.02em'
            }}>
              Portfolio Management Program
            </h1>
            <p style={{
              fontSize: '20px',
              lineHeight: '1.5',
              color: 'rgba(255, 255, 255, 0.7)',
              marginBottom: '20px'
            }}>
              A structured environment for running simulated portfolios with clear theses, defined risk, and a full audit trail.
            </p>
            <p style={{
              fontSize: '16px',
              lineHeight: '1.7',
              color: 'rgba(255, 255, 255, 0.5)',
              marginBottom: '36px'
            }}>
              Participants receive virtual capital, research from Vestiq, and tools to document every decision. The program trains disciplined portfolio managers and creates a record of performance that can be reviewed, graded, or evaluated.
            </p>
            
            <div style={{ display: 'flex', alignItems: 'center', gap: '24px', marginBottom: '32px' }}>
              <a href="/register_page" className="primary-btn" style={{ padding: '14px 28px' }}>Apply for Early Access</a>
              
              {/* <a href="#" className="secondary-btn">
                Download Program Overview
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                  <polyline points="7,10 12,15 17,10"/>
                  <line x1="12" y1="15" x2="12" y2="3"/>
                </svg>
              </a> */}

            </div>
            
            <p style={{
              fontFamily: '"JetBrains Mono", monospace',
              fontSize: '12px',
              color: 'rgba(255, 255, 255, 0.35)',
              letterSpacing: '0.02em'
            }}>
              Program uses simulated accounts only. No live trading or brokerage activity occurs inside Vestiq.
            </p>
          </div>
          
          {/* Right: Interface mock */}
          <div className="section-fade" style={{ animationDelay: '0.4s' }}>
            <PortfolioMock />
          </div>
        </div>
      </section>
      
      {/* What the Program Offers Section */}
      <section style={{
        padding: '100px 48px',
        background: 'linear-gradient(180deg, rgba(20, 24, 32, 0.4) 0%, transparent 100%)',
        position: 'relative',
        zIndex: 1
      }}>
        <div style={{ maxWidth: '1000px', margin: '0 auto' }}>
          <h2 style={{
            fontFamily: '"Sora", sans-serif',
            fontSize: '36px',
            fontWeight: '600',
            marginBottom: '24px',
            textAlign: 'center',
            letterSpacing: '-0.02em'
          }}>
            What the Portfolio Management Program offers
          </h2>
          <p style={{
            fontSize: '17px',
            lineHeight: '1.8',
            color: 'rgba(255, 255, 255, 0.6)',
            textAlign: 'center',
            marginBottom: '56px',
            maxWidth: '800px',
            margin: '0 auto 56px'
          }}>
            The Portfolio Management Program turns Vestiq into a training ground for portfolio managers. Each participant runs a simulated account funded with virtual capital, guided by real research, catalyst tracking, and risk tools. Every trade carries a written thesis, risk parameters, and a reason for exit, which creates an auditable history of decisions.
          </p>
          
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(3, 1fr)',
            gap: '24px'
          }}>
            <div className="feature-card">
              <div style={{
                width: '44px',
                height: '44px',
                borderRadius: '10px',
                background: 'linear-gradient(135deg, rgba(94, 234, 212, 0.2), rgba(94, 234, 212, 0.05))',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                marginBottom: '18px'
              }}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#5eead4" strokeWidth="2">
                  <circle cx="12" cy="12" r="10"/>
                  <path d="M12 6v6l4 2"/>
                </svg>
              </div>
              <h4 style={{
                fontFamily: '"Sora", sans-serif',
                fontSize: '17px',
                fontWeight: '600',
                marginBottom: '10px'
              }}>Simulated capital</h4>
              <p style={{
                fontSize: '14px',
                lineHeight: '1.65',
                color: 'rgba(255, 255, 255, 0.55)'
              }}>
                Virtual portfolios tracked with real market data.
              </p>
            </div>
            
            <div className="feature-card">
              <div style={{
                width: '44px',
                height: '44px',
                borderRadius: '10px',
                background: 'linear-gradient(135deg, rgba(167, 139, 250, 0.2), rgba(167, 139, 250, 0.05))',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                marginBottom: '18px'
              }}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#a78bfa" strokeWidth="2">
                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                  <polyline points="14,2 14,8 20,8"/>
                  <line x1="16" y1="13" x2="8" y2="13"/>
                  <line x1="16" y1="17" x2="8" y2="17"/>
                </svg>
              </div>
              <h4 style={{
                fontFamily: '"Sora", sans-serif',
                fontSize: '17px',
                fontWeight: '600',
                marginBottom: '10px'
              }}>Research-driven process</h4>
              <p style={{
                fontSize: '14px',
                lineHeight: '1.65',
                color: 'rgba(255, 255, 255, 0.55)'
              }}>
                Company and catalyst reports from Vestiq support every decision.
              </p>
            </div>
            
            <div className="feature-card">
              <div style={{
                width: '44px',
                height: '44px',
                borderRadius: '10px',
                background: 'linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.05))',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                marginBottom: '18px'
              }}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fbbf24" strokeWidth="2">
                  <path d="M12 20h9"/>
                  <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
                </svg>
              </div>
              <h4 style={{
                fontFamily: '"Sora", sans-serif',
                fontSize: '17px',
                fontWeight: '600',
                marginBottom: '10px'
              }}>Documented history</h4>
              <p style={{
                fontSize: '14px',
                lineHeight: '1.65',
                color: 'rgba(255, 255, 255, 0.55)'
              }}>
                Each trade includes thesis, risk, and exit notes for later review.
              </p>
            </div>
          </div>
        </div>
      </section>
      
      {/* How It Works 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: '56px',
            textAlign: 'center',
            letterSpacing: '-0.02em'
          }}>
            How the program works
          </h2>
          
          <div style={{
            display: 'flex',
            position: 'relative'
          }}>
            <StepCard 
              number={1}
              title="Onboarding"
              description="Participants receive a starting balance, set a basic strategy profile, and connect to Vestiq's research feed."
            />
            <StepCard 
              number={2}
              title="Idea generation"
              description="Vestiq surfaces candidates through company reports, top gainers, catalyst feeds, and custom watchlists."
            />
            <StepCard 
              number={3}
              title="Position entry"
              description="For each entry, record ticker, size, thesis, catalysts, risk level, and planned exit logic."
            />
            <StepCard 
              number={4}
              title="Monitoring and exit"
              description="Vestiq tracks price moves, news, and filings. On exit, record the reason and outcome."
            />
          </div>
          
          <p style={{
            fontFamily: '"JetBrains Mono", monospace',
            fontSize: '13px',
            color: 'rgba(255, 255, 255, 0.4)',
            textAlign: 'center',
            marginTop: '48px',
            padding: '16px 24px',
            background: 'rgba(255, 255, 255, 0.02)',
            borderRadius: '8px',
            border: '1px solid rgba(255, 255, 255, 0.05)',
            maxWidth: '800px',
            margin: '48px auto 0'
          }}>
            All activity stays inside a simulated environment using market data. The program focuses on process, documentation, and pattern recognition.
          </p>
        </div>
      </section>
      
      {/* Inside the Dashboard 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',
          display: 'grid',
          gridTemplateColumns: '1fr 1.2fr',
          gap: '80px',
          alignItems: 'start'
        }}>
          <div>
            <h2 style={{
              fontFamily: '"Sora", sans-serif',
              fontSize: '36px',
              fontWeight: '600',
              marginBottom: '24px',
              letterSpacing: '-0.02em'
            }}>
              Inside the participant dashboard
            </h2>
            <p style={{
              fontSize: '16px',
              lineHeight: '1.7',
              color: 'rgba(255, 255, 255, 0.6)',
              marginBottom: '40px'
            }}>
              The dashboard provides everything participants need to manage their simulated portfolios, track decisions, and respond to market events.
            </p>
            
            {/* Dashboard Mock Preview */}
            <div style={{
              background: 'linear-gradient(135deg, rgba(30, 35, 45, 0.8), rgba(20, 25, 35, 0.8))',
              borderRadius: '16px',
              border: '1px solid rgba(94, 234, 212, 0.1)',
              padding: '20px',
              backdropFilter: 'blur(10px)'
            }}>
              <div style={{
                display: 'flex',
                gap: '8px',
                marginBottom: '16px'
              }}>
                {['Overview', 'Positions', 'Activity', 'Alerts'].map((tab, i) => (
                  <span key={i} style={{
                    padding: '8px 14px',
                    borderRadius: '6px',
                    background: i === 0 ? 'rgba(94, 234, 212, 0.15)' : 'transparent',
                    fontFamily: '"JetBrains Mono", monospace',
                    fontSize: '11px',
                    color: i === 0 ? '#5eead4' : 'rgba(255, 255, 255, 0.4)'
                  }}>{tab}</span>
                ))}
              </div>
              <div style={{
                height: '120px',
                background: 'rgba(0, 0, 0, 0.2)',
                borderRadius: '8px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center'
              }}>
                <span style={{
                  fontFamily: '"JetBrains Mono", monospace',
                  fontSize: '11px',
                  color: 'rgba(255, 255, 255, 0.25)'
                }}>Dashboard Preview</span>
              </div>
            </div>
          </div>
          
          <div>
            <DashboardViewCard
              title="Portfolio Overview"
              description="Shows total equity, P&L, cash, and exposure by sector, theme, and market cap. Positions are listed with weight, cost basis, and performance. Status tags flag names with fresh catalysts, earnings ahead, or elevated risk."
              color="#5eead4"
            />
            <DashboardViewCard
              title="Position Detail"
              description="Each position opens to a dedicated page that combines the written thesis, key catalysts, risk notes, and Vestiq's latest research on that company. Participants update the thesis as conditions change and record the reason for any exit."
              color="#a78bfa"
            />
            <DashboardViewCard
              title="Activity Log"
              description="The log records every trade and adjustment with timestamps, size, and notes. This view becomes the backbone for grading, evaluation, or self-review."
              color="#fbbf24"
            />
            <DashboardViewCard
              title="Alerts Feed"
              description="A unified feed that surfaces earnings releases, guidance changes, regulatory actions, and other catalysts that affect active positions. Alerts link back to the positions they impact."
              color="#f87171"
            />
          </div>
        </div>
      </section>
      
      {/* Program Structure Section */}
      <section style={{
        padding: '100px 48px',
        position: 'relative',
        zIndex: 1
      }}>
        <div style={{ maxWidth: '1000px', margin: '0 auto' }}>
          <h2 style={{
            fontFamily: '"Sora", sans-serif',
            fontSize: '36px',
            fontWeight: '600',
            marginBottom: '24px',
            textAlign: 'center',
            letterSpacing: '-0.02em'
          }}>
            Program structure and rules
          </h2>
          <p style={{
            fontSize: '17px',
            lineHeight: '1.8',
            color: 'rgba(255, 255, 255, 0.6)',
            textAlign: 'center',
            marginBottom: '48px',
            maxWidth: '800px',
            margin: '0 auto 48px'
          }}>
            The Portfolio Management Program runs on a clear rule set. Participants trade long-only equities in a simulated environment with position limits, concentration limits, and basic risk guidelines. The structure keeps the focus on security selection, thesis quality, and sizing discipline.
          </p>
          
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(2, 1fr)',
            gap: '16px'
          }}>
            {[
              { title: 'Instrument focus', desc: 'Listed equities, with emphasis on small and mid-cap names.' },
              { title: 'Long-only', desc: 'No shorts, options, futures, or margin in the initial track.' },
              { title: 'Position limits', desc: 'Caps on single-name and sector exposure to encourage diversification.' },
              { title: 'Documentation requirement', desc: 'Every new position requires a written thesis and basic risk outline.' },
              { title: 'Exit notes', desc: 'Each closed trade includes a reason for exit and a short reflection.' }
            ].map((rule, i) => (
              <div key={i} className="rule-card" style={{ transition: 'all 0.3s ease' }}>
                <h4 style={{
                  fontFamily: '"Sora", sans-serif',
                  fontSize: '15px',
                  fontWeight: '600',
                  color: '#fff',
                  marginBottom: '8px'
                }}>{rule.title}</h4>
                <p style={{
                  fontSize: '14px',
                  lineHeight: '1.6',
                  color: 'rgba(255, 255, 255, 0.5)'
                }}>{rule.desc}</p>
              </div>
            ))}
          </div>
          
          <p style={{
            fontSize: '14px',
            color: 'rgba(255, 255, 255, 0.4)',
            textAlign: 'center',
            marginTop: '32px',
            fontStyle: 'italic'
          }}>
            Advanced tracks with additional instruments can sit on top of this foundation once the core environment reaches maturity and receives appropriate approvals.
          </p>
        </div>
      </section>
      
      {/* Who It Serves 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'
          }}>
            Who the program serves
          </h2>
          
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(3, 1fr)',
            gap: '24px'
          }}>
            <div className="feature-card">
              <div style={{
                width: '48px',
                height: '48px',
                borderRadius: '12px',
                background: 'linear-gradient(135deg, rgba(94, 234, 212, 0.15), rgba(94, 234, 212, 0.05))',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                marginBottom: '20px'
              }}>
                <svg width="24" height="24" 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>
              </div>
              <h4 style={{
                fontFamily: '"Sora", sans-serif',
                fontSize: '18px',
                fontWeight: '600',
                marginBottom: '12px'
              }}>Individual investors</h4>
              <p style={{
                fontSize: '15px',
                lineHeight: '1.7',
                color: 'rgba(255, 255, 255, 0.6)'
              }}>
                A place to test ideas, practice discipline, and build a track record of documented decisions before committing real capital elsewhere.
              </p>
            </div>
            
            <div className="feature-card">
              <div style={{
                width: '48px',
                height: '48px',
                borderRadius: '12px',
                background: 'linear-gradient(135deg, rgba(167, 139, 250, 0.15), rgba(167, 139, 250, 0.05))',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                marginBottom: '20px'
              }}>
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#a78bfa" strokeWidth="2">
                  <path d="M22 10v6M2 10l10-5 10 5-10 5z"/>
                  <path d="M6 12v5c3 3 9 3 12 0v-5"/>
                </svg>
              </div>
              <h4 style={{
                fontFamily: '"Sora", sans-serif',
                fontSize: '18px',
                fontWeight: '600',
                marginBottom: '12px'
              }}>Universities and business schools</h4>
              <p style={{
                fontSize: '15px',
                lineHeight: '1.7',
                color: 'rgba(255, 255, 255, 0.6)'
              }}>
                A teaching environment where students run portfolios, write theses, and respond to real market events. Instructors can view portfolios, trade logs, and documentation quality from an instructor dashboard.
              </p>
            </div>
            
            <div className="feature-card">
              <div style={{
                width: '48px',
                height: '48px',
                borderRadius: '12px',
                background: 'linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(251, 191, 36, 0.05))',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                marginBottom: '20px'
              }}>
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fbbf24" 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>
              </div>
              <h4 style={{
                fontFamily: '"Sora", sans-serif',
                fontSize: '18px',
                fontWeight: '600',
                marginBottom: '12px'
              }}>Firms and funds</h4>
              <p style={{
                fontSize: '15px',
                lineHeight: '1.7',
                color: 'rgba(255, 255, 255, 0.6)'
              }}>
                A training lane for analysts and junior portfolio managers. Teams can review research quality, sizing decisions, and reactions to catalysts inside a controlled, recorded environment.
              </p>
            </div>
          </div>
        </div>
      </section>
      
      {/* Review and Evaluation Section */}
      <section style={{
        padding: '100px 48px',
        position: 'relative',
        zIndex: 1
      }}>
        <div style={{ maxWidth: '900px', margin: '0 auto', textAlign: 'center' }}>
          <h2 style={{
            fontFamily: '"Sora", sans-serif',
            fontSize: '36px',
            fontWeight: '600',
            marginBottom: '24px',
            letterSpacing: '-0.02em'
          }}>
            Review, grading, and oversight
          </h2>
          <p style={{
            fontSize: '17px',
            lineHeight: '1.8',
            color: 'rgba(255, 255, 255, 0.6)',
            marginBottom: '48px'
          }}>
            The program produces a complete record of each participant's decisions. Portfolios, trades, theses, and exit notes are all visible through review dashboards. Educators, program leads, or future compliance teams can evaluate performance using both returns and process quality.
          </p>
          
          <div style={{
            display: 'flex',
            justifyContent: 'center',
            gap: '20px',
            flexWrap: 'wrap'
          }}>
            <div className="badge">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#5eead4" strokeWidth="2">
                <polyline points="22,12 18,12 15,21 9,3 6,12 2,12"/>
              </svg>
              <div style={{ textAlign: 'left' }}>
                <div style={{
                  fontFamily: '"Sora", sans-serif',
                  fontSize: '14px',
                  fontWeight: '600',
                  color: '#fff'
                }}>Portfolio metrics</div>
                <div style={{
                  fontFamily: '"DM Sans", sans-serif',
                  fontSize: '12px',
                  color: 'rgba(255, 255, 255, 0.5)'
                }}>Return, volatility, and drawdown</div>
              </div>
            </div>
            
            <div className="badge">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#a78bfa" strokeWidth="2">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                <polyline points="14,2 14,8 20,8"/>
                <line x1="9" y1="15" x2="15" y2="15"/>
              </svg>
              <div style={{ textAlign: 'left' }}>
                <div style={{
                  fontFamily: '"Sora", sans-serif',
                  fontSize: '14px',
                  fontWeight: '600',
                  color: '#fff'
                }}>Process metrics</div>
                <div style={{
                  fontFamily: '"DM Sans", sans-serif',
                  fontSize: '12px',
                  color: 'rgba(255, 255, 255, 0.5)'
                }}>Documentation depth and consistency</div>
              </div>
            </div>
            
            <div className="badge">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fbbf24" strokeWidth="2">
                <circle cx="12" cy="12" r="10"/>
                <path d="M12 16v-4"/>
                <path d="M12 8h.01"/>
              </svg>
              <div style={{ textAlign: 'left' }}>
                <div style={{
                  fontFamily: '"Sora", sans-serif',
                  fontSize: '14px',
                  fontWeight: '600',
                  color: '#fff'
                }}>Pattern analysis</div>
                <div style={{
                  fontFamily: '"DM Sans", sans-serif',
                  fontSize: '12px',
                  color: 'rgba(255, 255, 255, 0.5)'
                }}>Insights for Strategic Memory</div>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      {/* FAQ 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: '800px', margin: '0 auto' }}>
          <h2 style={{
            fontFamily: '"Sora", sans-serif',
            fontSize: '36px',
            fontWeight: '600',
            marginBottom: '48px',
            textAlign: 'center',
            letterSpacing: '-0.02em'
          }}>
            Frequently asked questions
          </h2>
          
          <div style={{
            background: 'rgba(255, 255, 255, 0.02)',
            borderRadius: '16px',
            border: '1px solid rgba(255, 255, 255, 0.05)',
            padding: '8px 32px'
          }}>
            {faqs.map((faq, i) => (
              <FAQItem
                key={i}
                question={faq.question}
                answer={faq.answer}
                isOpen={openFAQ === i}
                onClick={() => setOpenFAQ(openFAQ === i ? null : i)}
              />
            ))}
          </div>
        </div>
      </section>
      
      {/* Final CTA Section */}
      <section style={{
        padding: '120px 48px',
        position: 'relative',
        zIndex: 1
      }}>
        <div style={{
          maxWidth: '800px',
          margin: '0 auto',
          textAlign: 'center',
          padding: '80px 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: '36px',
            fontWeight: '600',
            marginBottom: '20px',
            letterSpacing: '-0.02em'
          }}>
            Join the Portfolio Management Program
          </h2>
          <p style={{
            fontSize: '17px',
            lineHeight: '1.7',
            color: 'rgba(255, 255, 255, 0.6)',
            marginBottom: '40px'
          }}>
            Run a simulated portfolio on top of Vestiq's research engine and build a documented record of your investment decisions.
          </p>
          
          <div style={{ display: 'flex', justifyContent: 'center', gap: '20px', flexWrap: 'wrap' }}>
            <a href="/register_page" className="primary-btn" style={{ padding: '16px 32px', fontSize: '16px' }}>
              Apply for Early Access
            </a>
            <a href="mailto:team@vestiq.io" style={{
              color: 'rgba(255, 255, 255, 0.7)',
              textDecoration: 'none',
              padding: '16px 32px',
              fontSize: '15px',
              fontWeight: '500',
              border: '1px solid rgba(255, 255, 255, 0.2)',
              borderRadius: '8px',
              transition: 'all 0.3s ease'
            }}>
              Talk with our team about university or firm programs
            </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.
          </p>
        </div>
      </footer>
    </div>
  );
}

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