import { Box, Typography, Container } from "@mui/material";
import mottoimage from "../../whowearemotto.png"
const MottoSection: React.FC = () => {
  return (
    <Box>
      {/* Top Section */}
      <Box sx={{ backgroundColor: "#F7F7F7", py: 6, pl: 5, textAlign: "left" }}>
        <Typography
          variant="h3"
          sx={{
            fontWeight: 500,
            fontSize: { xs: "2rem", md: "3.5rem" },
            letterSpacing: 2,
          }}
        >
          OUR <span style={{ fontWeight: "bold" }}>MOTTO</span>
        </Typography>
      </Box>

      {/* Bottom Black Section */}
      <Box sx={{ backgroundColor: "#15100E", py: 6 }}>
        <Container maxWidth="md">
          <Typography
            variant="body1"
            sx={{
              color: "#A0A0A0",
              fontSize: { xs: "1rem", md: "1.25rem" },
              textAlign: "center",
              lineHeight: 1.8,
            }}
          >
            Ideas excite us, they shape the future, add value, and signal change. 
            Through fresh ideas, we blend together beautiful designs, functional 
            digital strategies, and engaging experiences.
            <br />
            Here are values that define us, principles that guide us, and words 
            that we live by.
          </Typography>
        </Container>
      </Box>

      {/* Image Section */}
      <Box
        sx={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
        
        }}
      >
        <img
          src={mottoimage} 
          alt="Motto Image"
          style={{ maxWidth: "90%", height: "auto", borderRadius: "8px" }}
        />
      </Box>
    </Box>
  );
};

export default MottoSection;
