import React from "react";
import Box from "@mui/material/Box";
import About from "./About.jsx";
import Projects from "./Projects.jsx";
import Environments from "./Environments.jsx";
import Footer from "./Footer.jsx";

const Skills = React.lazy(() => import("./Skills.jsx"));
const Social = React.lazy(() => import("./Social.jsx"));

export default function Delta() {
  return (
    <Box id="delta">
      <div style={{ position: "relative", display: "block" }}>
        <div
          style={{
            position: "absolute",
            display: "flex",
            zIndex: -1,
            opacity: 0.2,
            marginTop: -40,
            marginLeft: -20,
            overflow: "hidden",
            justifyContent: "center",
            margin: "auto",
            width: "100%",
          }}
        >
          <img
            src="/images/phx-mini.png"
            style={{ minWidth: "260px", width: "50%", maxWidth: 512 }}
          />
        </div>
      </div>
      <div style={{ margin: "0 auto", textAlign: "center", maxWidth: 1200 }}>
        <About />
        <Projects />
        <Skills />
        {/* <Environments /> */}
        <Social />
      </div>
      <Footer />
    </Box>
  );
}