make the theme of show more button similar to view archive, align the show more button to center, make the ui details displayed upon clicking show more better, since on mobile it is getting blue on clicking any detail and then its opening , resolve this as well "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;"