import React from "react";
import { Box, Typography, Grid, Card, CardMedia } from "@mui/material";
import brandimage from "../../../brandimage.jpg"

const brands = [
  { name: "Hockey India", img: brandimage },
  { name: "J. Hampstead", img: brandimage },
  { name: "Tim Hortons", img: brandimage },
  { name: "Brand 4", img: brandimage },
  { name: "Brand 5", img: brandimage },
  { name: "Brand 6", img: brandimage },
  { name: "Hockey India", img: brandimage },
  { name: "J. Hampstead", img: brandimage },
  { name: "Tim Hortons", img: brandimage },
 
];

const TopBrands = () => {
  return (
    <Box sx={{ backgroundColor: "#16110f", py: 6, textAlign: "center" }}>
      <Typography variant="h4" sx={{  color: "white",  display: "inline-block", pb: 1 }}>
        TOP <span style={{ fontWeight: "bold" }}>BRANDS</span>
      </Typography>
      <Typography sx={{ color: "#A0A0A0", maxWidth: "1200px", mx: "auto", mt: 2, lineHeight: 1.9 }}>
        Here's a look at the clients we've worked with. If you'd like to work with the
        best digital agency too, we'd love to hear from you. Drop us a line and we'll
        look forward to brewing something fresh for you!
      </Typography>
      <Grid container spacing={2} justifyContent="center" sx={{ mt: 9  }}>
        {brands.map((brand, index) => (
          <Grid item xs={12} sm={6} md={4} key={index}>
            <Card sx={{ backgroundColor: "#EAEAEA", p: 2, display: "flex", justifyContent: "center", maxWidth: "320px", mx: "auto" }}>
              <CardMedia
                component="img"
                src={brand.img}
                alt={brand.name}
                sx={{ maxWidth: "100%", objectFit: "contain" }}
              />
            </Card>
          </Grid>
        ))}
      </Grid>
    </Box>
  );
};

export default TopBrands;