import {
  Box,
  Button,
  FormControl,
  FormHelperText,
  FormLabel,
  Heading,
  Input,
  SimpleGrid,
  Textarea,
} from "@chakra-ui/react";
import React from "react";
import HeroHeader from "../Components/HeroHeader";

const Contact = () => {
  return (
    <Box>
      <HeroHeader
        title="Contact Us"
        content="Fill out the form below and we will get back to you soon."
      />
      <Box w={"100%"} h={"100%"} p={36} pt={16} pb={20}>
        <Box p={14} borderRadius={'5px'}
          boxShadow={
            "rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;"
          }
        >
          <Heading fontSize={"26px"} textAlign={"center"} mb={"3rem"}>
            Send as a Message
          </Heading>
          <form>
            <SimpleGrid columns={2} spacingX="40px" spacingY="20px">
              <FormControl>
                <FormLabel
                  color={"#404040"}
                  fontSize={"16px"}
                  fontWeight={"400"}
                >
                  First Name *
                </FormLabel>
                <Input focusBorderColor="#002F0F" type="email" />
              </FormControl>
              <FormControl>
                <FormLabel
                  color={"#404040"}
                  fontSize={"16px"}
                  fontWeight={"400"}
                >
                  Last Name *
                </FormLabel>
                <Input focusBorderColor="#002F0F" type="email" />
              </FormControl>
              <FormControl>
                <FormLabel
                  color={"#404040"}
                  fontSize={"16px"}
                  fontWeight={"400"}
                >
                  E-mail Address *
                </FormLabel>
                <Input focusBorderColor="#002F0F" type="email" />
              </FormControl>
              <FormControl>
                <FormLabel
                  color={"#404040"}
                  fontSize={"16px"}
                  fontWeight={"400"}
                >
                  Phone Number *
                </FormLabel>
                <Input focusBorderColor="#002F0F" type="email" />
              </FormControl>
            </SimpleGrid>
            <FormControl w={"100%"} mt={"20px"}>
              <FormLabel color={"#404040"} fontSize={"18px"} fontWeight={"400"}>
                Message *
              </FormLabel>
              <Textarea
                focusBorderColor="#002F0F"
                h={"180px"}
                resize={"none"}
              />
            </FormControl>
            <Box textAlign={"center"}>
              <Button
                backgroundColor={"#002F0F"}
                color={"#fff"}
                ps={"5rem"}
                pe={"5rem"}
                pb={1}
                rounded={"xl"}
                mt={"40px"}
                size={"lg"}
                fontSize={"md"}
                _hover={{
                  backgroundColor: "#002F0F",
                  transform: "translateY(-6px)",
                }} // Ensuring hover background color remains the same
                transition={"0.5s all"}
              >
                Submit
              </Button>
            </Box>
          </form>
        </Box>
      </Box>
    </Box>
  );
};

export default Contact;