import { Box, Button, Container, Grid, Typography } from "@mui/material";
import { motion } from "framer-motion";
import backgroundImg from "../hero/Frame 22.png";

export default function Hero() {
  return (
    <Box sx={{ backgroundColor: "#0F111A", color: "#fff", py: 10 }}>
      <Container maxWidth="lg">
        <motion.div
          initial={{ opacity: 0, y: -30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 1 }}
        >
          <Grid container spacing={4} alignItems="center">
            <Grid item xs={12} md={6}>
              <Box>
                <Typography
                  variant="h2"
                  fontWeight="bold"
                  gutterBottom
                  sx={{
                    fontSize: { xs: "2rem", sm: "2.8rem", md: "3.4rem" },
                    lineHeight: 1.2,
                  }}
                >
                  We Create <br />
                  Brands That Stick
                </Typography>

                {/* Sliding second line after 7s */}
                <motion.div
                  initial={{ opacity: 0, x: 50 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ delay: 7, duration: 1 }}
                >
                  <Typography
                    variant="h5"
                    sx={{
                      mt: 2,
                      fontWeight: 300,
                      color: "#00E0FF",
                      fontStyle: "italic",
                    }}
                  >
                    "Let your brand speak before you do."
                  </Typography>
                </motion.div>
              </Box>
            </Grid>

            <Grid item xs={12} md={6}>
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 1, duration: 1 }}
              >
                <Typography
                  variant="body1"
                  sx={{ maxWidth: "500px", fontSize: "1.1rem", color: "#ccc" }}
                >
                  We help founders grow through bold design, sharp strategy, and
                  smart marketing that drives recognition, engagement and
                  long-term brand loyalty.
                </Typography>
                <Button
                  variant="outlined"
                  sx={{
                    mt: 4,
                    borderColor: "#00E0FF",
                    color: "#00E0FF",
                    borderRadius: "24px",
                    px: 4,
                    py: 1.5,
                    textTransform: "none",
                    fontWeight: 600,
                    "&:hover": {
                      backgroundColor: "#00E0FF",
                      color: "#000",
                    },
                  }}
                >
                  Get in Touch
                </Button>
              </motion.div>
            </Grid>
          </Grid>
        </motion.div>
      </Container>

      <Box width="100%" mt={8}>
        <motion.img
          src={backgroundImg}
          alt="Hero Background"
          width="100%"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 1.5, duration: 1 }}
        />
      </Box>
    </Box>
  );
}