make the ui of show more button similar to view archive and align it to center as well similarly , also add an animation for showing the details please and make it modern looking and advanced amazing "import React, { useEffect, useRef, useState } from 'react';
import { Link, useStaticQuery, graphql } from 'gatsby';
import { GatsbyImage, getImage } from 'gatsby-plugin-image';
import styled from 'styled-components';

import sr from '@utils/sr';
import { srConfig } from '@config';
import { Icon } from '@components/icons';
import { usePrefersReducedMotion } from '@hooks';

// Existing Styled Components
const StyledNumberedHeading = styled.h2`
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(24px, 5vw, var(--fz-heading));
  width: 100%;
  margin: 40px 0;

  &::before,
  &::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid SlateGray;
    margin: 0 15px;
  }
`;

const StyledProjectsGrid = styled.ul`
  ${({ theme }) => theme.mixins.resetList};

  a {
    position: relative;
    z-index: 1;
  }
`;

const StyledProject = styled.li`
  position: relative;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;

  @media (max-width: 768px) {
    ${({ theme }) => theme.mixins.boxShadow};
  }

  &:not(:last-of-type) {
    margin-bottom: 100px;

    @media (max-width: 768px) {
      margin-bottom: 70px;
    }

    @media (max-width: 480px) {
      margin-bottom: 30px;
    }
  }

  &:nth-of-type(odd) {
    .project-content {
      grid-column: 7 / -1;
      text-align: right;

      @media (max-width: 1080px) {
        grid-column: 5 / -1;
      }
      @media (max-width: 768px) {
        grid-column: 1 / -1;
        padding: 40px 40px 30px;
        text-align: left;
      }
      @media (max-width: 480px) {
        padding: 25px 25px 20px;
      }
    }
    .project-tech-list {
      justify-content: flex-end;

      @media (max-width: 768px) {
        justify-content: flex-start;
      }

      li {
        margin: 0 0 5px 20px;

        @media (max-width: 768px) {
          margin: 0 10px 5px 0;
        }
      }
    }

    .project-links {
      justify-content: flex-end;
      margin-left: 0;
      margin-right: -10px;

      @media (max-width: 768px) {
        justify-content: flex-start;
        margin-left: -10px;
        margin-right: 0;
      }
    }
    .project-image {
      grid-column: 1 / 8;

      @media (max-width: 768px) {
        grid-column: 1 / -1;
      }
    }
  }

  .project-content {
    position: relative;
    grid-column: 1 / 7;
    grid-row: 1 / -1;

    @media (max-width: 1080px) {
      grid-column: 1 / 9;
    }

    @media (max-width: 768px) {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
      grid-column: 1 / -1;
      padding: 40px 40px 30px;
      z-index: 5;
    }

    @media (max-width: 480px) {
      padding: 30px 25px 20px;
    }
  }

  .project-overline {
    margin: 10px 0;
    color: var(--green);
    font-family: var(--font-mono);
    font-size: var(--fz-xs);
    font-weight: 400;
  }

  .project-title {
    color: var(--lightest-slate);
    font-size: clamp(24px, 5vw, 28px);

    @media (min-width: 768px) {
      margin: 0 0 20px;
    }

    @media (max-width: 768px) {
      color: var(--white);

      a {
        position: static;

        &:before {
          content: '';
          display: block;
          position: absolute;
          z-index: 0;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
        }
      }
    }
  }

  .project-description {
    ${({ theme }) => theme.mixins.boxShadow};
    position: relative;
    z-index: 2;
    padding: 25px;
    border-radius: var(--border-radius);
    background-color: var(--light-navy);
    color: var(--light-slate);
    font-size: var(--fz-lg);

    @media (max-width: 768px) {
      padding: 20px 0;
      background-color: transparent;
      box-shadow: none;

      &:hover {
        box-shadow: none;
      }
    }

    a {
      ${({ theme }) => theme.mixins.inlineLink};
    }

    strong {
      color: var(--white);
      font-weight: normal;
    }
  }

  .project-tech-list {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
    margin: 25px 0 10px;
    padding: 0;
    list-style: none;

    li {
      margin: 0 20px 5px 0;
      color: var(--light-slate);
      font-family: var(--font-mono);
      font-size: var(--fz-xs);
      white-space: nowrap;
    }

    @media (max-width: 768px) {
      margin: 10px 0;

      li {
        margin: 0 10px 5px 0;
        color: var(--lightest-slate);
      }
    }
  }

  .project-links {
    display: flex;
    align-items: center;
    position: relative;
    margin-top: 10px;
    margin-left: -10px;
    color: var(--lightest-slate);

    a {
      ${({ theme }) => theme.mixins.flexCenter};
      padding: 10px;

      &.external {
        svg {
          width: 20px;
          height: 20px;
          margin-top: -2px;
        }
      }

      svg {
        width: 18px;
        height: 18px;
      }
    }

    .cta {
      ${({ theme }) => theme.mixins.smallButton};
      margin: 10px;
    }
  }

  .project-image {
    ${({ theme }) => theme.mixins.boxShadow};
    grid-column: 6 / -1;
    grid-row: 1 / -1;
    position: relative;
    z-index: 1;

    @media (max-width: 768px) {
      grid-column: 1 / -1;
      height: 100%;
      opacity: 0.25;
    }

    a {
      width: 100%;
      height: 100%;
      background-color: var(--green);
      border-radius: var(--border-radius);
      vertical-align: middle;

      &:hover,
      &:focus {
        background: transparent;
        outline: 0;

        &:before,
        .img {
          background: transparent;
          filter: none;
        }
      }

      &:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 3;
        transition: var(--transition);
        background-color: var(--navy);
        mix-blend-mode: screen;
      }
    }

    .img {
      border-radius: var(--border-radius);
      mix-blend-mode: multiply;
      filter: grayscale(100%) contrast(1) brightness(90%);

      @media (max-width: 768px) {
        object-fit: cover;
        width: auto;
        height: 100%;
        filter: grayscale(100%) contrast(1) brightness(50%);
      }
    }
  }
`;

