'use client';

import { Button } from '@/ui/Button';
import { Container } from '@/ui/Container';
import { Glow } from '@/ui/Glow';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/primitives/Stack';

interface HomeHeaderProps {
  title: string;
  subtitle: string;
  description: string;
  primaryAction: {
    label: string;
    href: string;
  };
  secondaryAction: {
    label: string;
    href: string;
  };
}

/**
 * HomeHeader - Semantic hero section for the landing page.
 * Follows "Precision Racing Minimal" theme.
 */
export function HomeHeader({
  title,
  subtitle,
  description,
  primaryAction,
  secondaryAction,
}: HomeHeaderProps) {
  return (
    <Stack as="header" position="relative" overflow="hidden" bg="graphite-black" py={{ base: 24, lg: 32 }} borderBottom borderColor="border-gray">
      <Glow color="primary" size="xl" position="top-right" opacity={0.1} />
      
      <Container>
        <Stack maxWidth="4xl" fullWidth>
          <Stack direction="row" align="center" gap={3} borderLeft borderStyle="solid" borderWidth="2px" borderColor="primary-accent" bg="primary-accent/5" px={4} py={1} mb={8}>
            <Text size="xs" weight="bold" uppercase letterSpacing="0.3em" color="text-primary-accent">
              {subtitle}
            </Text>
          </Stack>
          
          <Heading 
            level={1} 
            fontSize={{ base: '5xl', md: '7xl', lg: '8xl' }} 
            weight="bold" 
            color="text-white" 
            letterSpacing="tighter" 
            lineHeight="0.9" 
            mb={8}
          >
            {title}
          </Heading>
          
          <Stack borderLeft borderStyle="solid" borderColor="border-gray" pl={8} mb={12} maxWidth="2xl">
            <Text size="lg" color="text-gray-400" leading="relaxed" opacity={0.8}>
              {description}
            </Text>
          </Stack>

          <Stack direction={{ base: 'col', md: 'row' }} gap={4}>
            <Button
              as="a"
              href={primaryAction.href}
              variant="primary"
              h="14"
              px={12}
              fontSize="xs"
            >
              {primaryAction.label}
            </Button>
            <Button
              as="a"
              href={secondaryAction.href}
              variant="secondary"
              h="14"
              px={12}
              fontSize="xs"
              bg="transparent"
              borderColor="border-gray"
              hoverBorderColor="primary-accent/50"
            >
              {secondaryAction.label}
            </Button>
          </Stack>
        </Stack>
      </Container>
    </Stack>
  );
}