import React from "react";
import { Box, Grid, Typography, Link } from "@mui/material";
import coffeeCharacter from "../../../imagetwo.png";
import brainLightbulb from "../../../imageone.png";

const WhoWeAre: React.FC = () => {
  return (
    <Box
      sx={{
        backgroundColor: "#15100E",
        color: "white",
        minHeight: "100vh",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        padding: { xs: "40px 20px", md: "80px 100px" },
      }}
    >
      <Grid container spacing={6} alignItems="center">
        {/* Left Text Content */}
        <Grid item xs={12} md={6}>
          <Typography variant="h3" fontWeight={700} gutterBottom>
            WHO <span style={{ fontWeight: 300 }}>WE ARE</span>
          </Typography>
          <Typography
            variant="body1"
            sx={{ color: "#b0b0b0", lineHeight: 1.8, marginBottom: 2, letterSpacing: "0.05em", wordSpacing: "0.1em" }}
          >
            At <b>Quadraedge</b>, we believe that true marketing success comes from mastering all four edges—PR, Marketing, Tech, and Media. As a team of three passionate marketers, we built Quadraedge to be a powerhouse that integrates these four pillars, ensuring brands don’t just exist online but thrive.
          </Typography>
          <Typography
            variant="body1"
            sx={{ color: "#b0b0b0", lineHeight: 1.8, marginBottom: 3, letterSpacing: "0.05em", wordSpacing: "0.1em" }}
          >
           We saw a gap in the industry—businesses struggling to balance visibility, technology, engagement, and storytelling. So, we combined our expertise to create a <b>360-degree marketing approach</b> that brings together:
          </Typography>
          <Link href="#" underline="hover" sx={{ color: "#b0b0b0", fontSize: "1rem", fontWeight: 600 }}>
            READ MORE
          </Link>
        </Grid>

        {/* Right Image Section */}
        <Grid item xs={12} md={6} container spacing={2} justifyContent="center">
          <Grid item xs={6}>
            <Box
              component="img"
              src={brainLightbulb}
              alt="Brain Lightbulb"
              sx={{
                width: "95%",
                boxShadow: "10px 10px 20px rgba(0, 0, 0, 0.3)",
                transform: "rotate(-5deg)", 
              }}
            />
          </Grid>
          <Grid item xs={6}>
            <Box
              component="img"
              src={coffeeCharacter}
              alt="Coffee Character"
              sx={{
                width: "95%",
                boxShadow: "10px 10px 20px rgba(0, 0, 0, 0.3)",
                transform: "rotate(5deg)", 
              }}
            />
          </Grid>

        </Grid>
      </Grid>
    </Box>
  );
};

export default WhoWeAre;