import Link from 'next/link'
import { AlertCircle, ArrowLeft } from 'lucide-react'
import { Button } from '@/components/ui/button'

export default function AuthErrorPage() {
  return (
    <div className="min-h-screen bg-background flex items-center justify-center p-4">
      {/* Background elements */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/5 rounded-full blur-3xl" />
        <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-primary/5 rounded-full blur-3xl" />
      </div>

      <div className="relative w-full max-w-md">
        {/* Back to home */}
        <Link 
          href="/" 
          className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors mb-8"
        >
          <ArrowLeft className="w-4 h-4" />
          Back to home
        </Link>

        {/* Card */}
        <div className="bg-card border border-border rounded-2xl p-8 text-center">
          {/* Icon */}
          <div className="w-16 h-16 bg-destructive/10 rounded-full flex items-center justify-center mx-auto mb-6">
            <AlertCircle className="w-8 h-8 text-destructive" />
          </div>

          {/* Content */}
          <h1 className="text-2xl font-bold mb-2">Authentication Error</h1>
          <p className="text-muted-foreground mb-6">
            Something went wrong during authentication. This could be due to an expired link or a configuration issue.
          </p>

          {/* Actions */}
          <div className="space-y-3">
            <Button asChild className="w-full h-12 bg-primary hover:bg-primary/90 text-primary-foreground">
              <Link href="/auth/login">
                Try again
              </Link>
            </Button>
            <p className="text-xs text-muted-foreground">
              If the problem persists, please{' '}
              <Link href="/#contact" className="text-primary hover:underline">
                contact us
              </Link>
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}