import React from 'react';
import {
  Paper,
  Box,
  Container,
  Grid,
  Typography,
  Link,
  Divider,
  IconButton,
  Stack,
  useMediaQuery,
} from '@mui/material';
import { styled, useTheme } from '@mui/material/styles';
import {
  Facebook,
  Twitter,
  LinkedIn,
  Instagram,
  YouTube,
  Email,
  LocationOn,
  Copyright,
} from '@mui/icons-material';

// Styled components
const FooterContainer = styled(Paper)(({ theme }) => ({
  backgroundColor: theme.palette.primary.main,
  color: theme.palette.primary.contrastText,
  padding: theme.spacing(6, 0, 4),
  marginTop: theme.spacing(4),
  borderRadius: 0,
}));

const FooterLink = styled(Link)(({ theme }) => ({
  color: theme.palette.primary.contrastText,
  textDecoration: 'none',
  '&:hover': {
    textDecoration: 'underline',
    color: theme.palette.action.active,
  },
  display: 'block',
  marginBottom: theme.spacing(1),
}));

const FooterHeading = styled(Typography)(({ theme }) => ({
  fontWeight: 600,
  marginBottom: theme.spacing(2),
  color: theme.palette.primary.contrastText,
}));

const ContactItem = styled(Box)(({ theme }) => ({
  display: 'flex',
  alignItems: 'center',
  marginBottom: theme.spacing(1.5),
}));

