aragrp/components/features-12.tsx

"use client";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import {
  Link as LinkIcon,
  BarChart3,
  Share2,
  Zap,
} from "lucide-react";
import Image from "next/image";
import { useState } from "react";
import { motion, AnimatePresence } from "motion/react";
import { BorderBeam } from "./ui/border-beam";

export default function Features() {
  type ImageKey = "item-1" | "item-2" | "item-3" | "item-4";
  const [activeItem, setActiveItem] = useState<ImageKey>("item-1");

  const sectionImage = (filename: string) =>
    `/assets/main-pic/4section/${encodeURIComponent(filename)}`;

  const images = {
    "item-1": {
      image: sectionImage("Systems Integration.jpg"),
      imageDark: sectionImage("Systems Integration-dark.jpg"),
      alt: "یکپارچه‌سازی سیستم‌ها",
    },
    "item-2": {
      image: sectionImage("Powerful Management panels.jpg"),
      imageDark: sectionImage("Powerful Management panels-dark.jpg"),
      alt: "پنل‌های مدیریتی قدرتمند",
    },
    "item-3": {
      image: sectionImage("Interaction with Social Networks.jpg"),
      imageDark: sectionImage("Interaction with Social Networks_dark.jpg"),
      alt: "تعامل با شبکه‌های اجتماعی",
    },
    "item-4": {
      image: sectionImage("Process Automation.jpg"),
      imageDark: sectionImage("Process Automation-dark.jpg"),
      alt: "اتوماسیون فرآیندها",
    },
  };

  return (
    <section className="bg-background py-12 md:py-20 lg:py-32">
      <div className="bg-linear-to-b absolute inset-0 -z-10 sm:inset-6 sm:rounded-b-3xl dark:block dark:to-[color-mix(in_oklab,var(--color-zinc-900)_75%,var(--color-background))]"></div>
      <div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-16 lg:space-y-20 dark:[--color-border:color-mix(in_oklab,var(--color-white)_10%,transparent)]">
        <div className="relative z-10 mx-auto max-w-2xl space-y-6 text-center">
          <h2 className="text-balance text-2xl font-semibold md:text-3xl lg:text-4xl leading-relaxed tracking-normal">
            پایه و اساس ارتباطات هوشمند
          </h2>
          <p className="leading-relaxed tracking-normal">
            راه‌حل‌های یکپارچه‌سازی پیشرفته برای اتصال سیستم‌ها، اتوماسیون فرآیندها، تعامل با شبکه‌های اجتماعی و تحلیل داده‌ها. پلتفرم ما به شما امکان می‌دهد تا سیستم‌های مختلف را به راحتی بهم متصل کنید، فرآیندهای کسب‌وکار را خودکارسازی کنید و از قدرت داده‌ها برای تصمیم‌گیری بهتر استفاده کنید.
          </p>
        </div>

        <div className="grid gap-12 sm:px-12 md:grid-cols-2 lg:gap-20 lg:px-0">
          <Accordion
            type="single"
            value={activeItem}
            onValueChange={(value) => setActiveItem(value as ImageKey)}
            className="w-full"
          >
            <AccordionItem value="item-1">
              <AccordionTrigger>
                <div className="flex items-center gap-2 text-base">
                  <LinkIcon className="size-4" />
                  یکپارچه‌سازی سیستم‌ها
                </div>
              </AccordionTrigger>
              <AccordionContent>
                <p className="leading-relaxed tracking-normal">
                  اتصال و هماهنگ‌سازی سیستم‌ها و سرویس‌های مختلف برای ایجاد جریان یکپارچه داده و فرآیند. ما به شما امکان می‌دهیم تا به سرویس‌ها و APIهای مختلف متصل شوید، داده‌ها را به صورت خودکار بین سیستم‌ها همگام‌سازی کنید و workflowهای یکپارچه ایجاد کنید.
                </p>
              </AccordionContent>
            </AccordionItem>
            <AccordionItem value="item-2">
              <AccordionTrigger>
                <div className="flex items-center gap-2 text-base">
                  <BarChart3 className="size-4" />
                  پنل‌های مدیریتی قدرتمند
                </div>
              </AccordionTrigger>
              <AccordionContent>
                <p className="leading-relaxed tracking-normal">
                  ارائه پنل‌های کاربری پیشرفته برای نمایش آمار، تحلیل داده‌ها و مدیریت اطلاعات با رابط کاربری حرفه‌ای. داشبوردهای تعاملی و قابل تنظیم، نمایش آمار و گزارش‌های زنده، و امکان ویرایش و مدیریت اطلاعات از طریق UI قدرتمند.
                </p>
              </AccordionContent>
            </AccordionItem>
            <AccordionItem value="item-3">
              <AccordionTrigger>
                <div className="flex items-center gap-2 text-base">
                  <Share2 className="size-4" />
                  تعامل با شبکه‌های اجتماعی
                </div>
              </AccordionTrigger>
              <AccordionContent>
                <p className="leading-relaxed tracking-normal">
                  ایجاد ارتباطات قدرتمند و خودکار با پلتفرم‌های مختلف شبکه‌های اجتماعی برای مدیریت و تعامل بهتر. اتصال به پلتفرم‌های مختلف اجتماعی، مدیریت و ارسال محتوا به صورت خودکار، نظارت و تحلیل تعاملات، و همگام‌سازی اطلاعات بین پلتفرم‌ها.
                </p>
              </AccordionContent>
            </AccordionItem>
            <AccordionItem value="item-4">
              <AccordionTrigger>
                <div className="flex items-center gap-2 text-base">
                  <Zap className="size-4" />
                  اتوماسیون فرآیندها
                </div>
              </AccordionTrigger>
              <AccordionContent>
                <p className="leading-relaxed tracking-normal">
                  ایجاد کارهای خودکار برای اتوماتیک‌سازی فرآیندهای کسب‌وکار و کاهش کارهای دستی. تعریف و اجرای workflowهای خودکار، اتوماسیون بر اساس رویداد و زمان، زمان‌بندی و اجرای کارهای تکراری، و اعلان‌ها و هشدارهای خودکار.
                </p>
              </AccordionContent>
            </AccordionItem>
          </Accordion>

          <div className="relative rounded-3xl bg-linear-to-br from-primary/50 via-accent/40 to-secondary/50 p-px shadow-lg shadow-primary/10">
            <div className="bg-background relative flex overflow-hidden rounded-[calc(1.5rem-1px)] m-0 p-0">
              <div className="w-15 absolute inset-0 right-0 ml-auto border-l border-primary/15 bg-[repeating-linear-gradient(-45deg,color-mix(in_oklab,var(--color-primary)_25%,var(--color-border)),color-mix(in_oklab,var(--color-primary)_25%,var(--color-border))_1px,transparent_1px,transparent_8px)]"></div>
              <div className="aspect-76/59 bg-background relative w-full rounded-[calc(1.5rem-1px)] m-0 p-0">
                <AnimatePresence mode="wait">
                  <motion.div
                    key={`${activeItem}-id`}
                    initial={{ opacity: 0, y: 6, scale: 0.98 }}
                    animate={{ opacity: 1, y: 0, scale: 1 }}
                    exit={{ opacity: 0, y: 6, scale: 0.98 }}
                    transition={{ duration: 0.2 }}
                    className="size-full overflow-hidden rounded-[calc(1.5rem-1px)] m-0 p-0"
                  >
                    <Image
                      src={images[activeItem].image}
                      className="size-full object-cover dark:hidden"
                      alt={images[activeItem].alt}
                      width={1207}
                      height={929}
                      quality={100}
                      sizes="(max-width: 768px) 100vw, 50vw"
                    />
                    <Image
                      src={images[activeItem].imageDark}
                      className="hidden size-full object-cover dark:block"
                      alt={images[activeItem].alt}
                      width={1207}
                      height={929}
                      quality={100}
                      sizes="(max-width: 768px) 100vw, 50vw"
                    />
                  </motion.div>
                </AnimatePresence>
              </div>
              <BorderBeam
                duration={6}
                size={200}
                borderWidth={1}
                colorFrom="#FCC61D"
                colorTo="#01796F"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}