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

const changingTexts = ["Strategy", "Innovation", "Growth", "Transformation", "Impact"];

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

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentText((prevText) => {
        const currentIndex = changingTexts.indexOf(prevText);
        return changingTexts[(currentIndex + 1) % changingTexts.length];
      });
    }, 1000);

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

  return (
    <Box sx={{ minHeight: "100vh", width: "100%", display: "flex", alignItems: "center", justifyContent: "center", bgcolor: "#16110f", color: "white", p: 4 }}>
      <Grid container spacing={4} alignItems="center" justifyContent="space-between">

        {/* Left Side */}
        <Grid item xs={12} md={5}>
          <Typography variant="h1" fontWeight="bold">Let's Talk</Typography>
          <Typography variant="h1" fontWeight="bold" color="orange" sx={{ transition: "all 0.5s ease-in-out" }}>
            {currentText}
          </Typography>
          <Typography variant="h6" mt={2}>
            Let's discuss your project at <span style={{ color: "orange" }}>ideas@digitallatte.in</span>
          </Typography>

          {/* Social Media Icons */}
          <Box sx={{ display: "flex", gap: 2, mt: 3 }}>
            <IconButton sx={{ color: "white" }}><Facebook /></IconButton>
            <IconButton sx={{ color: "white" }}><Twitter /></IconButton>
            <IconButton sx={{ color: "white" }}><LinkedIn /></IconButton>
            <IconButton sx={{ color: "white" }}><Instagram /></IconButton>
          </Box>
        </Grid>

        {/* Right Side - Contact Form */}
        <Grid item xs={12} md={6}>
          <Box component="form" sx={{ bgcolor: "#16110f", p: 4, borderRadius: 2 }}>

            <TextField
              fullWidth
              variant="standard"
              placeholder="Name*"
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <Person sx={{ color: "orange" }} />
                  </InputAdornment>
                ),
              }}
              sx={{ mb: 4, input: { color: "orange" }, "& .MuiInput-underline:before": { borderBottomColor: "white" }, "& .MuiInput-underline:after": { borderBottomColor: "white" } }}
            />

            <Box sx={{ display: "flex", gap: 2, alignItems: "center" }}>
              <TextField
                sx={{ flex: 1, input: { color: "orange" }, "& .MuiInput-underline:before": { borderBottomColor: "white" }, "& .MuiInput-underline:after": { borderBottomColor: "white" } }}
                variant="standard"
                placeholder="Contact*"
                InputProps={{
                  startAdornment: (
                    <InputAdornment position="start">
                      <Phone sx={{ color: "orange" }} />
                    </InputAdornment>
                  ),
                }}
              />

              <TextField
                sx={{ flex: 1, input: { color: "orange" }, "& .MuiInput-underline:before": { borderBottomColor: "white" }, "& .MuiInput-underline:after": { borderBottomColor: "white" } }}
                variant="standard"
                placeholder="Email*"
                InputProps={{
                  startAdornment: (
                    <InputAdornment position="start">
                      <Email sx={{ color: "orange" }} />
                    </InputAdornment>
                  ),
                }}
              />
            </Box>

            <TextField
              fullWidth
              variant="standard"
              placeholder="Message*"
              multiline
              rows={4}
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <Chat sx={{ color: "orange" }} />
                  </InputAdornment>
                ),
              }}
              sx={{ mb: 3, input: { color: "orange" }, "& .MuiInput-underline:before": { borderBottomColor: "white" }, "& .MuiInput-underline:after": { borderBottomColor: "white" } }}
            />

            <Button variant="contained" sx={{ bgcolor: "orange", color: "black", fontWeight: "bold", borderRadius: "20px", py: 1.5 }}>
              SEND MESSAGE
            </Button>
          </Box>
        </Grid>
      </Grid>
    </Box>
  );
};

export default ContactForm;
