import React from "react";
import { Box, Grid, Typography, keyframes } from "@mui/material";
import image1 from "../images/caraone.png";
import image2 from "../images/caraone.png";

// Define keyframe animations
const fadeIn = keyframes`
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
`;

const LandingPageSection: React.FC = () => {
  return (
    <Box
      sx={{
        px: { xs: 4, md: 8 },
        py: { xs: 6, md: 10 },
        backgroundColor: "#ffffff",
        maxWidth: "1400px",
        margin: "0 auto",
      }}
    >
      {/* Top Section */}
      <Grid
        container
        spacing={6}
        alignItems="center"
        sx={{ mb: { xs: 6, md: 10 } }}
      >
        <Grid item xs={12} md={6}>
          <Box
            sx={{
              borderRadius: 3,
              overflow: "hidden",
              boxShadow: 3,
              height: { xs: "300px", md: "400px" },
              animation: `${fadeIn} 0.8s ease-out`,
              "& img": {
                width: "100%",
                height: "100%",
                objectFit: "cover",
                borderRadius: "12px",
                transition: "transform 0.3s ease",
                "&:hover": {
                  transform: "scale(1.02)",
                },
              },
            }}
          >
            <img src={image1} alt="Experience" />
          </Box>
        </Grid>
        <Grid item xs={12} md={6}>
          <Box sx={{ animation: `${fadeIn} 0.8s ease-out 0.2s forwards` }}>
            <Typography
              variant="subtitle1"
              sx={{ color: "#F4A261", mb: 1, fontWeight: 600 }}
            >
              EXPERIENCES
            </Typography>
            <Typography
              variant="h4"
              fontWeight={700}
              sx={{ mb: 2, fontSize: { xs: "1.8rem", md: "2.2rem" } }}
            >
              We Provide You The Best Experience
            </Typography>
            <Typography
              variant="body1"
              sx={{ color: "#555", mt: 2, fontSize: "1.1rem", lineHeight: 1.6 }}
            >
              You don't have to worry about the result because all of these
              interiors are made by people who are professionals in their fields
              with an elegant and luxurious style and with premium quality
              materials.
            </Typography>
            <Typography
              variant="body1"
              sx={{
                mt: 3,
                fontWeight: 600,
                color: "#F4A261",
                cursor: "pointer",
                display: "inline-block",
                "&:hover": { textDecoration: "underline" },
              }}
            >
              More Info →
            </Typography>
          </Box>
        </Grid>
      </Grid>

      {/* Bottom Section */}
      <Grid container spacing={6} sx={{ mt: { xs: 4, md: 6 } }}>
        <Grid item xs={12} md={6}>
          <Box sx={{ animation: `${fadeIn} 0.8s ease-out 0.4s forwards` }}>
            <Typography
              variant="subtitle1"
              sx={{ color: "#F4A261", mb: 1, fontWeight: 600 }}
            >
              MATERIALS
            </Typography>
            <Typography
              variant="h4"
              fontWeight={700}
              sx={{ mb: 2, fontSize: { xs: "1.8rem", md: "2.2rem" } }}
            >
              Very Serious Materials For Making Furniture
            </Typography>
            <Typography
              variant="body1"
              sx={{ color: "#555", mt: 2, fontSize: "1.1rem", lineHeight: 1.6 }}
            >
              Because Panto was very serious about designing furniture for our
              environment, using a very expensive and famous capital but at a
              relatively low price.
            </Typography>
            <Typography
              variant="body1"
              sx={{
                mt: 3,
                fontWeight: 600,
                color: "#F4A261",
                cursor: "pointer",
                display: "inline-block",
                "&:hover": { textDecoration: "underline" },
              }}
            >
              More Info →
            </Typography>
          </Box>
        </Grid>
        <Grid item xs={12} md={6}>
          <Box sx={{ animation: `${fadeIn} 0.8s ease-out 0.6s forwards` }}>
            <Grid container spacing={2}>
              {[image1, image2, image1, image2].map((img, i) => (
                <Grid item xs={6} key={i}>
                  <Box
                    sx={{
                      borderRadius: 2,
                      overflow: "hidden",
                      boxShadow: 2,
                      backgroundColor: "#f5f5f5",
                      height: { xs: "140px", md: "180px" },
                      "& img": {
                        width: "100%",
                        height: "100%",
                        objectFit: "cover",
                        borderRadius: "12px",
                        transition: "transform 0.3s ease",
                        "&:hover": {
                          transform: "scale(1.05)",
                        },
                      },
                    }}
                  >
                    <img src={img} alt={`Gallery ${i}`} />
                  </Box>
                </Grid>
              ))}
            </Grid>
          </Box>
        </Grid>
      </Grid>
    </Box>
  );
};

export default LandingPageSection;