import { Button } from '@/app/components/ui/button';
import { Input } from '@/app/components/ui/input';
import { Label } from '@/app/components/ui/label';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/app/components/ui/card';
import { Separator } from '@/app/components/ui/separator';
import { Trophy, CheckCircle2 } from 'lucide-react';

export default function RegisterPage() {
  return (
    <div className="min-h-[600px] flex items-center justify-center py-12">
      <div className="w-full max-w-5xl grid lg:grid-cols-2 gap-8 items-center">
        {/* Left side - Benefits */}
        <div className="space-y-8 hidden lg:block">
          <div className="space-y-4">
            <h2 className="text-3xl font-bold">Start managing tournaments today</h2>
            <p className="text-muted-foreground text-lg">
              Join hundreds of padel centers using tourn.me
            </p>
          </div>

          <div className="space-y-4">
            <div className="flex gap-3">
              <div className="flex-shrink-0">
                <CheckCircle2 className="w-6 h-6 text-primary" />
              </div>
              <div>
                <h3 className="font-semibold mb-1">Multiple tournament formats</h3>
                <p className="text-sm text-muted-foreground">
                  Round Robin, Single/Double Elimination, Groups + Knockout
                </p>
              </div>
            </div>

            <div className="flex gap-3">
              <div className="flex-shrink-0">
                <CheckCircle2 className="w-6 h-6 text-primary" />
              </div>
              <div>
                <h3 className="font-semibold mb-1">Import from Playtomic</h3>
                <p className="text-sm text-muted-foreground">
                  Sync your player database with one click
                </p>
              </div>
            </div>

            <div className="flex gap-3">
              <div className="flex-shrink-0">
                <CheckCircle2 className="w-6 h-6 text-primary" />
              </div>
              <div>
                <h3 className="font-semibold mb-1">Public TV displays</h3>
                <p className="text-sm text-muted-foreground">
                  Share tournament brackets and matches on your screens
                </p>
              </div>
            </div>

            <div className="flex gap-3">
              <div className="flex-shrink-0">
                <CheckCircle2 className="w-6 h-6 text-primary" />
              </div>
              <div>
                <h3 className="font-semibold mb-1">Easy match scheduling</h3>
                <p className="text-sm text-muted-foreground">
                  Drag & drop interface for quick organization
                </p>
              </div>
            </div>
          </div>

          <div className="pt-4">
            <div className="flex items-center gap-6">
              <div>
                <div className="text-2xl font-bold">500+</div>
                <div className="text-xs text-muted-foreground">Tournaments</div>
              </div>
              <div className="h-12 w-px bg-border"></div>
              <div>
                <div className="text-2xl font-bold">50+</div>
                <div className="text-xs text-muted-foreground">Centers</div>
              </div>
              <div className="h-12 w-px bg-border"></div>
              <div>
                <div className="text-2xl font-bold">10k+</div>
                <div className="text-xs text-muted-foreground">Players</div>
              </div>
            </div>
          </div>
        </div>

        {/* Right side - Form */}
        <Card>
          <CardHeader className="space-y-4">
            <div className="flex justify-center lg:justify-start">
              <div className="w-12 h-12 bg-primary rounded-xl flex items-center justify-center">
                <Trophy className="w-6 h-6 text-primary-foreground" />
              </div>
            </div>
            <CardTitle className="text-2xl">Create your account</CardTitle>
            <CardDescription>Start your 14-day free trial. No credit card required.</CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            <form className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="firstName">First name</Label>
                  <Input 
                    id="firstName" 
                    placeholder="John"
                    className="h-11"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="lastName">Last name</Label>
                  <Input 
                    id="lastName" 
                    placeholder="Doe"
                    className="h-11"
                  />
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="centerName">Center name</Label>
                <Input 
                  id="centerName" 
                  placeholder="My Padel Center"
                  className="h-11"
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="email">Email</Label>
                <Input 
                  id="email" 
                  type="email" 
                  placeholder="you@padelcenter.com"
                  className="h-11"
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="password">Password</Label>
                <Input 
                  id="password" 
                  type="password" 
                  placeholder="••••••••"
                  className="h-11"
                />
                <p className="text-xs text-muted-foreground">
                  Must be at least 8 characters
                </p>
              </div>

              <Button type="submit" className="w-full h-11">
                Create Account
              </Button>

              <p className="text-xs text-muted-foreground text-center">
                By signing up, you agree to our{' '}
                <a href="#" className="text-primary hover:underline">Terms of Service</a>
                {' '}and{' '}
                <a href="#" className="text-primary hover:underline">Privacy Policy</a>
              </p>
            </form>

            <div className="relative">
              <Separator />
              <span className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-card px-2 text-xs text-muted-foreground">
                OR
              </span>
            </div>

            <div className="text-center text-sm">
              <span className="text-muted-foreground">Already have an account? </span>
              <a href="#" className="text-primary hover:underline font-medium">
                Sign in
              </a>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}