import React from 'react';
import { Link } from 'react-router-dom';
import HeroVideo from '../components/HeroVideo';

export default function LandingPage() {
  return (
    <div className="landing-page">
      {/* Navigation */}
      <nav className="landing-nav">
        <div className="nav-brand">
          <span className="brand-icon">◈</span>
          <span className="brand-text">AeThex Connect</span>
        </div>
        <div className="nav-links">
          <Link to="/features">Features</Link>
          <Link to="/about">About</Link>
          <a href="https://github.com/AeThex-Corporation" target="_blank" rel="noopener noreferrer">GitHub</a>
        </div>
        <div className="nav-auth">
          <Link to="/login" className="nav-login">Login</Link>
          <Link to="/register" className="nav-register">Get Started</Link>
        </div>
      </nav>

      {/* Hero Section */}
      <section className="hero">
        <HeroVideo />
        <div className="hero-content">
          <div className="hero-badge">
            <span className="badge-dot"></span>
            Open Source • Privacy-First • Decentralized
          </div>
          <h1 className="hero-title">
            Connect Without
            <br />
            <span className="gradient-text">Compromise</span>
          </h1>
          <p className="hero-subtitle">
            The next-generation communication platform built for gamers, developers, 
            and communities who value privacy, security, and true ownership of their data.
          </p>
          <div className="hero-actions">
            <Link to="/register" className="cta-primary">
              <span>Launch Connect</span>
              <span className="cta-arrow">→</span>
            </Link>
            <a href="#features" className="cta-secondary">
              Explore Features
            </a>
          </div>
          <div className="hero-stats">
            <div className="stat">
              <span className="stat-value">100%</span>
              <span className="stat-label">Open Source</span>
            </div>
            <div className="stat-divider"></div>
            <div className="stat">
              <span className="stat-value">E2E</span>
              <span className="stat-label">Encrypted</span>
            </div>
            <div className="stat-divider"></div>
            <div className="stat">
              <span className="stat-value">0</span>
              <span className="stat-label">Data Sold</span>
            </div>
          </div>
        </div>
        <div className="hero-visual">
          <div className="app-preview">
            <div className="preview-header">
              <div className="preview-dots">
                <span></span><span></span><span></span>
              </div>
            </div>
            <div className="preview-content">
              <div className="preview-sidebar">
                <div className="preview-server active"></div>
                <div className="preview-server"></div>
                <div className="preview-server"></div>
              </div>
              <div className="preview-channels">
                <div className="preview-channel"></div>
                <div className="preview-channel active"></div>
                <div className="preview-channel"></div>
              </div>
              <div className="preview-chat">
                <div className="preview-message"></div>
                <div className="preview-message short"></div>
                <div className="preview-message"></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section id="features" className="features-section">
        <h2 className="section-title">Why AeThex Connect?</h2>
        <p className="section-subtitle">
          Built from the ground up with the features that matter most
        </p>
        <div className="features-grid">
          <div className="feature-card">
            <div className="feature-icon foundation">🔐</div>
            <h3>End-to-End Encryption</h3>
            <p>Every message, call, and file is encrypted. Only you and your recipients can read them.</p>
          </div>
          <div className="feature-card">
            <div className="feature-icon corporation">🎮</div>
            <h3>GameForge Integration</h3>
            <p>Rich presence, game invites, and overlay support for your favorite games.</p>
          </div>
          <div className="feature-card">
            <div className="feature-icon labs">📞</div>
            <h3>Crystal Clear Calls</h3>
            <p>HD voice and video calls with screen sharing, powered by WebRTC.</p>
          </div>
          <div className="feature-card">
            <div className="feature-icon">🌐</div>
            <h3>Cross-Platform</h3>
            <p>Web, Desktop, iOS, and Android. Your conversations sync everywhere.</p>
          </div>
          <div className="feature-card">
            <div className="feature-icon">🔓</div>
            <h3>Open Source</h3>
            <p>Fully auditable code. No hidden backdoors. Community-driven development.</p>
          </div>
          <div className="feature-card">
            <div className="feature-icon">⚡</div>
            <h3>Blazing Fast</h3>
            <p>Optimized for performance. No bloat, no lag, just pure speed.</p>
          </div>
        </div>
      </section>

      {/* Trinity Section */}
      <section className="trinity-section">
        <h2 className="section-title">The AeThex Trinity</h2>
        <p className="section-subtitle">Three divisions, one ecosystem</p>
        <div className="trinity-cards">
          <div className="trinity-card foundation">
            <div className="trinity-icon">◈</div>
            <h3>Foundation</h3>
            <p>Core security, authentication, and identity. The bedrock of trust.</p>
          </div>
          <div className="trinity-card corporation">
            <div className="trinity-icon">◈</div>
            <h3>Corporation</h3>
            <p>Enterprise solutions and professional services. Built for scale.</p>
          </div>
          <div className="trinity-card labs">
            <div className="trinity-icon">◈</div>
            <h3>Labs</h3>
            <p>Research and experimental features. Tomorrow's technology today.</p>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="cta-section">
        <div className="cta-content">
          <h2>Ready to Connect?</h2>
          <p>Join the community that values your privacy as much as you do.</p>
          <Link to="/register" className="cta-primary large">
            Create Your Account
          </Link>
        </div>
      </section>

      {/* Footer */}
      <footer className="landing-footer">
        <div className="footer-content">
          <div className="footer-brand">
            <span className="brand-icon">◈</span>
            <span>AeThex Connect</span>
          </div>
          <div className="footer-links">
            <div className="footer-column">
              <h4>Product</h4>
              <Link to="/features">Features</Link>
              <Link to="/about">About</Link>
              <a href="#">Download</a>
            </div>
            <div className="footer-column">
              <h4>Resources</h4>
              <a href="#">Documentation</a>
              <a href="#">API</a>
              <a href="https://github.com/AeThex-Corporation" target="_blank">GitHub</a>
            </div>
            <div className="footer-column">
              <h4>Legal</h4>
              <a href="#">Privacy Policy</a>
              <a href="#">Terms of Service</a>
              <a href="#">Security</a>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <p>© 2026 AeThex Corporation. Open source under MIT License.</p>
        </div>
      </footer>
    </div>
  );
}
