SkateSpots/src/components/auth/SignupMethodDialog.tsx

import React from 'react';
import { Key, FileText, ArrowRight } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Card, CardContent } from '@/components/ui/card';

interface SignupMethodDialogProps {
  isOpen: boolean;
  onClose: () => void;
  onSelectMnemonic: () => void;
  onSelectNsec: () => void;
}

const SignupMethodDialog: React.FC<SignupMethodDialogProps> = ({ 
  isOpen, 
  onClose,
  onSelectMnemonic,
  onSelectNsec
}) => {
  return (
    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
      <DialogContent className="max-w-3xl bg-gradient-to-br from-gray-900 to-black border-2 border-[#ccff00]/30">
        <DialogHeader>
          <DialogTitle className="text-3xl font-black uppercase text-center mb-2">
            <span className="neon-orange">Choose Your</span>{' '}
            <span className="neon-lime">Signup Method</span>
          </DialogTitle>
          <p className="text-center text-gray-400 text-sm">
            Both methods are secure. Choose what works best for you!
          </p>
        </DialogHeader>

        <div className="grid md:grid-cols-2 gap-6 mt-4">
          {/* Mnemonic Option (Recommended) */}
          <Card className="bg-gradient-to-br from-[#ccff00]/10 to-[#00ff00]/5 border-2 border-[#ccff00]/50 hover:border-[#ccff00] transition-all cursor-pointer group"
                onClick={onSelectMnemonic}>
            <CardContent className="p-6 space-y-4">
              <div className="flex items-center justify-between">
                <FileText className="h-12 w-12 text-[#ccff00]" />
                <span className="text-xs font-bold uppercase px-2 py-1 bg-[#ccff00]/20 text-[#ccff00] rounded-full">
                  Recommended
                </span>
              </div>
              
              <div>
                <h3 className="text-2xl font-black uppercase text-[#ccff00] mb-2">
                  Recovery Phrase
                </h3>
                <p className="text-sm text-gray-400 mb-3">
                  12 easy-to-remember words. Industry standard used by Bitcoin, Ethereum, and most crypto wallets.
                </p>
              </div>

              <div className="space-y-2">
                <div className="flex items-start gap-2">
                  <span className="text-[#00ff00] text-lg">✓</span>
                  <span className="text-xs text-gray-300">Easy to write down on paper</span>
                </div>
                <div className="flex items-start gap-2">
                  <span className="text-[#00ff00] text-lg">✓</span>
                  <span className="text-xs text-gray-300">Works with other Nostr apps (NIP-06)</span>
                </div>
                <div className="flex items-start gap-2">
                  <span className="text-[#00ff00] text-lg">✓</span>
                  <span className="text-xs text-gray-300">Can generate multiple accounts</span>
                </div>
                <div className="flex items-start gap-2">
                  <span className="text-[#00ff00] text-lg">✓</span>
                  <span className="text-xs text-gray-300">Familiar to crypto users</span>
                </div>
              </div>

              <Button
                className="w-full bg-gradient-to-r from-[#ccff00] to-[#00ff00] hover:from-[#ccff00]/90 hover:to-[#00ff00]/90 text-black font-bold uppercase group-hover:scale-105 transition-transform"
              >
                Use Recovery Phrase
                <ArrowRight className="ml-2 h-4 w-4" />
              </Button>
            </CardContent>
          </Card>

          {/* Nsec Option (Advanced) */}
          <Card className="bg-gradient-to-br from-[#ff0040]/5 to-[#ff6600]/5 border-2 border-[#ff0040]/30 hover:border-[#ff0040]/60 transition-all cursor-pointer group"
                onClick={onSelectNsec}>
            <CardContent className="p-6 space-y-4">
              <div className="flex items-center justify-between">
                <Key className="h-12 w-12 text-[#ff0040]" />
                <span className="text-xs font-bold uppercase px-2 py-1 bg-[#ff0040]/20 text-[#ff0040] rounded-full">
                  Advanced
                </span>
              </div>
              
              <div>
                <h3 className="text-2xl font-black uppercase text-[#ff0040] mb-2">
                  Secret Key (nsec)
                </h3>
                <p className="text-sm text-gray-400 mb-3">
                  Raw cryptographic key. More technical but gives you direct access to your Nostr identity.
                </p>
              </div>

              <div className="space-y-2">
                <div className="flex items-start gap-2">
                  <span className="text-[#ff6600] text-lg">✓</span>
                  <span className="text-xs text-gray-300">Direct cryptographic control</span>
                </div>
                <div className="flex items-start gap-2">
                  <span className="text-[#ff6600] text-lg">✓</span>
                  <span className="text-xs text-gray-300">Compatible with all Nostr apps</span>
                </div>
                <div className="flex items-start gap-2">
                  <span className="text-[#ff6600] text-lg">✓</span>
                  <span className="text-xs text-gray-300">Single string to backup</span>
                </div>
                <div className="flex items-start gap-2">
                  <span className="text-[#ff6600] text-lg">✓</span>
                  <span className="text-xs text-gray-300">No derivation layer</span>
                </div>
              </div>

              <Button
                className="w-full bg-gradient-to-r from-[#ff0040] to-[#ff6600] hover:from-[#ff0040]/90 hover:to-[#ff6600]/90 text-white font-bold uppercase group-hover:scale-105 transition-transform"
              >
                Use Secret Key
                <ArrowRight className="ml-2 h-4 w-4" />
              </Button>
            </CardContent>
          </Card>
        </div>

        <div className="text-center mt-4">
          <p className="text-xs text-gray-500">
            🔒 Both methods are equally secure. Choose based on your preference!
          </p>
        </div>
      </DialogContent>
    </Dialog>
  );
};

export default SignupMethodDialog;