import React from "react";
import {
  Box,
  Container,
  Typography,
  Button,
  Grid,
  Card,
  Paper,
  Divider,
  useTheme,
  useMediaQuery,
} from "@mui/material";
import { useNavigate } from "react-router-dom";
import { Category } from "./types";
import chairone from "../images/chairone.png";
import chairtwo from "../images/chairtwo.png";
import chairthree from "../images/chairthree.png";
import carimage from "../images/caraone.png";
import ContactForm from "../contactus/contactus";
import Footer from "../foorter";
import HeaderSection from "../header";

export const categories: Category[] = [
  {
    id: "chairs",
    name: "Premium Seating Collection",
    image: `${chairone}`,
    description: "Ergonomic masterpieces combining comfort and style",
    count: 28,
  },
  {
    id: "luxurychairs",
    name: "Luxury Chairs",
    image: `${chairtwo}`,
    description: "Ergonomic designs for modern living",
    count: 28,
  },
  {
    id: "Premium Beds",
    name: "Premium Beds",
    image: `${chairthree}`,
    description: "Sleep in ultimate comfort",
    count: 15,
  },
  {
    id: "DesignerSofas",
    name: "Designer Sofas",
    image: `${chairone}`,
    description: "Centerpieces for your living room",
    count: 22,
  },
  {
    id: "ElegantLighting",
    name: "Elegant Lighting",
    image: `${chairthree}`,
    description: "Illuminate with style",
    count: 34,
  },
  {
    id: "ModernTables",
    name: "Modern Tables",
    image: `${chairtwo}`,
    description: "Functional art for your home",
    count: 19,
  },
  {
    id: "HomeDecor",
    name: "Home Decor",
    image: `${chairone}`,
    description: "Complete your interior design",
    count: 42,
  },
];

