'use client';

import React from 'react';
import { Section } from '@/ui/Section';
import { Panel } from '@/ui/Panel';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Group } from '@/ui/Group';
import { Stack } from '@/ui/Stack';
import { Grid } from '@/ui/Grid';
import { Box } from '@/ui/Box';
import { StatusBadge } from '@/ui/StatusBadge';
import { Trophy, Globe, Settings2, Palette, ShieldCheck, BarChart3 } from 'lucide-react';

/**
 * LeagueIdentityPreview - Radically redesigned for "Modern Precision" and "Dieter Rams" style.
 * Focuses on the professional identity and deep customization options for admins.
 */
export function LeagueIdentityPreview() {
  return (
    <Section variant="default" py={32}>
      <Box>
        <Box marginBottom={24} maxWidth="42rem">
          <Heading level={2} weight="bold" marginBottom={8}>Your Brand. Your Rules.</Heading>
          <Text variant="med" size="lg" leading="relaxed">
            GridPilot is designed to be invisible where it matters, letting your league's identity take center stage. 
            Professional tools that respect your community's unique culture.
          </Text>
        </Box>

        <Grid cols={{ base: 1, md: 2 }} gap={20}>
          {/* Your Brand - Visual Identity */}
          <Box>
            <Panel variant="muted" padding="lg">
              <Stack gap={8}>
                <Stack gap={2}>
                  <Group gap={2}>
                    <Palette size={16} className="text-[var(--ui-color-intent-primary)]" />
                    <Text variant="primary" weight="bold" uppercase size="xs" letterSpacing="0.1em">Your Brand</Text>
                  </Group>
                  <Heading level={3} weight="bold">Professional Presence</Heading>
                  <Text variant="low" size="sm">Build prestige with a dedicated home for your competition.</Text>
                </Stack>

                <Stack gap={4}>
                  <Panel variant="bordered" padding="md">
                    <Group gap={4}>
                      <Globe size={20} className="text-[var(--ui-color-text-low)]" />
                      <Stack gap={1}>
                        <Text weight="bold">Custom Subdomains</Text>
                        <Text size="xs" variant="low">yourleague.gridpilot.racing</Text>
                      </Stack>
                    </Group>
                  </Panel>
                  <Panel variant="bordered" padding="md">
                    <Group gap={4}>
                      <Trophy size={20} className="text-[var(--ui-color-text-low)]" />
                      <Stack gap={1}>
                        <Text weight="bold">Live Standings</Text>
                        <Text size="xs" variant="low">Real-time updates across all car classes.</Text>
                      </Stack>
                    </Group>
                  </Panel>
                  <Panel variant="bordered" padding="md">
                    <Group gap={4}>
                      <BarChart3 size={20} className="text-[var(--ui-color-text-low)]" />
                      <Stack gap={1}>
                        <Text weight="bold">Driver Roster</Text>
                        <Text size="xs" variant="low">Detailed profiles with lifetime league stats.</Text>
                      </Stack>
                    </Group>
                  </Panel>

                  <Panel variant="elevated" padding="sm">
                    <Group gap={3}>
                      <Box width="2.5rem" height="2.5rem" bg="var(--ui-color-bg-surface)" rounded="sm" border={true} display="flex" alignItems="center" justifyContent="center">
                        <Trophy size={20} className="text-[var(--ui-color-text-low)]" />
                      </Box>
                      <Stack gap={0}>
                        <Text weight="bold" size="sm">Apex Racing League</Text>
                        <Text size="xs" variant="low">apex.gridpilot.racing</Text>
                      </Stack>
                    </Group>
                  </Panel>
                </Stack>
              </Stack>
            </Panel>
          </Box>

          {/* Your Rules - Deep Customization */}
          <Box>
            <Panel variant="muted" padding="lg">
              <Stack gap={8}>
                <Stack gap={2}>
                  <Group gap={2}>
                    <Settings2 size={16} className="text-[var(--ui-color-intent-primary)]" />
                    <Text variant="primary" weight="bold" uppercase size="xs" letterSpacing="0.1em">Your Rules</Text>
                  </Group>
                  <Heading level={3} weight="bold">Absolute Control</Heading>
                  <Text variant="low" size="sm">The platform adapts to your league, not the other way around.</Text>
                </Stack>

                <Stack gap={4}>
                  <Panel variant="bordered" padding="md">
                    <Group gap={4}>
                      <ShieldCheck size={20} className="text-[var(--ui-color-text-low)]" />
                      <Stack gap={1}>
                        <Text weight="bold">Flexible Points Systems</Text>
                        <Text size="xs" variant="low">Custom points for positions, fastest laps, and incidents.</Text>
                      </Stack>
                    </Group>
                  </Panel>
                  <Panel variant="bordered" padding="md">
                    <Group gap={4}>
                      <Settings2 size={20} className="text-[var(--ui-color-text-low)]" />
                      <Stack gap={1}>
                        <Text weight="bold">Drop Weeks & Playoffs</Text>
                        <Text size="xs" variant="low">Configure complex season structures with ease.</Text>
                      </Stack>
                    </Group>
                  </Panel>
                  <Panel variant="bordered" padding="md">
                    <Group gap={4}>
                      <Trophy size={20} className="text-[var(--ui-color-text-low)]" />
                      <Stack gap={1}>
                        <Text weight="bold">Multi-Class Support</Text>
                        <Text size="xs" variant="low">Manage GT3, GTP, and more in a single season.</Text>
                      </Stack>
                    </Group>
                  </Panel>

                  <Panel variant="elevated" padding="sm">
                    <Stack gap={2}>
                      <Text size="xs" uppercase weight="bold" variant="low">Points Configuration</Text>
                      <Group gap={2} wrap>
                        <StatusBadge variant="info">P1: 25pts</StatusBadge>
                        <StatusBadge variant="info">P2: 18pts</StatusBadge>
                        <StatusBadge variant="info">P3: 15pts</StatusBadge>
                        <StatusBadge variant="warning">INC: -1pt</StatusBadge>
                      </Group>
                    </Stack>
                  </Panel>
                </Stack>
              </Stack>
            </Panel>
          </Box>
        </Grid>
      </Box>
    </Section>
  );
}