import { Box, Container, Divider, HStack, Link, SimpleGrid, Stack, Text } from '@chakra-ui/react'
import { Link as RouterLink } from 'react-router-dom'

export function Footer() {
  return (
    <Box as="footer" borderTopWidth="1px" mt={20} bg="chakra-subtle-bg">
      <Container maxW="container.lg" py={12}>
        <SimpleGrid columns={{ base: 1, md: 4 }} spacing={8}>
          <Stack spacing={3}>
            <Text fontWeight="bold" fontSize="lg">
              Omnex
            </Text>
            <Text fontSize="sm" color="gray.500">
              Plateforme de gestion de commandes & livraison, déployable en démo isolée en un clic.
            </Text>
          </Stack>

          <FooterCol title="Produit">
            <FooterLink to="/">Présentation</FooterLink>
            <FooterLink to="/tarifs">Tarifs</FooterLink>
            <FooterLink to="/register">Créer un compte</FooterLink>
          </FooterCol>

          <FooterCol title="Ressources">
            <FooterLink to="/documentation">Documentation</FooterLink>
            <FooterExt href="#">Statut</FooterExt>
            <FooterExt href="#">Sécurité</FooterExt>
          </FooterCol>

        </SimpleGrid>

        <Divider my={8} />

        <HStack justify="space-between" flexWrap="wrap" spacing={4}>
          <Text fontSize="sm" color="gray.500">
            © {new Date().getFullYear()} Omnex. Tous droits réservés.
          </Text>
          <HStack spacing={6} fontSize="sm" color="gray.500">
            <FooterExt href="#">Mentions légales</FooterExt>
            <FooterExt href="#">Confidentialité</FooterExt>
          </HStack>
        </HStack>
      </Container>
    </Box>
  )
}

function FooterCol({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <Stack spacing={2}>
      <Text fontWeight="semibold" fontSize="sm" textTransform="uppercase" color="gray.500">
        {title}
      </Text>
      {children}
    </Stack>
  )
}

function FooterLink({ to, children }: { to: string; children: React.ReactNode }) {
  return (
    <Link as={RouterLink} to={to} fontSize="sm" color="gray.600" _hover={{ color: 'primary.500' }}>
      {children}
    </Link>
  )
}

function FooterExt({ href, children }: { href: string; children: React.ReactNode }) {
  return (
    <Link href={href} fontSize="sm" color="gray.600" _hover={{ color: 'primary.500' }}>
      {children}
    </Link>
  )
}