---
// Features showcase
const features = [
  {
    icon: '🔐',
    title: 'Own Your Identity',
    description: 'Your .aethex domain is an NFT. It\'s yours forever. No company can take it away.',
  },
  {
    icon: '💬',
    title: 'Cross-Game Chat',
    description: 'Voice and text that follows you across every game. Start in Valorant, join in Fortnite.',
  },
  {
    icon: '🎮',
    title: 'GameForge Integration',
    description: 'Building a game? Auto-created team channels with role-based access for your dev team.',
  },
  {
    icon: '📞',
    title: 'Crystal Clear Calls',
    description: 'Low-latency voice optimized for competitive gaming. HD video with screen sharing.',
  },
  {
    icon: '👥',
    title: 'Persistent Friends',
    description: 'See which games your friends are playing. Join their lobbies with one click.',
  },
  {
    icon: '💎',
    title: 'Premium Tiers',
    description: 'Free tier to get started. Premium for serious gamers. Enterprise for game studios.',
  },
];
---

<section id="features" class="features">
  <div class="container">
    <div class="section-header">
      <h2>Built for <span class="gradient-text">Gamers</span></h2>
      <p>Everything you need to stay connected with your squad across all games.</p>
    </div>
    
    <div class="features-grid">
      {features.map(feature => (
        <div class="feature-card">
          <div class="feature-icon">{feature.icon}</div>
          <h3>{feature.title}</h3>
          <p>{feature.description}</p>
        </div>
      ))}
    </div>
  </div>
</section>

<style>
  .features {
    padding: 6rem 2rem;
    background: #0a0a0f;
  }

  .container {
    max-width: 1200px;
    margin: 0 auto;
  }

  .section-header {
    text-align: center;
    margin-bottom: 4rem;
  }

  .section-header h2 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
  }

  .gradient-text {
    background: linear-gradient(135deg, #00d9ff 0%, #00ff88 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .section-header p {
    font-size: 1.25rem;
    color: #b0b0b0;
  }

  .features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
  }

  .feature-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(0, 217, 255, 0.1);
    border-radius: 16px;
    padding: 2rem;
    transition: all 0.3s;
  }

  .feature-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(0, 217, 255, 0.3);
    box-shadow: 0 8px 24px rgba(0, 217, 255, 0.2);
  }

  .feature-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
  }

  .feature-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #fff;
  }

  .feature-card p {
    color: #b0b0b0;
    line-height: 1.6;
  }

  @media (max-width: 768px) {
    .section-header h2 {
      font-size: 2rem;
    }
    .features-grid {
      grid-template-columns: 1fr;
    }
  }
</style>
