"use client";

import { useState } from "react";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { cn } from "@/lib/utils";

const tabsData = [
  {
    id: 1,
    title: "تحلیل کانال",
    imageSrc: [
      "/block-media/shadcnblocks/block/placeholder-1.svg",
      "/block-media/shadcnblocks/block/placeholder-1.svg",
      "/block-media/shadcnblocks/block/placeholder-1.svg",
    ],
    description:
      "عنوان، تصویر یا فراخوان را تست کنید و برنده را سریع پیدا کنید.",
  },
  {
    id: 2,
    title: "اتوماسیون ایمیل",
    imageSrc: [
      "/block-media/shadcnblocks/block/placeholder-2.svg",
      "/block-media/shadcnblocks/block/placeholder-2.svg",
      "/block-media/shadcnblocks/block/placeholder-2.svg",
    ],
    description:
      "چند کانال را همزمان اجرا کنید و عملکرد هر کمپین را در یک نما مقایسه کنید.",
  },
  {
    id: 3,
    title: "A/B تست",
    imageSrc: [
      "/block-media/shadcnblocks/block/placeholder-3.svg",
      "/block-media/shadcnblocks/block/placeholder-3.svg",
      "/block-media/shadcnblocks/block/placeholder-3.svg",
    ],
    description:
      "مخاطبان را بر اساس رفتار، صنعت یا مرحله خرید دسته‌بندی کنید.",
  },
];

interface Feature145Props {
  className?: string;
}

const Feature145 = ({ className }: Feature145Props) => {
  const [activeTabId, setActiveTabId] = useState<number | null>(null);
  const [activeImage, setActiveImage] = useState<string[]>(
    tabsData[0].imageSrc,
  );
  const activeTab =
    tabsData.find((tab) => tab.imageSrc === activeImage) ?? tabsData[0];

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="m-auto mb-24 max-w-xl">
          <h2 className="mb-6 text-center text-3xl font-semibold lg:text-2xll">
            <span className="text-muted-foreground">کمپین‌هایی بسازید که واقعاً تبدیل می‌شوند</span>{" "}
            و هر کانال را از یک داشبورد بسنجید.
          </h2>
          <p className="m-auto max-w-3xl text-center text-lg lg:text-xl">
            با سگمنت‌بندی دقیق، پیام مناسب را به مخاطب مناسب برسانید. داده رفتاری نشان می‌دهد کدام محتوا بیشترین تأثیر را روی تبدیل دارد.
          </p>
          <a
            className="mx-auto mt-8 block w-fit rounded-full border-2 border-muted bg-background px-6 py-4 text-sm font-semibold transition hover:border-muted-foreground"
            href="#"
          >
            شروع کنید
          </a>
        </div>
        <div className="mb-12 flex w-full items-start justify-between gap-28">
          <div className="w-full md:w-1/2">
            <Accordion type="single" className="w-full" defaultValue="item-1">
              {tabsData.map((tab) => (
                <AccordionItem
                  key={tab.id}
                  value={`item-${tab.id}`}
                  className={cn(
                    "border-t-2 border-b-0 px-2 transition hover:bg-accent",
                    tab.id === activeTabId && "border-foreground",
                  )}
                >
                  <AccordionTrigger
                    onClick={() => {
                      setActiveImage(tab.imageSrc);
                      setActiveTabId(tab.id);
                    }}
                    className="cursor-pointer py-5 text-start no-underline! transition"
                  >
                    <h6
                      className={cn(
                        "text-xl font-semibold",
                        tab.id === activeTabId
                          ? "text-foreground"
                          : "text-muted-foreground",
                      )}
                    >
                      {tab.title}
                    </h6>
                  </AccordionTrigger>
                  <AccordionContent>
                    <p className="mt-3 text-start text-muted-foreground">
                      {tab.description}
                    </p>
                    <div className="mt-4 md:hidden">
                      <img
                        src={tab.imageSrc[0]}
                        alt={`نمای ${tab.title}`}
                        className="h-full max-h-80 w-full rounded-md object-cover"
                      />
                    </div>
                  </AccordionContent>
                </AccordionItem>
              ))}
            </Accordion>
          </div>
          <div className="relative m-auto hidden w-1/2 overflow-hidden rounded-xl bg-muted-foreground/5 px-10 py-12 before:absolute before:inset-0 before:z-[-1] before:bg-primary/50 before:[mask-image:url('/block-media/shadcnblocks/block/patterns/dot-pattern.svg')] before:[mask-size:15px] before:[mask-repeat:repeat] md:block">
            <div className="flex min-h-96 w-full items-center justify-center px-3">
              <img
                src={activeImage[0]}
                alt={`نمای ${activeTab.title}`}
                className="aspect-[1.2] w-1/2 rounded-md object-cover ps-4"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature145 };