import React from "react";
import { Box } from "@mui/material";
import CarouselSection from "./homepage";
import WhyChooseUsSection from "./WhyChooseUsSection";
// import WhyChooseUsSection from "./WhyChooseUsSection";
import BestSellingProductSection from "./BestSellingProductSection";
import LandingPageSection from "./ex";
import HeaderSection from "../header";
import Testimonials from "./Testimonials";
import carimage from "../images/caraone.png";
import Footer from "../foorter";
import ContactForm from "../contactus/contactus";
const LandingPage: React.FC = () => {
  return (
    <>
      <Box
        sx={{
          position: "relative",
          width: "100%",
          height: "130vh",
          overflow: "hidden",
        }}
      >
        {/* Background Image - Full width with height contained */}
        <Box
          sx={{
            position: "absolute",
            top: 0,
            left: 0,
            right: 0,
            height: "100%",
            display: "flex",
            justifyContent: "center",
            backgroundColor: "#f0f0f0", // Fallback color
          }}
        >
          <img
            src={carimage}
            alt="background"
            style={{
              width: "100%", // Full width
              height: "auto", // Height adjusts proportionally
              objectFit: "cover", // Cover width while containing height
              objectPosition: "center bottom", // Align at top
            }}
          />
        </Box>

        {/* Dark Overlay (optional) */}
        <Box
          sx={{
            position: "absolute",
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            backgroundColor: "rgba(0,0,0,0.2)", // Adjust opacity
          }}
        />

        {/* Transparent Header */}
        <HeaderSection />

        {/* Centered Content */}
        <Box
          sx={{
            position: "absolute",
            top: "30%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            width: "100%",
            maxWidth: "1200px", // Optional max width for content
            padding: 3,
            textAlign: "center",
            color: "white",
            zIndex: 2,
          }}
        >
          <CarouselSection />
        </Box>
      </Box>
      <WhyChooseUsSection />
      <BestSellingProductSection />
      <LandingPageSection />
      <Testimonials />
      <ContactForm />
      <Footer />
    </>
  );
};

export default LandingPage;
