gridpilot.gg/apps/website/components/mockups/CompanionAutomationMockup.tsx

'use client';

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

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

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

  const itemVariants = {
    hidden: { opacity: 0, y: shouldReduceMotion ? 0 : 10 },
    visible: { opacity: 1, y: 0 }
  };

  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">
      <motion.div
        variants={containerVariants}
        initial="hidden"
        animate="visible"
        className="space-y-6"
      >
        {/* Companion App Header */}
        <motion.div variants={itemVariants}>
          <div className="flex items-center gap-3 mb-6">
            <div className="h-10 w-10 bg-primary-blue/20 rounded-lg border border-primary-blue/40 flex items-center justify-center">
              <div className="h-5 w-5 bg-primary-blue/60 rounded"></div>
            </div>
            <div>
              <div className="text-sm font-semibold text-white">GridPilot Companion</div>
              <div className="text-xs text-white/50">Session Creator</div>
            </div>
          </div>
        </motion.div>

        {/* Configuration Card */}
        <motion.div 
          variants={itemVariants}
          className="bg-iron-gray rounded-lg p-4 border border-charcoal-outline"
        >
          <div className="flex items-center justify-between mb-3">
            <div className="text-xs text-white/60">Session Template</div>
            <div className="h-5 w-20 bg-performance-green/30 rounded-full flex items-center justify-center">
              <div className="text-xs text-performance-green">Ready</div>
            </div>
          </div>
          
          <div className="space-y-2">
            <div className="flex items-center gap-2">
              <div className="h-2 w-2 bg-primary-blue rounded-full"></div>
              <div className="h-2 w-32 bg-white/10 rounded"></div>
            </div>
            <div className="flex items-center gap-2">
              <div className="h-2 w-2 bg-primary-blue rounded-full"></div>
              <div className="h-2 w-28 bg-white/10 rounded"></div>
            </div>
            <div className="flex items-center gap-2">
              <div className="h-2 w-2 bg-primary-blue rounded-full"></div>
              <div className="h-2 w-36 bg-white/10 rounded"></div>
            </div>
          </div>
        </motion.div>

        {/* Browser Automation Visual */}
        <motion.div 
          variants={itemVariants}
          className="relative bg-charcoal-outline rounded-lg p-4 border border-primary-blue/30 overflow-hidden"
        >
          {/* Browser Window Mockup */}
          <div className="space-y-3">
            <div className="flex items-center gap-2 pb-3 border-b border-white/10">
              <div className="h-2 w-2 bg-white/20 rounded-full"></div>
              <div className="h-2 w-2 bg-white/20 rounded-full"></div>
              <div className="h-2 w-2 bg-white/20 rounded-full"></div>
              <div className="flex-1 h-2 bg-white/5 rounded ml-2"></div>
            </div>
            
            {/* Automation Steps */}
            <div className="space-y-2">
              {[1, 2, 3, 4].map((step, index) => (
                <motion.div
                  key={step}
                  className="flex items-center gap-2"
                  initial={{ opacity: 0, x: -10 }}
                  animate={{ 
                    opacity: 1, 
                    x: 0,
                    transition: { delay: shouldReduceMotion ? 0 : 0.5 + (index * 0.15) }
                  }}
                >
                  <motion.div
                    className="h-3 w-3 bg-performance-green/40 rounded-full flex items-center justify-center"
                    animate={shouldReduceMotion ? {} : {
                      scale: index === 3 ? [1, 1.2, 1] : 1,
                      opacity: index === 3 ? [0.4, 1, 0.4] : 1
                    }}
                    transition={{ duration: 1.5, repeat: Infinity }}
                  >
                    <div className="h-1.5 w-1.5 bg-performance-green rounded-full"></div>
                  </motion.div>
                  <div className="h-2 w-full bg-white/5 rounded"></div>
                </motion.div>
              ))}
            </div>
          </div>

          {/* Automation Running Indicator */}
          <motion.div
            className="absolute top-2 right-2 flex items-center gap-2 bg-deep-graphite/80 backdrop-blur-sm px-3 py-1.5 rounded-full border border-primary-blue/30"
            animate={shouldReduceMotion ? {} : {
              boxShadow: [
                '0 0 8px rgba(25,140,255,0.2)',
                '0 0 16px rgba(25,140,255,0.4)',
                '0 0 8px rgba(25,140,255,0.2)'
              ]
            }}
            transition={{ duration: 2, repeat: Infinity }}
          >
            <motion.div
              className="h-2 w-2 bg-primary-blue rounded-full"
              animate={shouldReduceMotion ? {} : {
                opacity: [1, 0.5, 1]
              }}
              transition={{ duration: 1.5, repeat: Infinity }}
            />
            <div className="text-xs text-primary-blue">Running</div>
          </motion.div>
        </motion.div>

        {/* One-Click Action */}
        <motion.div 
          variants={itemVariants}
          className="flex items-center justify-center"
        >
          <motion.div
            className="bg-primary-blue/20 text-primary-blue px-6 py-2.5 rounded-lg border border-primary-blue/40 text-sm font-semibold"
            whileHover={shouldReduceMotion ? {} : {
              scale: 1.03,
              boxShadow: '0 4px 24px rgba(25,140,255,0.3)',
              transition: { duration: 0.15 }
            }}
          >
            Create Session
          </motion.div>
        </motion.div>
      </motion.div>
    </div>
  );
}