MetatronLatestWebsite/src/components/home/ProjectsSection.tsx

"use client";

import React, { useState, useEffect } from 'react';
import Link from 'next/link';

const projectsData = [
    {
        id: 1,
        title: "Website Development Intern",
        description: "5 Feb, 2025 | Full Time",
        image: "/assets/images/careers/4/web.webp",
        category: "web",
        link: "#"
    },
    {
        id: 2,
        title: "Search Engine Optimization (SEO) Intern",
        description: "5 Feb, 2025 | Full Time",
        image: "/assets/images/careers/4/seo.webp",
        category: "seo",
        link: "#"
    },
    {
        id: 3,
        title: "Social Media Marketing (SMM) Intern",
        description: "5 Feb, 2025 | Full Time",
        image: "/assets/images/careers/4/smm.webp",
        category: "dm",
        link: "#"
    }
];

import CareersContactPopup from '@/components/careers/CareersContactPopup';

const categories = [
    { label: "All Items", filter: "all" },
    { label: "Website Development", filter: "web" },
    { label: "Social Media Marketing", filter: "dm" },
    { label: "Search Engine Optimization", filter: "seo" },
    { label: "Mobile App Development", filter: "mobile" },
    { label: "UI/UX Designing", filter: "uiux" },
    { label: "Graphic Designing", filter: "grap" }
];

const ProjectsSection = () => {
    const [hasMounted, setHasMounted] = useState(false);
    const [activeFilter, setActiveFilter] = useState("all");
    const [isPopupOpen, setIsPopupOpen] = useState(false);
    const [selectedPosition, setSelectedPosition] = useState("");

    useEffect(() => {
        setHasMounted(true);
    }, []);

    const openPopup = (positionTitle: string, e?: React.MouseEvent) => {
        if (e) {
            e.preventDefault();
            e.stopPropagation();
        }
        setSelectedPosition(positionTitle);
        setIsPopupOpen(true);
    };

    const closePopup = () => {
        setIsPopupOpen(false);
    };

    const filteredProjects = projectsData.filter(project =>
        activeFilter === "all" || project.category === activeFilter
    );

    // Note: Removed if (!hasMounted) return null; to fix hydration mismatch

    return (
        <section className="projects-one section-space">
            <div className="container">
                <div className="text-center projects-one__title">
                    <div className="sec-title">
                        <div className="sec-title__shape"></div>
                        <h6 className="sec-title__tagline">BUILD YOUR CAREER</h6>
                        <h3 className="sec-title__title">Our Open <span>positions</span></h3>
                    </div>
                </div>

                <div className="post-filter projects-one__filter__list mb-60 text-center">
                    {/* Row 1: All Items */}
                    <div className="d-flex justify-content-center mb-4 pr-10">
                        <button
                            suppressHydrationWarning
                            className={`list-unstyled-item ${activeFilter === "all" ? "active" : ""}`}
                            onClick={() => setActiveFilter("all")}
                        >
                            All Items
                        </button>
                    </div>

                    {/* Row 2: Next 3 tabs */}
                    <div className="d-flex justify-content-center mb-4 flex-wrap gap-3">
                        {categories.slice(1, 4).map((cat, idx) => (
                            <button
                                key={idx}
                                suppressHydrationWarning
                                className={`list-unstyled-item ${activeFilter === cat.filter ? "active" : ""}`}
                                onClick={() => setActiveFilter(cat.filter)}
                            >
                                {cat.label}
                            </button>
                        ))}
                    </div>

                    {/* Row 3: Last 3 tabs */}
                    <div className="d-flex justify-content-center flex-wrap gap-3">
                        {categories.slice(4, 7).map((cat, idx) => (
                            <button
                                key={idx}
                                suppressHydrationWarning
                                className={`list-unstyled-item ${activeFilter === cat.filter ? "active" : ""}`}
                                onClick={() => setActiveFilter(cat.filter)}
                            >
                                {cat.label}
                            </button>
                        ))}
                    </div>
                </div>

                <div className="projects-grid d-flex flex-wrap justify-content-center">

                    {filteredProjects.map((project) => (
                        <div key={project.id} className="project-item">
                            <div className="projects-one__card" style={{ cursor: 'pointer' }} onClick={(e) => openPopup(project.title, e)}>
                                <img loading="lazy" src={project.image} alt={project.title} />
                                <div className="projects-one__card__hover d-flex">
                                    <div className="projects-one__card__hover-mask"></div>
                                    <div className="projects-one__card__hover-content-inner">
                                        <div className="projects-one__card__hover-text">
                                            <h3 style={{ color: 'white' }}>
                                                {project.title}
                                            </h3>
                                            <p>{project.description}</p>
                                        </div>
                                        <div className="projects-one__card__hover-item"></div>
                                        <div
                                            className="projects-one__card__hover-link"
                                            style={{ cursor: 'pointer' }}
                                            onClick={(e) => openPopup(project.title, e)}
                                        >
                                            <i className="fa fa-arrow-right"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>

                {filteredProjects.length === 0 && (
                    <div className="text-center py-5">
                        <h5 className="text-muted">No positions currently available</h5>
                        <p>Please check back later</p>
                    </div>
                )}
            </div>

            <CareersContactPopup
                isOpen={isPopupOpen}
                onClose={closePopup}
                defaultPosition={selectedPosition}
            />
        </section>
    );
};

export default ProjectsSection;