// Footer component
const Footer = () => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
  const currentYear = new Date().getFullYear();

  return (
    <FooterContainer elevation={0}>
      <Container maxWidth="lg">
        <Grid container spacing={4} justifyContent="space-between">
          {/* About Company */}
          <Grid size={{ xs: 12, md: 3 }}>
            <Box mb={3}>
              <Typography
                variant="h6"
                component="div"
                sx={{
                  fontWeight: 700,
                  letterSpacing: '.2rem',
                  marginBottom: 2,
                }}
              >
                BACKSTORY
              </Typography>
              <Typography variant="body2" sx={{ mb: 2 }}>
                Helping candidates share their professional journey and connect with the right employers through compelling backstories.
              </Typography>
              <Stack direction="row">
                <IconButton
                  size="small"
                  aria-label="Facebook"
                  sx={{
                    color: theme.palette.primary.contrastText,
                    mr: 1,
                    '&:hover': {
                      backgroundColor: 'rgba(211, 205, 191, 0.1)',
                      color: theme.palette.action.active,
                    }
                  }}
                  onClick={() => window.open('https://facebook.com/', '_blank')}
                >
                  <Facebook />
                </IconButton>
                <IconButton
                  size="small"
                  aria-label="Twitter"
                  sx={{
                    color: theme.palette.primary.contrastText,
                    mr: 1,
                    '&:hover': {
                      backgroundColor: 'rgba(211, 205, 191, 0.1)',
                      color: theme.palette.action.active,
                    }
                  }}
                  onClick={() => window.open('https://twitter.com/', '_blank')}
                >
                  <Twitter />
                </IconButton>
                <IconButton
                  size="small"
                  aria-label="LinkedIn"
                  sx={{
                    color: theme.palette.primary.contrastText,
                    mr: 1,
                    '&:hover': {
                      backgroundColor: 'rgba(211, 205, 191, 0.1)',
                      color: theme.palette.action.active,
                    }
                  }}
                  onClick={() => window.open('https://linkedin.com/', '_blank')}
                >
                  <LinkedIn />
                </IconButton>
                <IconButton
                  size="small"
                  aria-label="Instagram"
                  sx={{
                    color: theme.palette.primary.contrastText,
                    mr: 1,
                    '&:hover': {
                      backgroundColor: 'rgba(211, 205, 191, 0.1)',
                      color: theme.palette.action.active,
                    }
                  }}
                  onClick={() => window.open('https://instagram.com/', '_blank')}
                >
                  <Instagram />
                </IconButton>
                <IconButton
                  size="small"
                  aria-label="YouTube"
                  sx={{
                    color: theme.palette.primary.contrastText,
                    mr: 1,
                    '&:hover': {
                      backgroundColor: 'rgba(211, 205, 191, 0.1)',
                      color: theme.palette.action.active,
                    }
                  }}
                  onClick={() => window.open('https://youtube.com/', '_blank')}
                >
                  <YouTube />
                </IconButton>
              </Stack>
            </Box>
          </Grid>

          {/* Quick Links */}
          <Grid size={{ xs: 12, sm: 6, md: 2 }}>
            <FooterHeading variant="subtitle1">
              For Candidates
            </FooterHeading>
            <FooterLink href="/create-profile">Create Profile</FooterLink>
            <FooterLink href="/backstory-editor">Backstory Editor</FooterLink>
            <FooterLink href="/resume-builder">Resume Builder</FooterLink>
            <FooterLink href="/career-resources">Career Resources</FooterLink>
            <FooterLink href="/interview-tips">Interview Tips</FooterLink>
          </Grid>

          {/* Quick Links */}
          <Grid size={{ xs: 12, sm: 6, md: 2 }}>
            <FooterHeading variant="subtitle1">
              For Employers
            </FooterHeading>
            <FooterLink href="/post-job">Post a Job</FooterLink>
            <FooterLink href="/search-candidates">Search Candidates</FooterLink>
            <FooterLink href="/company-profile">Company Profile</FooterLink>
            <FooterLink href="/recruiting-tools">Recruiting Tools</FooterLink>
            <FooterLink href="/pricing-plans">Pricing Plans</FooterLink>
          </Grid>

          {/* Contact */}
          <Grid size={{ xs: 12, sm: 6, md: 2 }}>
            <FooterHeading variant="subtitle1">
              Company
            </FooterHeading>
            <FooterLink href="/about-us">About Us</FooterLink>
            <FooterLink href="/our-team">Our Team</FooterLink>
            <FooterLink href="/blog">Blog</FooterLink>
            <FooterLink href="/press">Press</FooterLink>
            <FooterLink href="/careers">Careers</FooterLink>
            <FooterLink href="/contact-us">Contact Us</FooterLink>
          </Grid>

          {/* Newsletter */}
          <Grid size={{ xs: 12, sm: 6, md: 3 }}>
            <ContactItem>
              <Email sx={{ mr: 1, fontSize: 20 }} />
              <FooterLink href="mailto:james_backstory@backstory.ketrenos.com">Email</FooterLink>
            </ContactItem>
            {/* <ContactItem>
              <Phone sx={{ mr: 1, fontSize: 20 }} />
              <FooterLink href="tel:+18005551234">+1 (800) 555-1234</FooterLink>
            </ContactItem> */}
            <ContactItem>
              <LocationOn sx={{ mr: 1, fontSize: 20 }} />
              <Typography variant="body2">
                Beaverton, OR 97003
              </Typography>
            </ContactItem>
          </Grid>
        </Grid>

        <Divider sx={{ my: 4, backgroundColor: 'rgba(211, 205, 191, 0.2)' }} />

        {/* Bottom Footer */}
        <Grid container spacing={2} alignItems="center">
          <Grid size={{ xs: 12, md: 6 }}>
            <Box display="flex" alignItems="center">
              <Copyright sx={{ fontSize: 16, mr: 1 }} />
              <Typography variant="body2">
                {currentYear} James P. Ketrenos. All rights reserved.
              </Typography>
            </Box>
          </Grid>
          <Grid size={{ xs: 12, md: 6 }}>
            <Stack
              direction={isMobile ? 'column' : 'row'}
              spacing={isMobile ? 1 : 3}
              sx={{ textAlign: { xs: 'left', md: 'right' } }}
            >
              <FooterLink href="/terms" sx={{ mb: 0 }}>Terms of Service</FooterLink>
              <FooterLink href="/privacy" sx={{ mb: 0 }}>Privacy Policy</FooterLink>
              <FooterLink href="/accessibility" sx={{ mb: 0 }}>Accessibility</FooterLink>
              <FooterLink href="/sitemap" sx={{ mb: 0 }}>Sitemap</FooterLink>
            </Stack>
          </Grid>
        </Grid>
      </Container>
    </FooterContainer>
  );
};

export {
   Footer
};