'use client';

import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { useEffect, useState } from 'react';

export function SimPlatformMockup() {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const checkMobile = () => setIsMobile(window.innerWidth < 768);
    checkMobile();
    window.addEventListener('resize', checkMobile);
    return () => window.removeEventListener('resize', checkMobile);
  }, []);

  // Simple mobile version - just the essence of cross-platform
  if (isMobile) {
    return (
      <Stack position="relative" fullWidth fullHeight bg="graphite-black" rounded="none" p={4} overflow="hidden" display="flex" alignItems="center" justifyContent="center">
        <Stack gap={3} w="full">
          {/* Active Platform - Clean */}
          <Stack bg="panel-gray/60" border borderWidth="1px" borderColor="primary-accent" rounded="none" p={4} position="relative">
            <Stack position="absolute" top="3" right="3">
              <Stack w="1.5" h="1.5" rounded="full" bg="success-green" 
                // eslint-disable-next-line gridpilot-rules/component-classification
                className="animate-pulse" 
              />
            </Stack>
            <Stack display="flex" alignItems="center" gap={3}>
              <Stack w="12" h="12" rounded="none" bg="primary-accent/10" display="flex" alignItems="center" justifyContent="center" flexShrink={0} border borderColor="primary-accent/30">
                <Text size="2xl" weight="bold" color="text-primary-accent" font="mono">iR</Text>
              </Stack>
              <Stack>
                <Text size="base" weight="bold" color="text-white" block className="uppercase tracking-widest">iRacing</Text>
                <Text size="xs" color="text-success-green" block font="mono">ACTIVE</Text>
              </Stack>
            </Stack>
          </Stack>
          
          {/* Simple "more coming" indicator */}
          <Stack bg="panel-gray/20" rounded="none" p={3} border borderStyle="dashed" borderColor="border-gray/30">
            <Text size="xs" textAlign="center" color="text-gray-600" block font="mono" uppercase tracking-widest>More platforms coming</Text>
          </Stack>
        </Stack>
      </Stack>
    );
  }

  // Desktop version
  return (
    <Stack position="relative" fullWidth maxWidth="3xl" mx="auto">
      <Stack bg="panel-gray/40" border borderColor="border-gray/50" rounded="none" p={{ base: 1.5, sm: 3, md: 4, lg: 6 }} shadow="2xl">
        <Stack gap={{ base: 1.5, sm: 2, md: 3, lg: 4 }}>
          <Stack display="flex" alignItems="center" justifyContent="between" pb={{ base: 1.5, sm: 2, md: 3, lg: 4 }} borderBottom borderColor="border-gray/30">
            <Text size={{ base: 'xs', sm: 'sm' }} weight="bold" color="text-gray-400" className="uppercase tracking-widest">Platform Support</Text>
            <Text 
              // eslint-disable-next-line gridpilot-rules/component-classification
              style={{ fontSize: '10px' }} 
              color="text-gray-600"
              font="mono"
            >
              ACTIVE: 1 | PLANNED: 3
            </Text>
          </Stack>
          
          <Stack display="grid" gridCols={{ base: 1, md: 2 }} gap={{ base: 1.5, sm: 2, md: 3 }}>
            {/* iRacing - Active */}
            <Stack bg="graphite-black" border borderWidth="1px" borderColor="primary-accent/40" rounded="none" p={{ base: 1.5, sm: 2, md: 3, lg: 4 }} position="relative" overflow="hidden">
              <Stack position="absolute" top={{ base: 1, sm: 1.5, md: 2 }} right={{ base: 1, sm: 1.5, md: 2 }}>
                <Stack w="1.5" h="1.5" rounded="full" bg="success-green" 
                  // eslint-disable-next-line gridpilot-rules/component-classification
                  className="animate-pulse" 
                />
              </Stack>
              <Stack display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3 }}>
                <Stack w={{ base: 8, sm: 10, md: 12 }} h={{ base: 8, sm: 10, md: 12 }} rounded="none" bg="primary-accent/10" display="flex" alignItems="center" justifyContent="center" border borderColor="primary-accent/20">
                  <Text size={{ base: 'base', sm: 'xl', md: '2xl' }} weight="bold" color="text-primary-accent" font="mono">iR</Text>
                </Stack>
                <Stack>
                  <Text size={{ base: 'xs', sm: 'sm', md: 'base' }} weight="bold" color="text-white" block className="uppercase tracking-widest">iRacing</Text>
                  <Text 
                    // eslint-disable-next-line gridpilot-rules/component-classification
                    style={{ fontSize: '10px' }} 
                    color="text-success-green" 
                    block
                    font="mono"
                  >
                    ACTIVE
                  </Text>
                </Stack>
              </Stack>
              <Text 
                // eslint-disable-next-line gridpilot-rules/component-classification
                style={{ fontSize: '10px' }} 
                color="text-gray-500" 
                mt={{ base: 1.5, sm: 2, md: 3 }} 
                block
                font="mono"
              >
                FULL INTEGRATION
              </Text>
            </Stack>

            {/* ACC - Future */}
            <Stack bg="panel-gray/20" border borderColor="border-gray/30" rounded="none" p={{ base: 1.5, sm: 2, md: 3, lg: 4 }} opacity={0.6}>
              <Stack display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3 }}>
                <Stack w={{ base: 8, sm: 10, md: 12 }} h={{ base: 8, sm: 10, md: 12 }} rounded="none" bg="gray-800/20" display="flex" alignItems="center" justifyContent="center" border borderColor="gray-800/30">
                  <Text size={{ base: 'base', sm: 'xl', md: '2xl' }} weight="bold" color="text-gray-700" font="mono">AC</Text>
                </Stack>
                <Stack>
                  <Text size={{ base: 'xs', sm: 'sm' }} weight="bold" color="text-gray-600" block className="uppercase tracking-widest">ACC</Text>
                  <Text 
                    // eslint-disable-next-line gridpilot-rules/component-classification
                    style={{ fontSize: '10px' }} 
                    color="text-gray-700" 
                    block
                    font="mono"
                  >
                    PLANNED
                  </Text>
                </Stack>
              </Stack>
              <Text 
                // eslint-disable-next-line gridpilot-rules/component-classification
                style={{ fontSize: '10px' }} 
                color="text-gray-700" 
                mt={{ base: 1.5, sm: 2, md: 3 }} 
                block
                font="mono"
              >
                COMING LATER
              </Text>
            </Stack>

            {/* rFactor 2 - Future */}
            <Stack bg="panel-gray/20" border borderColor="border-gray/30" rounded="none" p={{ base: 1.5, sm: 2, md: 3, lg: 4 }} opacity={0.6}>
              <Stack display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3 }}>
                <Stack w={{ base: 8, sm: 10, md: 12 }} h={{ base: 8, sm: 10, md: 12 }} rounded="none" bg="gray-800/20" display="flex" alignItems="center" justifyContent="center" border borderColor="gray-800/30">
                  <Text size={{ base: 'base', sm: 'xl', md: '2xl' }} weight="bold" color="text-gray-700" font="mono">rF</Text>
                </Stack>
                <Stack>
                  <Text size={{ base: 'xs', sm: 'sm' }} weight="bold" color="text-gray-600" block className="uppercase tracking-widest">rFactor 2</Text>
                  <Text 
                    // eslint-disable-next-line gridpilot-rules/component-classification
                    style={{ fontSize: '10px' }} 
                    color="text-gray-700" 
                    block
                    font="mono"
                  >
                    PLANNED
                  </Text>
                </Stack>
              </Stack>
              <Text 
                // eslint-disable-next-line gridpilot-rules/component-classification
                style={{ fontSize: '10px' }} 
                color="text-gray-700" 
                mt={{ base: 1.5, sm: 2, md: 3 }} 
                block
                font="mono"
              >
                COMING LATER
              </Text>
            </Stack>

            {/* LMU - Future */}
            <Stack bg="panel-gray/20" border borderColor="border-gray/30" rounded="none" p={{ base: 1.5, sm: 2, md: 3, lg: 4 }} opacity={0.6}>
              <Stack display="flex" alignItems="center" gap={{ base: 1.5, sm: 2, md: 3 }}>
                <Stack w={{ base: 8, sm: 10, md: 12 }} h={{ base: 8, sm: 10, md: 12 }} rounded="none" bg="gray-800/20" display="flex" alignItems="center" justifyContent="center" border borderColor="gray-800/30">
                  <Text size={{ base: 'base', sm: 'xl', md: '2xl' }} weight="bold" color="text-gray-700" font="mono">LM</Text>
                </Stack>
                <Stack>
                  <Text size={{ base: 'xs', sm: 'sm' }} weight="bold" color="text-gray-600" block className="uppercase tracking-widest">Le Mans Ult.</Text>
                  <Text 
                    // eslint-disable-next-line gridpilot-rules/component-classification
                    style={{ fontSize: '10px' }} 
                    color="text-gray-700" 
                    block
                    font="mono"
                  >
                    PLANNED
                  </Text>
                </Stack>
              </Stack>
              <Text 
                // eslint-disable-next-line gridpilot-rules/component-classification
                style={{ fontSize: '10px' }} 
                color="text-gray-700" 
                mt={{ base: 1.5, sm: 2, md: 3 }} 
                block
                font="mono"
              >
                COMING LATER
              </Text>
            </Stack>
          </Stack>

          <Stack pt={{ base: 1.5, sm: 2, md: 3, lg: 4 }} borderTop borderStyle="dashed" borderColor="border-gray/30">
            <Text 
              // eslint-disable-next-line gridpilot-rules/component-classification
              style={{ fontSize: '10px' }} 
              color="text-gray-600" 
              textAlign="center" 
              block
              font="mono"
              className="uppercase tracking-widest"
            >
              Your identity stays with you across platforms
            </Text>
          </Stack>
        </Stack>
      </Stack>
    </Stack>
  );
}