import React, { useState, useEffect } from "react";
import {
  TextField,
  Button,
  Box,
  Typography,
  Grid,
  InputAdornment,
  IconButton,
  Fade,
  Slide,
} from "@mui/material";
import {
  Person,
  Phone,
  Email,
  Chat,
  Facebook,
  Twitter,
  LinkedIn,
  Instagram,
} from "@mui/icons-material";
import { keyframes } from "@emotion/react";

const fadeIn = keyframes`
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
`;

const pulse = keyframes`
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
`;

const changingTexts = [
  "Design",
  "Comfort",
  "Quality",
  "Inspiration",
  "Your Space",
];

const ContactForm: React.FC = () => {
  const [currentText, setCurrentText] = useState<string>(changingTexts[0]);
  const [animate, setAnimate] = useState<boolean>(true);

  useEffect(() => {
    const interval = setInterval(() => {
      setAnimate(false);
      setTimeout(() => {
        setCurrentText((prevText) => {
          const currentIndex = changingTexts.indexOf(prevText);
          return changingTexts[(currentIndex + 1) % changingTexts.length];
        });
        setAnimate(true);
      }, 300);
    }, 2000);

    return () => clearInterval(interval);
  }, []);

  return (
    <Box
      sx={{
        minHeight: "100vh",
        width: "100%",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        bgcolor: "#f9f5f0", // Warm off-white background
        color: "#333",
        p: 4,
        position: "relative",
        overflow: "hidden",
      }}
    >
      {/* Decorative elements */}
      <Box
        sx={{
          position: "absolute",
          top: -100,
          right: -100,
          width: 400,
          height: 400,
          borderRadius: "50%",
          bgcolor: "rgba(255, 152, 0, 0.08)",
          zIndex: 0,
        }}
      />

      <Box
        sx={{
          position: "absolute",
          bottom: -150,
          left: -150,
          width: 500,
          height: 500,
          borderRadius: "50%",
          bgcolor: "rgba(255, 152, 0, 0.05)",
          zIndex: 0,
        }}
      />

      <Grid
        container
        spacing={6}
        alignItems="center"
        justifyContent="space-between"
        sx={{ position: "relative", zIndex: 1 }}
      >
        {/* Left Side */}
        <Grid item xs={12} md={6}>
          <Slide in={true} direction="right" timeout={800}>
            <Box>
              <Typography
                variant="h2"
                fontWeight="bold"
                sx={{
                  color: "#333",
                  mb: 2,
                  fontSize: { xs: "2.5rem", md: "3.5rem" },
                }}
              >
                Let's Create Something Beautiful
              </Typography>

              <Box sx={{ height: 80, display: "flex", alignItems: "center" }}>
                <Fade in={animate} timeout={500}>
                  <Typography
                    variant="h2"
                    fontWeight="bold"
                    sx={{
                      color: "#FF6D00",
                      fontSize: { xs: "2.5rem", md: "3.5rem" },
                      animation: `${fadeIn} 0.5s ease-out`,
                    }}
                  >
                    {currentText}
                  </Typography>
                </Fade>
              </Box>

              <Typography
                variant="h6"
                mt={3}
                sx={{
                  color: "#666",
                  lineHeight: 1.6,
                  maxWidth: 500,
                }}
              >
                Whether you're looking for custom furniture solutions or have
                questions about our products, our design team is ready to help
                bring your vision to life.
              </Typography>

              {/* Contact Info */}
              <Box sx={{ mt: 4 }}>
                <Typography
                  variant="body1"
                  sx={{
                    display: "flex",
                    alignItems: "center",
                    mb: 1.5,
                    color: "#555",
                  }}
                >
                  <Email sx={{ color: "#FF6D00", mr: 2 }} />{" "}
                  contact@furniturehaven.com
                </Typography>
                <Typography
                  variant="body1"
                  sx={{
                    display: "flex",
                    alignItems: "center",
                    color: "#555",
                  }}
                >
                  <Phone sx={{ color: "#FF6D00", mr: 2 }} /> (123) 456-7890
                </Typography>
              </Box>

              {/* Social Media Icons */}
              <Box sx={{ display: "flex", gap: 1, mt: 4 }}>
                {[Facebook, Twitter, LinkedIn, Instagram].map((Icon, index) => (
                  <Slide
                    key={index}
                    in={true}
                    direction="up"
                    timeout={800 + index * 100}
                  >
                    <IconButton
                      sx={{
                        color: "#888",
                        bgcolor: "rgba(255, 109, 0, 0.1)",
                        "&:hover": {
                          color: "#FF6D00",
                          bgcolor: "rgba(255, 109, 0, 0.2)",
                        },
                        transition: "all 0.3s",
                      }}
                    >
                      <Icon />
                    </IconButton>
                  </Slide>
                ))}
              </Box>
            </Box>
          </Slide>
        </Grid>

        {/* Right Side - Contact Form */}
        <Grid item xs={12} md={6}>
          <Slide in={true} direction="left" timeout={800}>
            <Box
              component="form"
              sx={{
                bgcolor: "white",
                p: { xs: 3, md: 4 },
                borderRadius: 2,
                boxShadow: "0 10px 30px rgba(0,0,0,0.05)",
                position: "relative",
                overflow: "hidden",
                "&:hover": {
                  boxShadow: "0 15px 35px rgba(0,0,0,0.1)",
                },
                transition: "all 0.3s ease",
              }}
            >
              {/* Decorative corner */}
              <Box
                sx={{
                  position: "absolute",
                  top: 0,
                  right: 0,
                  width: 0,
                  height: 0,
                  borderStyle: "solid",
                  borderWidth: "0 80px 80px 0",
                  borderColor: "transparent #FF6D00 transparent transparent",
                  zIndex: 1,
                }}
              />

              <Typography
                variant="h5"
                fontWeight="bold"
                sx={{
                  mb: 4,
                  color: "#333",
                  position: "relative",
                  "&:after": {
                    content: '""',
                    position: "absolute",
                    bottom: -10,
                    left: 0,
                    width: 60,
                    height: 3,
                    bgcolor: "#FF6D00",
                  },
                }}
              >
                Get In Touch
              </Typography>

              <TextField
                fullWidth
                variant="outlined"
                placeholder="Your Name"
                InputProps={{
                  startAdornment: (
                    <InputAdornment position="start">
                      <Person sx={{ color: "#FF6D00" }} />
                    </InputAdornment>
                  ),
                }}
                sx={{
                  mb: 3,
                  "& .MuiOutlinedInput-root": {
                    "& fieldset": {
                      borderColor: "#ddd",
                    },
                    "&:hover fieldset": {
                      borderColor: "#FF6D00",
                    },
                    "&.Mui-focused fieldset": {
                      borderColor: "#FF6D00",
                    },
                  },
                }}
              />

              <Grid container spacing={2} sx={{ mb: 3 }}>
                <Grid item xs={12} sm={6}>
                  <TextField
                    fullWidth
                    variant="outlined"
                    placeholder="Phone Number"
                    InputProps={{
                      startAdornment: (
                        <InputAdornment position="start">
                          <Phone sx={{ color: "#FF6D00" }} />
                        </InputAdornment>
                      ),
                    }}
                    sx={{
                      "& .MuiOutlinedInput-root": {
                        "& fieldset": {
                          borderColor: "#ddd",
                        },
                        "&:hover fieldset": {
                          borderColor: "#FF6D00",
                        },
                        "&.Mui-focused fieldset": {
                          borderColor: "#FF6D00",
                        },
                      },
                    }}
                  />
                </Grid>
                <Grid item xs={12} sm={6}>
                  <TextField
                    fullWidth
                    variant="outlined"
                    placeholder="Email Address"
                    InputProps={{
                      startAdornment: (
                        <InputAdornment position="start">
                          <Email sx={{ color: "#FF6D00" }} />
                        </InputAdornment>
                      ),
                    }}
                    sx={{
                      "& .MuiOutlinedInput-root": {
                        "& fieldset": {
                          borderColor: "#ddd",
                        },
                        "&:hover fieldset": {
                          borderColor: "#FF6D00",
                        },
                        "&.Mui-focused fieldset": {
                          borderColor: "#FF6D00",
                        },
                      },
                    }}
                  />
                </Grid>
              </Grid>

              <TextField
                fullWidth
                variant="outlined"
                placeholder="How can we help you?"
                multiline
                rows={4}
                InputProps={{
                  startAdornment: (
                    <InputAdornment
                      position="start"
                      sx={{ alignSelf: "flex-start", mt: 1 }}
                    >
                      <Chat sx={{ color: "#FF6D00" }} />
                    </InputAdornment>
                  ),
                }}
                sx={{
                  mb: 4,
                  "& .MuiOutlinedInput-root": {
                    "& fieldset": {
                      borderColor: "#ddd",
                    },
                    "&:hover fieldset": {
                      borderColor: "#FF6D00",
                    },
                    "&.Mui-focused fieldset": {
                      borderColor: "#FF6D00",
                    },
                  },
                }}
              />

              <Button
                variant="contained"
                fullWidth
                sx={{
                  bgcolor: "#FF6D00",
                  color: "white",
                  fontWeight: "bold",
                  borderRadius: 1,
                  py: 1.5,
                  fontSize: "1rem",
                  textTransform: "none",
                  "&:hover": {
                    bgcolor: "#E65100",
                    animation: `${pulse} 1s infinite`,
                  },
                }}
              >
                Send Message
              </Button>
            </Box>
          </Slide>
        </Grid>
      </Grid>
    </Box>
  );
};

export default ContactForm;
