import React from 'react';
import {
  Box,
  Container,
  Typography,
  Link,
  IconButton,
} from '@mui/material';

import DirectionsCarIcon from '@mui/icons-material/DirectionsCar';
import SpeedIcon from '@mui/icons-material/Speed';
import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';

const Footer: React.FC = () => {
  const currentYear = new Date().getFullYear();

  return (
    <Box
      component="footer"
      sx={{
        backgroundColor: 'rgba(26, 26, 26, 0.95)',
        borderTop: '2px solid #ff6b35',
        py: 4,
        mt: 'auto',
      }}
    >
      <Container maxWidth="lg">
        <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', md: 'repeat(3, 1fr)' }, gap: 4 }}>
          {/* Logo et Description */}
          <Box>
            <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
              <DirectionsCarIcon sx={{ fontSize: 40, color: '#ff6b35', mr: 2 }} />
              <Typography
                variant="h5"
                sx={{
                  color: '#ffffff',
                  fontWeight: 700,
                  fontFamily: '"Orbitron", monospace',
                }}
              >
                INITIAL D
              </Typography>
            </Box>
            <Typography
              variant="body2"
              sx={{
                color: '#cccccc',
                lineHeight: 1.6,
                mb: 2,
              }}
            >
              Découvrez l'univers de la course automobile japonaise avec les meilleurs pilotes du monde.
              Affrontez les circuits légendaires et établissez de nouveaux records.
            </Typography>
          </Box>

          {/* Liens Rapides */}
          <Box>
            <Typography
              variant="h6"
              sx={{
                color: '#ff6b35',
                fontWeight: 600,
                mb: 3,
                textTransform: 'uppercase',
              }}
            >
              Liens Rapides
            </Typography>
            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
              <Link
                href="/"
                sx={{
                  color: '#cccccc',
                  textDecoration: 'none',
                  '&:hover': {
                    color: '#ff6b35',
                  },
                  transition: 'color 0.3s ease',
                }}
              >
                Accueil
              </Link>
              <Link
                href="/ranking"
                sx={{
                  color: '#cccccc',
                  textDecoration: 'none',
                  '&:hover': {
                    color: '#ff6b35',
                  },
                  transition: 'color 0.3s ease',
                }}
              >
                Classement
              </Link>
              <Link
                href="#"
                sx={{
                  color: '#cccccc',
                  textDecoration: 'none',
                  '&:hover': {
                    color: '#ff6b35',
                  },
                  transition: 'color 0.3s ease',
                }}
              >
                Circuits
              </Link>
              <Link
                href="#"
                sx={{
                  color: '#cccccc',
                  textDecoration: 'none',
                  '&:hover': {
                    color: '#ff6b35',
                  },
                  transition: 'color 0.3s ease',
                }}
              >
                Voitures
              </Link>
            </Box>
          </Box>

          {/* Statistiques */}
          <Box>
            <Typography
              variant="h6"
              sx={{
                color: '#ff6b35',
                fontWeight: 600,
                mb: 3,
                textTransform: 'uppercase',
              }}
            >
              Statistiques
            </Typography>
            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                <SpeedIcon sx={{ color: '#ff6b35', fontSize: 20 }} />
                <Typography variant="body2" sx={{ color: '#cccccc' }}>
                  1,234+ Joueurs Actifs
                </Typography>
              </Box>
              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                <EmojiEventsIcon sx={{ color: '#ff6b35', fontSize: 20 }} />
                <Typography variant="body2" sx={{ color: '#cccccc' }}>
                  8 Circuits Légendaires
                </Typography>
              </Box>
              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                <DirectionsCarIcon sx={{ color: '#ff6b35', fontSize: 20 }} />
                <Typography variant="body2" sx={{ color: '#cccccc' }}>
                  50+ Voitures Disponibles
                </Typography>
              </Box>
            </Box>
          </Box>
        </Box>

        {/* Ligne de s�paration */}
        <Box
          sx={{
            borderTop: '1px solid rgba(255, 107, 53, 0.3)',
            mt: 4,
            pt: 3,
          }}
        />

        {/* Copyright et Liens Sociaux */}
        <Box
          sx={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            flexWrap: 'wrap',
            gap: 2,
          }}
        >
          <Typography
            variant="body2"
            sx={{
              color: '#888888',
            }}
          >
            © {currentYear} Initial D Arcade Stage. Tous droits réservés.
          </Typography>

          <Box sx={{ display: 'flex', gap: 1 }}>
            <IconButton
              sx={{
                color: '#cccccc',
                '&:hover': {
                  color: '#ff6b35',
                  backgroundColor: 'rgba(255, 107, 53, 0.1)',
                },
              }}
            >
              <Typography variant="body2">SEGA</Typography>
            </IconButton>
            <IconButton
              sx={{
                color: '#cccccc',
                '&:hover': {
                  color: '#ff6b35',
                  backgroundColor: 'rgba(255, 107, 53, 0.1)',
                },
              }}
            >
              <Typography variant="body2">Support</Typography>
            </IconButton>
            <IconButton
              sx={{
                color: '#cccccc',
                '&:hover': {
                  color: '#ff6b35',
                  backgroundColor: 'rgba(255, 107, 53, 0.1)',
                },
              }}
            >
              <Typography variant="body2">Mentions Légales</Typography>
            </IconButton>
          </Box>
        </Box>
      </Container>
    </Box>
  );
};

export default Footer;