import React from "react";
import { Box, Container, Typography, Grid, Link } from "@mui/material";

const features = [
  {
    title: "Luxury Facilities",
    desc: "Experience unparalleled comfort with our premium workspaces featuring state-of-the-art amenities, ergonomic furniture, and meticulously designed environments.",
  },
  {
    title: "Affordable Pricing",
    desc: "We believe quality shouldn't break the bank. Our competitively priced workspaces deliver exceptional value without compromising on quality.",
  },
  {
    title: "Diverse Choices",
    desc: "From cozy private offices to vibrant collaborative spaces, we offer an extensive range of workspace solutions for all business needs.",
  },
];

const WhyChooseUsSection: React.FC = () => {
  return (
    <Box
      sx={{
        width: "100vw",
        position: "relative",
        py: 10,
        backgroundColor: "#f8f8f8", // Light gray background
      }}
    >
      <Container maxWidth="lg" sx={{ px: 4, width: "100vw" }}>
        <Grid container alignItems="flex-start" spacing={6}>
          {/* Left Column - Title */}
          <Grid item xs={12} md={3} sx={{ pr: 4 }}>
            <Typography
              variant="h3"
              fontWeight="bold"
              sx={{
                lineHeight: 1.3,
                position: "relative",
                mb: 4,
                "&:after": {
                  content: '""',
                  position: "absolute",
                  bottom: -20,
                  left: 0,
                  width: 80,
                  height: 3,
                  backgroundColor: "#FF6D00",
                },
              }}
            >
              Why Choose Us
            </Typography>
          </Grid>

          {/* Right Column - Features */}
          <Grid item xs={12} md={9}>
            <Grid container spacing={4}>
              {features.map((item, index) => (
                <Grid item xs={12} sm={4} key={index}>
                  <Typography
                    variant="h6"
                    fontWeight="bold"
                    gutterBottom
                    sx={{
                      color: "text.primary",
                      mb: 2,
                    }}
                  >
                    {item.title}
                  </Typography>
                  <Typography
                    variant="body1"
                    sx={{
                      color: "text.secondary",
                      mb: 2,
                      lineHeight: 1.6,
                    }}
                  >
                    {item.desc}
                  </Typography>
                  <Link
                    href="#"
                    underline="none"
                    sx={{
                      display: "inline-flex",
                      alignItems: "center",
                      color: "#FF6D00",
                      fontWeight: 600,
                      "&:hover": {
                        color: "#E65100",
                      },
                    }}
                  >
                    More Info{" "}
                    <Box component="span" sx={{ ml: 1 }}>
                      →
                    </Box>
                  </Link>
                </Grid>
              ))}
            </Grid>
          </Grid>
        </Grid>
      </Container>
    </Box>
  );
};

export default WhyChooseUsSection;
