'use client';

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

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

  return (
    <Section variant="dark" py={32} borderBottom borderColor="border-gray/50" overflow="hidden" position="relative">
      <Glow color="primary" size="xl" position="center" opacity={0.05} />
      
      <Container>
        <Card position="relative" overflow="hidden" variant="outline" p={{ base: 8, md: 12 }} className="bg-panel-gray/40">
          {/* Discord brand accent */}
          <Stack position="absolute" top={0} left={0} right={0} h="1" bg="primary-accent">{null}</Stack>
          
          <Stack align="center" gap={12} center>
            {/* Header */}
            <Stack align="center" gap={6}>
              <Stack position="relative" align="center" justify="center" w={{ base: '16', md: '20' }} h={{ base: '16', md: '20' }} bg="primary-accent/10" border borderColor="primary-accent/30">
                <DiscordIcon color="text-primary-accent" size={40} />
                <Stack position="absolute" top="-1px" left="-1px" w="2" h="2" borderTop borderLeft borderColor="primary-accent">{null}</Stack>
                <Stack position="absolute" bottom="-1px" right="-1px" w="2" h="2" borderBottom borderRight borderColor="primary-accent">{null}</Stack>
              </Stack>
              
              <Stack gap={4} align="center">
                <Heading level={2} weight="bold" color="text-white" fontSize={{ base: '2xl', md: '4xl' }} letterSpacing="tight">
                  Join the Grid on Discord
                </Heading>
                <Stack w="16" h="1" bg="primary-accent">{null}</Stack>
              </Stack>
            </Stack>

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

            {/* Benefits grid */}
            <Stack 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>
            </Stack>

            {/* CTA Button */}
            <Stack gap={6} pt={4} align="center">
              <Button
                as="a"
                href={discordUrl}
                target="_blank"
                rel="noopener noreferrer"
                variant="primary"
                size="lg"
                px={16}
                py={4}
                h="auto"
                icon={<DiscordIcon size={24} />}
              >
                Join Discord
              </Button>
              
              <Stack 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>
              </Stack>
            </Stack>
          </Stack>
        </Card>
      </Container>
    </Section>
  );
}

function BenefitItem({ icon, title, description }: { icon: LucideIcon, title: string, description: string }) {
  return (
    <Stack direction="row" align="start" gap={5} p={6} bg="panel-gray/20" border borderColor="border-gray" className="transition-all hover:border-primary-accent/30 group">
      <Stack align="center" justify="center" flexShrink={0} w="10" h="10" bg="primary-accent/5" border borderColor="border-gray/50" className="transition-all group-hover:border-primary-accent/30">
        <Icon icon={icon} size={5} color="text-primary-accent" />
      </Stack>
      <Stack gap={2}>
        <Text size="base" weight="bold" color="text-white" letterSpacing="wide">{title}</Text>
        <Text size="sm" color="text-gray-400" leading="relaxed">{description}</Text>
      </Stack>
    </Stack>
  );
}