"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";
import type { FeatureImageKey, FeatureImageSet } from "@/lib/home-images";
import { type, typeSpacing } from "@/lib/typography";
import { cn } from "@/lib/utils";

type FeaturesClientProps = {
  images: FeatureImageSet;
};

export function FeaturesClient({ images }: FeaturesClientProps) {
  const [activeItem, setActiveItem] = useState<FeatureImageKey>("item-1");
  const active = images[activeItem];

  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={cn("relative z-10 mx-auto max-w-2xl text-center", typeSpacing.sectionStack)}>
          <h2 className={type.h2}>
            پایه و اساس ارتباطات هوشمند
          </h2>
          <p className={type.body}>
            راه‌حل‌های یکپارچه‌سازی پیشرفته برای اتصال سیستم‌ها، اتوماسیون فرآیندها، تعامل با شبکه‌های اجتماعی و تحلیل داده‌ها. پلتفرم ما به شما امکان می‌دهد تا سیستم‌های مختلف را به راحتی بهم متصل کنید، فرآیندهای کسب‌وکار را خودکارسازی کنید و از قدرت داده‌ها برای تصمیم‌گیری بهتر استفاده کنید.
          </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 FeatureImageKey)}
            className="w-full"
          >
            <AccordionItem value="item-1">
              <AccordionTrigger>
                <div className={cn("flex items-center gap-2", type["list-title"])}>
                  <LinkIcon className="size-4" />
                  یکپارچه‌سازی سیستم‌ها
                </div>
              </AccordionTrigger>
              <AccordionContent>
                <p className={type.body}>
                  اتصال و هماهنگ‌سازی سیستم‌ها و سرویس‌های مختلف برای ایجاد جریان یکپارچه داده و فرآیند. ما به شما امکان می‌دهیم تا به سرویس‌ها و APIهای مختلف متصل شوید، داده‌ها را به صورت خودکار بین سیستم‌ها همگام‌سازی کنید و workflowهای یکپارچه ایجاد کنید.
                </p>
              </AccordionContent>
            </AccordionItem>
            <AccordionItem value="item-2">
              <AccordionTrigger>
                <div className={cn("flex items-center gap-2", type["list-title"])}>
                  <BarChart3 className="size-4" />
                  پنل‌های مدیریتی قدرتمند
                </div>
              </AccordionTrigger>
              <AccordionContent>
                <p className={type.body}>
                  ارائه پنل‌های کاربری پیشرفته برای نمایش آمار، تحلیل داده‌ها و مدیریت اطلاعات با رابط کاربری حرفه‌ای. داشبوردهای تعاملی و قابل تنظیم، نمایش آمار و گزارش‌های زنده، و امکان ویرایش و مدیریت اطلاعات از طریق UI قدرتمند.
                </p>
              </AccordionContent>
            </AccordionItem>
            <AccordionItem value="item-3">
              <AccordionTrigger>
                <div className={cn("flex items-center gap-2", type["list-title"])}>
                  <Share2 className="size-4" />
                  تعامل با شبکه‌های اجتماعی
                </div>
              </AccordionTrigger>
              <AccordionContent>
                <p className={type.body}>
                  ایجاد ارتباطات قدرتمند و خودکار با پلتفرم‌های مختلف شبکه‌های اجتماعی برای مدیریت و تعامل بهتر. اتصال به پلتفرم‌های مختلف اجتماعی، مدیریت و ارسال محتوا به صورت خودکار، نظارت و تحلیل تعاملات، و همگام‌سازی اطلاعات بین پلتفرم‌ها.
                </p>
              </AccordionContent>
            </AccordionItem>
            <AccordionItem value="item-4">
              <AccordionTrigger>
                <div className={cn("flex items-center gap-2", type["list-title"])}>
                  <Zap className="size-4" />
                  اتوماسیون فرآیندها
                </div>
              </AccordionTrigger>
              <AccordionContent>
                <p className={type.body}>
                  ایجاد کارهای خودکار برای اتوماتیک‌سازی فرآیندهای کسب‌وکار و کاهش کارهای دستی. تعریف و اجرای 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="bg-background relative w-full rounded-[calc(1.5rem-1px)] m-0 p-0"
                style={{ aspectRatio: `${active.image.width} / ${active.image.height}` }}
              >
                <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={active.image.src}
                      className="size-full object-cover dark:hidden"
                      alt={active.alt}
                      width={active.image.width}
                      height={active.image.height}
                      quality={100}
                      sizes="(max-width: 768px) 100vw, 50vw"
                    />
                    <Image
                      src={active.imageDark.src}
                      className="hidden size-full object-cover dark:block"
                      alt={active.alt}
                      width={active.imageDark.width}
                      height={active.imageDark.height}
                      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>
  );
}