"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 images = {
    "item-1": {
      image: "/assets/main-pic/4section/Systems Integration.jpg",
      alt: "System integration",
    },
    "item-2": {
      image: "/assets/main-pic/4section/Powerful Management panels.jpg",
      alt: "Management panels",
    },
    "item-3": {
      image: "/assets/main-pic/4section/Interaction with Social Networks.jpg",
      alt: "Social media integration",
    },
    "item-4": {
      image: "/assets/main-pic/4section/Process Automation.jpg",
      alt: "Process automation",
    },
  };

  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="bg-background relative flex overflow-hidden rounded-3xl border p-0 m-0">
            <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-full rounded-3xl 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-3xl m-0 p-0"
                >
                  <Image
                    src={images[activeItem].image}
                    className="size-full object-cover 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>
  );
}