import Link from 'next/link';
import Image from 'next/image';
import { Smartphone, ArrowLeft } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { ROUTES } from '@/constants';

export default function RegisterPage() {
  return (
    <div className="relative min-h-[calc(100vh-4rem)] flex items-center justify-center px-4">
      <div className="pointer-events-none absolute inset-0 -z-10">
        <div className="absolute top-1/3 left-1/2 -translate-x-1/2 w-[400px] h-[400px] rounded-full bg-brand-500/[0.04] dark:bg-brand-400/[0.06] blur-[100px]" />
      </div>

      <div className="max-w-md w-full text-center space-y-8 animate-fade-in">
        <div className="inline-flex h-12 w-12 items-center justify-center rounded-2xl overflow-hidden mx-auto">
          <Image src="/logo.png" alt="Activate Abundanate" width={48} height={48} className="object-contain" />
        </div>

        <div className="rounded-2xl border border-border bg-card shadow-card p-10 space-y-6">
          <div className="flex h-16 w-16 items-center justify-center rounded-full bg-brand-500/10 border border-brand-500/15 mx-auto">
            <Smartphone className="h-8 w-8 text-brand-500 dark:text-brand-300" />
          </div>

          <div className="space-y-3">
            <h1 className="text-2xl font-bold">Register on Mobile</h1>
            <p className="text-muted-foreground leading-relaxed">
              Account registration is done through the <strong className="text-foreground">Activate Abundanate mobile app</strong>.
              Download it on iOS or Android to create your account.
            </p>
          </div>

          <div className="flex flex-col gap-3">
            <div className="rounded-xl border border-border bg-muted/50 p-4 text-sm text-muted-foreground">
              After registering on mobile, check your email for an activation link to set up your
              web subscription.
            </div>

            <div className="flex gap-3">
              <Button variant="glass" className="flex-1 text-sm" asChild>
                <a href="https://apps.apple.com" target="_blank" rel="noopener noreferrer">
                  App Store
                </a>
              </Button>
              <Button variant="glass" className="flex-1 text-sm" asChild>
                <a href="https://play.google.com" target="_blank" rel="noopener noreferrer">
                  Google Play
                </a>
              </Button>
            </div>
          </div>
        </div>

        <Button variant="ghost" size="sm" asChild>
          <Link href={ROUTES.LOGIN}>
            <ArrowLeft className="h-4 w-4" />
            Back to Login
          </Link>
        </Button>
      </div>
    </div>
  );
}