import React from 'react';
import {
  Box, Container, Grid, Typography, Link, Divider, Stack, useMediaQuery, useTheme
} from '@mui/material';
import {
  Instagram, YouTube, Facebook, LinkedIn
} from '@mui/icons-material';
import { motion } from 'framer-motion';

export default function Footer() {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

  return (
    <Box sx={{ backgroundColor: '#0F111A', color: '#fff', pt: 6, pb: 2 }}>
      <Container maxWidth="lg">
        <motion.div
          initial={{ opacity: 0, y: 10 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
        >
          <Grid container spacing={4}>
            {/* Column 1: Explore Links */}
            <Grid item xs={12} sm={6} md={3}>
              <Stack spacing={1}>
                <Link href="#" color="inherit" underline="hover">About Us</Link>
                <Link href="#" color="inherit" underline="hover">Portfolio</Link>
                <Link href="#" color="inherit" underline="hover">Blogs</Link>
                <Link href="#" color="inherit" underline="hover">Services</Link>
              </Stack>
            </Grid>

            {/* Column 2: Support Links */}
            <Grid item xs={12} sm={6} md={3}>
              <Stack spacing={1}>
                <Link href="#" color="inherit" underline="hover">FAQ’s</Link>
                <Link href="#" color="inherit" underline="hover">Terms & Conditions</Link>
                <Link href="#" color="inherit" underline="hover">Privacy Policy</Link>
              </Stack>
            </Grid>

            {/* Column 3: Logo (only visible on md+) */}
            {!isMobile && (
              <Grid item xs={12} sm={6} md={3}>
                <Box sx={{ display: 'flex', justifyContent: { sm: 'center', md: 'flex-end' }, mb: 2 }}>
                  <img
                    src="/logo.png" // Replace with actual logo
                    alt="Quadra Edge"
                    style={{ maxWidth: '180px', height: 'auto' }}
                  />
                </Box>
              </Grid>
            )}

            {/* Column 4: Contact Info + Socials */}
            <Grid item xs={12} sm={6} md={3}>
              {/* Mobile: show logo here instead */}
              {isMobile && (
                <Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 2 }}>
                  <img
                    src="/logo.png" // Replace with actual logo
                    alt="Quadra Edge"
                    style={{ maxWidth: '180px', height: 'auto' }}
                  />
                </Box>
              )}

              <Typography fontWeight={600} gutterBottom>Contact Us</Typography>
              <Typography variant="body2" mb={1}>Number</Typography>
              <Typography variant="body2">Address</Typography>

              <Stack
                direction="row"
                spacing={2}
                sx={{ mt: 2 }}
              >
                <Link href="#"><Instagram sx={{ color: '#00E0FF' }} /></Link>
                <Link href="#"><YouTube sx={{ color: '#00E0FF' }} /></Link>
                <Link href="#"><Facebook sx={{ color: '#00E0FF' }} /></Link>
                <Link href="#"><LinkedIn sx={{ color: '#00E0FF' }} /></Link>
              </Stack>
            </Grid>
          </Grid>

          <Divider sx={{ my: 4, borderColor: '#00E0FF' }} />

          <Box textAlign="center">
            <Typography variant="body2" sx={{ color: '#00E0FF' }}>
              Copyright © 2025 QuadraEdge
            </Typography>
          </Box>
        </motion.div>
      </Container>
    </Box>
  );
}