import { useParallax } from '@/hooks/useScrollProgress';
import { Button } from '@/ui/Button';
import { Container } from '@/ui/Container';
import { Glow } from '@/ui/Glow';
import { Heading } from '@/ui/Heading';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { useRef } from 'react';

const discordUrl = process.env.NEXT_PUBLIC_DISCORD_URL || '#';

export function LandingHero() {
  const sectionRef = useRef<HTMLElement>(null);
  const bgParallax = useParallax(sectionRef, 0.2);

  return (
    <Stack 
      as="section" 
      ref={sectionRef} 
      position="relative" 
      overflow="hidden" 
      bg="var(--ui-color-bg-base)" 
      pt={{ base: 24, md: 32, lg: 40 }}
      pb={{ base: 16, md: 24, lg: 32 }}
      borderBottom
      borderColor="var(--ui-color-border-low)"
    >
      {/* Background image layer with parallax */}
      <Stack
        position="absolute"
        inset="0"
        backgroundImage="url(/images/header.jpeg)"
        backgroundSize="cover"
        backgroundPosition="center"
        opacity={0.2}
        transform={`translateY(${bgParallax * 0.5}px)`}
      />
      
      {/* Robust gradient overlay */}
      <Stack 
        position="absolute" 
        inset="0" 
        bg="linear-gradient(to bottom, #0C0D0F 0%, transparent 50%, #0C0D0F 100%)"
      />
      
      <Stack 
        position="absolute" 
        inset="0" 
        bg="radial-gradient(circle at center, transparent 0%, #0C0D0F 100%)"
        opacity={0.8}
      />
      
      <Glow color="primary" size="xl" position="center" opacity={0.15} />
      
      <Container size="lg" position="relative" zIndex={10}>
        <Stack gap={{ base: 8, md: 12 }}>
          <Stack gap={6} maxWidth="3xl">
            <Stack borderLeft borderStyle="solid" borderColor="var(--ui-color-intent-primary)" pl={4} mb={2} bg="rgba(25, 140, 255, 0.05)" py={1}>
              <Text size="xs" weight="bold" variant="primary" uppercase letterSpacing="0.3em">
                Precision Racing Infrastructure
              </Text>
            </Stack>
            <Heading
              level={1}
              fontSize={{ base: '4xl', sm: '5xl', md: '6xl', lg: '8xl' }}
              weight="bold"
              color="var(--ui-color-text-high)"
              lineHeight="0.95"
              letterSpacing="tighter"
            >
              MODERN MOTORSPORT INFRASTRUCTURE.
            </Heading>
            <Text size={{ base: 'lg', md: 'xl' }} variant="low" weight="normal" leading="relaxed" maxWidth="2xl" borderLeft borderStyle="solid" borderColor="var(--ui-color-border-low)" pl={6} opacity={0.3}>
              GridPilot gives your league racing a real home. Results, standings, teams, and career progression — engineered for precision and control.
            </Text>
          </Stack>

          <Stack display="flex" flexDirection={{ base: 'column', sm: 'row' }} gap={4}>
            <Button
              as="a"
              href={discordUrl}
              variant="primary"
              size="lg"
              px={12}
              letterSpacing="0.2em"
              fontSize="xs"
              h="14"
            >
              Join the Grid
            </Button>
            <Button
              variant="secondary"
              size="lg"
              px={12}
              borderColor="var(--ui-color-border-low)"
              hoverBorderColor="var(--ui-color-intent-primary)"
              letterSpacing="0.2em"
              fontSize="xs"
              h="14"
              bg="transparent"
            >
              Explore Leagues
            </Button>
          </Stack>

          {/* Problem list - more professional */}
          <Stack 
            display="grid" 
            gridCols={{ base: 1, sm: 2, lg: 4 }} 
            gap={8} 
            mt={12}
            borderTop
            borderStyle="solid"
            borderColor="var(--ui-color-border-low)"
            opacity={0.2}
            pt={12}
          >
            {[
              { label: 'IDENTITY', text: 'Your racing career in one place', color: 'var(--ui-color-intent-primary)' },
              { label: 'AUTOMATION', text: 'No more manual session setup', color: 'var(--ui-color-intent-telemetry)' },
              { label: 'PRECISION', text: 'Real-time results and standings', color: 'var(--ui-color-intent-warning)' },
              { label: 'COMMUNITY', text: 'Built for teams and leagues', color: 'var(--ui-color-intent-success)' }
            ].map((item) => (
              <Stack key={item.label} gap={3} group cursor="default">
                <Stack display="flex" alignItems="center" gap={3}>
                  <Stack w="1" h="3" bg={item.color} />
                  <Text size="xs" weight="bold" variant="low" uppercase letterSpacing="0.2em" groupHoverTextColor="var(--ui-color-text-high)" transition>
                    {item.label}
                  </Text>
                </Stack>
                <Text size="sm" variant="low" groupHoverTextColor="var(--ui-color-text-med)" transition leading="relaxed">
                  {item.text}
                </Text>
              </Stack>
            ))}
          </Stack>
        </Stack>
      </Container>
    </Stack>
  );
}