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

const { useState, useEffect, useRef } = React;


// Animated background with academic-styled constellation (softer, with subtle grid)
const AcademicConstellation = () => {
  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 < 50; i++) {
      particles.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        vx: (Math.random() - 0.5) * 0.15,
        vy: (Math.random() - 0.5) * 0.15,
        size: Math.random() * 1.5 + 0.5,
        opacity: Math.random() * 0.25 + 0.05
      });
    }
    
    const animate = () => {
      ctx.fillStyle = 'rgba(10, 12, 16, 0.03)';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      
      // Draw subtle grid
      ctx.strokeStyle = 'rgba(94, 234, 212, 0.015)';
      ctx.lineWidth = 1;
      const gridSize = 80;
      for (let x = 0; x < canvas.width; x += gridSize) {
        ctx.beginPath();
        ctx.moveTo(x, 0);
        ctx.lineTo(x, canvas.height);
        ctx.stroke();
      }
      for (let y = 0; y < canvas.height; y += gridSize) {
        ctx.beginPath();
        ctx.moveTo(0, y);
        ctx.lineTo(canvas.width, y);
        ctx.stroke();
      }
      
      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(167, 139, 250, ${p.opacity * 0.8})`;
        ctx.fill();
        
        particles.forEach((p2, j) => {
          if (i === j) return;
          const dx = p.x - p2.x;
          const dy = p.y - p2.y;
          const dist = Math.sqrt(dx * dx + dy * dy);
          
          if (dist < 100) {
            ctx.beginPath();
            ctx.moveTo(p.x, p.y);
            ctx.lineTo(p2.x, p2.y);
            ctx.strokeStyle = `rgba(167, 139, 250, ${0.03 * (1 - dist / 100)})`;
            ctx.lineWidth = 0.5;
            ctx.stroke();
          }
        });
      });
      
      animationFrameId = requestAnimationFrame(animate);
    };
    
    animate();
    
    return () => {
      cancelAnimationFrame(animationFrameId);
      window.removeEventListener('resize', resizeCanvas);
    };
  }, []);
  
  return (
    <canvas
      ref={canvasRef}
      style={{
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        pointerEvents: 'none',
        zIndex: 0,
        opacity: 0.6
      }}
    />
  );
};

// Instructor Dashboard Mock for Hero
const InstructorDashboardMock = () => {
  return (
    <div style={{
      position: 'relative',
      width: '100%',
      maxWidth: '580px',
      height: '500px'
    }}>
      {/* Main Instructor Dashboard Card */}
      <div style={{
        position: 'absolute',
        top: '0',
        left: '0',
        width: '480px',
        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: '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'
        }}>
          <div>
            <span style={{
              fontFamily: '"JetBrains Mono", monospace',
              fontSize: '10px',
              color: 'rgba(167, 139, 250, 0.7)',
              textTransform: 'uppercase',
              letterSpacing: '1px'
            }}>Instructor Dashboard</span>
            <h3 style={{
              fontFamily: '"Sora", sans-serif',
              fontSize: '16px',
              fontWeight: '600',
              color: '#fff',
              marginTop: '4px'
            }}>Spring Equity Analysis</h3>
          </div>
          <span style={{
            fontFamily: '"JetBrains Mono", monospace',
            fontSize: '11px',
            color: 'rgba(255, 255, 255, 0.4)',
            padding: '6px 12px',
            background: 'rgba(255, 255, 255, 0.05)',
            borderRadius: '6px'
          }}>FIN 401</span>
        </div>
        
        {/* Stats Row */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: '12px',
          marginBottom: '20px'
        }}>
          {[
            { label: 'Portfolios', value: '24' },
            { label: 'Avg Return', value: '+7.2%', color: '#5eead4' },
            { label: 'Avg Doc Score', value: '86' },
            { label: 'Active', value: '22' }
          ].map((stat, i) => (
            <div key={i} style={{
              background: 'rgba(0, 0, 0, 0.2)',
              borderRadius: '8px',
              padding: '12px 10px',
              textAlign: 'center'
            }}>
              <div style={{
                fontFamily: '"JetBrains Mono", monospace',
                fontSize: '9px',
                color: 'rgba(255, 255, 255, 0.4)',
                textTransform: 'uppercase',
                marginBottom: '4px'
              }}>{stat.label}</div>
              <div style={{
                fontFamily: '"JetBrains Mono", monospace',
                fontSize: '16px',
                fontWeight: '600',
                color: stat.color || '#fff'
              }}>{stat.value}</div>
            </div>
          ))}
        </div>
        
        {/* Student Table */}
        <div style={{
          background: 'rgba(0, 0, 0, 0.15)',
          borderRadius: '10px',
          padding: '12px'
        }}>
          <div style={{
            display: 'grid',
            gridTemplateColumns: '1.4fr 0.9fr 0.9fr 0.8fr 0.9fr',
            gap: '8px',
            padding: '8px 0',
            borderBottom: '1px solid rgba(255, 255, 255, 0.06)',
            marginBottom: '4px'
          }}>
            {['Team', 'Return', 'Drawdown', 'Doc', 'Risk'].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>
          
          {[
            { name: 'Team Alpha', return: '+12.4%', drawdown: '-4.2%', doc: '94', risk: 'Mod' },
            { name: 'Team Beta', return: '+8.1%', drawdown: '-6.8%', doc: '87', risk: 'Agg' },
            { name: 'Team Gamma', return: '+5.6%', drawdown: '-2.1%', doc: '91', risk: 'Con' },
            { name: 'Team Delta', return: '+3.2%', drawdown: '-5.4%', doc: '82', risk: 'Mod' }
          ].map((row, i) => (
            <div key={i} style={{
              display: 'grid',
              gridTemplateColumns: '1.4fr 0.9fr 0.9fr 0.8fr 0.9fr',
              gap: '8px',
              padding: '10px 0',
              borderBottom: i < 3 ? '1px solid rgba(255, 255, 255, 0.04)' : 'none'
            }}>
              <span style={{
                fontFamily: '"DM Sans", sans-serif',
                fontSize: '13px',
                fontWeight: '500',
                color: '#fff'
              }}>{row.name}</span>
              <span style={{
                fontFamily: '"JetBrains Mono", monospace',
                fontSize: '12px',
                color: '#5eead4'
              }}>{row.return}</span>
              <span style={{
                fontFamily: '"JetBrains Mono", monospace',
                fontSize: '12px',
                color: '#f87171'
              }}>{row.drawdown}</span>
              <span style={{
                fontFamily: '"JetBrains Mono", monospace',
                fontSize: '12px',
                color: 'rgba(255, 255, 255, 0.6)'
              }}>{row.doc}</span>
              <span style={{
                fontFamily: '"JetBrains Mono", monospace',
                fontSize: '11px',
                color: 'rgba(255, 255, 255, 0.5)',
                padding: '2px 6px',
                background: row.risk === 'Agg' ? 'rgba(248, 113, 113, 0.15)' : row.risk === 'Con' ? 'rgba(94, 234, 212, 0.15)' : 'rgba(251, 191, 36, 0.15)',
                borderRadius: '4px',
                width: 'fit-content'
              }}>{row.risk}</span>
            </div>
          ))}
        </div>
      </div>
      
      {/* Student Portfolio Card */}
      <div style={{
        position: 'absolute',
        bottom: '20px',
        right: '0',
        width: '260px',
        background: 'linear-gradient(135deg, rgba(30, 35, 45, 0.98), rgba(20, 25, 35, 0.98))',
        borderRadius: '14px',
        border: '1px solid rgba(94, 234, 212, 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(94, 234, 212, 0.7)',
            textTransform: 'uppercase',
            letterSpacing: '1px'
          }}>Student Portfolio</span>
          <span style={{
            fontFamily: '"DM Sans", sans-serif',
            fontSize: '13px',
            fontWeight: '600',
            color: '#fff'
          }}>Team Delta</span>
        </div>
        
        <div style={{
          display: 'flex',
          gap: '16px',
          marginBottom: '14px'
        }}>
          <div>
            <div style={{
              fontFamily: '"JetBrains Mono", monospace',
              fontSize: '9px',
              color: 'rgba(255, 255, 255, 0.4)',
              textTransform: 'uppercase'
            }}>Positions</div>
            <div style={{
              fontFamily: '"JetBrains Mono", monospace',
              fontSize: '15px',
              fontWeight: '600',
              color: '#fff'
            }}>6</div>
          </div>
          <div>
            <div style={{
              fontFamily: '"JetBrains Mono", monospace',
              fontSize: '9px',
              color: 'rgba(255, 255, 255, 0.4)',
              textTransform: 'uppercase'
            }}>Return</div>
            <div style={{
              fontFamily: '"JetBrains Mono", monospace',
              fontSize: '15px',
              fontWeight: '600',
              color: '#5eead4'
            }}>+3.2%</div>
          </div>
        </div>
        
        <div style={{
          padding: '10px',
          background: 'rgba(167, 139, 250, 0.08)',
          borderRadius: '8px',
          border: '1px solid rgba(167, 139, 250, 0.12)',
          marginBottom: '12px'
        }}>
          <span style={{
            fontFamily: '"JetBrains Mono", monospace',
            fontSize: '9px',
            color: 'rgba(167, 139, 250, 0.8)',
            textTransform: 'uppercase'
          }}>Latest Thesis – PLTR</span>
          <p style={{
            fontFamily: '"DM Sans", sans-serif',
            fontSize: '11px',
            color: 'rgba(255, 255, 255, 0.6)',
            marginTop: '6px',
            lineHeight: '1.45'
          }}>Government contract expansion and AI platform adoption driving sustained growth...</p>
        </div>
        
        <div style={{
          display: 'flex',
          alignItems: 'center',
          gap: '8px'
        }}>
          <div style={{
            width: '6px',
            height: '6px',
            borderRadius: '50%',
            background: '#5eead4'
          }}/>
          <span style={{
            fontFamily: '"JetBrains Mono", monospace',
            fontSize: '10px',
            color: 'rgba(255, 255, 255, 0.5)'
          }}>12 activity entries this week</span>
        </div>
      </div>
    </div>
  );
};

// Course Step Component
const CourseStep = ({ number, title, description }) => (
  <div style={{
    flex: 1,
    position: 'relative',
    padding: '0 20px'
  }}>
    {/* Connector */}
    {number < 4 && (
      <div style={{
        position: 'absolute',
        top: '24px',
        right: '-10%',
        width: '20%',
        height: '2px',
        background: 'linear-gradient(90deg, rgba(167, 139, 250, 0.4), rgba(167, 139, 250, 0.1))'
      }}/>
    )}
    
    <div style={{
      width: '48px',
      height: '48px',
      borderRadius: '50%',
      background: 'linear-gradient(135deg, rgba(167, 139, 250, 0.2), rgba(167, 139, 250, 0.05))',
      border: '2px solid rgba(167, 139, 250, 0.3)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      marginBottom: '20px',
      position: 'relative',
      zIndex: 1
    }}>
      <span style={{
        fontFamily: '"JetBrains Mono", monospace',
        fontSize: '16px',
        fontWeight: '600',
        color: '#a78bfa'
      }}>{number}</span>
    </div>
    
    <h4 style={{
      fontFamily: '"Sora", sans-serif',
      fontSize: '17px',
      fontWeight: '600',
      color: '#fff',
      marginBottom: '10px'
    }}>{title}</h4>
    
    <p style={{
      fontFamily: '"DM Sans", sans-serif',
      fontSize: '14px',
      lineHeight: '1.6',
      color: 'rgba(255, 255, 255, 0.55)'
    }}>{description}</p>
  </div>
);

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

// Faculty Tool Block
const FacultyToolBlock = ({ icon, title, description }) => (
  <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(167, 139, 250, 0.15), rgba(167, 139, 250, 0.05))',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      marginBottom: '20px'
    }}>
      {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>
);

// 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: '16px',
        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',
          flexShrink: 0,
          marginLeft: '16px'
        }}
      >
        <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 Universities Page
// export default function UniversitiesPage() {
const UniversitiesPage = () => {
  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: 'What does Vestiq cost for academic programs?',
      answer: 'Pricing can follow per-seat, per-cohort, or institution-wide models. The Academic Partnerships team structures terms around enrollment size and course design. Contact us for a customized quote.'
    },
    {
      question: 'Can multiple courses share the same environment?',
      answer: 'Yes. Departments can run several cohorts, each with its own dashboard and grading structure, all under a single institutional agreement.'
    },
    {
      question: 'Can investment clubs use Vestiq?',
      answer: 'Schools can extend access to clubs and competitions under the same institutional agreement. This allows student organizations to practice portfolio management with the same tools used in formal courses.'
    },
    {
      question: 'How does Vestiq handle data privacy?',
      answer: 'Student portfolios and activity data remain within the institution\'s Vestiq instance and follow standard privacy and security practices. Additional documentation is available on request for compliance and IT review.'
    }
  ];
  
  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);
          }
        }
        
        .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: #a78bfa;
        }
        
        .nav-link.active::after {
          width: 100%;
          background: linear-gradient(90deg, #a78bfa, #5eead4);
        }
        
        .primary-btn {
          background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
          color: #fff;
          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(167, 139, 250, 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: #a78bfa;
          gap: 12px;
        }
        
        .section-fade {
          animation: fadeInUp 0.8s ease forwards;
        }
        
        .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(167, 139, 250, 0.2);
          transform: translateY(-4px);
        }
      `}</style>
      
      {/* Animated background */}
      <AcademicConstellation />
      
      {/* 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 active">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" style={{
            background: 'linear-gradient(135deg, #5eead4 0%, #2dd4bf 100%)',
            color: '#0a0c10'
          }}>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.15fr',
          gap: '60px',
          alignItems: 'center'
        }}>
          {/* Left: Copy */}
          <div className="section-fade" style={{ animationDelay: '0.2s' }}>
            <div style={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: '8px',
              padding: '8px 16px',
              background: 'rgba(167, 139, 250, 0.1)',
              border: '1px solid rgba(167, 139, 250, 0.2)',
              borderRadius: '100px',
              marginBottom: '24px'
            }}>
              <svg width="16" height="16" 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>
              <span style={{
                fontFamily: '"JetBrains Mono", monospace',
                fontSize: '12px',
                color: '#a78bfa'
              }}>Academic Programs</span>
            </div>
            
            <h1 style={{
              fontFamily: '"Sora", sans-serif',
              fontSize: '46px',
              fontWeight: '600',
              lineHeight: '1.15',
              marginBottom: '20px',
              letterSpacing: '-0.02em'
            }}>
              Vestiq for universities and business schools
            </h1>
            <p style={{
              fontSize: '19px',
              lineHeight: '1.5',
              color: 'rgba(255, 255, 255, 0.7)',
              marginBottom: '20px'
            }}>
              A market-intelligence and portfolio management environment for teaching real investment process, with complete transparency for faculty.
            </p>
            <p style={{
              fontSize: '16px',
              lineHeight: '1.7',
              color: 'rgba(255, 255, 255, 0.5)',
              marginBottom: '36px'
            }}>
              Vestiq gives students simulated portfolios, research tools, and a framework for written investment theses. Instructor dashboards track performance, documentation quality, and risk, so classes can study both returns and decision-making.
            </p>
            
            <div style={{ display: 'flex', alignItems: 'center', gap: '24px', marginBottom: '32px' }}>
              <a href="#" className="primary-btn" style={{ padding: '14px 28px' }}>
                Talk with Academic Partnerships
              </a>
              <a 
                href="/vestiq-academic-overview-pdf" 
                download="Vestiq-Academic-Overview.pdf"
                className="secondary-btn"
              >
                Download Academic 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'
            }}>
              All activity uses simulated accounts and real market data. No live trading or brokerage occurs inside Vestiq.
            </p>
          </div>
          
          {/* Right: Dashboard mock */}
          <div className="section-fade" style={{ animationDelay: '0.4s' }}>
            <InstructorDashboardMock />
          </div>
        </div>
      </section>
      
      {/* Why Universities Use Vestiq 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'
          }}>
            Why universities use Vestiq
          </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'
          }}>
            Vestiq turns market data into a structured learning environment. Students read company and catalyst reports, build investment theses, and manage simulated portfolios. Faculty gain a clear view of each decision and can grade students on research quality, risk discipline, and long-term outcomes.
          </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">
                  <polyline points="22,12 18,12 15,21 9,3 6,12 2,12"/>
                </svg>
              </div>
              <h4 style={{
                fontFamily: '"Sora", sans-serif',
                fontSize: '17px',
                fontWeight: '600',
                marginBottom: '10px'
              }}>Real market context</h4>
              <p style={{
                fontSize: '14px',
                lineHeight: '1.65',
                color: 'rgba(255, 255, 255, 0.55)'
              }}>
                Classes run on current filings, earnings, news, and price moves. Students learn in the same environment professionals face each day.
              </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'
              }}>Documented investment process</h4>
              <p style={{
                fontSize: '14px',
                lineHeight: '1.65',
                color: 'rgba(255, 255, 255, 0.55)'
              }}>
                Every position carries a thesis, risk notes, and exit rationale, which builds a record of decisions across the term.
              </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">
                  <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                  <line x1="3" y1="9" x2="21" y2="9"/>
                  <line x1="9" y1="21" x2="9" y2="9"/>
                </svg>
              </div>
              <h4 style={{
                fontFamily: '"Sora", sans-serif',
                fontSize: '17px',
                fontWeight: '600',
                marginBottom: '10px'
              }}>Faculty visibility</h4>
              <p style={{
                fontSize: '14px',
                lineHeight: '1.65',
                color: 'rgba(255, 255, 255, 0.55)'
              }}>
                Instructor dashboards show portfolios, trade logs, and documentation quality so grading and feedback rely on evidence.
              </p>
            </div>
          </div>
        </div>
      </section>
      
      {/* How a Course Runs 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 a course runs on Vestiq
          </h2>
          
          <div style={{
            display: 'flex',
            position: 'relative'
          }}>
            <CourseStep 
              number={1}
              title="Course setup"
              description="The academic team defines the cohort, term dates, grading framework, and high-level goals. Vestiq provisions student accounts and connects them to the instructor dashboard."
            />
            <CourseStep 
              number={2}
              title="Student onboarding"
              description="Students receive login credentials, a starting balance for simulated capital, and a short orientation on writing investment theses and using the interface."
            />
            <CourseStep 
              number={3}
              title="Active management"
              description="Over the term, students research companies, open and close positions, update theses, and respond to catalysts. All actions feed into the portfolio and activity log."
            />
            <CourseStep 
              number={4}
              title="Review and assessment"
              description="At midterm and end of term, instructors review each student's portfolio metrics and documentation. Classes can walk through case studies from standout trades."
            />
          </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: '700px',
            margin: '48px auto 0'
          }}>
            The program adapts to different course structures, from semester-long equity analysis classes to intensive short-form workshops.
          </p>
        </div>
      </section>
      
      {/* Student Experience 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.1fr',
          gap: '80px',
          alignItems: 'start'
        }}>
          <div>
            <h2 style={{
              fontFamily: '"Sora", sans-serif',
              fontSize: '36px',
              fontWeight: '600',
              marginBottom: '24px',
              letterSpacing: '-0.02em'
            }}>
              Student experience in Vestiq
            </h2>
            <p style={{
              fontSize: '16px',
              lineHeight: '1.7',
              color: 'rgba(255, 255, 255, 0.6)',
              marginBottom: '32px'
            }}>
              Students access a professional-grade research and portfolio environment designed to build real investment skills through documented practice.
            </p>
            
            {/* Student Interface 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'
              }}>
                {['Research', 'Portfolio', 'Positions', 'Activity'].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={{
                background: 'rgba(0, 0, 0, 0.2)',
                borderRadius: '8px',
                padding: '16px'
              }}>
                <div style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: '12px',
                  marginBottom: '12px'
                }}>
                  <div style={{
                    width: '32px',
                    height: '32px',
                    borderRadius: '8px',
                    background: 'rgba(94, 234, 212, 0.15)',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center'
                  }}>
                    <span style={{
                      fontFamily: '"JetBrains Mono", monospace',
                      fontSize: '11px',
                      color: '#5eead4'
                    }}>AR</span>
                  </div>
                  <div>
                    <div style={{
                      fontFamily: '"DM Sans", sans-serif',
                      fontSize: '13px',
                      fontWeight: '600',
                      color: '#fff'
                    }}>ARWR Company Report</div>
                    <div style={{
                      fontFamily: '"JetBrains Mono", monospace',
                      fontSize: '10px',
                      color: 'rgba(255, 255, 255, 0.4)'
                    }}>Updated 2h ago</div>
                  </div>
                </div>
                <div style={{
                  height: '60px',
                  background: 'rgba(255, 255, 255, 0.02)',
                  borderRadius: '6px'
                }}/>
              </div>
            </div>
            
            <p style={{
              fontSize: '14px',
              color: 'rgba(255, 255, 255, 0.5)',
              marginTop: '20px',
              fontStyle: 'italic'
            }}>
              The interface teaches that every trade connects to a thesis, a risk level, and a documented decision.
            </p>
          </div>
          
          <div>
            <StudentViewCard
              title="Research feed"
              description="Students access company reports, catalyst summaries, and explanations of major price moves. Each report ties information back to underlying filings and news."
              color="#5eead4"
            />
            <StudentViewCard
              title="Portfolio dashboard"
              description="Shows total equity, cash, P&L, sector exposure, and active positions. Status tags call out earnings ahead, new filings, and elevated volatility."
              color="#a78bfa"
            />
            <StudentViewCard
              title="Position workspace"
              description="Each position has a dedicated workspace where students write and revise their thesis, define risk parameters, and link relevant research. When conditions change, that story updates alongside the numbers."
              color="#fbbf24"
            />
            <StudentViewCard
              title="Activity log"
              description="A timeline of entries, exits, and adjustments with timestamp, size, and notes. Students can review their own history and prepare reflection assignments."
              color="#f87171"
            />
          </div>
        </div>
      </section>
      
      {/* Faculty Tools 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: '48px',
            textAlign: 'center',
            letterSpacing: '-0.02em'
          }}>
            Tools for faculty and program leaders
          </h2>
          
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(3, 1fr)',
            gap: '24px'
          }}>
            <FacultyToolBlock
              icon={
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#a78bfa" strokeWidth="2">
                  <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                  <line x1="3" y1="9" x2="21" y2="9"/>
                  <line x1="9" y1="21" x2="9" y2="9"/>
                </svg>
              }
              title="Instructor dashboard"
              description="View all portfolios in a cohort at a glance. Scan returns, volatility, drawdowns, documentation scores, and concentration risk. Drill into any student or team for detailed review."
            />
            <FacultyToolBlock
              icon={
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#a78bfa" strokeWidth="2">
                  <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
                  <polyline points="22,4 12,14.01 9,11.01"/>
                </svg>
              }
              title="Evidence-based grading"
              description="Use portfolio metrics and documentation quality to build grading rubrics. Instructors can export trade logs and thesis histories for assessment, accreditation, or internal review."
            />
            <FacultyToolBlock
              icon={
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#a78bfa" strokeWidth="2">
                  <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
                  <polyline points="3.27,6.96 12,12.01 20.73,6.96"/>
                  <line x1="12" y1="22.08" x2="12" y2="12"/>
                </svg>
              }
              title="Program-level insights"
              description="Identify common strengths and gaps across the class. For example, over-concentration in specific sectors, weak exit discipline, or consistent underreaction to catalysts."
            />
          </div>
        </div>
      </section>
      
      {/* Curriculum Integration 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: '1000px', margin: '0 auto' }}>
          <h2 style={{
            fontFamily: '"Sora", sans-serif',
            fontSize: '36px',
            fontWeight: '600',
            marginBottom: '24px',
            textAlign: 'center',
            letterSpacing: '-0.02em'
          }}>
            Curriculum integration and use cases
          </h2>
          <p style={{
            fontSize: '17px',
            lineHeight: '1.8',
            color: 'rgba(255, 255, 255, 0.6)',
            textAlign: 'center',
            marginBottom: '48px'
          }}>
            Vestiq supports a range of academic formats, from undergraduate investment clubs to graduate-level portfolio management labs. Instructors can run Vestiq as the core platform for a course or as a practicum layer that complements existing lectures and case studies.
          </p>
          
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(3, 1fr)',
            gap: '24px'
          }}>
            {[
              {
                title: 'Equity analysis and valuation',
                description: 'Students turn fundamental research into written theses and simulated positions.',
                icon: '📊'
              },
              {
                title: 'Portfolio management and risk',
                description: 'Classes focus on allocations, exposure, and drawdowns across a full term.',
                icon: '⚖️'
              },
              {
                title: 'Experiential learning and competitions',
                description: 'Schools can run internal competitions or inter-university challenges using simulated accounts.',
                icon: '🏆'
              }
            ].map((item, i) => (
              <div key={i} style={{
                background: 'rgba(255, 255, 255, 0.02)',
                border: '1px solid rgba(255, 255, 255, 0.05)',
                borderRadius: '14px',
                padding: '24px',
                textAlign: 'center',
                transition: 'all 0.3s ease'
              }}>
                <div style={{ fontSize: '32px', marginBottom: '16px' }}>{item.icon}</div>
                <h4 style={{
                  fontFamily: '"Sora", sans-serif',
                  fontSize: '16px',
                  fontWeight: '600',
                  color: '#fff',
                  marginBottom: '10px'
                }}>{item.title}</h4>
                <p style={{
                  fontSize: '14px',
                  lineHeight: '1.6',
                  color: 'rgba(255, 255, 255, 0.5)'
                }}>{item.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
      
      {/* Compliance 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'
          }}>
            Compliance, governance, and safety
          </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'
          }}>
            Vestiq's academic environment operates with simulated capital and market data. No live trading, brokerage, or order routing occurs on the platform. The structure allows schools to teach real investment disciplines while retaining clear boundaries between classroom activity and external accounts.
          </p>
          
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(3, 1fr)',
            gap: '20px'
          }}>
            {[
              {
                title: 'Simulated environment',
                description: 'All portfolios use virtual capital. Market data reflects real prices and events.',
                color: '#5eead4'
              },
              {
                title: 'Transparent records',
                description: 'Every position includes thesis text, timestamps, and trade details for internal review.',
                color: '#a78bfa'
              },
              {
                title: 'Future alignment',
                description: 'Academic programs benefit from a platform engineered with controls and documentation at its foundation.',
                color: '#fbbf24'
              }
            ].map((item, i) => (
              <div key={i} style={{
                padding: '24px',
                background: 'rgba(255, 255, 255, 0.02)',
                borderRadius: '12px',
                borderLeft: `3px solid ${item.color}`
              }}>
                <h4 style={{
                  fontFamily: '"Sora", sans-serif',
                  fontSize: '16px',
                  fontWeight: '600',
                  color: '#fff',
                  marginBottom: '10px'
                }}>{item.title}</h4>
                <p style={{
                  fontSize: '14px',
                  lineHeight: '1.6',
                  color: 'rgba(255, 255, 255, 0.5)'
                }}>{item.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
      
      {/* Implementation 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: '900px', margin: '0 auto' }}>
          <h2 style={{
            fontFamily: '"Sora", sans-serif',
            fontSize: '36px',
            fontWeight: '600',
            marginBottom: '24px',
            textAlign: 'center',
            letterSpacing: '-0.02em'
          }}>
            Implementation and support
          </h2>
          <p style={{
            fontSize: '17px',
            lineHeight: '1.8',
            color: 'rgba(255, 255, 255, 0.6)',
            textAlign: 'center',
            marginBottom: '48px'
          }}>
            Academic partners receive help with course setup, student onboarding, and grading frameworks. A typical implementation includes an initial planning call, instructor training, and a short pilot cohort before broader rollout.
          </p>
          
          <div style={{
            display: 'flex',
            alignItems: 'flex-start',
            gap: '24px'
          }}>
            {[
              { step: '1', title: 'Planning and design', desc: 'Define courses, cohort size, timing, and learning goals.' },
              { step: '2', title: 'Pilot and refine', desc: 'Run a small group or single section to validate workflows and grading.' },
              { step: '3', title: 'Scale across programs', desc: 'Extend Vestiq to additional classes, labs, and investment clubs.' }
            ].map((item, i) => (
              <div key={i} style={{
                flex: 1,
                textAlign: 'center',
                position: 'relative'
              }}>
                {i < 2 && (
                  <div style={{
                    position: 'absolute',
                    top: '24px',
                    right: '-12px',
                    width: '24px',
                    height: '2px',
                    background: 'linear-gradient(90deg, rgba(167, 139, 250, 0.4), rgba(167, 139, 250, 0.1))'
                  }}/>
                )}
                <div style={{
                  width: '48px',
                  height: '48px',
                  borderRadius: '50%',
                  background: 'linear-gradient(135deg, rgba(167, 139, 250, 0.2), rgba(167, 139, 250, 0.05))',
                  border: '2px solid rgba(167, 139, 250, 0.3)',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  margin: '0 auto 16px',
                  position: 'relative',
                  zIndex: 1
                }}>
                  <span style={{
                    fontFamily: '"JetBrains Mono", monospace',
                    fontSize: '16px',
                    fontWeight: '600',
                    color: '#a78bfa'
                  }}>{item.step}</span>
                </div>
                <h4 style={{
                  fontFamily: '"Sora", sans-serif',
                  fontSize: '16px',
                  fontWeight: '600',
                  color: '#fff',
                  marginBottom: '8px'
                }}>{item.title}</h4>
                <p style={{
                  fontSize: '14px',
                  lineHeight: '1.6',
                  color: 'rgba(255, 255, 255, 0.5)'
                }}>{item.desc}</p>
              </div>
            ))}
          </div>
          
          <p style={{
            fontSize: '14px',
            color: 'rgba(255, 255, 255, 0.4)',
            textAlign: 'center',
            marginTop: '40px',
            fontStyle: 'italic'
          }}>
            Dedicated support channels are available during the term for instructors and program coordinators.
          </p>
        </div>
      </section>
      
      {/* FAQ Section */}
      <section style={{
        padding: '100px 48px',
        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 for universities
          </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(167, 139, 250, 0.1), rgba(94, 234, 212, 0.05))',
          borderRadius: '24px',
          border: '1px solid rgba(167, 139, 250, 0.2)'
        }}>
          <h2 style={{
            fontFamily: '"Sora", sans-serif',
            fontSize: '36px',
            fontWeight: '600',
            marginBottom: '20px',
            letterSpacing: '-0.02em'
          }}>
            Bring Vestiq into the classroom
          </h2>
          <p style={{
            fontSize: '17px',
            lineHeight: '1.7',
            color: 'rgba(255, 255, 255, 0.6)',
            marginBottom: '40px'
          }}>
            Equip students with a professional-grade research and portfolio environment and give faculty a clear window into every decision.
          </p>
          
          <div style={{ display: 'flex', justifyContent: 'center', gap: '20px', flexWrap: 'wrap' }}>
            <a href="#" className="primary-btn" style={{ padding: '16px 32px', fontSize: '16px' }}>
              Schedule an academic demo
            </a>
            <a href="mailto:academic@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'
            }}>
              Request curriculum and pricing details
            </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(<UniversitiesPage />);