import { Link } from 'react-router-dom';
import { Plus, Download, Shield } from 'lucide-react';

export default function Welcome() {
  return (
    <div className="h-full flex flex-col items-center justify-center p-8">
      {/* Logo */}
      <div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-synor-400 to-synor-600 flex items-center justify-center mb-8">
        <span className="text-white text-4xl font-bold">S</span>
      </div>

      {/* Title */}
      <h1 className="text-3xl font-bold text-white mb-2">
        Welcome to Synor Wallet
      </h1>
      <p className="text-gray-400 mb-12 text-center max-w-md">
        A secure desktop wallet for the Synor blockchain with post-quantum
        cryptography support.
      </p>

      {/* Action cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full max-w-2xl">
        <Link
          to="/create"
          className="card hover:border-synor-500 hover:bg-gray-800/50 transition-all group"
        >
          <div className="flex items-start gap-4">
            <div className="w-12 h-12 rounded-lg bg-synor-600/20 text-synor-400 flex items-center justify-center group-hover:bg-synor-600 group-hover:text-white transition-colors">
              <Plus size={24} />
            </div>
            <div>
              <h3 className="text-lg font-semibold text-white mb-1">
                Create New Wallet
              </h3>
              <p className="text-sm text-gray-400">
                Generate a new wallet with a secure 24-word recovery phrase.
              </p>
            </div>
          </div>
        </Link>

        <Link
          to="/import"
          className="card hover:border-synor-500 hover:bg-gray-800/50 transition-all group"
        >
          <div className="flex items-start gap-4">
            <div className="w-12 h-12 rounded-lg bg-synor-600/20 text-synor-400 flex items-center justify-center group-hover:bg-synor-600 group-hover:text-white transition-colors">
              <Download size={24} />
            </div>
            <div>
              <h3 className="text-lg font-semibold text-white mb-1">
                Import Existing Wallet
              </h3>
              <p className="text-sm text-gray-400">
                Restore a wallet using your 24-word recovery phrase.
              </p>
            </div>
          </div>
        </Link>
      </div>

      {/* Security note */}
      <div className="mt-12 flex items-center gap-3 text-gray-500 text-sm">
        <Shield size={16} className="text-green-500" />
        <span>
          Your keys are encrypted and stored locally. We never have access to
          your funds.
        </span>
      </div>
    </div>
  );
}
