Metatron-Website-India/src/components/isotope/CaseStudies.js

"use client";

import { useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { PortfolioData } from "@/utils/constant.utils";

const tabs = [
  { label: "All items", value: "*" },
  { label: "Web Development", value: "web" },
  { label: "Graphic Design", value: "graphic" },
  { label: "Google Meta Ads", value: "meta" },
  { label: "Shopify Store", value: "shopify" },
  { label: "Logo Branding", value: "logo" },
  { label: "Video Editing", value: "video" },
];

const CaseStudies = () => {
  const [activeTab, setActiveTab] = useState("*");

  const filteredItems =
    activeTab === "*"
      ? PortfolioData
      : PortfolioData.filter((item) => item.category === activeTab);

  return (
    <>
      {/* Title Section */}
      <div className="row case-study-bg">
        <div className="col-lg-12">
          <div className="consen-section-title upper text-center pb-50">
            <h5>Case Studies</h5>
            <h2>
              We Serve the Best Works <br />
              View <span>Case Studies</span>
            </h2>
          </div>
        </div>

        {/* Portfolio Shapes */}
        <div className="portfolio-shape">
          <div className="port-shape-thumb rotateme">
            <Image
              src="/assets/images/elements/element-3.webp"
              alt="shape"
              width={100}
              height={100}
              priority
            />
          </div>
          <div className="port-shape-thumb2 bounce-animate2">
            <Image
              src="/assets/images/about/3.webp"
              alt="shape2"
              width={133}
              height={283}
              priority
            />
          </div>
        </div>

        {/* Tabs */}
        <div className="col-lg-12">
          <div className="portfolio_nav">
            <div className="portfolio_menu">
              <ul className="menu-filtering d-flex justify-content-center flex-wrap gap-3 list-unstyled">
                {tabs.map((tab) => (
                  <li
                    key={tab.value}
                    className={`c-pointer ${activeTab === tab.value ? "current_menu_item" : ""}`}
                    onClick={() => setActiveTab(tab.value)}
                  >
                    {tab.label}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </div>

      {/* Portfolio Grid */}
      <div className="row image_load">
        {filteredItems.map((item) => (
          <div
            key={item.id}
            className={`${item.colClass} grid-item ${item.category} ${item.itemClass || ""}`}
          >
            <div className="case-study-single-box">
              <div className="case-study-thumb2">
                {/* ✅ Video Handling Updated */}
                {item.video ? (
                  // If YouTube link present → show embedded video
                  item.video.includes("youtube.com") || item.video.includes("youtu.be") ? (
                    <iframe
                      width="100%"
                      height="315"
                      src={
                        item.video
                          .replace("watch?v=", "embed/")
                          .replace("youtu.be/", "youtube.com/embed/")
                          .replace("youtube.com/shorts/", "youtube.com/embed/")
                      }
                      title={item.title}
                      frameBorder="0"
                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                      allowFullScreen
                      style={{
                        width: "100%",
                        height: "auto",
                        aspectRatio: "16/9",
                        borderRadius: "8px",
                        objectFit: "cover",
                      }}
                    ></iframe>

                  ) : (
                    // Otherwise show normal local video
                    <video
                      src={item.video}
                      controls
                      style={{
                        width: "100%",
                        height: "auto",
                        objectFit: "cover",
                        borderRadius: "8px",
                      }}
                    />
                  )
                ) : (
                  <Image
                    src={item.image}
                    alt={item.alt}
                    width={600}
                    height={400}
                    className="loaded"
                    priority
                    style={{ width: "100%", height: "auto", objectFit: "contain" }}
                  />
                )}

                {/* Lightbox Icon */}
                {item.category !== "video" && item.imagePopup && (
                  <div className="single_portfolio_icon">
                    <a
                      className="portfolio-icon venobox vbox-item"
                      data-gall="myportfolio"
                      href={item.imagePopup}
                    >
                      <i className="bi bi-card-image" />
                    </a>
                  </div>
                )}

                {/* Title & Description */}
                <div className="case-study-content">
                  <div className={item.contentInnerClass || "case-study-content-inner"}>
                    <div className="case-study-title">
                      <h6>{item.title}</h6>
                      <h3>
                        <Link
                          href={item.link || "#"}
                          target={item.link && item.link !== "#" ? "_blank" : "_self"}
                          onClick={(e) => {
                            if (!item.link || item.link === "#") {
                              e.preventDefault();
                            }
                          }}
                        >
                          {item.name}
                        </Link>
                      </h3>
                    </div>
                  </div>
                </div>

                {/* Optional Video */}
                {item.videoLink && !["meta", "graphic"].includes(item.category) && (
                  <div className="video-icon style-two">
                    <a className="video-vemo-icon" href={item.videoLink} target="_blank">
                      <i className="fa fa-play" />
                    </a>
                  </div>
                )}
              </div>
            </div>
          </div>
        ))}
      </div>
    </>
  );
};

export default CaseStudies;