reui-blocks/blocks/feature199.tsx

"use client";

import React, { useEffect, useRef, useState } from "react";

import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

const FEATURES = [
  {
    id: "ai-analytics",
    title: "تقسیم خودکار سرنخ",
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
    imageAlt: "داشبورد مدیریت ارتباط با مشتری",
  },
  {
    id: "cloud-integration",
    title: "گزارش عملکرد فروش",
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
    imageAlt: "نمای پایپ‌لاین فروش",
  },
  {
    id: "real-time-monitoring",
    title: "مدیریت قرارداد",
    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
    imageAlt: "پروفایل یکپارچه مشتری",
  },
  {
    id: "data-visualization",
    title: "تاریخچه تعاملات",
    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
    imageAlt: "داشبورد مدیریت ارتباط با مشتری",
  },
  {
    id: "automated-workflows",
    title: "پروفایل ۳۶۰ درجه مشتری",
    image: "/block-media/shadcnblocks/block/placeholder-5.svg",
    imageAlt: "نمای پایپ‌لاین فروش",
  },
  {
    id: "team-collaboration",
    title: "اتوماسیون مراحل فروش",
    image: "/block-media/shadcnblocks/block/placeholder-6.svg",
    imageAlt: "پروفایل یکپارچه مشتری",
  },
  {
    id: "api-integration",
    title: "پیش‌بینی درآمد",
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
    imageAlt: "داشبورد مدیریت ارتباط با مشتری",
  },
  {
    id: "custom-dashboards",
    title: "یادآور پیگیری هوشمند",
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
    imageAlt: "نمای پایپ‌لاین فروش",
  },
  {
    id: "security-features",
    title: "تقسیم خودکار سرنخ",
    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
    imageAlt: "پروفایل یکپارچه مشتری",
  },
  {
    id: "performance-metrics",
    title: "گزارش عملکرد فروش",
    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
    imageAlt: "داشبورد مدیریت ارتباط با مشتری",
  },
  {
    id: "machine-learning",
    title: "مدیریت قرارداد",
    image: "/block-media/shadcnblocks/block/placeholder-5.svg",
    imageAlt: "نمای پایپ‌لاین فروش",
  },
  {
    id: "data-encryption",
    title: "تاریخچه تعاملات",
    image: "/block-media/shadcnblocks/block/placeholder-6.svg",
    imageAlt: "پروفایل یکپارچه مشتری",
  },
  {
    id: "automated-testing",
    title: "پروفایل ۳۶۰ درجه مشتری",
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
    imageAlt: "داشبورد مدیریت ارتباط با مشتری",
  },
  {
    id: "cicd-pipeline",
    title: "اتوماسیون مراحل فروش",
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
    imageAlt: "نمای پایپ‌لاین فروش",
  },
  {
    id: "version-control",
    title: "پیش‌بینی درآمد",
    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
    imageAlt: "پروفایل یکپارچه مشتری",
  },
  {
    id: "code-analysis",
    title: "یادآور پیگیری هوشمند",
    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
    imageAlt: "داشبورد مدیریت ارتباط با مشتری",
  },
  {
    id: "database-management",
    title: "تقسیم خودکار سرنخ",
    image: "/block-media/shadcnblocks/block/placeholder-5.svg",
    imageAlt: "نمای پایپ‌لاین فروش",
  },
  {
    id: "load-balancing",
    title: "گزارش عملکرد فروش",
    image: "/block-media/shadcnblocks/block/placeholder-6.svg",
    imageAlt: "پروفایل یکپارچه مشتری",
  },
  {
    id: "container-orchestration",
    title: "مدیریت قرارداد",
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
    imageAlt: "داشبورد مدیریت ارتباط با مشتری",
  },
  {
    id: "microservices",
    title: "تاریخچه تعاملات",
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
    imageAlt: "نمای پایپ‌لاین فروش",
  },
  {
    id: "edge-computing",
    title: "پروفایل ۳۶۰ درجه مشتری",
    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
    imageAlt: "پروفایل یکپارچه مشتری",
  },
  {
    id: "serverless-functions",
    title: "اتوماسیون مراحل فروش",
    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
    imageAlt: "داشبورد مدیریت ارتباط با مشتری",
  },
  {
    id: "devops-tools",
    title: "پیش‌بینی درآمد",
    image: "/block-media/shadcnblocks/block/placeholder-5.svg",
    imageAlt: "نمای پایپ‌لاین فروش",
  },
  {
    id: "infrastructure-as-code",
    title: "یادآور پیگیری هوشمند",
    image: "/block-media/shadcnblocks/block/placeholder-6.svg",
    imageAlt: "پروفایل یکپارچه مشتری",
  },
  {
    id: "authentication-services",
    title: "تقسیم خودکار سرنخ",
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
    imageAlt: "داشبورد مدیریت ارتباط با مشتری",
  },
  {
    id: "message-queues",
    title: "گزارش عملکرد فروش",
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
    imageAlt: "نمای پایپ‌لاین فروش",
  },
  {
    id: "service-discovery",
    title: "مدیریت قرارداد",
    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
    imageAlt: "پروفایل یکپارچه مشتری",
  },
  {
    id: "api-gateway",
    title: "تاریخچه تعاملات",
    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
    imageAlt: "داشبورد مدیریت ارتباط با مشتری",
  },
  {
    id: "caching-solutions",
    title: "پروفایل ۳۶۰ درجه مشتری",
    image: "/block-media/shadcnblocks/block/placeholder-5.svg",
    imageAlt: "نمای پایپ‌لاین فروش",
  },
  {
    id: "event-streaming",
    title: "اتوماسیون مراحل فروش",
    image: "/block-media/shadcnblocks/block/placeholder-6.svg",
    imageAlt: "پروفایل یکپارچه مشتری",
  },
  {
    id: "graphql-support",
    title: "پیش‌بینی درآمد",
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
    imageAlt: "داشبورد مدیریت ارتباط با مشتری",
  },
];

