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


const { useState, useEffect, useRef } = React;

// Subtle animated background for About page
const AboutConstellation = () => {
  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 subtle particles
    for (let i = 0; i < 40; i++) {
      particles.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        vx: (Math.random() - 0.5) * 0.1,
        vy: (Math.random() - 0.5) * 0.1,
        size: Math.random() * 1.2 + 0.5,
        opacity: Math.random() * 0.2 + 0.05
      });
    }
    
    const animate = () => {
      ctx.fillStyle = 'rgba(10, 12, 16, 0.02)';
      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})`;
        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 < 80) {
            ctx.beginPath();
            ctx.moveTo(p.x, p.y);
            ctx.lineTo(p2.x, p2.y);
            ctx.strokeStyle = `rgba(94, 234, 212, ${0.02 * (1 - dist / 80)})`;
            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.5
      }}
    />
  );
};

// Three Pillars Visual for Hero
const ThreePillarsVisual = () => (
  <div style={{
    display: 'flex',
    gap: '20px',
    justifyContent: 'center'
  }}>
    {[
      { label: 'Research', icon: '📊', color: '#5eead4' },
      { label: 'Portfolios', icon: '💼', color: '#a78bfa' },
      { label: 'Programs', icon: '🎓', color: '#fbbf24' }
    ].map((pillar, i) => (
      <div key={i} style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        gap: '12px'
      }}>
        <div style={{
          width: '80px',
          height: '100px',
          background: `linear-gradient(180deg, ${pillar.color}20 0%, ${pillar.color}05 100%)`,
          borderRadius: '12px 12px 4px 4px',
          border: `1px solid ${pillar.color}30`,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: '28px',
          position: 'relative'
        }}>
          {pillar.icon}
          <div style={{
            position: 'absolute',
            bottom: '-8px',
            left: '50%',
            transform: 'translateX(-50%)',
            width: '60%',
            height: '4px',
            background: pillar.color,
            borderRadius: '2px'
          }}/>
        </div>
        <span style={{
          fontFamily: '"JetBrains Mono", monospace',
          fontSize: '11px',
          color: pillar.color,
          textTransform: 'uppercase',
          letterSpacing: '0.5px'
        }}>{pillar.label}</span>
      </div>
    ))}
  </div>
);

// Label Block Component
const LabelBlock = ({ title, description, color }) => (
  <div style={{
    padding: '20px 24px',
    background: 'rgba(255, 255, 255, 0.02)',
    borderRadius: '12px',
    borderLeft: `3px solid ${color}`
  }}>
    <h4 style={{
      fontFamily: '"Sora", sans-serif',
      fontSize: '15px',
      fontWeight: '600',
      color: '#fff',
      marginBottom: '6px'
    }}>{title}</h4>
    <p style={{
      fontFamily: '"DM Sans", sans-serif',
      fontSize: '14px',
      lineHeight: '1.55',
      color: 'rgba(255, 255, 255, 0.5)'
    }}>{description}</p>
  </div>
);

// Audience Card Component
const AudienceCard = ({ title, description, icon }) => (
  <div style={{
    background: 'linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01))',
    border: '1px solid rgba(255, 255, 255, 0.06)',
    borderRadius: '16px',
    padding: '28px',
    transition: 'all 0.3s ease'
  }}>
    <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',
      fontSize: '22px'
    }}>
      {icon}
    </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: '15px',
      lineHeight: '1.65',
      color: 'rgba(255, 255, 255, 0.55)'
    }}>{description}</p>
  </div>
);

// Philosophy Block
const PhilosophyBlock = ({ title, description }) => (
  <div style={{
    marginBottom: '28px'
  }}>
    <h4 style={{
      fontFamily: '"Sora", sans-serif',
      fontSize: '17px',
      fontWeight: '600',
      color: '#fff',
      marginBottom: '10px',
      display: 'flex',
      alignItems: 'center',
      gap: '10px'
    }}>
      <span style={{
        width: '6px',
        height: '6px',
        borderRadius: '50%',
        background: '#5eead4'
      }}/>
      {title}
    </h4>
    <p style={{
      fontFamily: '"DM Sans", sans-serif',
      fontSize: '15px',
      lineHeight: '1.7',
      color: 'rgba(255, 255, 255, 0.55)',
      paddingLeft: '16px'
    }}>{description}</p>
  </div>
);

// Value Tag
const ValueTag = ({ label }) => (
  <span style={{
    padding: '10px 20px',
    background: 'rgba(167, 139, 250, 0.1)',
    border: '1px solid rgba(167, 139, 250, 0.2)',
    borderRadius: '100px',
    fontFamily: '"DM Sans", sans-serif',
    fontSize: '14px',
    fontWeight: '500',
    color: '#a78bfa'
  }}>
    {label}
  </span>
);

// Main About Page
const AboutPage = () => {
  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 fadeInUp {
          from {
            opacity: 0;
            transform: translateY(30px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        
        .nav-link {
          color: rgba(255, 255, 255, 0.7);
          text-decoration: none;
          font-size: 14px;
          font-weight: 500;
          position: relative;
          transition: color 0.2s ease;
        }
        
        .nav-link:hover {
          color: #fff;
        }
        
        .nav-link::after {
          content: '';
          position: absolute;
          bottom: -4px;
          left: 0;
          width: 0;
          height: 1px;
          background: linear-gradient(90deg, #5eead4, #a78bfa);
          transition: width 0.3s ease;
        }
        
        .nav-link:hover::after {
          width: 100%;
        }
        
        .nav-link.active {
          color: #5eead4;
        }
        
        .nav-link.active::after {
          width: 100%;
        }
        
        .primary-btn {
          background: linear-gradient(135deg, #5eead4 0%, #2dd4bf 100%);
          color: #0a0c10;
          padding: 12px 24px;
          border-radius: 8px;
          font-weight: 600;
          font-size: 14px;
          border: none;
          cursor: pointer;
          transition: all 0.3s ease;
          text-decoration: none;
          display: inline-block;
        }
        
        .primary-btn:hover {
          transform: translateY(-2px);
          box-shadow: 0 10px 30px -10px rgba(94, 234, 212, 0.5);
        }
        
        .secondary-link {
          color: rgba(255, 255, 255, 0.7);
          text-decoration: none;
          font-size: 14px;
          font-weight: 500;
          display: inline-flex;
          align-items: center;
          gap: 8px;
          transition: all 0.2s ease;
        }
        
        .secondary-link:hover {
          color: #5eead4;
          gap: 12px;
        }
        
        .section-fade {
          animation: fadeInUp 0.8s ease forwards;
        }
      `}</style>
      
      {/* Animated background */}
      <AboutConstellation />
      
      {/* Navigation */}
      <nav style={{
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        zIndex: 100,
        padding: '16px 48px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        background: scrollY > 50 ? 'rgba(10, 12, 16, 0.9)' : 'transparent',
        backdropFilter: scrollY > 50 ? 'blur(20px)' : 'none',
        borderBottom: scrollY > 50 ? '1px solid rgba(255, 255, 255, 0.05)' : 'none',
        transition: 'all 0.3s ease'
      }}>
        <a href="/" style={{
          fontFamily: '"Sora", sans-serif',
          fontSize: '24px',
          fontWeight: '700',
          background: 'linear-gradient(135deg, #5eead4 0%, #a78bfa 100%)',
          WebkitBackgroundClip: 'text',
          WebkitTextFillColor: 'transparent',
          textDecoration: 'none'
        }}>
          Vestiq
        </a>
        
        <div style={{ display: 'flex', alignItems: 'center', gap: '32px' }}>
          <a href="#platform" className="nav-link">Platform</a>
          <a href="/portfolio-program" className="nav-link">Portfolio Program</a>
          <a href="/universities" className="nav-link">For Universities</a>
          <a href="/roadmap" className="nav-link">Roadmap</a>
          <a href="/about_us" className="nav-link active">About</a>
        </div>
        
        <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
          <a href="/login_page" className="nav-link">Sign In</a>
          <a href="/register_page" className="primary-btn">Get Early Access</a>
        </div>
      </nav>
      
      {/* Hero Section */}
      <section style={{
        padding: '160px 48px 100px',
        position: 'relative',
        zIndex: 1
      }}>
        <div style={{
          maxWidth: '1200px',
          margin: '0 auto',
          display: 'grid',
          gridTemplateColumns: '1.2fr 1fr',
          gap: '80px',
          alignItems: 'center'
        }}>
          {/* Left: Copy */}
          <div>
            <h1 style={{
              fontFamily: '"Sora", sans-serif',
              fontSize: '52px',
              fontWeight: '600',
              lineHeight: '1.15',
              marginBottom: '24px',
              letterSpacing: '-0.02em'
            }}>
              About Vestiq
            </h1>
            
            <p style={{
              fontSize: '18px',
              lineHeight: '1.7',
              color: 'rgba(255, 255, 255, 0.65)',
              marginBottom: '20px'
            }}>
              Vestiq is a market-intelligence and portfolio management environment built for disciplined investing. The platform studies companies and catalysts, tracks portfolios in a simulated setting, and records every decision in language that makes sense outside a trading desk.
            </p>
            
            <p style={{
              fontSize: '15px',
              lineHeight: '1.6',
              color: 'rgba(255, 255, 255, 0.45)',
              marginBottom: '36px'
            }}>
              Vestiq exists for investors, student cohorts, and teams that want structure, clarity, and a permanent record of how decisions come together.
            </p>
            
            <div style={{ display: 'flex', alignItems: 'center', gap: '24px' }}>
              <a href="/login_page" className="primary-btn">Explore the Platform</a>
              <a href="/roadmap" className="secondary-link">
                View the Roadmap
                <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>
          
          {/* Right: Three Pillars Visual */}
          <div style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center'
          }}>
            <ThreePillarsVisual />
          </div>
        </div>
      </section>
      
      {/* What Vestiq Does */}
      <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',
            letterSpacing: '-0.02em'
          }}>
            What Vestiq does
          </h2>
          
          <p style={{
            fontSize: '17px',
            lineHeight: '1.8',
            color: 'rgba(255, 255, 255, 0.6)',
            marginBottom: '16px'
          }}>
            Vestiq reads filings, earnings, news, regulatory actions, and macro data, then turns that information into clear company and catalyst reports. The platform connects those reports to a portfolio environment where positions live alongside written theses, risk notes, and exit decisions.
          </p>
          
          <p style={{
            fontSize: '17px',
            lineHeight: '1.8',
            color: 'rgba(255, 255, 255, 0.6)',
            marginBottom: '40px'
          }}>
            The result is a single place to see what a company does, why it matters today, how a position fits inside a portfolio, and how that position has evolved over time.
          </p>
          
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(3, 1fr)',
            gap: '16px'
          }}>
            <LabelBlock
              title="Research"
              description="Company and catalyst coverage in a consistent format."
              color="#5eead4"
            />
            <LabelBlock
              title="Simulation"
              description="Portfolios funded with virtual capital and real market data."
              color="#a78bfa"
            />
            <LabelBlock
              title="Documentation"
              description="Theses, risk outlines, and exit notes attached to every position."
              color="#fbbf24"
            />
          </div>
        </div>
      </section>
      
      {/* Why Vestiq Exists */}
      <section style={{
        padding: '100px 48px',
        position: 'relative',
        zIndex: 1
      }}>
        <div style={{ maxWidth: '900px', margin: '0 auto' }}>
          <h2 style={{
            fontFamily: '"Sora", sans-serif',
            fontSize: '36px',
            fontWeight: '600',
            marginBottom: '24px',
            letterSpacing: '-0.02em'
          }}>
            Why Vestiq exists
          </h2>
          
          <p style={{
            fontSize: '17px',
            lineHeight: '1.8',
            color: 'rgba(255, 255, 255, 0.6)',
            marginBottom: '20px'
          }}>
            Vestiq grew out of a simple tension in public markets. Information grows faster than most investors can absorb. Trade logs and charts track prices, while the thinking behind decisions fades into memory.
          </p>
          
          <p style={{
            fontSize: '17px',
            lineHeight: '1.8',
            color: 'rgba(255, 255, 255, 0.6)'
          }}>
            The platform answers that tension by giving research, portfolios, and written reasoning a shared home. Every position has context. Every decision leaves a trail. Over time, those trails form playbooks that guide future choices.
          </p>
        </div>
      </section>
      
      {/* How Vestiq Thinks About Markets */}
      <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: '1100px',
          margin: '0 auto',
          display: 'grid',
          gridTemplateColumns: '1fr 1.5fr',
          gap: '80px',
          alignItems: 'start'
        }}>
          <div>
            <h2 style={{
              fontFamily: '"Sora", sans-serif',
              fontSize: '36px',
              fontWeight: '600',
              marginBottom: '16px',
              letterSpacing: '-0.02em'
            }}>
              How Vestiq thinks about markets
            </h2>
            <p style={{
              fontSize: '15px',
              lineHeight: '1.6',
              color: 'rgba(255, 255, 255, 0.45)'
            }}>
              A philosophy built around catalysts, portfolios, and process.
            </p>
          </div>
          
          <div>
            <PhilosophyBlock
              title="Companies and catalysts"
              description="Markets move when something changes. A filing, an earnings report, a regulatory action, a deal, a data release. Vestiq focuses on those changes and ties price moves to specific events and conditions."
            />
            <PhilosophyBlock
              title="Portfolios and exposure"
              description="Single ideas matter, but portfolios carry the real story. Vestiq keeps attention on allocations, drawdowns, concentration, and the cumulative effect of many small decisions."
            />
            <PhilosophyBlock
              title="Process and memory"
              description="Good process gains power when it repeats. Vestiq treats every trade and thesis as input to a growing memory layer that supports future analysis and review."
            />
          </div>
        </div>
      </section>
      
      {/* Who Vestiq Serves */}
      <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: '48px',
            textAlign: 'center',
            letterSpacing: '-0.02em'
          }}>
            Who Vestiq serves
          </h2>
          
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(3, 1fr)',
            gap: '24px',
            marginBottom: '32px'
          }}>
            <AudienceCard
              title="Individual investors"
              description="A place to study companies, track catalysts, and practice portfolio management with simulated capital. Decisions live beside clear explanations, so personal playbooks form over time."
              icon="👤"
            />
            <AudienceCard
              title="Student cohorts and academic programs"
              description="A shared environment for student groups and programs that want a structured portfolio lab. Cohorts can run simulated portfolios and share dashboards or reports with faculty sponsors and program leads when context is helpful."
              icon="🎓"
            />
            <AudienceCard
              title="Institutions and teams"
              description="An internal research and portfolio space for analyst groups, investment clubs, and training programs. Teams can review portfolios, decisions, and outcomes inside Vestiq and decide how those insights fit into their own governance and processes."
              icon="🏢"
            />
          </div>
          
          <p style={{
            fontSize: '15px',
            color: 'rgba(255, 255, 255, 0.45)',
            textAlign: 'center',
            fontStyle: 'italic'
          }}>
            Vestiq provides the environment, data, and tools. Each cohort or organization decides how to fold those capabilities into its own structure.
          </p>
        </div>
      </section>
      
      {/* Vestiq within Luminary */}
      <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: '900px', margin: '0 auto' }}>
          <div style={{
            display: 'flex',
            alignItems: 'center',
            gap: '16px',
            marginBottom: '24px'
          }}>
            <div style={{
              width: '40px',
              height: '40px',
              borderRadius: '10px',
              background: 'linear-gradient(135deg, rgba(167, 139, 250, 0.2), rgba(167, 139, 250, 0.05))',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center'
            }}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#a78bfa" strokeWidth="2">
                <polygon points="12,2 2,7 12,12 22,7 12,2"/>
                <polyline points="2,17 12,22 22,17"/>
                <polyline points="2,12 12,17 22,12"/>
              </svg>
            </div>
            <h2 style={{
              fontFamily: '"Sora", sans-serif',
              fontSize: '32px',
              fontWeight: '600',
              letterSpacing: '-0.02em'
            }}>
              Vestiq within the Luminary ecosystem
            </h2>
          </div>
          
          <p style={{
            fontSize: '17px',
            lineHeight: '1.8',
            color: 'rgba(255, 255, 255, 0.6)',
            marginBottom: '20px'
          }}>
            Vestiq is built under Luminary AI Technologies, a company that develops systems for structured decision-making across commerce, capital, and public policy.
          </p>
          
          <p style={{
            fontSize: '17px',
            lineHeight: '1.8',
            color: 'rgba(255, 255, 255, 0.6)'
          }}>
            Vestiq focuses on public markets. Sister platforms study e-commerce environments and legislative data. Shared infrastructure and design principles support a common goal: organize complex information into environments where decisions become clearer, more repeatable, and easier to audit.
          </p>
        </div>
      </section>
      
      {/* Where Vestiq is Today */}
      <section style={{
        padding: '100px 48px',
        position: 'relative',
        zIndex: 1
      }}>
        <div style={{ maxWidth: '900px', margin: '0 auto' }}>
          <h2 style={{
            fontFamily: '"Sora", sans-serif',
            fontSize: '36px',
            fontWeight: '600',
            marginBottom: '24px',
            letterSpacing: '-0.02em'
          }}>
            Where Vestiq is today
          </h2>
          
          <p style={{
            fontSize: '17px',
            lineHeight: '1.8',
            color: 'rgba(255, 255, 255, 0.6)',
            marginBottom: '20px'
          }}>
            Today, Vestiq operates as a research and simulation platform. The system delivers company reports, catalyst explanations, and tools for running simulated portfolios with documented decisions.
          </p>
          
          <p style={{
            fontSize: '17px',
            lineHeight: '1.8',
            color: 'rgba(255, 255, 255, 0.6)',
            marginBottom: '28px'
          }}>
            Portfolios in Vestiq use virtual capital and real market data. The platform does not execute trades, route orders, or act as a broker. Any future live trading capabilities will sit on top of this core and depend on licensing and regulatory approvals.
          </p>
          
          <a href="/roadmap" className="secondary-link">
            View the full roadmap
            <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>
      </section>
      
      {/* How Vestiq is Built */}
      <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: '1000px', margin: '0 auto' }}>
          <h2 style={{
            fontFamily: '"Sora", sans-serif',
            fontSize: '36px',
            fontWeight: '600',
            marginBottom: '24px',
            letterSpacing: '-0.02em'
          }}>
            How Vestiq is built
          </h2>
          
          <p style={{
            fontSize: '17px',
            lineHeight: '1.8',
            color: 'rgba(255, 255, 255, 0.6)',
            marginBottom: '20px'
          }}>
            Vestiq combines large-scale data ingestion, language models, and portfolio logic inside a single environment. The system structures filings, earnings, news, regulatory events, and market data in ways that support research and portfolio decisions.
          </p>
          
          <p style={{
            fontSize: '17px',
            lineHeight: '1.8',
            color: 'rgba(255, 255, 255, 0.6)',
            marginBottom: '40px'
          }}>
            The design emphasizes clarity over spectacle: straightforward interfaces, natural language explanations, and layouts that keep attention on companies, catalysts, and portfolios.
          </p>
          
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(3, 1fr)',
            gap: '16px'
          }}>
            {[
              { title: 'Clarity', description: 'Explanations in language that feels natural and precise.' },
              { title: 'Discipline', description: 'Interfaces that encourage written theses and consistent sizing.' },
              { title: 'Traceability', description: 'A record of what happened and why, available for later review.' }
            ].map((value, i) => (
              <div key={i} style={{
                padding: '24px',
                background: 'rgba(255, 255, 255, 0.02)',
                borderRadius: '12px',
                border: '1px solid rgba(255, 255, 255, 0.05)',
                textAlign: 'center'
              }}>
                <h4 style={{
                  fontFamily: '"Sora", sans-serif',
                  fontSize: '16px',
                  fontWeight: '600',
                  color: '#fff',
                  marginBottom: '8px'
                }}>{value.title}</h4>
                <p style={{
                  fontFamily: '"DM Sans", sans-serif',
                  fontSize: '14px',
                  lineHeight: '1.55',
                  color: 'rgba(255, 255, 255, 0.5)'
                }}>{value.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
      
      {/* Principles */}
      <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'
          }}>
            Principles that guide the platform
          </h2>
          
          <p style={{
            fontSize: '17px',
            lineHeight: '1.8',
            color: 'rgba(255, 255, 255, 0.6)',
            marginBottom: '40px'
          }}>
            Vestiq grows along a few simple principles. Research maintains priority over speculation. Portfolios receive tools that highlight risk, exposure, and process. Every new feature respects documentation and transparency. Regulatory boundaries and licensing requirements sit at the center of any decision involving live capital.
          </p>
          
          <div style={{
            display: 'flex',
            justifyContent: 'center',
            gap: '16px',
            flexWrap: 'wrap'
          }}>
            <ValueTag label="Research-first" />
            <ValueTag label="Process-oriented" />
            <ValueTag label="Control-aware" />
          </div>
        </div>
      </section>
      
      {/* Final CTA */}
      <section style={{
        padding: '100px 48px',
        position: 'relative',
        zIndex: 1
      }}>
        <div style={{
          maxWidth: '800px',
          margin: '0 auto',
          textAlign: 'center',
          padding: '60px',
          background: 'linear-gradient(135deg, rgba(94, 234, 212, 0.08), rgba(167, 139, 250, 0.08))',
          borderRadius: '24px',
          border: '1px solid rgba(94, 234, 212, 0.15)'
        }}>
          <h2 style={{
            fontFamily: '"Sora", sans-serif',
            fontSize: '32px',
            fontWeight: '600',
            marginBottom: '16px',
            letterSpacing: '-0.02em'
          }}>
            Follow Vestiq's progress
          </h2>
          <p style={{
            fontSize: '16px',
            lineHeight: '1.7',
            color: 'rgba(255, 255, 255, 0.6)',
            marginBottom: '32px'
          }}>
            Watch the platform evolve from a research and simulation environment into a deeper operating system for market-intelligence and portfolio management.
          </p>
          
          <div style={{ display: 'flex', justifyContent: 'center', gap: '16px', flexWrap: 'wrap' }}>
            <a href="#" className="primary-btn" style={{ padding: '14px 28px', fontSize: '15px' }}>
              Get Early Access
            </a>
            <a href="/roadmap" style={{
              color: 'rgba(255, 255, 255, 0.7)',
              textDecoration: 'none',
              padding: '14px 28px',
              fontSize: '15px',
              fontWeight: '500',
              border: '1px solid rgba(255, 255, 255, 0.2)',
              borderRadius: '8px',
              transition: 'all 0.3s ease'
            }}>
              Read the Roadmap
            </a>
          </div>
        </div>
      </section>
      
      {/* Footer */}
      <footer style={{
        padding: '48px',
        borderTop: '1px solid rgba(255, 255, 255, 0.05)',
        position: 'relative',
        zIndex: 1
      }}>
        <div style={{
          maxWidth: '1400px',
          margin: '0 auto',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          flexWrap: 'wrap',
          gap: '24px'
        }}>
          <div>
            <div style={{
              fontFamily: '"Sora", sans-serif',
              fontSize: '20px',
              fontWeight: '700',
              background: 'linear-gradient(135deg, #5eead4 0%, #a78bfa 100%)',
              WebkitBackgroundClip: 'text',
              WebkitTextFillColor: 'transparent',
              marginBottom: '8px'
            }}>
              Vestiq
            </div>
            <p style={{
              fontFamily: '"DM Sans", sans-serif',
              fontSize: '14px',
              color: 'rgba(255, 255, 255, 0.4)'
            }}>
              Market-intelligence and portfolio management.
            </p>
          </div>
          
          <div style={{ display: 'flex', gap: '32px' }}>
            {['About', 'Legal', 'Privacy', 'Terms', 'Disclosures'].map((link, i) => (
              <a key={i} href="#" style={{
                fontFamily: '"DM Sans", sans-serif',
                fontSize: '14px',
                color: 'rgba(255, 255, 255, 0.4)',
                textDecoration: 'none',
                transition: 'color 0.2s ease'
              }}>
                {link}
              </a>
            ))}
          </div>
        </div>
        
        <div style={{
          maxWidth: '1400px',
          margin: '32px auto 0',
          paddingTop: '24px',
          borderTop: '1px solid rgba(255, 255, 255, 0.03)',
          textAlign: 'center'
        }}>
          <p style={{
            fontFamily: '"JetBrains Mono", monospace',
            fontSize: '12px',
            color: 'rgba(255, 255, 255, 0.3)'
          }}>
            Vestiq is a research and simulation platform. It does not execute trades, act as a broker, or provide personalized investment advice. Any future live trading features will depend on required regulatory approvals and licensing.
          </p>
        </div>
      </footer>
    </div>
  );
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<AboutPage />);