'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/Stack';
import { Grid } from '@/ui/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" padding="lg">
      <Glow color="primary" size="xl" position="center" opacity={0.05} />
      
      <Container>
        <Card variant="outline">
          <Stack align="center" gap={12}>
            {/* Header */}
            <Stack align="center" gap={6}>
              <DiscordIcon size={40} />
              
              <Stack gap={4} align="center">
                <Heading level={2} weight="bold" align="center">
                  Join the Grid on Discord
                </Heading>
              </Stack>
            </Stack>

            {/* Personal message */}
            <Stack align="center" gap={6}>
              <Text size="lg" variant="high" weight="medium" align="center">
                GridPilot is a <Text as="span" variant="high" weight="bold">solo developer project</Text> built for the community.
              </Text>
              <Text size="base" variant="low" align="center">
                We are in early alpha. Join us to help shape the future of motorsport infrastructure. Your feedback directly influences the roadmap.
              </Text>
            </Stack>

            {/* Benefits grid */}
            <Grid cols={{ base: 1, md: 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>

            {/* CTA Button */}
            <Stack gap={6} align="center">
              <Button
                as="a"
                href={discordUrl}
                target="_blank"
                rel="noopener noreferrer"
                variant="primary"
                size="lg"
                icon={<DiscordIcon size={24} />}
              >
                Join Discord
              </Button>
              
              <Text size="xs" variant="primary" weight="bold" font="mono" uppercase>
                Early Alpha Access Available
              </Text>
            </Stack>
          </Stack>
        </Card>
      </Container>
    </Section>
  );
}

function BenefitItem({ icon, title, description }: { icon: LucideIcon, title: string, description: string }) {
  return (
    <Card variant="dark">
      <Stack align="start" gap={5}>
        <Icon icon={icon} size={5} intent="primary" />
        <Stack gap={2}>
          <Text size="base" weight="bold" variant="high">{title}</Text>
          <Text size="sm" variant="low">{description}</Text>
        </Stack>
      </Stack>
    </Card>
  );
}