interface Feature199Props {
  className?: string;
}

const Feature199 = ({ className }: Feature199Props) => {
  const [activeFeature, setActiveFeature] = useState(0);
  const containerRef = useRef<HTMLDivElement>(null);
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const checkMobile = () => {
      setIsMobile(window.innerWidth < 768);
    };

    checkMobile();
    window.addEventListener("resize", checkMobile);

    return () => window.removeEventListener("resize", checkMobile);
  }, []);

  useEffect(() => {
    if (!isMobile || !containerRef.current) return;

    const handleScroll = () => {
      const container = containerRef.current;
      if (!container) return;
      const items = container.getElementsByClassName("feature-item");
      const containerMiddle = window.innerHeight * 0.6;

      let closestItem: number | null = null;
      let closestDistance = Infinity;

      Array.from(items).forEach((item, index) => {
        const rect = item.getBoundingClientRect();
        const distance = Math.abs(rect.top + rect.height / 2 - containerMiddle);

        if (distance < closestDistance) {
          closestDistance = distance;
          closestItem = index;
        }
      });

      if (closestItem !== null) {
        setActiveFeature(closestItem);
      }
    };

    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, [isMobile]);

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <h2 className="mb-10 text-xl font-bold text-balance md:text-2xll lg:mb-20 lg:text-2xll">
          هر سرنخ را تا قرارداد دنبال کنید
        </h2>
        <div className="relative gap-6 pb-72 md:grid md:grid-cols-5 md:pb-0">
          <div className="col-span-3 pb-4 text-start" ref={containerRef}>
            <Separator />
            {FEATURES.map((feature, index) => (
              <React.Fragment key={feature.id}>
                <div
                  className="feature-item py-3"
                  onMouseEnter={() => !isMobile && setActiveFeature(index)}
                >
                  <div className="flex items-center gap-7 md:gap-16 lg:gap-28">
                    <span
                      className={cn(
                        "invisible size-2.5 shrink-0 rounded-full bg-primary md:size-3",
                        activeFeature === index && "visible",
                      )}
                    />
                    <p
                      className={cn(
                        "text-[clamp(1.65rem,3vw,2.15rem)] font-bold text-muted-foreground",
                        activeFeature === index && "text-primary",
                      )}
                    >
                      {feature.title}
                    </p>
                  </div>
                </div>
                <Separator />
              </React.Fragment>
            ))}
          </div>
          <div className="sticky bottom-3 start-3 col-span-2 h-72 w-fit border md:top-20 md:h-fit">
            <img
              src={FEATURES[activeFeature].image}
              alt={FEATURES[activeFeature].imageAlt}
              className="h-72 md:h-auto"
            />
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature199 };