import { Box } from '@/ui/Box';
import { Button } from '@/ui/Button';
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 { Code, Lightbulb, LucideIcon, MessageSquare, Users } from 'lucide-react';

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

  return (
    <Surface 
      as="section" 
      variant="discord" 
      padding={4} 
      position="relative"
      py={{ base: 4, md: 12, lg: 16 }}
    >
      <Box maxWidth="896px" mx="auto" px={2}>
        <Surface
          variant="discord-inner"
          padding={3}
          border
          rounded="xl"
          position="relative"
          shadow="discord"
        >
          {/* Discord brand accent */}
          <Box 
            position="absolute" 
            top={0} 
            left={0} 
            right={0} 
            height="1" 
            backgroundColor="[#5865F2]"
            opacity={0.6}
            className="bg-gradient-to-r from-transparent via-[#5865F2]/60 to-transparent" 
          />
          
          <Stack align="center" gap={6} center>
            {/* Header */}
            <Stack align="center" gap={4}>
              <Box
                display="flex"
                center
                rounded="full"
                w={{ base: "10", md: "14", lg: "18" }}
                h={{ base: "10", md: "14", lg: "18" }}
                backgroundColor="[#5865F2]"
                opacity={0.2}
                border
                borderColor="[#5865F2]"
              >
                <DiscordIcon color="text-[#5865F2]" size={32} />
              </Box>
              
              <Stack gap={2}>
                <Text as="h2" size="2xl" weight="semibold" color="text-white">
                  Join us on Discord
                </Text>
                <Box 
                  mx="auto" 
                  rounded="full" 
                  w={{ base: "16", md: "24", lg: "32" }}
                  h={{ base: "0.5", md: "1" }}
                  backgroundColor="[#5865F2]"
                  className="bg-gradient-to-r from-[#5865F2] to-[#7289DA]" 
                />
              </Stack>
            </Stack>

            {/* Personal message */}
            <Box maxWidth="672px" mx="auto">
              <Stack gap={3}>
                <Text size="sm" color="text-gray-300" weight="normal" leading="relaxed">
                  GridPilot is a <Text weight="bold" color="text-white">solo developer project</Text>, and I'm building it because I got tired of the chaos in league racing.
                </Text>
                <Text size="sm" color="text-gray-400" weight="normal" leading="relaxed">
                  This is <Text weight="bold" color="text-gray-300">early days</Text>, and I need your help. Join the Discord to:
                </Text>
              </Stack>
            </Box>

            {/* Benefits grid */}
            <Box 
              maxWidth="2xl" 
              mx="auto" 
              mt={4}
            >
              <Grid cols={2} gap={3} className="md:grid-cols-2">
                <BenefitItem 
                  icon={MessageSquare} 
                  title="Share your pain points" 
                  description="Tell me what frustrates you about league racing today" 
                />
                <BenefitItem 
                  icon={Lightbulb} 
                  title="Shape the product" 
                  description="Your ideas will directly influence what gets built" 
                />
                <BenefitItem 
                  icon={Users} 
                  title="Be part of the community" 
                  description="Connect with other league racers who get it" 
                />
                <BenefitItem 
                  icon={Code} 
                  title="Get early access" 
                  description="Test features first and help iron out the rough edges" 
                />
              </Grid>
            </Box>

            {/* CTA Button */}
            <Stack gap={3} pt={4}>
              <Button
                as="a"
                href={discordUrl}
                target="_blank"
                rel="noopener noreferrer"
                variant="discord"
                size="lg"
                icon={<DiscordIcon size={28} />}
              >
                Join us on Discord
              </Button>
              
              <Text size="xs" color="text-primary-blue" weight="light">
                💡 Get a link to our early alpha view in the Discord
              </Text>
              
              {!process.env.NEXT_PUBLIC_DISCORD_URL && (
                <Text size="xs" color="text-gray-500">
                  Note: Configure NEXT_PUBLIC_DISCORD_URL in your environment variables
                </Text>
              )}
            </Stack>

            {/* Footer note */}
            <Box maxWidth="xl" mx="auto" pt={4}>
              <Text size="xs" color="text-gray-500" weight="light" leading="relaxed" align="center" block>
                This is a community effort. Every voice matters. Let's build something that actually works for league racing.
              </Text>
            </Box>
          </Stack>
        </Surface>
      </Box>
    </Surface>
  );
}

function BenefitItem({ icon, title, description }: { icon: LucideIcon, title: string, description: string }) {
  return (
    <Surface 
      variant="muted" 
      border 
      padding={3} 
      rounded="lg" 
      display="flex"
      gap={3}
      className="items-start hover:border-[#5865F2]/30 transition-all"
    >
      <Box
        display="flex"
        center
        rounded="lg"
        flexShrink={0}
        w="6"
        h="6"
        backgroundColor="[#5865F2]"
        opacity={0.2}
        border
        borderColor="[#5865F2]"
        mt={0.5}
      >
        <Icon icon={icon} size={4} color="text-[#5865F2]" />
      </Box>
      <Stack gap={0.5}>
        <Text size="xs" weight="medium" color="text-white">{title}</Text>
        <Text size="xs" color="text-gray-400" leading="relaxed">{description}</Text>
      </Stack>
    </Surface>
  );
}

import { Grid } from '@/ui/Grid';