import React from "react";
import { Box, Container, Grid, Typography } from "@mui/material";
import { keyframes } from "@emotion/react";
import { styled } from "@mui/system";
import image1 from "../../assets/group1.jpg";
import image2 from "../../assets/solo1.jpg";
import image3 from "../../assets/solo2.jpg";
import image4 from "../../assets/bag1.jpg";
import image5 from "../../assets/bag2.jpg";

const colors = {
  ivory: "#fffaf5",
  mist: "#f8f1ea",
  blush: "#f4ddd4",
  peach: "#efb7a2",
  coral: "#d9826f",
  berry: "#7f4b5d",
  plum: "#4f2f42",
};

const riseIn = keyframes`
  from { opacity: 0; transform: translateY(36px); }
  to { opacity: 1; transform: translateY(0); }
`;

const rotateIn = keyframes`
  from { transform: rotate(5deg) scale(0.9); opacity: 0; }
  to { transform: rotate(0deg) scale(1); opacity: 1; }
`;

const TimelineShell = styled(Box)({
  position: "relative",
  paddingTop: "24px",
  paddingBottom: "48px",
  "&::before": {
    content: '""',
    position: "absolute",
    top: 0,
    bottom: 0,
    left: "50%",
    transform: "translateX(-50%)",
    width: "1px",
    background: "linear-gradient(to bottom, rgba(217,130,111,0.15), rgba(127,75,93,0.45), rgba(217,130,111,0.15))",
    zIndex: 0,
  },
  "@media (max-width: 899px)": {
    "&::before": {
      left: "22px",
      transform: "none",
    },
  },
});

const FloatingBubble = styled(Box)<{
  size: number;
  top?: string;
  left?: string;
  right?: string;
  bottom?: string;
  delay?: string;
}>(({ size, top, left, right, bottom, delay = "0s" }) => ({
  position: "absolute",
  width: size,
  height: size,
  top,
  left,
  right,
  bottom,
  borderRadius: "50%",
  background:
    "radial-gradient(circle at 30% 30%, rgba(255,255,255,0.85), rgba(244,221,212,0.55) 45%, rgba(217,130,111,0.16) 75%, rgba(127,75,93,0.08) 100%)",
  filter: "blur(3px)",
  opacity: 0.9,
  pointerEvents: "none",
  animation: `${riseIn} 1.2s ease forwards`,
  animationDelay: delay,
}));

const TimelineCard = styled(Box)({
  position: "relative",
  borderRadius: "30px",
  background:
    "linear-gradient(135deg, rgba(255,250,245,0.9) 0%, rgba(244,221,212,0.76) 55%, rgba(248,241,234,0.9) 100%)",
  backdropFilter: "blur(14px)",
  border: `1px solid ${colors.peach}66`,
  boxShadow: "0 18px 38px rgba(79, 47, 66, 0.08)",
  overflow: "hidden",
  opacity: 0,
  animation: `${riseIn} 0.9s ease forwards`,
  "&::before": {
    content: '""',
    position: "absolute",
    inset: 0,
    background:
      "linear-gradient(120deg, rgba(255,255,255,0.18), rgba(255,255,255,0), rgba(255,255,255,0.15))",
    pointerEvents: "none",
  },
});

const TimelineImage = styled(Box)({
  borderRadius: "24px",
  border: `10px solid ${colors.ivory}`,
  boxShadow: `10px 10px 0 rgba(127,75,93,0.2), 0 10px 20px rgba(79,47,66,0.08)`,
  overflow: "hidden",
  position: "relative",
  animation: `${rotateIn} 1.1s ease`,
  "&::before": {
    content: '""',
    position: "absolute",
    top: "-14px",
    left: "-14px",
    right: "-14px",
    bottom: "-14px",
    border: `1px solid ${colors.peach}88`,
    borderRadius: "28px",
    zIndex: -1,
  },
});

const storyChapters = [
  {
    year: "2019",
    title: "Where Curiosity Met Craft",
    content:
      "Fresh out of fashion school, I found myself drawn to looms, dye pits, and village homes. I organized workshops to listen, learn, and share space with artisans, forging a bond between design, community, and culture.",
    image: image1,
  },
  {
    year: "2020",
    title: "A Name Was Born",
    content:
      "During the pandemic, I launched a campaign to highlight artisans hit by lockdowns. The Kalawati was born, named after women who hold culture in their palms and creativity in their hearts.",
    image: image2,
  },
  {
    year: "2021",
    title: "Strengthening the Circle",
    content:
      "I spent the year mapping artisan strengths, connecting traditional skills to modern demand, and building trust for a long-term vision of community and craft.",
    image: image3,
  },
  {
    year: "2022",
    title: "Systems That Serve People",
    content:
      "Through fellowship work, systems took shape that blended business and empathy, building stronger brand stories, value chains, and sustainable income pathways.",
    image: image4,
  },
  {
    year: "2023",
    title: "Quiet Creation",
    content:
      "Working with artisan clusters, collections began to take form through handloom, embroidery, and natural dyes, turning process into pieces people could feel.",
    image: image1,
  },
  {
    year: "2024",
    title: "Kalawati Arrives",
    content:
      "The Kalawati opens its doors as a brand and movement, offering ethically made handcrafted apparel and decor with story, memory, and care woven through each release.",
    image: image5,
  },
];

