'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/Stack';
import { Section } from '@/ui/Section';
import { ButtonGroup } from '@/ui/ButtonGroup';

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.
 */
export function HomeHeader({
  title,
  subtitle,
  description,
  primaryAction,
  secondaryAction,
}: HomeHeaderProps) {
  return (
    <Section variant="dark" padding="lg">
      <Glow color="primary" size="xl" position="top-right" opacity={0.1} />
      
      <Container>
        <Stack gap={8}>
          <Text size="xs" weight="bold" uppercase variant="primary">
            {subtitle}
          </Text>
          
          <Heading level={1} weight="bold">
            {title}
          </Heading>
          
          <Text size="lg" variant="low">
            {description}
          </Text>

          <ButtonGroup gap={4}>
            <Button
              as="a"
              href={primaryAction.href}
              variant="primary"
              size="lg"
            >
              {primaryAction.label}
            </Button>
            <Button
              as="a"
              href={secondaryAction.href}
              variant="secondary"
              size="lg"
            >
              {secondaryAction.label}
            </Button>
          </ButtonGroup>
        </Stack>
      </Container>
    </Section>
  );
}