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

// Animated background with data constellation effect
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);
    
    // Create particles
    for (let i = 0; i < 80; i++) {
      particles.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        vx: (Math.random() - 0.5) * 0.3,
        vy: (Math.random() - 0.5) * 0.3,
        size: Math.random() * 2 + 0.5,
        opacity: Math.random() * 0.5 + 0.1
      });
    }
    
    const animate = () => {
      ctx.fillStyle = 'rgba(10, 12, 16, 0.05)';
      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;
        
        // Draw particle
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(94, 234, 212, ${p.opacity})`;
        ctx.fill();
        
        // Draw connections
        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 < 150) {
            ctx.beginPath();
            ctx.moveTo(p.x, p.y);
            ctx.lineTo(p2.x, p2.y);
            ctx.strokeStyle = `rgba(94, 234, 212, ${0.08 * (1 - dist / 150)})`;
            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
      }}
    />
  );
};

// Animated ticker strip
const TickerStrip = () => {
  const tickers = [
    { symbol: 'ARWR', change: '+4.2%', positive: true },
    { symbol: 'NVDA', change: '+2.1%', positive: true },
    { symbol: 'CRWD', change: '-1.8%', positive: false },
    { symbol: 'PLTR', change: '+5.6%', positive: true },
    { symbol: 'SNOW', change: '-0.9%', positive: false },
    { symbol: 'DDOG', change: '+3.4%', positive: true },
    { symbol: 'NET', change: '+1.7%', positive: true },
    { symbol: 'ZS', change: '-2.3%', positive: false },
  ];
  
  const duplicatedTickers = [...tickers, ...tickers, ...tickers];
  
  return (
    <div style={{
      overflow: 'hidden',
      background: 'rgba(20, 24, 32, 0.6)',
      borderTop: '1px solid rgba(94, 234, 212, 0.1)',
      borderBottom: '1px solid rgba(94, 234, 212, 0.1)',
      padding: '8px 0'
    }}>
      <div style={{
        display: 'flex',
        animation: 'ticker 30s linear infinite',
        width: 'max-content'
      }}>
        {duplicatedTickers.map((t, i) => (
          <div key={i} style={{
            display: 'flex',
            alignItems: 'center',
            gap: '8px',
            padding: '0 32px',
            fontFamily: '"JetBrains Mono", monospace',
            fontSize: '12px'
          }}>
            <span style={{ color: 'rgba(255,255,255,0.7)' }}>{t.symbol}</span>
            <span style={{ color: t.positive ? '#5eead4' : '#f87171' }}>{t.change}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

// Interface mock cards for hero
const InterfaceMock = () => {
  return (
    <div style={{
      position: 'relative',
      width: '100%',
      maxWidth: '520px',
      height: '480px'
    }}>
      {/* Company Report Card */}
      <div style={{
        position: 'absolute',
        top: '0',
        left: '0',
        width: '380px',
        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), 0 0 0 1px rgba(94, 234, 212, 0.05)'
      }}>
        <div style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          marginBottom: '16px'
        }}>
          <span style={{
            fontFamily: '"JetBrains Mono", monospace',
            fontSize: '11px',
            color: 'rgba(94, 234, 212, 0.7)',
            textTransform: 'uppercase',
            letterSpacing: '1px'
          }}>Company Report</span>
          <span style={{
            fontFamily: '"JetBrains Mono", monospace',
            fontSize: '18px',
            fontWeight: '600',
            color: '#fff'
          }}>ARWR</span>
        </div>
        <p style={{
          fontFamily: '"DM Sans", sans-serif',
          fontSize: '14px',
          lineHeight: '1.6',
          color: 'rgba(255, 255, 255, 0.7)',
          marginBottom: '20px'
        }}>
          Arrowhead Research develops RNA interference therapeutics. Recent Q3 earnings showed 23% revenue growth with expanding pipeline partnerships.
        </p>
        <div style={{
          display: 'flex',
          flexDirection: 'column',
          gap: '10px'
        }}>
          <div style={{
            display: 'flex',
            alignItems: 'center',
            gap: '10px',
            padding: '10px 14px',
            background: 'rgba(94, 234, 212, 0.08)',
            borderRadius: '8px',
            border: '1px solid rgba(94, 234, 212, 0.1)'
          }}>
            <div style={{
              width: '6px',
              height: '6px',
              borderRadius: '50%',
              background: '#5eead4'
            }}/>
            <span style={{
              fontFamily: '"DM Sans", sans-serif',
              fontSize: '13px',
              color: 'rgba(255, 255, 255, 0.8)'
            }}>FDA Phase 3 results expected Q1</span>
          </div>
          <div style={{
            display: 'flex',
            alignItems: 'center',
            gap: '10px',
            padding: '10px 14px',
            background: 'rgba(167, 139, 250, 0.08)',
            borderRadius: '8px',
            border: '1px solid rgba(167, 139, 250, 0.1)'
          }}>
            <div style={{
              width: '6px',
              height: '6px',
              borderRadius: '50%',
              background: '#a78bfa'
            }}/>
            <span style={{
              fontFamily: '"DM Sans", sans-serif',
              fontSize: '13px',
              color: 'rgba(255, 255, 255, 0.8)'
            }}>Novo Nordisk partnership expanded</span>
          </div>
        </div>
      </div>
      
      {/* Portfolio Overview Card */}
      <div style={{
        position: 'absolute',
        bottom: '20px',
        right: '0',
        width: '300px',
        background: 'linear-gradient(135deg, rgba(30, 35, 45, 0.95), rgba(20, 25, 35, 0.95))',
        borderRadius: '16px',
        border: '1px solid rgba(167, 139, 250, 0.15)',
        padding: '20px',
        backdropFilter: 'blur(20px)',
        animation: 'float2 6s ease-in-out infinite',
        boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(167, 139, 250, 0.05)'
      }}>
        <span style={{
          fontFamily: '"JetBrains Mono", monospace',
          fontSize: '11px',
          color: 'rgba(167, 139, 250, 0.7)',
          textTransform: 'uppercase',
          letterSpacing: '1px'
        }}>Portfolio Overview</span>
        <div style={{
          marginTop: '16px',
          display: 'flex',
          flexDirection: 'column',
          gap: '12px'
        }}>
          {[
            { ticker: 'ARWR', allocation: '24%', pnl: '+12.4%' },
            { ticker: 'PLTR', allocation: '18%', pnl: '+8.2%' },
            { ticker: 'DDOG', allocation: '15%', pnl: '+5.1%' }
          ].map((pos, i) => (
            <div key={i} style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
              padding: '8px 0',
              borderBottom: i < 2 ? '1px solid rgba(255,255,255,0.05)' : 'none'
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                <span style={{
                  fontFamily: '"JetBrains Mono", monospace',
                  fontSize: '14px',
                  fontWeight: '600',
                  color: '#fff'
                }}>{pos.ticker}</span>
                <span style={{
                  fontFamily: '"JetBrains Mono", monospace',
                  fontSize: '12px',
                  color: 'rgba(255,255,255,0.4)'
                }}>{pos.allocation}</span>
              </div>
              <span style={{
                fontFamily: '"JetBrains Mono", monospace',
                fontSize: '13px',
                color: '#5eead4'
              }}>{pos.pnl}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// Timeline component for roadmap
const Timeline = () => {
  const items = [
    {
      title: 'Enhanced research coverage',
      description: 'Expanded company coverage, deeper catalyst tracking, and broader sector mapping.',
      status: 'active'
    },
    {
      title: 'Strategic Memory',
      description: 'A system that learns from every closed position, updates playbooks, and refines confidence guidelines over time.',
      status: 'upcoming'
    },
    {
      title: 'Live trading layer',
      description: 'A live trading layer on top of the research engine, launched once licensing, supervision, and compliance structures are in place.',
      status: 'future'
    },
    {
      title: 'Multi-account portfolio hub',
      description: 'A hub that brings together paper portfolios, personal accounts, and future managed strategies in one interface.',
      status: 'future'
    }
  ];
  
  return (
    <div style={{ position: 'relative' }}>
      {/* Timeline line */}
      <div style={{
        position: 'absolute',
        left: '15px',
        top: '0',
        bottom: '0',
        width: '2px',
        background: 'linear-gradient(180deg, #5eead4 0%, rgba(167, 139, 250, 0.3) 100%)'
      }}/>
      
      <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>
        {items.map((item, i) => (
          <div key={i} style={{ display: 'flex', gap: '24px', alignItems: 'flex-start' }}>
            <div style={{
              width: '32px',
              height: '32px',
              borderRadius: '50%',
              background: item.status === 'active' 
                ? 'linear-gradient(135deg, #5eead4, #2dd4bf)' 
                : item.status === 'upcoming'
                ? 'rgba(94, 234, 212, 0.2)'
                : 'rgba(167, 139, 250, 0.15)',
              border: item.status === 'active' 
                ? 'none' 
                : `2px solid ${item.status === 'upcoming' ? 'rgba(94, 234, 212, 0.4)' : 'rgba(167, 139, 250, 0.3)'}`,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              flexShrink: 0,
              position: 'relative',
              zIndex: 1
            }}>
              {item.status === 'active' && (
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#0a0c10" strokeWidth="3">
                  <polyline points="20,6 9,17 4,12"/>
                </svg>
              )}
            </div>
            <div style={{ paddingTop: '4px' }}>
              <h4 style={{
                fontFamily: '"DM Sans", sans-serif',
                fontSize: '18px',
                fontWeight: '600',
                color: '#fff',
                marginBottom: '8px'
              }}>{item.title}</h4>
              <p style={{
                fontFamily: '"DM Sans", sans-serif',
                fontSize: '15px',
                lineHeight: '1.6',
                color: 'rgba(255, 255, 255, 0.6)'
              }}>{item.description}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

// Main landing page component
// export default function VestiqLanding() {
const VestiqLanding = () => {
  const [scrollY, setScrollY] = useState(0);
  
  useEffect(() => {
    const handleScroll = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);
  
  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 ticker {
          0% { transform: translateX(0); }
          100% { transform: translateX(-33.333%); }
        }
        
        @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%;
        }
        
        .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;
        }
        
        .pill {
          padding: 10px 20px;
          border-radius: 100px;
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.1);
          color: rgba(255, 255, 255, 0.7);
          font-size: 14px;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.3s ease;
        }
        
        .pill:hover {
          background: rgba(94, 234, 212, 0.1);
          border-color: rgba(94, 234, 212, 0.3);
          color: #5eead4;
        }
        
        .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: 20px;
          padding: 32px;
          transition: all 0.4s ease;
        }
        
        .feature-card:hover {
          border-color: rgba(94, 234, 212, 0.2);
          transform: translateY(-4px);
          box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5);
        }
        
        .section-fade {
          animation: fadeInUp 0.8s ease forwards;
        }
      `}</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'
      }}>
        <div style={{
          fontFamily: '"Sora", sans-serif',
          fontSize: '24px',
          fontWeight: '700',
          background: 'linear-gradient(135deg, #5eead4 0%, #a78bfa 100%)',
          WebkitBackgroundClip: 'text',
          WebkitTextFillColor: 'transparent'
        }}>
          Vestiq
        </div>
        
        <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">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 1fr',
          gap: '80px',
          alignItems: 'center'
        }}>
          {/* Left: Copy */}
          <div className="section-fade" style={{ animationDelay: '0.2s' }}>
            <h1 style={{
              fontFamily: '"Sora", sans-serif',
              fontSize: '52px',
              fontWeight: '600',
              lineHeight: '1.15',
              marginBottom: '24px',
              letterSpacing: '-0.02em'
            }}>
              Vestiq tracks catalysts, studies companies, and helps people practice real portfolio management.
            </h1>
            <p style={{
              fontSize: '18px',
              lineHeight: '1.7',
              color: 'rgba(255, 255, 255, 0.6)',
              marginBottom: '40px',
              maxWidth: '540px'
            }}>
              Vestiq is a market-intelligence and portfolio management platform that reads filings, earnings, news, regulatory actions, and macro data, then turns that information into clear reports and portfolio tools.
            </p>
            
            <div style={{ display: 'flex', alignItems: 'center', gap: '24px', marginBottom: '24px' }}>
              <a href="/register_page" className="primary-btn">Get Early Access</a>
              <a href="/portfolio-program" className="secondary-btn">
                View the Portfolio Management Program
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <path d="M5 12h14M12 5l7 7-7 7"/>
                </svg>
              </a>
            </div>
            
            <p style={{
              fontFamily: '"JetBrains Mono", monospace',
              fontSize: '12px',
              color: 'rgba(255, 255, 255, 0.4)',
              letterSpacing: '0.02em'
            }}>
              Research and simulation only. No live brokerage or trade execution inside the platform today.
            </p>
          </div>
          
          {/* Right: Interface mock */}
          <div className="section-fade" style={{ animationDelay: '0.4s' }}>
            <InterfaceMock />
          </div>
        </div>
      </section>
      
      {/* Ticker strip */}
      <TickerStrip />
      
      {/* What is Vestiq Section */}
      <section id="platform" style={{
        padding: '120px 48px',
        background: 'linear-gradient(180deg, rgba(20, 24, 32, 0.5) 0%, transparent 100%)',
        position: 'relative',
        zIndex: 1
      }}>
        <div style={{ maxWidth: '1000px', margin: '0 auto', textAlign: 'center' }}>
          <h2 style={{
            fontFamily: '"Sora", sans-serif',
            fontSize: '40px',
            fontWeight: '600',
            marginBottom: '32px',
            letterSpacing: '-0.02em'
          }}>
            What is Vestiq?
          </h2>
          <p style={{
            fontSize: '18px',
            lineHeight: '1.8',
            color: 'rgba(255, 255, 255, 0.7)',
            marginBottom: '24px'
          }}>
            Vestiq is a market-intelligence and portfolio management platform that studies companies, tracks catalysts, and helps people practice running portfolios in a structured, auditable environment. The system reads filings, earnings, news, regulatory actions, and macro data, then turns that information into clear reports and portfolio tools.
          </p>
          <p style={{
            fontSize: '18px',
            lineHeight: '1.8',
            color: 'rgba(255, 255, 255, 0.7)',
            marginBottom: '48px'
          }}>
            Vestiq supports individual investors, students, educators, and institutions that want disciplined, documented decision-making around public markets.
          </p>
          
          <div style={{ display: 'flex', justifyContent: 'center', gap: '16px', flexWrap: 'wrap' }}>
            <button className="pill">For investors</button>
            <button className="pill">For universities</button>
            <button className="pill">For firms and funds</button>
          </div>
        </div>
      </section>
      
      {/* Three Pillars Section */}
      <section style={{
        padding: '80px 48px 120px',
        position: 'relative',
        zIndex: 1
      }}>
        <div style={{ maxWidth: '1400px', margin: '0 auto' }}>
          <h2 style={{
            fontFamily: '"Sora", sans-serif',
            fontSize: '36px',
            fontWeight: '600',
            marginBottom: '16px',
            textAlign: 'center',
            letterSpacing: '-0.02em'
          }}>
            What Vestiq offers today
          </h2>
          <p style={{
            fontSize: '16px',
            color: 'rgba(255, 255, 255, 0.5)',
            textAlign: 'center',
            marginBottom: '64px'
          }}>
            Current platform capabilities
          </p>
          
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(3, 1fr)',
            gap: '24px'
          }}>
            {/* Card 1 */}
            <div className="feature-card">
              <div style={{
                width: '48px',
                height: '48px',
                borderRadius: '12px',
                background: 'linear-gradient(135deg, rgba(94, 234, 212, 0.2), rgba(94, 234, 212, 0.05))',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                marginBottom: '24px'
              }}>
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#5eead4" 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"/>
                  <polyline points="10,9 9,9 8,9"/>
                </svg>
              </div>
              <h3 style={{
                fontFamily: '"Sora", sans-serif',
                fontSize: '20px',
                fontWeight: '600',
                marginBottom: '16px'
              }}>
                Research and company coverage
              </h3>
              <p style={{
                fontSize: '15px',
                lineHeight: '1.7',
                color: 'rgba(255, 255, 255, 0.6)'
              }}>
                Vestiq produces company-level reports that explain what a business does, how it makes money, and what has changed recently. Each report highlights key filings, earnings updates, guidance changes, regulatory actions, and other material events, written in clear language that ties back to the underlying sources.
              </p>
            </div>
            
            {/* Card 2 */}
            <div className="feature-card">
              <div style={{
                width: '48px',
                height: '48px',
                borderRadius: '12px',
                background: 'linear-gradient(135deg, rgba(167, 139, 250, 0.2), rgba(167, 139, 250, 0.05))',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                marginBottom: '24px'
              }}>
                <svg width="24" height="24" 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>
              </div>
              <h3 style={{
                fontFamily: '"Sora", sans-serif',
                fontSize: '20px',
                fontWeight: '600',
                marginBottom: '16px'
              }}>
                Catalyst and price-movement analysis
              </h3>
              <p style={{
                fontSize: '15px',
                lineHeight: '1.7',
                color: 'rgba(255, 255, 255, 0.6)'
              }}>
                The platform tracks high-impact movers across the market, with a focus on small and mid-cap names. For each move, Vestiq surfaces the likely drivers: news, filings, guidance, deals, sector shifts, or macro data. The goal is to connect price action to specific, verifiable catalysts.
              </p>
            </div>
            
            {/* Card 3 */}
            <div className="feature-card" id="portfolio">
              <div style={{
                width: '48px',
                height: '48px',
                borderRadius: '12px',
                background: 'linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.05))',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                marginBottom: '24px'
              }}>
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fbbf24" strokeWidth="2">
                  <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
                  <line x1="8" y1="21" x2="16" y2="21"/>
                  <line x1="12" y1="17" x2="12" y2="21"/>
                </svg>
              </div>
              <h3 style={{
                fontFamily: '"Sora", sans-serif',
                fontSize: '20px',
                fontWeight: '600',
                marginBottom: '16px'
              }}>
                Portfolio Management Program
              </h3>
              <p style={{
                fontSize: '15px',
                lineHeight: '1.7',
                color: 'rgba(255, 255, 255, 0.6)'
              }}>
                Users can run simulated portfolios with defined starting capital. Every position includes a written thesis, entry price, time horizon, key catalysts, risk points, and planned exit logic. As markets move, Vestiq monitors these positions, updates context, and keeps a full history of each decision.
              </p>
            </div>
          </div>
          
          <div style={{ textAlign: 'center', marginTop: '48px' }}>
            <a href="/portfolio-program" className="secondary-btn">
              Learn more about the Portfolio Management Program
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M5 12h14M12 5l7 7-7 7"/>
              </svg>
            </a>
          </div>
        </div>
      </section>
      
      {/* Education Section */}
      <section id="education" style={{
        padding: '120px 48px',
        background: 'linear-gradient(180deg, rgba(20, 24, 32, 0.3) 0%, transparent 100%)',
        position: 'relative',
        zIndex: 1
      }}>
        <div style={{
          maxWidth: '1400px',
          margin: '0 auto',
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: '80px',
          alignItems: 'center'
        }}>
          {/* Left: Copy */}
          <div>
            <h2 style={{
              fontFamily: '"Sora", sans-serif',
              fontSize: '36px',
              fontWeight: '600',
              marginBottom: '24px',
              letterSpacing: '-0.02em'
            }}>
              Education and training layer
            </h2>
            <p style={{
              fontSize: '17px',
              lineHeight: '1.8',
              color: 'rgba(255, 255, 255, 0.7)'
            }}>
              Universities, business schools, and training programs can use Vestiq as a teaching environment. Students manage portfolios, write theses, and respond to real market events while faculty and program leads see a clear audit trail for grading and evaluation.
            </p>
          </div>
          
          {/* Right: Class Dashboard Mock */}
          <div style={{
            background: 'linear-gradient(135deg, rgba(30, 35, 45, 0.95), rgba(20, 25, 35, 0.95))',
            borderRadius: '20px',
            border: '1px solid rgba(94, 234, 212, 0.1)',
            padding: '28px',
            backdropFilter: 'blur(20px)'
          }}>
            <div style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
              marginBottom: '24px'
            }}>
              <span style={{
                fontFamily: '"JetBrains Mono", monospace',
                fontSize: '11px',
                color: 'rgba(94, 234, 212, 0.7)',
                textTransform: 'uppercase',
                letterSpacing: '1px'
              }}>Instructor View</span>
              <span style={{
                fontFamily: '"DM Sans", sans-serif',
                fontSize: '14px',
                color: 'rgba(255, 255, 255, 0.5)'
              }}>FIN 401 · Fall 2024</span>
            </div>
            
            {/* Table header */}
            <div style={{
              display: 'grid',
              gridTemplateColumns: '2fr 1fr 1fr 1fr',
              gap: '16px',
              padding: '12px 0',
              borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
              marginBottom: '8px'
            }}>
              {['Student / Team', 'Return', 'Documentation', 'Risk Profile'].map((h, i) => (
                <span key={i} style={{
                  fontFamily: '"JetBrains Mono", monospace',
                  fontSize: '11px',
                  color: 'rgba(255, 255, 255, 0.4)',
                  textTransform: 'uppercase',
                  letterSpacing: '0.5px'
                }}>{h}</span>
              ))}
            </div>
            
            {/* Table rows */}
            {[
              { name: 'Team Alpha', return: '+8.4%', doc: '94', risk: 'Moderate' },
              { name: 'Team Beta', return: '+12.1%', doc: '87', risk: 'Aggressive' },
              { name: 'Team Gamma', return: '+3.2%', doc: '91', risk: 'Conservative' },
              { name: 'Team Delta', return: '+6.7%', doc: '89', risk: 'Moderate' }
            ].map((row, i) => (
              <div key={i} style={{
                display: 'grid',
                gridTemplateColumns: '2fr 1fr 1fr 1fr',
                gap: '16px',
                padding: '14px 0',
                borderBottom: i < 3 ? '1px solid rgba(255, 255, 255, 0.05)' : 'none'
              }}>
                <span style={{
                  fontFamily: '"DM Sans", sans-serif',
                  fontSize: '14px',
                  color: '#fff',
                  fontWeight: '500'
                }}>{row.name}</span>
                <span style={{
                  fontFamily: '"JetBrains Mono", monospace',
                  fontSize: '14px',
                  color: '#5eead4'
                }}>{row.return}</span>
                <span style={{
                  fontFamily: '"JetBrains Mono", monospace',
                  fontSize: '14px',
                  color: 'rgba(255, 255, 255, 0.7)'
                }}>{row.doc}</span>
                <span style={{
                  fontFamily: '"DM Sans", sans-serif',
                  fontSize: '13px',
                  color: 'rgba(255, 255, 255, 0.5)'
                }}>{row.risk}</span>
              </div>
            ))}
          </div>
        </div>
      </section>
      
      {/* Roadmap Section */}
      <section id="roadmap" style={{
        padding: '120px 48px',
        position: 'relative',
        zIndex: 1
      }}>
        <div style={{ maxWidth: '900px', margin: '0 auto' }}>
          <h2 style={{
            fontFamily: '"Sora", sans-serif',
            fontSize: '36px',
            fontWeight: '600',
            marginBottom: '24px',
            textAlign: 'center',
            letterSpacing: '-0.02em'
          }}>
            Where Vestiq is going
          </h2>
          <p style={{
            fontSize: '17px',
            lineHeight: '1.8',
            color: 'rgba(255, 255, 255, 0.6)',
            textAlign: 'center',
            marginBottom: '64px',
            maxWidth: '700px',
            margin: '0 auto 64px'
          }}>
            Vestiq is built to grow into a full wealth-management operating system. The roadmap keeps research, controls, and documentation at the center as new capabilities come online.
          </p>
          
          <Timeline />
          
          <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)'
          }}>
            Today, Vestiq operates as a research and simulation platform. No live brokerage or trade execution occurs inside the system.
          </p>
        </div>
      </section>
      
      {/* Trust Section */}
      <section id="about" style={{
        padding: '80px 48px',
        background: 'linear-gradient(180deg, rgba(20, 24, 32, 0.3) 0%, transparent 100%)',
        position: 'relative',
        zIndex: 1
      }}>
        <div style={{ maxWidth: '1000px', margin: '0 auto', textAlign: 'center' }}>
          <h2 style={{
            fontFamily: '"Sora", sans-serif',
            fontSize: '32px',
            fontWeight: '600',
            marginBottom: '24px',
            letterSpacing: '-0.02em'
          }}>
            Process, controls, and transparency
          </h2>
          <p style={{
            fontSize: '17px',
            lineHeight: '1.8',
            color: 'rgba(255, 255, 255, 0.6)',
            marginBottom: '48px',
            maxWidth: '700px',
            margin: '0 auto 48px'
          }}>
            The current product focuses on data integrity, clear process, and complete documentation. Every position carries a written thesis and a record of entry and exit decisions. This structure supports education and training today and lays the groundwork for future regulated offerings.
          </p>
          
          <div style={{
            display: 'flex',
            justifyContent: 'center',
            gap: '48px',
            flexWrap: 'wrap'
          }}>
            {[
              { icon: '📋', label: 'Structured research' },
              { icon: '✍️', label: 'Documented decisions' },
              { icon: '📊', label: 'Auditable history' }
            ].map((item, i) => (
              <div key={i} style={{
                display: 'flex',
                alignItems: 'center',
                gap: '12px'
              }}>
                <span style={{ fontSize: '24px' }}>{item.icon}</span>
                <span style={{
                  fontFamily: '"DM Sans", sans-serif',
                  fontSize: '15px',
                  color: 'rgba(255, 255, 255, 0.7)',
                  fontWeight: '500'
                }}>{item.label}</span>
              </div>
            ))}
          </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'
          }}>
            Explore Vestiq's research and portfolio environment
          </h2>
          <p style={{
            fontSize: '17px',
            lineHeight: '1.7',
            color: 'rgba(255, 255, 255, 0.6)',
            marginBottom: '40px'
          }}>
            Join the early access group, run a simulated portfolio, and experience structured market research built for long-term use.
          </p>
          
          <div style={{ display: 'flex', justifyContent: 'center', gap: '24px', flexWrap: 'wrap' }}>
            <a href="/register_page" className="primary-btn" style={{ padding: '16px 32px', fontSize: '16px' }}>
              Get Early Access
            </a>
            <a href="mailto:team@vestiq.io" style={{
              color: 'rgba(255, 255, 255, 0.7)',
              textDecoration: 'none',
              padding: '16px 32px',
              fontSize: '16px',
              fontWeight: '500',
              border: '1px solid rgba(255, 255, 255, 0.2)',
              borderRadius: '8px',
              transition: 'all 0.3s ease'
            }}>
              Talk with 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 provide personalized investment advice or execute live trades.
          </p>
        </div>
      </footer>
    </div>
  );
}

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