const StoryTimeline: React.FC = () => {
  return (
    <Box
      sx={{
        position: "relative",
        zIndex: 1,
        py: { xs: 4, md: 7 },
        overflow: "hidden",
      }}
    >
      <FloatingBubble size={170} top="6%" right="3%" delay="0.05s" />
      <FloatingBubble size={120} top="30%" left="-30px" delay="0.15s" />
      <FloatingBubble size={90} bottom="22%" right="12%" delay="0.25s" />
      <FloatingBubble size={150} bottom="6%" left="4%" delay="0.35s" />

      <Container maxWidth="xl">
        <Box
          sx={{
            textAlign: "center",
            mb: { xs: 5, md: 7 },
          }}
        >
          <Typography
            sx={{
              color: colors.coral,
              textTransform: "uppercase",
              letterSpacing: "0.22em",
              fontSize: "0.82rem",
              mb: 1.5,
            }}
          >
            Story Timeline
          </Typography>
          <Typography
            sx={{
              fontFamily: '"Playfair Display", serif',
              color: colors.plum,
              fontSize: { xs: "2.1rem", md: "3.3rem" },
              lineHeight: 1.05,
              letterSpacing: "-0.03em",
              mb: 1.5,
            }}
          >
            Our story woven in time
          </Typography>
          <Typography
            sx={{
              maxWidth: "62ch",
              mx: "auto",
              color: colors.berry,
              lineHeight: 1.8,
              fontSize: { xs: "1rem", md: "1.05rem" },
            }}
          >
            A pink-toned retelling of the same timeline idea from the coming soon page, now designed to sit beneath the main story header as part of the storefront flow.
          </Typography>
        </Box>

        <TimelineShell>
          <Grid container spacing={3}>
            {storyChapters.map((chapter, index) => (
              <Grid key={chapter.year} size={{ xs: 12 }}>
                <Box sx={{ maxWidth: 1120, mx: "auto" }}>
                  <TimelineCard sx={{ animationDelay: `${index * 0.12}s` }}>
                  <Box
                    sx={{
                      display: "flex",
                      flexDirection: { xs: "column", md: index % 2 === 0 ? "row" : "row-reverse" },
                      alignItems: "center",
                      gap: { xs: 3, md: 5 },
                      p: { xs: 2.2, md: 3.6 },
                    }}
                  >
                    <Box
                      sx={{
                        flex: 1,
                        textAlign: { xs: "left", md: index % 2 === 0 ? "right" : "left" },
                        px: { xs: 0.5, md: 3 },
                      }}
                    >
                      <Typography
                        sx={{
                          color: colors.coral,
                          fontFamily: '"Playfair Display", serif',
                          fontSize: "1.5rem",
                          mb: 1.2,
                        }}
                      >
                        {chapter.year}
                      </Typography>
                      <Typography
                        sx={{
                          fontFamily: '"Playfair Display", serif',
                          color: colors.plum,
                          fontSize: { xs: "1.55rem", md: "2.2rem" },
                          lineHeight: 1.1,
                          letterSpacing: "-0.02em",
                          mb: 1.5,
                        }}
                      >
                        {chapter.title}
                      </Typography>
                      <Typography
                        sx={{
                          color: colors.berry,
                          lineHeight: 1.9,
                          fontSize: { xs: "0.98rem", md: "1.05rem" },
                        }}
                      >
                        {chapter.content}
                      </Typography>
                    </Box>

                    <Box
                      sx={{
                        flex: 1,
                        position: "relative",
                        width: "100%",
                        minHeight: 250,
                        pl: { xs: 5, md: 0 },
                        "&::before": {
                          content: '""',
                          position: "absolute",
                          top: "50%",
                          left: {
                            xs: "22px",
                            md: index % 2 === 0 ? "calc(100% + 24px)" : "auto",
                          },
                          right: {
                            xs: "auto",
                            md: index % 2 === 0 ? "auto" : "calc(100% + 24px)",
                          },
                          transform: "translate(-50%, -50%)",
                          width: "22px",
                          height: "22px",
                          borderRadius: "50%",
                          background: `linear-gradient(135deg, ${colors.coral}, ${colors.plum})`,
                          border: `4px solid ${colors.ivory}`,
                          boxShadow: "0 0 0 8px rgba(244,221,212,0.72)",
                          zIndex: 2,
                        },
                      }}
                    >
                      <TimelineImage
                        sx={{
                          height: 250,
                          width: "100%",
                          backgroundImage: `url(${chapter.image})`,
                          backgroundSize: "cover",
                          backgroundPosition: "center",
                          filter: "sepia(0.12) saturate(1.04) contrast(1.02)",
                        }}
                      />
                    </Box>
                  </Box>
                  </TimelineCard>
                </Box>
              </Grid>
            ))}
          </Grid>
        </TimelineShell>
      </Container>
    </Box>
  );
};

export default StoryTimeline;