// Styled Components for Show More Functionality
const ShowMoreButton = styled.button`
  background-color: var(--green);
  color: var(--white);
  border: none;
  padding: 10px 20px;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-size: var(--fz-lg);
  transition: background-color 0.3s ease, transform 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;

  &:hover,
  &:focus {
    background-color: var(--dark-green);
  }
`;

const AchievementsList = styled.ul`
  list-style: none;
  padding: 0;
  margin: 20px 0;
`;

const AchievementItem = styled.li`
  border-bottom: 1px solid var(--light-slate);
  padding: 15px 0;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: flex;
  flex-direction: column;
  
  &:hover,
  &:focus {
    background-color: var(--navy);
  }
`;

const AchievementHeader = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
`;

const ExpandIcon = styled.span`
  font-size: 18px;
  font-weight: bold;
  color: var(--lightest-slate);
`;

const AchievementDetails = styled.div`
  max-height: ${({ isOpen }) => (isOpen ? '500px' : '0')};
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.4s ease;
  opacity: ${({ isOpen }) => (isOpen ? '1' : '0')};
  margin-top: ${({ isOpen }) => (isOpen ? '10px' : '0')};
  color: var(--light-slate);

  p {
    margin: 5px 0;
  }
`;

const Featured = () => {
  const revealArchiveLink = useRef(null);
  const data = useStaticQuery(graphql`
    {
      featured: allMarkdownRemark(
        filter: { fileAbsolutePath: { regex: "/content/featured/" } }
        sort: { fields: [frontmatter___date], order: ASC }
      ) {
        edges {
          node {
            frontmatter {
              title
              cover {
                childImageSharp {
                  gatsbyImageData(width: 700, placeholder: BLURRED, formats: [AUTO, WEBP, AVIF])
                }
              }
              tech
              github
              external
              cta
            }
            html
          }
        }
      }
    }
  `);

  const featuredProjects = data.featured.edges.filter(({ node }) => node);
  const revealTitle = useRef(null);
  const revealProjects = useRef([]);
  const prefersReducedMotion = usePrefersReducedMotion();

  // Define Achievements Data Directly in the Component
  const achievements = [
    {
      title: "Completed Advanced React Course",
      date: "April 2023",
      description: "Successfully completed the Advanced React course with a focus on hooks, context API, and performance optimization.",
      details: "I delved deep into React's advanced topics, building substantial projects and enhancing my state management skills.",
    },
    {
      title: "Won Hackathon 2023",
      date: "June 2023",
      description: "Led a team to victory in the XYZ Hackathon by developing an innovative solution for real-time data visualization.",
      details: "Our project combined real-time data processing with intuitive UI/UX, earning us first place among 50+ teams.",
    },
    {
      title: "Open Source Contributor",
      date: "July 2023",
      description: "Contributed to the ABC open-source project by adding new features and improving documentation.",
      details: "Collaborated with a global team of developers to enhance the project's functionality and user experience.",
    },
    // Add more achievements as needed
  ];

  const [showMore, setShowMore] = useState(false);
  const [expandedItems, setExpandedItems] = useState({});

  useEffect(() => {
    if (prefersReducedMotion) {
      return;
    }

    sr.reveal(revealTitle.current, srConfig());
    sr.reveal(revealArchiveLink.current, srConfig());
    revealProjects.current.forEach((ref, i) => sr.reveal(ref, srConfig(i * 100)));
  }, [prefersReducedMotion]);

  const toggleShowMore = () => {
    setShowMore(!showMore);
  };

  const toggleItem = (index) => {
    setExpandedItems((prev) => ({
      ...prev,
      [index]: !prev[index],
    }));
  };

  return (
    <section id="featured">
      <StyledNumberedHeading ref={revealTitle}>
        Some Cool Achievements
      </StyledNumberedHeading>

      <StyledProjectsGrid>
        {featuredProjects &&
          featuredProjects.map(({ node }, i) => {
            const { frontmatter, html } = node;
            const { external, title, tech, github, cover, cta } = frontmatter;
            const image = getImage(cover);

            return (
              <StyledProject key={i} ref={(el) => (revealProjects.current[i] = el)}>
                <div className="project-content">
                  <div>
                    <p className="project-overline">Featured Project</p>

                    <h3 className="project-title">
                      <a href={external} target="_blank" rel="noopener noreferrer">
                        {title}
                      </a>
                    </h3>

                    <div
                      className="project-description"
                      dangerouslySetInnerHTML={{ __html: html }}
                    />

                    {tech.length > 0 && (
                      <ul className="project-tech-list">
                        {tech.map((techItem, idx) => (
                          <li key={idx}>{techItem}</li>
                        ))}
                      </ul>
                    )}

                    <div className="project-links">
                      {cta && (
                        <a href={cta} aria-label="Course Link" className="cta" target="_blank" rel="noopener noreferrer">
                          Learn More
                        </a>
                      )}
                      {github && (
                        <a href={github} aria-label="GitHub Link" target="_blank" rel="noopener noreferrer">
                          <Icon name="GitHub" size="20px" />
                        </a>
                      )}
                      {external && !cta && (
                        <a href={external} aria-label="External Link" className="external" target="_blank" rel="noopener noreferrer">
                          <Icon name="External" size="20px" />
                        </a>
                      )}
                    </div>
                  </div>
                </div>

                <div className="project-image">
                  <a href={external || github || '#'} target="_blank" rel="noopener noreferrer">
                    <GatsbyImage image={image} alt={title} className="img" />
                  </a>
                </div>
              </StyledProject>
            );
          })}
      </StyledProjectsGrid>

      {/* Show More Button */}
      <div style={{ textAlign: 'center', marginTop: '20px' }}>
        <ShowMoreButton
          onClick={toggleShowMore}
          aria-expanded={showMore}
          aria-controls="achievements-list"
        >
          {showMore ? 'Show Less' : 'Show More'}
        </ShowMoreButton>
      </div>

      {/* Achievements List */}
      {showMore && (
        <AchievementsList id="achievements-list">
          {achievements.map((achievement, index) => (
            <AchievementItem
              key={index}
              onClick={() => toggleItem(index)}
              role="button"
              tabIndex={0}
              aria-expanded={expandedItems[index] || false}
              onKeyPress={(e) => {
                if (e.key === 'Enter' || e.key === ' ') toggleItem(index);
              }}
            >
              <AchievementHeader>
                <span>{achievement.title}</span>
                <ExpandIcon>{expandedItems[index] ? '−' : '+'}</ExpandIcon>
              </AchievementHeader>
              <AchievementDetails isOpen={expandedItems[index]}>
                <p><strong>Date:</strong> {achievement.date}</p>
                <p><strong>Description:</strong> {achievement.description}</p>
                {/* Add more detailed information if available */}
                {achievement.details && <p>{achievement.details}</p>}
              </AchievementDetails>
            </AchievementItem>
          ))}
        </AchievementsList>
      )}

      <br />
      <div style={{ textAlign: 'center' }}>
        <Link
          className="inline-link archive-link"
          to="/archive"
          ref={revealArchiveLink}
          style={{ display: 'inline-block' }}
        >
          View the Archive
        </Link>
      </div>
    </section>
  );
};

export default Featured;"