import React, { useEffect } from "react";
import {
  Box,
  Container,
  Typography,
  Button,
  Grid,
  Card,
  Paper,
  Divider,
} 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";

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();

  return (
    <Box sx={{ backgroundColor: "#f5f5f5", minHeight: "100vh" }}>
      {/* Hero Section */}
      <Box
        sx={{
          height: { xs: "60vh", md: "80vh" },
          backgroundImage: `url(${carimage})`,
          backgroundSize: "cover",
          backgroundPosition: "center",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          textAlign: "center",
          color: "#fff",
          position: "relative",
        }}
      >
        <Box sx={{ position: "relative", zIndex: 2, maxWidth: "800px", px: 3 }}>
          <Typography
            variant="h1"
            fontWeight="bold"
            sx={{
              fontSize: { xs: "2.5rem", md: "4rem" },
              mb: 3,
              textShadow: "2px 2px 4px rgba(0,0,0,0.5)",
            }}
          >
            Crafted for Comfort, Designed for Life
          </Typography>
          <Typography
            variant="h5"
            sx={{
              mb: 4,
              color: "#FFA500",
              fontWeight: 500,
            }}
          >
            Discover furniture that transforms your space
          </Typography>
        </Box>
      </Box>

      {/* About Section */}
      <Paper
        elevation={0}
        sx={{
          backgroundColor: "#fff",
          py: 8,
          borderBottom: "1px solid rgba(0,0,0,0.1)",
        }}
      >
        <Container maxWidth="lg">
          <Typography
            variant="h3"
            fontWeight="bold"
            align="center"
            sx={{ mb: 4 }}
          >
            Our Craftsmanship Philosophy
          </Typography>
          <Grid container spacing={6}>
            <Grid item xs={12} md={6}>
              <Typography
                variant="body1"
                sx={{ mb: 3, fontSize: "1.1rem", lineHeight: 1.8 }}
              >
                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.1rem", lineHeight: 1.8 }}
              >
                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.1rem", lineHeight: 1.8 }}
              >
                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.1rem", lineHeight: 1.8 }}
              >
                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: 10 }}>
        <Typography
          variant="h2"
          fontWeight="bold"
          align="center"
          sx={{
            mb: 2,
            color: "#333",
          }}
        >
          Explore Our Collections
        </Typography>
        <Typography
          variant="h5"
          align="center"
          sx={{
            mb: 6,
            color: "#666",
          }}
        >
          Each collection tells a unique design story
        </Typography>

        <Grid container spacing={6}>
          {categories.map((category) => (
            <Grid item xs={12} sm={6} md={4} key={category.id}>
              <Card
                sx={{
                  height: "100%",
                  display: "flex",
                  flexDirection: "column",
                  transition: "all 0.3s ease",
                  "&:hover": {
                    transform: "translateY(-10px)",
                    boxShadow: "0 15px 30px rgba(0,0,0,0.15)",
                  },
                }}
              >
                <Box
                  sx={{
                    height: "300px",
                    backgroundImage: `url(${category.image})`,
                    backgroundSize: "cover",
                    backgroundPosition: "center",
                  }}
                />
                <Box sx={{ p: 4, flexGrow: 1 }}>
                  <Typography variant="h4" fontWeight="bold" sx={{ mb: 2 }}>
                    {category.name}
                  </Typography>
                  <Typography variant="body1" sx={{ mb: 3, color: "#666" }}>
                    {category.description}
                  </Typography>
                  <Button
                    fullWidth
                    variant="contained"
                    onClick={() => navigate(`/collections/${category.id}`)}
                    sx={{
                      backgroundColor: "#FFA500",
                      color: "#fff",
                      py: 1.5,
                      "&:hover": {
                        backgroundColor: "#E59400",
                      },
                    }}
                  >
                    Browse Collection ({category.count})
                  </Button>
                </Box>
              </Card>
            </Grid>
          ))}
        </Grid>
      </Container>

      {/* Testimonials */}
      <Paper
        elevation={0}
        sx={{ backgroundColor: "#333", color: "#fff", py: 10 }}
      >
        <Container maxWidth="lg">
          <Typography
            variant="h3"
            fontWeight="bold"
            align="center"
            sx={{ mb: 6 }}
          >
            What Our Customers Say
          </Typography>
          <Grid container spacing={4}>
            {[
              "The most comfortable chair I've ever owned - worth every penny!",
              "Transformed my living room completely. The quality is exceptional.",
              "Best furniture purchase I've made in years. Stunning and sturdy.",
            ].map((quote, i) => (
              <Grid item xs={12} md={4} key={i}>
                <Box
                  sx={{ p: 4, backgroundColor: "#444", borderRadius: "8px" }}
                >
                  <Typography
                    variant="body1"
                    sx={{ fontStyle: "italic", mb: 2 }}
                  >
                    "{quote}"
                  </Typography>
                  <Typography variant="body2" color="#FFA500">
                    — Happy Customer
                  </Typography>
                </Box>
              </Grid>
            ))}
          </Grid>
        </Container>
      </Paper>
    </Box>
  );
};

export default CategoryPage;