'use client';

import React from 'react';
import { Section } from '@/ui/Section';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Button } from '@/ui/Button';
import { Group } from '@/ui/Group';
import { Box } from '@/ui/Box';
import { Panel } from '@/ui/Panel';
import { Stack } from '@/ui/Stack';
import { Icon } from '@/ui/Icon';
import { Trophy } from 'lucide-react';

/**
 * CtaSection - Final call to action for league admins.
 * Redesigned to match the "Modern Precision" theme and "Dieter Rams" style.
 */
export function CtaSection() {
  return (
    <Section variant="default" padding="lg">
      <Panel variant="muted" padding="xl">
        <Stack gap={12} align="center" textAlign="center">
          <Stack gap={6} align="center">
            <Box width="3rem" height="3rem" bg="var(--ui-color-bg-surface)" rounded="full" border={true} display="flex" alignItems="center" justifyContent="center">
              <Icon icon={Trophy} size={6} intent="primary" />
            </Box>
            <Stack gap={4}>
              <Heading level={2} weight="bold">
                Ready to elevate your league?
              </Heading>
              <Text variant="med" size="lg" maxWidth="36rem">
                Join the growing ecosystem of professional sim racing leagues. 
                Start for free and scale as your community grows.
              </Text>
            </Stack>
          </Stack>
          
          <Group gap={6} justify="center">
            <Button variant="primary" size="lg">
              Create Your League
            </Button>
            <Button variant="secondary" size="lg">
              View Documentation
            </Button>
          </Group>
        </Stack>
      </Panel>
    </Section>
  );
}