'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 { 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" py={32}>
      <Panel variant="muted" padding="xl">
        <Stack gap={12} align="center" textAlign="center">
          <Box>
            <Box marginBottom={6} display="flex" justifyContent="center">
              <Box width="3rem" height="3rem" bg="var(--ui-color-bg-surface)" rounded="full" border={true} display="flex" alignItems="center" justifyContent="center">
                <Trophy size={24} className="text-[var(--ui-color-intent-primary)]" />
              </Box>
            </Box>
            <Heading level={2} weight="bold" marginBottom={4}>
              Ready to elevate your league?
            </Heading>
            <Text variant="med" size="lg" maxWidth="36rem" mx="auto">
              Join the growing ecosystem of professional sim racing leagues. 
              Start for free and scale as your community grows.
            </Text>
          </Box>
          
          <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>
  );
}
