import React from 'react';

export default function HomePage() {
  return (
    <div className="p-8">
      <div className="max-w-4xl mx-auto">
        <h1 className="text-4xl font-bold text-white mb-6">Welcome to AeThex Connect</h1>
        <p className="text-gray-300 text-lg mb-8">
          Your next-generation communication platform with blockchain identity verification,
          real-time messaging, voice/video calls, and premium features.
        </p>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {/* Feature Cards */}
          <div className="bg-gray-800 rounded-lg p-6 border border-gray-700 hover:border-purple-500 transition">
            <div className="text-3xl mb-4">💬</div>
            <h3 className="text-xl font-semibold text-white mb-2">Instant Messaging</h3>
            <p className="text-gray-400">
              End-to-end encrypted messages with real-time synchronization across all devices.
            </p>
          </div>

          <div className="bg-gray-800 rounded-lg p-6 border border-gray-700 hover:border-purple-500 transition">
            <div className="text-3xl mb-4">📞</div>
            <h3 className="text-xl font-semibold text-white mb-2">Voice & Video</h3>
            <p className="text-gray-400">
              Crystal-clear voice calls and HD video conferencing with WebRTC technology.
            </p>
          </div>

          <div className="bg-gray-800 rounded-lg p-6 border border-gray-700 hover:border-purple-500 transition">
            <div className="text-3xl mb-4">🎮</div>
            <h3 className="text-xl font-semibold text-white mb-2">GameForge Integration</h3>
            <p className="text-gray-400">
              Connect with game communities and manage channels with GameForge.
            </p>
          </div>

          <div className="bg-gray-800 rounded-lg p-6 border border-gray-700 hover:border-purple-500 transition">
            <div className="text-3xl mb-4">🔐</div>
            <h3 className="text-xl font-semibold text-white mb-2">Verified Identity</h3>
            <p className="text-gray-400">
              Blockchain-backed domain verification for authentic user identification.
            </p>
          </div>
        </div>

        <div className="mt-12 p-8 bg-gradient-to-r from-purple-900 to-pink-900 rounded-lg">
          <h2 className="text-2xl font-bold text-white mb-4">Get Started Now</h2>
          <p className="text-gray-200 mb-6">
            Explore your messages, start a call, or customize your settings to unlock the full potential of AeThex Connect.
          </p>
          <div className="flex gap-4">
            <button className="px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white font-semibold rounded-lg transition">
              Start Messaging
            </button>
            <button className="px-6 py-3 bg-gray-700 hover:bg-gray-600 text-white font-semibold rounded-lg transition">
              Schedule a Call
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}