'use client';

import { motion, useReducedMotion } from 'framer-motion';

export default function RaceHistoryMockup() {
  const shouldReduceMotion = useReducedMotion();

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: { staggerChildren: shouldReduceMotion ? 0 : 0.15 }
    }
  };

  const raceCardVariants = {
    hidden: { opacity: 0, x: shouldReduceMotion ? 0 : -20 },
    visible: { opacity: 1, x: 0 }
  };

  const profileSectionVariants = {
    hidden: { opacity: 0, x: shouldReduceMotion ? 0 : 20 },
    visible: { 
      opacity: 1, 
      x: 0,
      transition: { delay: shouldReduceMotion ? 0 : 0.2 }
    }
  };

  const connectionLineVariants = {
    hidden: { scaleX: 0, opacity: 0 },
    visible: {
      scaleX: 1,
      opacity: 0.3,
      transition: { duration: 0.6 }
    }
  };

  return (
    <div className="relative w-full h-full bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite rounded-lg p-8 overflow-hidden flex items-center justify-center">
      <motion.div
        variants={containerVariants}
        initial="hidden"
        animate="visible"
        className="relative w-full max-w-4xl"
      >
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
          {/* Left: Race Result Card */}
          <motion.div variants={raceCardVariants} className="relative">
            <div className="bg-iron-gray rounded-lg p-6 border border-primary-blue/40 shadow-[0_0_24px_rgba(25,140,255,0.2)]">
              <div className="flex items-center gap-4 mb-4">
                <div className="h-16 w-16 bg-charcoal-outline rounded-lg border border-primary-blue/30 flex items-center justify-center">
                  <div className="text-white text-2xl font-bold">P3</div>
                </div>
                <div className="flex-1">
                  <div className="text-lg font-semibold text-white mb-1">Watkins Glen</div>
                  <div className="text-sm text-white/50">GT3 Sprint • Race 8</div>
                </div>
              </div>
              <div className="space-y-2 pt-4 border-t border-charcoal-outline">
                <div className="flex justify-between text-sm">
                  <span className="text-white/50">Finish</span>
                  <span className="text-white font-medium">3rd of 24</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span className="text-white/50">Incidents</span>
                  <span className="text-performance-green font-medium">0x</span>
                </div>
              </div>
            </div>
          </motion.div>

          {/* Connection Arrow */}
          <motion.div 
            variants={connectionLineVariants}
            className="hidden lg:block absolute left-1/2 top-1/2 -translate-y-1/2 w-16 h-0.5 bg-gradient-to-r from-primary-blue to-performance-green origin-left"
            style={{ transformOrigin: 'left center' }}
          >
            <div className="absolute right-0 top-1/2 -translate-y-1/2">
              <div className="w-2 h-2 bg-performance-green rotate-45 transform translate-x-1"></div>
            </div>
          </motion.div>

          {/* Right: Unified Profile Preview */}
          <motion.div variants={profileSectionVariants} className="relative">
            <div className="bg-iron-gray/80 backdrop-blur-sm rounded-lg p-6 border border-charcoal-outline space-y-4">
              <div className="text-sm font-semibold text-white/70 mb-3">Updates Your Profile</div>
              
              {/* Stats Section */}
              <div className="space-y-2">
                <div className="flex items-center justify-between py-2 px-3 bg-deep-graphite/50 rounded border border-primary-blue/20">
                  <span className="text-xs text-white/50">Career Stats</span>
                  <div className="flex items-center gap-2">
                    <div className="h-1.5 w-16 bg-primary-blue/40 rounded"></div>
                    <span className="text-xs text-performance-green">↑</span>
                  </div>
                </div>

                {/* Team Points */}
                <div className="flex items-center justify-between py-2 px-3 bg-deep-graphite/50 rounded border border-performance-green/20">
                  <span className="text-xs text-white/50">Team Points</span>
                  <div className="flex items-center gap-2">
                    <div className="h-1.5 w-12 bg-performance-green/40 rounded"></div>
                    <span className="text-xs text-performance-green">+18</span>
                  </div>
                </div>

                {/* Rating */}
                <div className="flex items-center justify-between py-2 px-3 bg-deep-graphite/50 rounded border border-subtle-neon-aqua/20">
                  <span className="text-xs text-white/50">Rating</span>
                  <div className="flex items-center gap-2">
                    <div className="h-1.5 w-10 bg-subtle-neon-aqua/40 rounded"></div>
                    <span className="text-xs text-performance-green">+12</span>
                  </div>
                </div>

                {/* Season History */}
                <div className="flex items-center justify-between py-2 px-3 bg-deep-graphite/50 rounded border border-white/10">
                  <span className="text-xs text-white/50">Season Record</span>
                  <div className="flex items-center gap-2">
                    <div className="h-1.5 w-14 bg-white/20 rounded"></div>
                  </div>
                </div>
              </div>
            </div>
          </motion.div>
        </div>
      </motion.div>
    </div>
  );
}