const CategoryPage = () => {
  const navigate = useNavigate();
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));

  return (
    <Box sx={{ backgroundColor: "#f9f9f9", minHeight: "100vh" }}>
      <HeaderSection />

      {/* Hero Section */}
      <Box
        sx={{
          height: { xs: "70vh", md: "85vh" },
          backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(${carimage})`,
          backgroundSize: "cover",
          backgroundPosition: "center",
          backgroundAttachment: isMobile ? "scroll" : "fixed",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          textAlign: "center",
          color: "#fff",
          position: "relative",
          overflow: "hidden",
          animation: "fadeIn 1.5s ease-in-out",
          "@keyframes fadeIn": {
            "0%": { opacity: 0 },
            "100%": { opacity: 1 },
          },
        }}
      >
        <Box
          sx={{
            position: "relative",
            zIndex: 2,
            maxWidth: "800px",
            px: 3,
            transform: "translateY(0)",
            transition: "transform 0.5s ease",
            "&:hover": {
              transform: "translateY(-10px)",
            },
          }}
        >
          <Typography
            variant="h1"
            fontWeight="bold"
            sx={{
              fontSize: { xs: "2.8rem", md: "4.5rem" },
              mb: 3,
              textShadow: "2px 2px 8px rgba(0,0,0,0.7)",
              lineHeight: 1.2,
              letterSpacing: "0.03em",
            }}
          >
            Crafted for Comfort, Designed for Life
          </Typography>
          <Typography
            variant="h5"
            sx={{
              mb: 4,
              color: "#ed9506d6",
              fontWeight: 500,
              fontStyle: "italic",
              letterSpacing: "0.05em",
              textShadow: "1px 1px 3px rgba(0,0,0,0.5)",
            }}
          >
            Discover furniture that transforms your space
          </Typography>
          <Button
            variant="contained"
            size="large"
            sx={{
              background: "#ed9506d6",
              px: 4,
              py: 1.5,
              borderRadius: "50px",
              fontSize: "1.1rem",
              fontWeight: 600,
              boxShadow: "0 4px 15px rgba(255, 165, 0, 0.3)",
              transition: "all 0.3s ease",
              "&:hover": {
                transform: "translateY(-3px)",
                boxShadow: "0 6px 20px rgba(255, 165, 0, 0.4)",
              },
            }}
          >
            Explore Collections
          </Button>
        </Box>
      </Box>

      {/* About Section */}
      <Paper
        elevation={0}
        sx={{
          backgroundColor: "#fff",
          py: { xs: 6, md: 10 },
          borderBottom: "1px solid rgba(0,0,0,0.05)",
          position: "relative",
          overflow: "hidden",
          "&::before": {
            content: '""',
            position: "absolute",
            top: 0,
            left: 0,
            right: 0,
            height: "4px",
            background: "linear-gradient(90deg, #FFA500, #FF8C00, #FFA500)",
          },
        }}
      >
        <Container maxWidth="lg">
          <Typography
            variant="h2"
            fontWeight="bold"
            align="center"
            sx={{
              mb: 6,
              position: "relative",
              "&::after": {
                content: '""',
                display: "block",
                width: "80px",
                height: "4px",
                background: "orange",
                margin: "20px auto 0",
                borderRadius: "2px",
              },
            }}
          >
            Our Craftsmanship Philosophy
          </Typography>
          <Grid container spacing={6}>
            <Grid item xs={12} md={6}>
              <Typography
                variant="body1"
                sx={{
                  mb: 3,
                  fontSize: "1.15rem",
                  lineHeight: 1.8,
                  color: "#555",
                }}
              >
                At Panto, we believe furniture should be both beautiful and
                functional. Each piece in our collection is meticulously crafted
                by skilled artisans using sustainable materials and time-honored
                techniques.
              </Typography>
              <Typography
                variant="body1"
                sx={{
                  fontSize: "1.15rem",
                  lineHeight: 1.8,
                  color: "#555",
                }}
              >
                Our designers work closely with ergonomic specialists to create
                pieces that don't just look good, but feel good to use every
                day. From the carefully selected fabrics to the precision
                joinery, every detail matters.
              </Typography>
            </Grid>
            <Grid item xs={12} md={6}>
              <Typography
                variant="body1"
                sx={{
                  mb: 3,
                  fontSize: "1.15rem",
                  lineHeight: 1.8,
                  color: "#555",
                }}
              >
                We source our materials from responsible suppliers, ensuring
                that our environmental impact is minimized. The hardwoods in our
                furniture come from FSC-certified forests, and our fabrics are
                OEKO-TEX certified.
              </Typography>
              <Typography
                variant="body1"
                sx={{
                  fontSize: "1.15rem",
                  lineHeight: 1.8,
                  color: "#555",
                }}
              >
                With over 15 years in the industry, we've perfected the balance
                between form and function, offering designs that stand the test
                of time both in durability and style.
              </Typography>
            </Grid>
          </Grid>
        </Container>
      </Paper>

      {/* Category Grid */}
      <Container maxWidth="xl" sx={{ py: { xs: 6, md: 10 } }}>
        <Box sx={{ textAlign: "center", mb: { xs: 4, md: 8 } }}>
          <Typography
            variant="h2"
            fontWeight="bold"
            sx={{
              mb: 2,
              color: "#333",
              position: "relative",
              display: "inline-block",
              "&::after": {
                content: '""',
                position: "absolute",
                bottom: "-10px",
                left: "50%",
                transform: "translateX(-50%)",
                width: "100px",
                height: "4px",
                background: "orange",
                borderRadius: "2px",
              },
            }}
          >
            Explore Our Collections
          </Typography>
          <Typography
            variant="h5"
            sx={{
              mt: 3,
              color: "#666",
              fontStyle: "italic",
              fontWeight: 400,
            }}
          >
            Each collection tells a unique design story
          </Typography>
        </Box>

        <Grid container spacing={{ xs: 4, md: 6 }}>
          {categories.map((category) => (
            <Grid item xs={12} sm={6} md={4} lg={3} key={category.id}>
              <Card
                sx={{
                  height: "100%",
                  display: "flex",
                  flexDirection: "column",
                  transition:
                    "all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)",
                  borderRadius: "12px",
                  overflow: "hidden",
                  boxShadow: "0 5px 15px rgba(0,0,0,0.08)",
                  "&:hover": {
                    transform: "translateY(-10px)",
                    boxShadow: "0 15px 30px rgba(0,0,0,0.15)",
                  },
                }}
              >
                <Box
                  sx={{
                    height: "280px",
                    backgroundImage: `url(${category.image})`,
                    backgroundSize: "contain",
                    backgroundRepeat: "no-repeat",
                    backgroundPosition: "center",
                    position: "relative",
                    "&::before": {
                      content: '""',
                      position: "absolute",
                      top: 0,
                      left: 0,
                      right: 0,
                      bottom: 0,
                      background:
                        "linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.03) 100%)",
                    },
                  }}
                />
                <Box sx={{ p: 4, flexGrow: 1, backgroundColor: "#fff" }}>
                  <Typography
                    variant="h5"
                    fontWeight="bold"
                    sx={{
                      mb: 2,
                      color: "#333",
                      minHeight: "64px",
                    }}
                  >
                    {category.name}
                  </Typography>
                  <Typography
                    variant="body1"
                    sx={{
                      mb: 3,
                      color: "#666",
                      minHeight: "60px",
                    }}
                  >
                    {category.description}
                  </Typography>
                  <Button
                    fullWidth
                    variant="contained"
                    color="secondary"
                    onClick={() => navigate(`/collections/${category.id}`)}
                    sx={{
                      py: 1.5,
                      background: "orange",
                      borderRadius: "8px",
                      fontWeight: 600,
                      fontSize: "1rem",
                      letterSpacing: "0.03em",
                      boxShadow: "none",
                      transition: "all 0.3s ease",
                      "&:hover": {
                        transform: "translateY(-2px)",
                        boxShadow: `0 4px 12px ${theme.palette.secondary.main}40`,
                      },
                    }}
                  >
                    Browse Collection ({category.count})
                  </Button>
                </Box>
              </Card>
            </Grid>
          ))}
        </Grid>
      </Container>

      {/* Testimonials */}
      <Paper
        elevation={0}
        sx={{
          backgroundColor: "#2c3e50",
          color: "#fff",
          py: { xs: 6, md: 10 },
          position: "relative",
          overflow: "hidden",
          "&::before": {
            content: '""',
            position: "absolute",
            top: 0,
            left: 0,
            right: 0,
            height: "4px",
            background: "linear-gradient(90deg, #FFA500, #FF8C00, #FFA500)",
          },
        }}
      >
        <Container maxWidth="lg">
          <Typography
            variant="h2"
            fontWeight="bold"
            align="center"
            sx={{
              mb: { xs: 4, md: 8 },
              position: "relative",
              "&::after": {
                content: '""',
                display: "block",
                width: "80px",
                height: "4px",
                background: "orange",
                margin: "20px auto 0",
                borderRadius: "2px",
              },
            }}
          >
            What Our Customers Say
          </Typography>
          <Grid container spacing={4}>
            {[
              {
                quote:
                  "The most comfortable chair I've ever owned - worth every penny!",
                author: "Sarah J.",
              },
              {
                quote:
                  "Transformed my living room completely. The quality is exceptional.",
                author: "Michael T.",
              },
              {
                quote:
                  "Best furniture purchase I've made in years. Stunning and sturdy.",
                author: "Emily R.",
              },
            ].map((testimonial, i) => (
              <Grid item xs={12} md={4} key={i}>
                <Box
                  sx={{
                    p: 4,
                    height: "100%",

                    backgroundColor: "rgba(255,255,255,0.1)",
                    borderRadius: "12px",
                    border: "1px solid rgba(255,255,255,0.1)",
                    backdropFilter: "blur(8px)",
                    transition: "all 0.3s ease",
                    "&:hover": {
                      transform: "translateY(-5px)",
                      boxShadow: "0 10px 25px rgba(0,0,0,0.2)",
                    },
                  }}
                >
                  <Box sx={{ display: "flex", mb: 2 }}>
                    {[1, 2, 3, 4, 5].map((star) => (
                      <Box
                        key={star}
                        sx={{
                          color: "orange",
                          fontSize: "1.5rem",
                          lineHeight: 1,
                          mr: 0.5,
                        }}
                      >
                        ★
                      </Box>
                    ))}
                  </Box>
                  <Typography
                    variant="body1"
                    sx={{
                      fontStyle: "italic",
                      mb: 2,
                      fontSize: "1.1rem",
                      lineHeight: 1.7,
                    }}
                  >
                    "{testimonial.quote}"
                  </Typography>
                  <Typography
                    variant="body2"
                    // color="secondary"
                    sx={{
                      fontWeight: 600,
                      color: "orange",
                      fontSize: "1rem",
                    }}
                  >
                    — {testimonial.author}
                  </Typography>
                </Box>
              </Grid>
            ))}
          </Grid>
        </Container>
      </Paper>

      <ContactForm />
      <Footer />
    </Box>
  );
};

export default CategoryPage;
