import React from "react";
import {
  Box,
  Container,
  IconButton,
  InputBase,
  Typography,
} from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";

const CarouselSection: React.FC = () => {
  return (
    <Box
      sx={{
        position: "relative",
        width: "100%",
        py: { xs: 8, md: 12 }, // Balanced padding
        background: "transparent",
        zIndex: 2,
      }}
    >
      <Container maxWidth="md">
        <Box
          sx={{
            textAlign: "center",
            px: 2, // Side padding for mobile
            width: "1000px",
          }}
        >
          {/* Clean, Bold Heading */}
          <Typography
            variant="h1"
            fontWeight={800}
            gutterBottom
            sx={{
              fontSize: { xs: "3.5rem", md: "6rem" }, // Large but not overwhelming
              lineHeight: 1.2,
              color: "white",
              mb: 3,
              letterSpacing: "-0.02em",
            }}
          >
            Make your interior more minimalistic & modern
          </Typography>

          {/* Airy Subtitle */}
          <Typography
            variant="subtitle1"
            sx={{
              fontSize: { xs: "1.1rem", md: "1.25rem" },
              fontWeight: 400,
              color: "rgba(255,255,255,0.9)",
              mb: 5,
              maxWidth: 600,
              mx: "auto",
              lineHeight: 1.6,
            }}
          >
            Transform your space with our curated collection of minimalist
            furniture
          </Typography>

          {/* Refined Search Bar */}
          <Box
            sx={{
              display: "flex",
              alignItems: "center",
              maxWidth: 500,
              mx: "auto",
              border: "1px solid rgba(255,255,255,0.4)",
              borderRadius: "28px",
              px: 2,
              py: 0.8,
              backgroundColor: "rgba(255,255,255,0.12)",
              backdropFilter: "blur(4px)",
              "&:hover": {
                backgroundColor: "rgba(255,255,255,0.18)",
              },
            }}
          >
            <InputBase
              placeholder="Find furniture..."
              sx={{
                flex: 1,
                fontSize: "0.95rem",
                color: "white",
                "&::placeholder": {
                  color: "rgba(255,255,255,0.7)",
                  fontSize: "0.9rem",
                },
              }}
            />
            <IconButton
              type="submit"
              size="small"
              sx={{
                color: "rgba(255,255,255,0.8)",
                "&:hover": {
                  backgroundColor: "transparent",
                  color: "white",
                },
              }}
            >
              <SearchIcon sx={{ fontSize: "1.3rem" }} />
            </IconButton>
          </Box>
        </Box>
      </Container>
    </Box>
  );
};

export default CarouselSection;
