import React from "react";
import { Box, Button, Grid, Typography } from "@mui/material";
import background from "../../../image-removebg-preview (21).png";

const HeroSection: React.FC = () => {
  return (
    <Box
      sx={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        height: { md: "90vh", xs: "80vh" },
        backgroundColor: "#f5f5f5",
        padding: { xs: 3, md: 9 },
      }}
    >
      <Grid
        container
        spacing={2}
        sx={{
          alignItems: "center",
          justifyContent: { xs: "center", md: "space-between" }, 
          textAlign: { xs: "center", md: "left" },
        }}
      >
        {/* Left Content */}
        <Grid item xs={12} md={8}>
          <Typography
            variant="h3"
            sx={{ fontSize: { xs: "2rem", md: "3rem" } }}
          >
           We Don’t Just Market. We Make You <b>Unstoppable</b>.
          </Typography>
          {/* <Typography
            variant="h3"
            sx={{
              fontWeight: 200,
              fontSize: { xs: "2rem", md: "3rem" },
              mt: 1,
            }}
          >
            DIGITAL AGENCY
          </Typography> */}
          <Typography
            variant="body1"
            sx={{
              mt: 2,
              fontSize: { xs: "1rem", md: "1.2rem" },
              color: "#666",
              maxWidth: "90%",
            }}
          >
            Cut through the noise with strategies that deliver measurable success. Let’s make it happen.
          </Typography>
          <Button
            variant="outlined"
            sx={{
              mt: 3,
              borderColor: "black",
              color: "black",
              fontSize: "1rem",
              padding: "10px 20px",
              borderRadius: "50px",
              fontWeight: "bold",
              "&:hover": {
                borderColor: "black",
                backgroundColor: "#e0e0e0",
              },
            }}
          >
            WATCH VIDEO
          </Button>
        </Grid>

        {/* Right Image */}
        <Grid
          item
          xs={12}
          md={4}
          sx={{
            display: "flex",
            justifyContent: "center",
          }}
        >
          <Box
            component="img"
            src={background}
            alt="Coffee Cup"
            sx={{
              width: { xs: "200px", md: "90%" },
            }}
          />
        </Grid>
      </Grid>
    </Box>
  );
};

export default HeroSection;
