import React from 'react';
import { Section } from './Section';
import { Container } from './Container';
import { Card } from './Card';
import { Box } from './Box';
import { Glow } from './Glow';
import { Heading } from './Heading';
import { Text } from './Text';
import { Button } from './Button';
import { DiscordIcon } from './icons/DiscordIcon';
import { Icon } from './Icon';
import { LucideIcon } from 'lucide-react';

interface DiscordCTAProps {
  title: string;
  description: string;
  lead: string;
  benefits: Array<{
    icon: LucideIcon;
    title: string;
    description: string;
  }>;
  discordUrl: string;
}

/**
 * DiscordCTA - A semantic UI component for the Discord call to action.
 */
export function DiscordCTA({
  title,
  description,
  lead,
  benefits,
  discordUrl,
}: DiscordCTAProps) {
  return (
    <Section variant="dark" padding="lg">
      <Glow color="primary" size="xl" position="center" opacity={0.05} />
      
      <Container>
        <Card variant="outline">
          <Box display="flex" flexDirection="col" alignItems="center" gap={12} padding={8}>
            {/* Header */}
            <Box display="flex" flexDirection="col" alignItems="center" gap={6}>
              <DiscordIcon size={40} />
              <Heading level={2} weight="bold" align="center">
                {title}
              </Heading>
            </Box>

            {/* Personal message */}
            <Box display="flex" flexDirection="col" alignItems="center" gap={6} maxWidth="2xl">
              <Text size="lg" variant="high" weight="medium" align="center">
                {lead}
              </Text>
              <Text size="base" variant="low" align="center">
                {description}
              </Text>
            </Box>

            {/* Benefits grid */}
            <Box display="grid" gridCols={{ base: 1, md: 2 }} gap={6} fullWidth>
              {benefits.map((benefit, index) => (
                <Card key={index} variant="dark">
                  <Box display="flex" flexDirection="col" gap={5} padding={6}>
                    <Icon icon={benefit.icon} size={5} intent="primary" />
                    <Box display="flex" flexDirection="col" gap={2}>
                      <Text size="base" weight="bold" variant="high">{benefit.title}</Text>
                      <Text size="sm" variant="low">{benefit.description}</Text>
                    </Box>
                  </Box>
                </Card>
              ))}
            </Box>

            {/* CTA Button */}
            <Box display="flex" flexDirection="col" alignItems="center" gap={6}>
              <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 letterSpacing="widest">
                Early Alpha Access Available
              </Text>
            </Box>
          </Box>
        </Card>
      </Container>
    </Section>
  );
}