'use client';

import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Button } from '@/ui/Button';
import { Section } from '@/ui/Section';
import { ButtonGroup } from '@/ui/ButtonGroup';
import { Stack } from '@/ui/Stack';
import { Box } from '@/ui/Box';

/**
 * Hero - Refined with Dieter Rams principles.
 * "Less, but better."
 * Focuses on clarity, honesty, and unobtrusive design.
 */
export function Hero() {
  return (
    <Section variant="default" py={32}>
      <Box maxWidth="54rem">
        <Box marginBottom={24}>
          <Text 
            variant="primary" 
            weight="bold" 
            uppercase 
            size="xs" 
            leading="none"
            block
            letterSpacing="0.2em"
            marginBottom={10}
          >
            Sim Racing Infrastructure
          </Text>
          
          <Heading level={1} weight="bold" size="4xl">
            Professional League Management.<br />
            Engineered for Control.
          </Heading>
        </Box>
        
        <Box marginBottom={24}>
          <Text size="xl" variant="med" leading="relaxed" block maxWidth="42rem">
            GridPilot eliminates the administrative overhead of running iRacing leagues. 
            No spreadsheets. No manual points. No protest chaos. 
            Just pure competition, structured for growth.
          </Text>
        </Box>

        <ButtonGroup gap={10}>
          <Button
            variant="primary"
            size="lg"
          >
            Create Your League
          </Button>
          <Button
            variant="secondary"
            size="lg"
          >
            View Demo
          </Button>
        </ButtonGroup>
      </Box>
    </Section>
  );
}