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

export default function SignUpPage() {
  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">
          {/* Logo */}
          <Link href="/" className="inline-block mb-6">
            <span className="text-2xl font-bold">
              Cloud<span className="text-primary">rite</span>
            </span>
          </Link>

          {/* Icon */}
          <div className="mx-auto w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center mb-6">
            <Lock className="w-8 h-8 text-primary" />
          </div>

          <h1 className="text-2xl font-bold mb-3">Invite Only</h1>
          <p className="text-muted-foreground mb-2">
            Account creation is by invitation only.
          </p>
          <p className="text-muted-foreground mb-8">
            To request access, please get in touch with us and we&apos;ll get you set up.
          </p>

          <Button
            asChild
            className="w-full h-12 bg-primary hover:bg-primary/90 text-primary-foreground mb-4"
          >
            <a href="mailto:contact@cloudrite.co.nz" className="flex items-center justify-center gap-2">
              <Mail className="w-4 h-4" />
              contact@cloudrite.co.nz
            </a>
          </Button>

          <Button asChild variant="outline" className="w-full h-12">
            <Link href="/auth/login">Back to sign in</Link>
          </Button>
        </div>
      </div>
    </div>
  )
}