import React from "react";
import { Link } from "react-router-dom";
import Bounce from "react-reveal/Bounce";
import Flip from "react-reveal/Flip";
import Fade from "react-reveal/Fade";
import Reviews from "../../comp/Comp/Review";
import Faq from "../../comp/Comp/Faq";

import {
	Text,
	Box,
	useColorModeValue,
	useMediaQuery,
	Image,
	Flex,
	Button,
} from "@chakra-ui/react";
import Typewriter from "typewriter-effect";

function Home(props) {
	const textColor = useColorModeValue("gray.700", "gray.100");
	const [check] = useMediaQuery("(min-width: 1025px)");

	return (
		<>
			<div>
				<Box ml='5%'>
					<Bounce top>
						<Text
							align='center'
							color={textColor}
							fontSize={check ? "5xl" : "3xl"}
							fontWeight='extrabold'
							mt={check ? "0%" : "4%"}>
							Functional Forms Solution for
						</Text>
						<Text
							align='center'
							bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
							bgClip='text'
							fontSize={check ? "7xl" : "4xl"}
							fontWeight='extrabold'
							mt={check ? "0%" : "4%"}>
							<Typewriter
								options={{
									strings: [
										"React ",
										"Flutter ",
										"Html ",
										"React Native",
										"Vue",
										"Angular",
									],
									autoStart: true,
									loop: true,
								}}
							/>
						</Text>
					</Bounce>
					<Flip top>
						<Box
							bgColor='#333'
							ml={check ? "20%" : "5%"}
							mt={check ? "8%" : "12%"}
							width={check ? "60%" : "90%"}
							borderRadius='25'>
							<Text color='#fff' padding='5%'>
								<Typewriter
									options={{
										strings: [
											`<form action="https://server.meowform.xyz/YourEmail&FormName method="post"`,
										],
										autoStart: true,
										loop: true,
									}}
								/>
							</Text>
						</Box>
						<Flex flexDirection='row' ml={check ? "40%" : "23%"}>
							<Box margin='1%'>
								<a
									rel='noreferrer'
									href='https://docs.meowform.xyz/docs/intro'
									target='_blank'>
									<Button margin='1%'> View docs</Button>
								</a>
							</Box>
							<Box margin='1%'>
								<Link to='/dashboard'>
									<Button colorScheme='orange'>
										{" "}
										Try it
									</Button>
								</Link>
							</Box>
						</Flex>
					</Flip>
					<Image
						lazyLoad={true}
						position={check ? "absolute" : "static"}
						src='https://res.cloudinary.com/dd0mtkqbr/image/upload/v1629015408/kitekat_ezvxgy.png'
						width={check ? "24%" : "40%"}
						height={check ? "8%" : "80%"}
						mt={check ? "-20%" : "5%"}
						ml={check ? "-15%" : "28%"}
						transform={check ? "rotate(60deg)" : ""}
						opacity={check ? "0.9" : "1"}></Image>
				</Box>
				<Box></Box>

				<Box mt='10%'>.</Box>
			</div>

			<div ml='25%' mt='10%'>
				.
			</div>

			<Box ml='10%' mt='5%'>
				<Flex flexDirection={check ? "row" : "column-reverse"}>
					<Image
						src='https://res.cloudinary.com/dd0mtkqbr/image/upload/v1629017773/kitekat-19_1_nsknib.png'
						width='40%'
						height='30%'
						ml={check ? "0%" : "25%"}
					/>
					<Fade right>
						<Text
							align='center'
							color={textColor}
							fontSize={check ? "5xl" : "3xl"}
							fontWeight='extrabold'
							mt={check ? "7%" : "4%"}
							ml={check ? "" : "-5%"}>
							Make backend-less forms with MeowForm and get
							<Text
								bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
								bgClip='text'>
								Unlimited Responses{" "}
							</Text>{" "}
							in your inbox .
						</Text>
					</Fade>
				</Flex>
				<Flex flexDirection={check ? "row" : "column"} mt='5%'>
					<Fade left>
						<Text
							align='center'
							color={textColor}
							fontSize={check ? "5xl" : "3xl"}
							fontWeight='extrabold'
							mt={check ? "7%" : "4%"}
							ml={check ? "" : "-5%"}>
							Choose your fontend , Use our API to handle things
							for
							<Text
								bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
								bgClip='text'>
								{" "}
								Free{" "}
							</Text>
						</Text>
					</Fade>
					<Image
						src='https://res.cloudinary.com/dd0mtkqbr/image/upload/v1629029065/kitekat-8_ein5pc.png'
						width='40%'
						height='30%'
						ml={check ? "0%" : "25%"}
					/>
				</Flex>
				<Flex flexDirection={check ? "row-reverse" : "column"} mt='5%'>
					<Fade right>
						<Text
							align='center'
							color={textColor}
							fontSize={check ? "5xl" : "3xl"}
							fontWeight='extrabold'
							mt={check ? "7%" : "4%"}
							ml={check ? "" : "-5%"}>
							Missed a response ? don't worry view all responses
							in out dashboard
							<Text
								bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
								bgClip='text'>
								{" "}
							</Text>
						</Text>
					</Fade>
					<Image
						src='https://res.cloudinary.com/dd0mtkqbr/image/upload/v1630156150/kitekat-2_kzxgrr.png'
						width='40%'
						height='30%'
						ml={check ? "0%" : "25%"}
					/>
				</Flex>
			</Box>
			<Box margin='10%'></Box>
			<Box
				margin={check ? "5%" : "1%"}
				padding={check ? "5%" : "1%"}
				alignContent='center'
				align='center'>
				<Flip top>
					<iframe
						title='demo video'
						width={check ? "640" : "300"}
						height={check ? "360" : "200"}
						align='center'
						src='https://www.loom.com/embed/c8cdc167f9b0405ca37e0b8a6f7ffe13'
						frameborder='0'
						webkitallowfullscreen
						mozallowfullscreen
						allowfullscreen='true'></iframe>
				</Flip>
				<h1 margin='15%'> Meow Form in action</h1>
			</Box>
			<div className="Reviews">
				{/* <Reviews /> */}
			</div>
			<div className="faq">
				<Faq />
			</div>
		</>
	);
}

export default Home;