auth rework

apps/website/app/auth/iracing/page.tsx

@@ -1,29 +1,273 @@
-import Link from 'next/link';
+'use client';
 
-interface IracingAuthPageProps {
-  searchParams: Promise<{
-    returnTo?: string;
-  }>;
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
+import { motion, AnimatePresence, useReducedMotion } from 'framer-motion';
+import {
+  Gamepad2,
+  Flag,
+  ArrowRight,
+  Shield,
+  Link as LinkIcon,
+  User,
+  Trophy,
+  BarChart3,
+  CheckCircle2,
+  Loader2,
+} from 'lucide-react';
+
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import Heading from '@/components/ui/Heading';
+
+interface ConnectionStep {
+  id: number;
+  icon: typeof Gamepad2;
+  title: string;
+  description: string;
 }
 
-export default async function IracingAuthPage({ searchParams }: IracingAuthPageProps) {
-  const params = await searchParams;
-  const returnTo = params.returnTo ?? '/dashboard';
+const CONNECTION_STEPS: ConnectionStep[] = [
+  {
+    id: 1,
+    icon: Gamepad2,
+    title: 'Connect iRacing',
+    description: 'Authorize GridPilot to access your profile',
+  },
+  {
+    id: 2,
+    icon: User,
+    title: 'Import Profile',
+    description: 'We fetch your racing stats and history',
+  },
+  {
+    id: 3,
+    icon: Trophy,
+    title: 'Sync Achievements',
+    description: 'Your licenses, iRating, and results',
+  },
+  {
+    id: 4,
+    icon: BarChart3,
+    title: 'Ready to Race',
+    description: 'Access full GridPilot features',
+  },
+];
+
+const BENEFITS = [
+  'Automatic profile creation with your iRacing data',
+  'Real-time stats sync including iRating and Safety Rating',
+  'Import your racing history and achievements',
+  'No manual data entry required',
+  'Verified driver identity in leagues',
+];
+
+export default function IracingAuthPage() {
+  const searchParams = useSearchParams();
+  const returnTo = searchParams.get('returnTo') ?? '/dashboard';
   const startUrl = `/auth/iracing/start?returnTo=${encodeURIComponent(returnTo)}`;
+  
+  const shouldReduceMotion = useReducedMotion();
+  const [isMounted, setIsMounted] = useState(false);
+  const [activeStep, setActiveStep] = useState(0);
+  const [isHovering, setIsHovering] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (!isMounted || isHovering) return;
+    
+    const interval = setInterval(() => {
+      setActiveStep((prev) => (prev + 1) % CONNECTION_STEPS.length);
+    }, 2500);
+
+    return () => clearInterval(interval);
+  }, [isMounted, isHovering]);
 
   return (
-    <main className="min-h-screen flex items-center justify-center bg-deep-graphite">
-      <div className="max-w-md w-full px-6 py-8 bg-iron-gray/80 rounded-lg border border-white/10 shadow-xl">
-        <h1 className="text-2xl font-semibold text-white mb-4">Authenticate with iRacing</h1>
-        <p className="text-sm text-gray-300 mb-6">
-          Connect a demo iRacing identity to explore the GridPilot dashboard with seeded data.
+    <main className="min-h-screen bg-deep-graphite flex items-center justify-center px-4 py-12">
+      {/* Background Pattern */}
+      <div className="absolute inset-0 bg-gradient-to-br from-primary-blue/5 via-transparent to-purple-600/5" />
+      <div className="absolute inset-0 opacity-5">
+        <div className="absolute inset-0" style={{
+          backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
+        }} />
+      </div>
+
+      <div className="relative w-full max-w-2xl">
+        {/* Header */}
+        <div className="text-center mb-8">
+          <div className="flex justify-center gap-4 mb-6">
+            <motion.div 
+              initial={{ scale: 0.8, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              transition={{ delay: 0.1 }}
+              className="flex h-14 w-14 items-center justify-center rounded-xl bg-gradient-to-br from-primary-blue/20 to-purple-600/10 border border-primary-blue/30"
+            >
+              <Flag className="w-7 h-7 text-primary-blue" />
+            </motion.div>
+            <motion.div
+              initial={{ scale: 0, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              transition={{ delay: 0.2 }}
+              className="flex items-center"
+            >
+              <LinkIcon className="w-6 h-6 text-gray-500" />
+            </motion.div>
+            <motion.div 
+              initial={{ scale: 0.8, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              transition={{ delay: 0.3 }}
+              className="flex h-14 w-14 items-center justify-center rounded-xl bg-gradient-to-br from-orange-500/20 to-red-600/10 border border-orange-500/30"
+            >
+              <Gamepad2 className="w-7 h-7 text-orange-400" />
+            </motion.div>
+          </div>
+          <Heading level={1} className="mb-3">Connect Your iRacing Account</Heading>
+          <p className="text-gray-400 text-lg max-w-md mx-auto">
+            Link your iRacing profile for automatic stats sync and verified driver identity.
+          </p>
+        </div>
+
+        <Card className="relative overflow-hidden">
+          {/* Background accent */}
+          <div className="absolute top-0 right-0 w-48 h-48 bg-gradient-to-bl from-primary-blue/5 to-transparent rounded-bl-full" />
+          <div className="absolute bottom-0 left-0 w-32 h-32 bg-gradient-to-tr from-orange-500/5 to-transparent rounded-tr-full" />
+
+          <div className="relative">
+            {/* Connection Flow Animation */}
+            <div 
+              className="bg-iron-gray/50 rounded-xl border border-charcoal-outline p-6 mb-6"
+              onMouseEnter={() => setIsHovering(true)}
+              onMouseLeave={() => setIsHovering(false)}
+            >
+              <p className="text-xs text-gray-500 text-center mb-4">Connection Flow</p>
+              
+              {/* Steps */}
+              <div className="flex justify-between items-start gap-2">
+                {CONNECTION_STEPS.map((step, index) => {
+                  const isActive = index === activeStep;
+                  const isCompleted = index < activeStep;
+                  const StepIcon = step.icon;
+
+                  return (
+                    <motion.button
+                      key={step.id}
+                      onClick={() => setActiveStep(index)}
+                      className="flex flex-col items-center text-center flex-1 cursor-pointer"
+                      whileHover={{ scale: 1.05 }}
+                      whileTap={{ scale: 0.95 }}
+                    >
+                      <motion.div
+                        className={`w-12 h-12 rounded-xl border flex items-center justify-center mb-2 transition-all duration-300 ${
+                          isActive 
+                            ? 'bg-primary-blue/20 border-primary-blue shadow-[0_0_15px_rgba(25,140,255,0.3)]' 
+                            : isCompleted
+                              ? 'bg-performance-green/20 border-performance-green/50'
+                              : 'bg-deep-graphite border-charcoal-outline'
+                        }`}
+                        animate={isActive && !shouldReduceMotion ? {
+                          scale: [1, 1.08, 1],
+                          transition: { duration: 1, repeat: Infinity }
+                        } : {}}
+                      >
+                        {isCompleted ? (
+                          <CheckCircle2 className="w-5 h-5 text-performance-green" />
+                        ) : (
+                          <StepIcon className={`w-5 h-5 ${isActive ? 'text-primary-blue' : 'text-gray-500'}`} />
+                        )}
+                      </motion.div>
+                      <h4 className={`text-xs font-medium transition-colors ${
+                        isActive ? 'text-white' : 'text-gray-500'
+                      }`}>
+                        {step.title}
+                      </h4>
+                    </motion.button>
+                  );
+                })}
+              </div>
+
+              {/* Active Step Description */}
+              <AnimatePresence mode="wait">
+                <motion.div
+                  key={activeStep}
+                  initial={{ opacity: 0, y: 5 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -5 }}
+                  transition={{ duration: 0.2 }}
+                  className="mt-4 text-center"
+                >
+                  <p className="text-sm text-gray-400">
+                    {CONNECTION_STEPS[activeStep].description}
+                  </p>
+                </motion.div>
+              </AnimatePresence>
+            </div>
+
+            {/* Benefits List */}
+            <div className="mb-6">
+              <h3 className="text-sm font-medium text-gray-300 mb-3">What you'll get:</h3>
+              <ul className="space-y-2">
+                {BENEFITS.map((benefit, index) => (
+                  <motion.li
+                    key={index}
+                    initial={{ opacity: 0, x: -10 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    transition={{ delay: 0.4 + index * 0.05 }}
+                    className="flex items-start gap-2 text-sm text-gray-400"
+                  >
+                    <CheckCircle2 className="w-4 h-4 text-performance-green flex-shrink-0 mt-0.5" />
+                    {benefit}
+                  </motion.li>
+                ))}
+              </ul>
+            </div>
+
+            {/* Connect Button */}
+            <Link href={startUrl} className="block">
+              <Button
+                variant="primary"
+                className="w-full flex items-center justify-center gap-3 py-4"
+              >
+                <Gamepad2 className="w-5 h-5" />
+                <span>Connect iRacing Account</span>
+                <ArrowRight className="w-4 h-4" />
+              </Button>
+            </Link>
+
+            {/* Trust Indicators */}
+            <div className="mt-6 pt-6 border-t border-charcoal-outline">
+              <div className="flex items-center justify-center gap-6 text-xs text-gray-500">
+                <div className="flex items-center gap-2">
+                  <Shield className="w-4 h-4" />
+                  <span>Secure OAuth connection</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <LinkIcon className="w-4 h-4" />
+                  <span>Read-only access</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Alternative */}
+            <p className="mt-6 text-center text-sm text-gray-500">
+              Don't have iRacing?{' '}
+              <Link href="/auth/signup" className="text-primary-blue hover:underline">
+                Create account with email
+              </Link>
+            </p>
+          </div>
+        </Card>
+
+        {/* Footer */}
+        <p className="mt-6 text-center text-xs text-gray-500">
+          GridPilot only requests read access to your iRacing profile.
+          <br />
+          We never access your payment info or modify your account.
         </p>
-        <Link
-          href={startUrl}
-          className="inline-flex items-center justify-center px-4 py-2 rounded-md bg-primary-blue text-sm font-medium text-white hover:bg-primary-blue/90 transition-colors w-full"
-        >
-          Start iRacing demo login
-        </Link>
       </div>
     </main>
   );