import Link from 'next/link';
import { VerifyEmailForm } from '../../components/verify-email-form';

export default function VerifyEmailPage() {
  return (
    <div className="min-h-[calc(100vh-80px)] pt-20 pb-16 px-4 flex items-center justify-center bg-[#070a0f] relative overflow-hidden">
      {/* Background ambient glow */}
      <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-96 h-96 bg-[#00f2fe]/10 rounded-full blur-3xl pointer-events-none"></div>

      <div className="w-full max-w-lg relative z-10">
        <div className="text-center mb-8 space-y-2">
          <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-[#181c24] border border-[#3a494b]/40 text-[11px] font-mono tracking-wide text-[#00dce6]">
            <span className="w-1.5 h-1.5 rounded-full bg-[#60ff98] animate-pulse"></span>
            Cryptographic Telemetry Identity
          </div>
          <h1 className="text-3xl font-extrabold text-white tracking-tight font-mono">
            RIDER AUTHENTICATION
          </h1>
          <p className="text-xs sm:text-sm text-[#b9cacb] max-w-sm mx-auto">
            Validate your digital signature to enable 20 Hz cloud sync and encrypted telemetry storage.
          </p>
        </div>

        <div className="glass-card rounded-2xl border border-[#3a494b]/50 p-6 sm:p-8 shadow-2xl backdrop-blur-xl relative overflow-hidden bg-[#0d131f]/95">
          <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-[#00f2fe] via-[#00dce6] to-transparent"></div>
          <VerifyEmailForm />
        </div>

        <div className="mt-6 text-center">
          <Link
            className="text-xs font-mono text-[#849495] hover:text-[#00dce6] transition-colors"
            href="/support"
          >
            Need help? Contact Telemetry Support Desk →
          </Link>
        </div>
      </div>
    </div>
  );
}