gridpilot.gg/apps/website/ui/DiscordCTA.tsx

import { Box } from '@/ui/Box';
import { Button } from '@/ui/Button';
import { Container } from '@/ui/Container';
import { Heading } from '@/ui/Heading';
import { Glow } from '@/ui/Glow';
import { Icon } from '@/ui/Icon';
import { DiscordIcon } from '@/ui/icons/DiscordIcon';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
import { Text } from '@/ui/Text';
import { Grid } from '@/ui/Grid';
import { Code, Lightbulb, LucideIcon, MessageSquare, Users } from 'lucide-react';

export function DiscordCTA() {
  const discordUrl = process.env.NEXT_PUBLIC_DISCORD_URL || '#';

  return (
    <Box 
      as="section" 
      bg="graphite-black" 
      position="relative"
      py={{ base: 20, md: 32 }}
      borderBottom
      borderColor="border-gray/50"
      overflow="hidden"
    >
      <Glow color="primary" size="xl" position="center" opacity={0.05} />
      
      <Container size="lg" position="relative" zIndex={10}>
        <Surface
          variant="default"
          padding={12}
          border
          rounded="none"
          position="relative"
          className="overflow-hidden bg-panel-gray/40"
        >
          {/* Discord brand accent */}
          <Box 
            position="absolute" 
            top={0} 
            left={0} 
            right={0} 
            height="1" 
            bg="primary-accent"
          />
          
          <Stack align="center" gap={12} center>
            {/* Header */}
            <Stack align="center" gap={6}>
              <Box
                display="flex"
                center
                rounded="none"
                w={{ base: "16", md: "20" }}
                h={{ base: "16", md: "20" }}
                bg="primary-accent/10"
                border
                borderColor="primary-accent/30"
                className="relative"
              >
                <DiscordIcon color="text-primary-accent" size={40} />
                <Box position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="primary-accent" />
                <Box position="absolute" bottom="-1px" right="-1px" w="2" h="2" borderBottom borderRight borderColor="primary-accent" />
              </Box>
              
              <Stack gap={4} align="center">
                <Heading level={2} weight="bold" color="text-white" fontSize={{ base: '2xl', md: '4xl' }} className="tracking-tight">
                  Join the Grid on Discord
                </Heading>
                <Box 
                  w="16" 
                  h="1"
                  bg="primary-accent"
                />
              </Stack>
            </Stack>

            {/* Personal message */}
            <Box maxWidth="2xl" mx="auto" textAlign="center">
              <Stack gap={6}>
                <Text size="lg" color="text-gray-300" weight="medium" leading="relaxed">
                  GridPilot is a <span className="text-white font-bold">solo developer project</span> built for the community.
                </Text>
                <Text size="base" color="text-gray-400" weight="normal" leading="relaxed">
                  We are in early alpha. Join us to help shape the future of motorsport infrastructure. Your feedback directly influences the roadmap.
                </Text>
              </Stack>
            </Box>

            {/* Benefits grid */}
            <Box 
              maxWidth="4xl" 
              mx="auto" 
              fullWidth
            >
              <Grid cols={1} mdCols={2} gap={6}>
                <BenefitItem 
                  icon={MessageSquare} 
                  title="Share your pain points" 
                  description="Tell us what frustrates you about league racing today." 
                />
                <BenefitItem 
                  icon={Lightbulb} 
                  title="Shape the product" 
                  description="Your ideas directly influence our roadmap." 
                />
                <BenefitItem 
                  icon={Users} 
                  title="Connect with racers" 
                  description="Join a community of like-minded competitive drivers." 
                />
                <BenefitItem 
                  icon={Code} 
                  title="Early Access" 
                  description="Test new features before they go public." 
                />
              </Grid>
            </Box>

            {/* CTA Button */}
            <Stack gap={6} pt={4} align="center">
              <Button
                as="a"
                href={discordUrl}
                target="_blank"
                rel="noopener noreferrer"
                variant="primary"
                size="lg"
                className="px-16 py-4"
                icon={<DiscordIcon size={24} />}
              >
                Join Discord
              </Button>
              
              <Box border borderStyle="dashed" borderColor="primary-accent/50" px={4} py={1}>
                <Text size="xs" color="text-primary-accent" weight="bold" font="mono" uppercase letterSpacing="widest">
                  Early Alpha Access Available
                </Text>
              </Box>
            </Stack>
          </Stack>
        </Surface>
      </Container>
    </Box>
  );
}

function BenefitItem({ icon, title, description }: { icon: LucideIcon, title: string, description: string }) {
  return (
    <Surface 
      variant="muted" 
      border 
      padding={6} 
      rounded="none" 
      display="flex"
      gap={5}
      className="items-start hover:border-primary-accent/30 transition-all bg-panel-gray/20 group"
    >
      <Box
        display="flex"
        center
        rounded="none"
        flexShrink={0}
        w="10"
        h="10"
        bg="primary-accent/5"
        border
        borderColor="border-gray/50"
        className="group-hover:border-primary-accent/30 transition-colors"
      >
        <Icon icon={icon} size={5} color="text-primary-accent" />
      </Box>
      <Stack gap={2}>
        <Text size="base" weight="bold" color="text-white" className="tracking-wide">{title}</Text>
        <Text size="sm" color="text-gray-400" leading="relaxed">{description}</Text>
      </Stack>
    </Surface>
  );
}