import { jsxs, jsx } from "react/jsx-runtime";
import { useState } from "react";
const GallerySection = () => {
  const [mediaType, setMediaType] = useState("photo");
  const [activeProject, setActiveProject] = useState("winter-relief");
  const projects = [
    { id: "winter-relief", label: "শীতবস্ত্র বিতরণ প্রকল্প" },
    { id: "medical-help", label: "অসহায়দের চিকিৎসা সহায়তা প্রকল্প" },
    { id: "wudu-project", label: "অজুখানার ব্যবস্থা দান প্রকল্প" },
    { id: "rehab-project", label: "পুনর্বাসন প্রকল্প" },
    { id: "duostho-medical", label: "দুস্থদের চিকিৎসা সহায়তা প্রকল্প" },
    { id: "orphan-rehab", label: "এতিমদের পুনর্বাসন প্রকল্প" },
    { id: "van-donation", label: "ভ্যান/রিকশা দান প্রকল্প" }
  ];
  const categories = [
    { id: "all", label: "সবগুলো" },
    { id: "distributed", label: "বিতরণ কার্যক্রম" },
    { id: "2023", label: "২০২৩" },
    { id: "2024", label: "২০২৪" }
  ];
  return /* @__PURE__ */ jsxs("section", { className: "gallery-section py-5 bg-white", children: [
    /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsxs("div", { className: "row g-4", children: [
      /* @__PURE__ */ jsx("div", { className: "col-lg-3", children: /* @__PURE__ */ jsxs("div", { className: "card border-0 shadow-sm rounded-4 overflow-hidden", children: [
        /* @__PURE__ */ jsxs("div", { className: "d-flex border-bottom", children: [
          /* @__PURE__ */ jsx(
            "button",
            {
              className: `flex-fill py-3 border-0 fw-bold ${mediaType === "photo" ? "bg-success text-white" : "bg-light text-dark"}`,
              onClick: () => setMediaType("photo"),
              children: "ফটো"
            }
          ),
          /* @__PURE__ */ jsx(
            "button",
            {
              className: `flex-fill py-3 border-0 fw-bold ${mediaType === "video" ? "bg-success text-white" : "bg-light text-dark"}`,
              onClick: () => setMediaType("video"),
              children: "ভিডিও"
            }
          )
        ] }),
        /* @__PURE__ */ jsx("ul", { className: "list-group list-group-flush", children: projects.map((project) => /* @__PURE__ */ jsx(
          "button",
          {
            onClick: () => setActiveProject(project.id),
            className: `list-group-item list-group-item-action border-0 py-3 small d-flex align-items-center ${activeProject === project.id ? "text-success fw-bold border-start border-success border-4" : "text-muted"}`,
            children: project.label
          },
          project.id
        )) })
      ] }) }),
      /* @__PURE__ */ jsxs("div", { className: "col-lg-9", children: [
        /* @__PURE__ */ jsx("div", { className: "d-flex flex-wrap gap-2 mb-4", children: categories.map((cat) => /* @__PURE__ */ jsx(
          "button",
          {
            className: "btn btn-outline-secondary rounded-pill px-4 btn-sm fw-bold border-light-subtle text-dark hover-success",
            children: cat.label
          },
          cat.id
        )) }),
        /* @__PURE__ */ jsx("div", { className: "row g-3", children: [1, 2, 3, 4, 5, 6].map((item) => /* @__PURE__ */ jsx("div", { className: "col-md-6 col-12", children: /* @__PURE__ */ jsxs("div", { className: "position-relative overflow-hidden rounded-4 shadow-sm group", style: { height: "260px" }, children: [
          /* @__PURE__ */ jsx(
            "img",
            {
              src: `/images/gallery/project-media-${item}.jpg`,
              alt: "Project Activity",
              className: "w-100 h-100 object-fit-cover transition-transform"
            }
          ),
          item === 4 && /* @__PURE__ */ jsx("div", { className: "position-absolute top-50 start-50 translate-middle", children: /* @__PURE__ */ jsx("div", { className: "d-flex align-items-center justify-content-center rounded-circle bg-danger text-white shadow-lg", style: { width: "55px", height: "55px" }, children: /* @__PURE__ */ jsx("i", { className: "fas fa-play" }) }) })
        ] }) }, item)) })
      ] })
    ] }) }),
    /* @__PURE__ */ jsx("style", { jsx: true, children: `
        .hover-success:hover {
          background-color: #198754 !important;
          color: white !important;
          border-color: #198754 !important;
        }
        .transition-transform {
          transition: transform 0.4s ease;
        }
        .group:hover .transition-transform {
          transform: scale(1.05);
        }
        .border-start {
            border-left: 4px solid #198754 !important;
        }
      ` })
  ] });
};
export {
  GallerySection as default
};
