aragrp/components/features-12.tsx

"use client";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import {
  ChartBarIncreasingIcon,
  Database,
  Fingerprint,
  IdCard,
} 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 images = {
    "item-1": {
      image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=1207&h=929&fit=crop&q=80",
      alt: "Database visualization",
    },
    "item-2": {
      image: "https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=1207&h=929&fit=crop&q=80",
      alt: "Security authentication",
    },
    "item-3": {
      image: "https://images.unsplash.com/photo-1557683316-973673baf926?w=1207&h=929&fit=crop&q=80",
      alt: "Identity management",
    },
    "item-4": {
      image: "https://images.unsplash.com/photo-1557682250-33bd709cbe85?w=1207&h=929&fit=crop&q=80",
      alt: "Analytics dashboard",
    },
  };

  return (
    <section className="bg-white 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">
            پلتفرم ما برای اتصال آسان میان سیستم‌ها، APIها و سرویس‌های داخلی شما طراحی شده است.
            از یکپارچه‌سازی داده‌ها و احراز هویت گرفته تا پردازش رویدادها و ارسال پیام در کانال‌هایی مثل تلگرام، واتساپ یا حتی سرویس‌های اختصاصی — همه‌چیز با دقت و مقیاس‌پذیری بالا مدیریت می‌شود تا توسعه‌دهندگان و کسب‌وکارها بتوانند سریع‌تر نوآوری کنند.
          </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">
                  <Database className="size-4" />
                  تجمیع پایگاه داده
                </div>
              </AccordionTrigger>
              <AccordionContent>
                <p className="leading-relaxed tracking-normal">
                  ما داده‌های موردنیاز شما را از سیستم‌های مختلف جمع‌آوری و هماهنگ می‌کنیم؛ از دیتابیس‌های محلی تا APIهای خارجی. این قابلیت برای گزارش‌گیری، اتوماسیون و ایجاد یک نمای واحد از اطلاعات کلیدی کسب‌وکار ضروری است.
                </p>
              </AccordionContent>
            </AccordionItem>
            <AccordionItem value="item-2">
              <AccordionTrigger>
                <div className="flex items-center gap-2 text-base">
                  <Fingerprint className="size-4" />
                  احراز هویت پیشرفته
                </div>
              </AccordionTrigger>
              <AccordionContent>
                <p className="leading-relaxed tracking-normal">
                  سیستم احراز هویت امن و منعطف که از انواع روش‌ها پشتیبانی می‌کند—از OAuth تا توکن‌های اختصاصی—تا بتوانید کاربران، سرویس‌ها و اپلیکیشن‌های خود را با کمترین پیچیدگی مدیریت کنید.
                </p>
              </AccordionContent>
            </AccordionItem>
            <AccordionItem value="item-3">
              <AccordionTrigger>
                <div className="flex items-center gap-2 text-base">
                  <IdCard 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">
                  <ChartBarIncreasingIcon className="size-4" />
                  داشبورد تحلیل
                </div>
              </AccordionTrigger>
              <AccordionContent>
                <p className="leading-relaxed tracking-normal">
                  داده‌های شما به گزارش‌ها و نمودارهای قابل‌درک تبدیل می‌شود؛ چه برای نمایش فروش ماهانه یک فروشگاه، چه برای نشان دادن آمار بازدید یک سایت، یا تحلیل رفتار کاربران در یک ربات تلگرام.
                </p>
              </AccordionContent>
            </AccordionItem>
          </Accordion>

          <div className="bg-background relative flex overflow-hidden rounded-3xl border p-2">
            <div className="w-15 absolute inset-0 right-0 ml-auto border-l bg-[repeating-linear-gradient(-45deg,var(--color-border),var(--color-border)_1px,transparent_1px,transparent_8px)]"></div>
            <div className="aspect-76/59 bg-background relative w-[calc(3/4*100%+3rem)] rounded-2xl">
              <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-2xl border bg-zinc-900 shadow-md"
                >
                  <Image
                    src={images[activeItem].image}
                    className="size-full object-cover object-left-top dark:mix-blend-lighten"
                    alt={images[activeItem].alt}
                    width={1207}
                    height={929}
                  />
                </motion.div>
              </AnimatePresence>
            </div>
            <BorderBeam
              duration={6}
              size={200}
              className="from-transparent via-yellow-700 to-transparent dark:via-white/50"
            />
          </div>
        </div>
      </div>
    </section>
  );
}