import React from "react";
import {
  Box,
  Container,
  Typography,
  Button,
  Divider,
  useTheme,
  Grid,
  Stack,
  Avatar,
  Accordion,
  AccordionSummary,
  AccordionDetails,
} from "@mui/material";
import { Link } from "react-router-dom";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import teamImage from "../images/caraone.png";
import factoryImage from "../images/caraone.png";
import designImage from "../images/caraone.png";

const AboutPage: React.FC = () => {
  const theme = useTheme();

  return (
    <Box sx={{ backgroundColor: "#f9f9f9", minHeight: "100vh", py: 8 }}>
      {/* Hero Section with Full-width Image */}
      <Box
        sx={{
          backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(${teamImage})`,
          backgroundSize: "cover",
          backgroundPosition: "center",
          height: "60vh",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          mb: 8,
          color: "#fff",
          textAlign: "center",
        }}
      >
        <Container maxWidth="md">
          <Typography
            variant="h1"
            sx={{
              mb: 3,
              fontSize: { xs: "2.5rem", md: "4rem" },
              fontWeight: 800,
              lineHeight: 1.2,
            }}
          >
            Crafting Comfort Since 2010
          </Typography>
          <Typography variant="h5" sx={{ mb: 4, fontWeight: 400 }}>
            Premium furniture designed for modern living
          </Typography>
          <Button
            component={Link}
            to="/products"
            variant="contained"
            size="large"
            sx={{
              backgroundColor: "#FF6D00",
              color: "#fff",
              py: 1.5,
              px: 6,
              fontSize: "1.1rem",
              fontWeight: 600,
              "&:hover": {
                backgroundColor: "#FF5722",
              },
            }}
          >
            Explore Our Collection
          </Button>
        </Container>
      </Box>

      <Container maxWidth="lg">
        {/* Our Story Section */}
        <Box sx={{ mb: 10, textAlign: "center" }}>
          <Typography
            variant="h2"
            sx={{
              mb: 3,
              fontSize: { xs: "2rem", md: "2.5rem" },
              fontWeight: 700,
              position: "relative",
              display: "inline-block",
              "&:after": {
                content: '""',
                position: "absolute",
                bottom: -12,
                left: "50%",
                transform: "translateX(-50%)",
                width: "80px",
                height: "4px",
                backgroundColor: "#FF6D00",
              },
            }}
          >
            Our Story
          </Typography>
          <Typography
            variant="body1"
            sx={{
              mb: 4,
              fontSize: "1.1rem",
              lineHeight: 1.8,
              maxWidth: "800px",
              mx: "auto",
            }}
          >
            Founded in a small workshop in Portland, Comfort Haven has grown
            into a nationally recognized furniture brand while maintaining our
            commitment to craftsmanship and sustainable practices. What started
            as a passion project between two design school graduates has
            blossomed into a movement redefining modern comfort.
          </Typography>

          {/* Image with Caption */}
          <Box sx={{ maxWidth: "1000px", mx: "auto", mb: 6 }}>
            <img
              src={factoryImage}
              alt="Our workshop"
              style={{
                width: "100%",
                borderRadius: "12px",
                boxShadow: theme.shadows[4],
                marginBottom: "1rem",
              }}
            />
            <Typography variant="caption" sx={{ fontStyle: "italic" }}>
              Our craftsmen hand-assembling furniture in Portland, Oregon
            </Typography>
          </Box>
        </Box>

        {/* Values Section */}
        <Box sx={{ mb: 10 }}>
          <Typography
            variant="h2"
            sx={{
              mb: 6,
              fontSize: { xs: "2rem", md: "2.5rem" },
              fontWeight: 700,
              textAlign: "center",
              position: "relative",
              "&:after": {
                content: '""',
                position: "absolute",
                bottom: -12,
                left: "50%",
                transform: "translateX(-50%)",
                width: "80px",
                height: "4px",
                backgroundColor: "#FF6D00",
              },
            }}
          >
            Our Values
          </Typography>

          <Grid container spacing={6}>
            <Grid item xs={12} md={4}>
              <Stack alignItems="center" sx={{ textAlign: "center" }}>
                <Avatar
                  sx={{
                    bgcolor: "rgba(255, 109, 0, 0.1)",
                    color: "#FF6D00",
                    width: 80,
                    height: 80,
                    mb: 3,
                    fontSize: "2rem",
                  }}
                >
                  ✨
                </Avatar>
                <Typography variant="h4" sx={{ mb: 2, fontWeight: 600 }}>
                  Design Excellence
                </Typography>
                <Typography variant="body1" sx={{ lineHeight: 1.7 }}>
                  We combine aesthetic beauty with ergonomic principles to
                  create pieces that look as good as they feel.
                </Typography>
              </Stack>
            </Grid>

            <Grid item xs={12} md={4}>
              <Stack alignItems="center" sx={{ textAlign: "center" }}>
                <Avatar
                  sx={{
                    bgcolor: "rgba(255, 109, 0, 0.1)",
                    color: "#FF6D00",
                    width: 80,
                    height: 80,
                    mb: 3,
                    fontSize: "2rem",
                  }}
                >
                  🌎
                </Avatar>
                <Typography variant="h4" sx={{ mb: 2, fontWeight: 600 }}>
                  Sustainable Practices
                </Typography>
                <Typography variant="body1" sx={{ lineHeight: 1.7 }}>
                  From responsibly sourced materials to eco-friendly packaging,
                  we minimize our environmental impact at every step.
                </Typography>
              </Stack>
            </Grid>

            <Grid item xs={12} md={4}>
              <Stack alignItems="center" sx={{ textAlign: "center" }}>
                <Avatar
                  sx={{
                    bgcolor: "rgba(255, 109, 0, 0.1)",
                    color: "#FF6D00",
                    width: 80,
                    height: 80,
                    mb: 3,
                    fontSize: "2rem",
                  }}
                >
                  🤝
                </Avatar>
                <Typography variant="h4" sx={{ mb: 2, fontWeight: 600 }}>
                  Customer Commitment
                </Typography>
                <Typography variant="body1" sx={{ lineHeight: 1.7 }}>
                  Your satisfaction is our priority, backed by a 5-year warranty
                  and exceptional customer service.
                </Typography>
              </Stack>
            </Grid>
          </Grid>
        </Box>

        {/* Design Process Section */}
        <Box sx={{ mb: 10 }}>
          <Grid container spacing={6} alignItems="center">
            <Grid item xs={12} md={6}>
              <img
                src={designImage}
                alt="Design process"
                style={{
                  width: "100%",
                  borderRadius: "12px",
                  boxShadow: theme.shadows[4],
                }}
              />
            </Grid>
            <Grid item xs={12} md={6}>
              <Typography
                variant="h2"
                sx={{
                  mb: 3,
                  fontSize: { xs: "2rem", md: "2.5rem" },
                  fontWeight: 700,
                }}
              >
                The Comfort Haven Difference
              </Typography>
              <Typography
                variant="body1"
                sx={{ mb: 3, lineHeight: 1.8, fontSize: "1.1rem" }}
              >
                Each piece begins with hundreds of hours of research into
                ergonomic principles and material science. Our designers then
                create prototypes that undergo rigorous testing before reaching
                production.
              </Typography>
              <Typography
                variant="body1"
                sx={{ lineHeight: 1.8, fontSize: "1.1rem" }}
              >
                We partner with skilled artisans who share our commitment to
                quality, ensuring every item meets our exacting standards before
                it reaches your home.
              </Typography>
            </Grid>
          </Grid>
        </Box>

        {/* Policies Section */}
        <Box sx={{ mb: 6 }}>
          <Typography
            variant="h2"
            sx={{
              mb: 4,
              fontSize: { xs: "2rem", md: "2.5rem" },
              fontWeight: 700,
              textAlign: "center",
              position: "relative",
              "&:after": {
                content: '""',
                position: "absolute",
                bottom: -12,
                left: "50%",
                transform: "translateX(-50%)",
                width: "80px",
                height: "4px",
                backgroundColor: "#FF6D00",
              },
            }}
          >
            Company Policies
          </Typography>

          <Accordion
            defaultExpanded
            sx={{
              mb: 2,
              borderRadius: "8px !important",
              boxShadow: "none",
              border: "1px solid #e0e0e0",
            }}
          >
            <AccordionSummary
              expandIcon={<ExpandMoreIcon />}
              sx={{
                backgroundColor: "#f5f5f5",
                borderRadius: "8px 8px 0 0",
                minHeight: "64px !important",
              }}
            >
              <Typography variant="h5" fontWeight={600}>
                Terms & Conditions
              </Typography>
            </AccordionSummary>
            <AccordionDetails>
              <Box sx={{ mb: 3 }}>
                <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
                  Order Acceptance
                </Typography>
                <Typography variant="body1" sx={{ mb: 2, lineHeight: 1.8 }}>
                  All orders are subject to acceptance and availability. We
                  reserve the right to refuse service to anyone for any reason
                  at any time.
                </Typography>
              </Box>
              {/* Additional policy content... */}
            </AccordionDetails>
          </Accordion>

          <Accordion
            sx={{
              borderRadius: "8px !important",
              boxShadow: "none",
              border: "1px solid #e0e0e0",
            }}
          >
            <AccordionSummary
              expandIcon={<ExpandMoreIcon />}
              sx={{
                backgroundColor: "#f5f5f5",
                borderRadius: "8px 8px 0 0",
                minHeight: "64px !important",
              }}
            >
              <Typography variant="h5" fontWeight={600}>
                Privacy Policy
              </Typography>
            </AccordionSummary>
            <AccordionDetails>
              <Box sx={{ mb: 3 }}>
                <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
                  Information Collection
                </Typography>
                <Typography variant="body1" sx={{ mb: 2, lineHeight: 1.8 }}>
                  We collect personal information you provide such as name,
                  address, email, and payment details to process your orders and
                  improve your shopping experience.
                </Typography>
              </Box>
              {/* Additional policy content... */}
            </AccordionDetails>
          </Accordion>
        </Box>
      </Container>
    </Box>
  );
};

export default AboutPage;
