import { Button } from "@/components/ui/button";

export default function CryptoraLanding() {
  return (
    <div className="min-h-screen bg-gray-900 text-white p-6">
      {/* Hero Section */}
      <div className="text-center py-20">
        <h1 className="text-5xl font-bold">Cryptora Wallet</h1>
        <p className="mt-4 text-lg text-gray-300">Secure, Fast, and Non-Custodial Wallet for Bobi Token, F1 Token, SOL & USDT.</p>
        <div className="mt-6 flex justify-center gap-4">
          <Button className="bg-blue-600 px-6 py-3">Download for Android</Button>
          <Button className="bg-green-600 px-6 py-3">Download for iOS</Button>
        </div>
      </div>
      
      {/* Features Section */}
      <div className="py-16 max-w-4xl mx-auto text-center">
        <h2 className="text-3xl font-semibold">Why Choose Cryptora?</h2>
        <p className="mt-4 text-gray-400">Secure your digital assets with a decentralized, user-friendly experience.</p>
        <ul className="mt-6 space-y-4 text-lg">
          <li>🔐 Non-Custodial – You control your keys.</li>
          <li>⚡ Instant Transactions – Powered by Solana.</li>
          <li>💳 Mobile Money & Visa Deposits.</li>
          <li>🔄 Supports Bobi Token, F1 Token, SOL, and USDT.</li>
        </ul>
      </div>
      
      {/* Supported Tokens */}
      <div className="py-16 bg-gray-800 text-center">
        <h2 className="text-3xl font-semibold">Supported Tokens</h2>
        <p className="mt-4 text-gray-400">Manage these tokens seamlessly in one wallet.</p>
        <div className="mt-6 flex justify-center gap-6">
          <span className="px-4 py-2 bg-gray-700 rounded-lg">SOL</span>
          <span className="px-4 py-2 bg-gray-700 rounded-lg">USDT</span>
          <span className="px-4 py-2 bg-gray-700 rounded-lg">Bobi Token</span>
          <span className="px-4 py-2 bg-gray-700 rounded-lg">F1 Token</span>
        </div>
      </div>
      
      {/* How It Works */}
      <div className="py-16 max-w-4xl mx-auto text-center">
        <h2 className="text-3xl font-semibold">How It Works</h2>
        <ol className="mt-6 text-lg space-y-4">
          <li>✅ Create or Import Your Wallet.</li>
          <li>📲 Deposit Funds via Mobile Money, Visa, or Crypto.</li>
          <li>🔄 Swap & Send Tokens Easily.</li>
          <li>🔐 Keep Your Wallet Secure with Private Keys.</li>
        </ol>
      </div>
      
      {/* FAQs Section */}
      <div className="py-16 bg-gray-800 text-center">
        <h2 className="text-3xl font-semibold">FAQs</h2>
        <p className="mt-4 text-gray-400">Common questions about Cryptora Wallet.</p>
      </div>
      
      {/* Footer */}
      <footer className="py-10 text-center text-gray-400">
        <p>&copy; 2025 Cryptora. All rights reserved.</p>
      </footer>
    </div>
  );
}