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

export default function FeaturesPage() {
  const featureCategories = [
    {
      title: 'Communication',
      features: [
        { icon: '💬', name: 'Real-time Messaging', desc: 'Instant message delivery with typing indicators, reactions, and rich embeds' },
        { icon: '🎙️', name: 'Voice Channels', desc: 'Crystal-clear voice chat with noise suppression and echo cancellation' },
        { icon: '📹', name: 'Video Calls', desc: 'HD video calls with screen sharing and virtual backgrounds' },
        { icon: '🧵', name: 'Threads', desc: 'Organized conversations that keep your channels clean' },
        { icon: '📌', name: 'Pinned Messages', desc: 'Save important messages for easy access' },
        { icon: '🔍', name: 'Powerful Search', desc: 'Find any message, file, or conversation instantly' },
      ]
    },
    {
      title: 'Community',
      features: [
        { icon: '🏠', name: 'Servers', desc: 'Create communities with unlimited channels and categories' },
        { icon: '🎭', name: 'Roles & Permissions', desc: 'Granular control over who can do what' },
        { icon: '📢', name: 'Announcements', desc: 'Broadcast to your community with announcement channels' },
        { icon: '📅', name: 'Events', desc: 'Schedule and manage community events' },
        { icon: '🎪', name: 'Stage Channels', desc: 'Host live audio events for large audiences' },
        { icon: '💬', name: 'Forum Channels', desc: 'Organized discussion boards for your community' },
      ]
    },
    {
      title: 'Security & Privacy',
      features: [
        { icon: '🔐', name: 'End-to-End Encryption', desc: 'Your messages are encrypted and only you can read them' },
        { icon: '🛡️', name: 'AeThex Passport', desc: 'Secure, decentralized identity that you own' },
        { icon: '🔒', name: 'Two-Factor Auth', desc: 'Extra security for your account' },
        { icon: '👻', name: 'Ephemeral Messages', desc: 'Self-destructing messages for sensitive conversations' },
        { icon: '🚫', name: 'No Data Selling', desc: 'Your data is never sold to third parties. Ever.' },
        { icon: '📋', name: 'Audit Logs', desc: 'Full transparency on server actions' },
      ]
    },
    {
      title: 'Customization',
      features: [
        { icon: '🎨', name: 'Themes', desc: 'Dark, light, and custom themes to match your style' },
        { icon: '😀', name: 'Custom Emoji', desc: 'Upload your own emoji and stickers' },
        { icon: '🎵', name: 'Soundboard', desc: 'Play sound effects in voice channels' },
        { icon: '🤖', name: 'Bots & Integrations', desc: 'Extend functionality with custom bots' },
        { icon: '⚙️', name: 'Webhooks', desc: 'Connect external services to your channels' },
        { icon: '📊', name: 'Server Insights', desc: 'Analytics to understand your community' },
      ]
    },
  ];

  const comparisons = [
    { feature: 'Open Source', aethex: true, discord: false, slack: false },
    { feature: 'E2E Encryption', aethex: true, discord: false, slack: false },
    { feature: 'Self-Hostable', aethex: true, discord: false, slack: false },
    { feature: 'No Data Collection', aethex: true, discord: false, slack: false },
    { feature: 'Voice/Video', aethex: true, discord: true, slack: true },
    { feature: 'Unlimited History', aethex: true, discord: true, slack: false },
    { feature: 'Custom Bots', aethex: true, discord: true, slack: true },
    { feature: 'Free to Use', aethex: true, discord: true, slack: false },
  ];

  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" className="active">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>

      <main className="info-content">
        <section className="features-hero">
          <h1>Everything you need,<br /><span className="gradient-text">nothing you don't</span></h1>
          <p className="hero-desc">
            All the features you love from Discord, with the privacy and ownership you deserve.
          </p>
        </section>

        {featureCategories.map((category, idx) => (
          <section key={idx} className="feature-category">
            <h2>{category.title}</h2>
            <div className="features-grid">
              {category.features.map((feature, i) => (
                <div key={i} className="feature-card">
                  <span className="feature-icon">{feature.icon}</span>
                  <h3>{feature.name}</h3>
                  <p>{feature.desc}</p>
                </div>
              ))}
            </div>
          </section>
        ))}

        <section className="comparison-section">
          <h2>How We Compare</h2>
          <div className="comparison-table-container">
            <table className="comparison-table">
              <thead>
                <tr>
                  <th>Feature</th>
                  <th className="highlight">AeThex Connect</th>
                  <th>Discord</th>
                  <th>Slack</th>
                </tr>
              </thead>
              <tbody>
                {comparisons.map((row, i) => (
                  <tr key={i}>
                    <td>{row.feature}</td>
                    <td className="highlight">{row.aethex ? '✓' : '✕'}</td>
                    <td>{row.discord ? '✓' : '✕'}</td>
                    <td>{row.slack ? '✓' : '✕'}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </section>

        <section className="features-cta">
          <h2>Ready to experience the difference?</h2>
          <p>Join thousands of users who've made the switch.</p>
          <div className="cta-actions">
            <Link to="/register" className="cta-primary">Get Started Free</Link>
            <Link to="/login" className="cta-secondary">Already have an account?</Link>
          </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>
  );
}