import React from 'react';
import { Link } from 'react-router-dom';

export default function AboutPage() {
  const team = [
    { name: 'Trevor', role: 'Founder & Lead Developer', avatar: 'T', color: '#ff0000' },
    { name: 'Open Source', role: 'Community Contributors', avatar: '👥', color: '#5865f2' },
  ];

  const timeline = [
    { year: '2024', event: 'AeThex Foundation established', desc: 'Core infrastructure and passport system development begins' },
    { year: '2025', event: 'AeThex Connect launched', desc: 'Open source Discord alternative enters alpha' },
    { year: '2026', event: 'Public beta release', desc: 'Full feature parity achieved, community growth accelerates' },
  ];

  return (
    <div className="info-page">
      <nav className="info-nav">
        <Link to="/" className="nav-brand">
          <span className="brand-icon">◈</span>
          <span className="brand-text">AeThex Connect</span>
        </Link>
        <div className="nav-links">
          <Link to="/features">Features</Link>
          <Link to="/about" className="active">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>

      <main className="info-content">
        <section className="about-hero">
          <h1>About <span className="gradient-text">AeThex</span></h1>
          <p className="hero-desc">
            Building the future of decentralized communication, one line of code at a time.
          </p>
        </section>

        <section className="about-section">
          <h2>Our Mission</h2>
          <div className="mission-content">
            <div className="mission-text">
              <p>
                AeThex was founded on a simple belief: <strong>your data belongs to you</strong>. 
                In a world where major platforms profit from your conversations, we chose a different path.
              </p>
              <p>
                AeThex Connect is our answer to the centralized communication monopoly. 
                It's not just an alternative to Discord—it's a statement that privacy, security, 
                and user ownership can coexist with a world-class communication experience.
              </p>
              <p>
                As an open-source project, every line of our code is public. 
                We believe transparency isn't just nice to have—it's essential for trust.
              </p>
            </div>
            <div className="mission-values">
              <div className="value-card">
                <span className="value-icon">🔒</span>
                <h3>Privacy First</h3>
                <p>End-to-end encryption by default. We can't read your messages even if we wanted to.</p>
              </div>
              <div className="value-card">
                <span className="value-icon">🌐</span>
                <h3>Open Source</h3>
                <p>100% of our code is public. Audit it, fork it, contribute to it.</p>
              </div>
              <div className="value-card">
                <span className="value-icon">⚡</span>
                <h3>User Owned</h3>
                <p>Your identity, your data, your control. Forever.</p>
              </div>
            </div>
          </div>
        </section>

        <section className="about-section trinity-section">
          <h2>The Trinity</h2>
          <p className="section-intro">AeThex operates as three interconnected divisions</p>
          <div className="trinity-grid">
            <div className="trinity-card foundation">
              <div className="trinity-icon">🏛️</div>
              <h3>Foundation</h3>
              <p>The core. Authentication, security infrastructure, and the Passport identity system.</p>
            </div>
            <div className="trinity-card corporation">
              <div className="trinity-icon">🏢</div>
              <h3>Corporation</h3>
              <p>Enterprise solutions, business integrations, and commercial support services.</p>
            </div>
            <div className="trinity-card labs">
              <div className="trinity-icon">🔬</div>
              <h3>Labs</h3>
              <p>Experimental features, R&D, and cutting-edge technology development.</p>
            </div>
          </div>
        </section>

        <section className="about-section">
          <h2>Our Journey</h2>
          <div className="timeline">
            {timeline.map((item, i) => (
              <div key={i} className="timeline-item">
                <div className="timeline-year">{item.year}</div>
                <div className="timeline-content">
                  <h3>{item.event}</h3>
                  <p>{item.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </section>

        <section className="about-section">
          <h2>The Team</h2>
          <div className="team-grid">
            {team.map((member, i) => (
              <div key={i} className="team-card">
                <div className="team-avatar" style={{ background: member.color }}>
                  {member.avatar}
                </div>
                <h3>{member.name}</h3>
                <p>{member.role}</p>
              </div>
            ))}
          </div>
        </section>

        <section className="about-cta">
          <h2>Ready to join the revolution?</h2>
          <p>Be part of the community shaping the future of communication.</p>
          <div className="cta-actions">
            <Link to="/register" className="cta-primary">Create Account</Link>
            <a href="https://github.com/AeThex-Corporation/AeThex-Connect" className="cta-secondary" target="_blank" rel="noopener noreferrer">
              View on GitHub
            </a>
          </div>
        </section>
      </main>

      <footer className="info-footer">
        <div className="footer-content">
          <div className="footer-brand">
            <span className="brand-icon">◈</span>
            <span>AeThex Connect</span>
          </div>
          <div className="footer-links">
            <Link to="/features">Features</Link>
            <Link to="/about">About</Link>
            <Link to="/privacy">Privacy</Link>
            <Link to="/terms">Terms</Link>
          </div>
          <div className="footer-copy">
            © 2026 AeThex Corporation. Open source under MIT License.
          </div>
        </div>
      </footer>
    </div>
  );
}
