"use client";

import { motion } from "framer-motion";
import { DownloadIcon } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";

interface Timeline12Props {
  className?: string;
}

const PHASES__DATA = [
  {
    id: "phase1",
    phase: "۱",
    title: "راه‌اندازی",
    date: "۱۲ اسفند ۱۴۰۳",
    heading: "چگونه راه‌اندازی کنیم",
    description:
      "این فاز مبانی شروع کار را پوشش می‌دهد. نحوه راه‌اندازی، پیکربندی و آماده‌سازی برای مراحل بعدی را بیاموزید.",
    imageSrc:
      "/block-media/shadcnblocks/block/placeholder-1.svg",
    imageAlt: "تصویر فاز اول",
  },
  {
    id: "phase2",
    phase: "۲",
    title: "ساخت",
    date: "۱ فروردین ۱۴۰۴",
    heading: "چگونه بسازیم",
    description:
      "در این فاز روی ساختاردهی و ساخت بلاک‌های اصلی تمرکز کنید. بهترین روش‌های توسعه را یاد بگیرید.",
    imageSrc:
      "/block-media/shadcnblocks/block/placeholder-2.svg",
    imageAlt: "تصویر فاز دوم",
  },
  {
    id: "phase3",
    phase: "۳",
    title: "آزمایش",
    date: "۱۷ فروردین ۱۴۰۴",
    heading: "چگونه آزمایش کنیم",
    description:
      "آزمایش، کیفیت و پایداری را تضمین می‌کند. اشکال‌زدایی، رفع مشکلات و پالایش پروژه را بیاموزید.",
    imageSrc:
      "/block-media/shadcnblocks/block/placeholder-3.svg",
    imageAlt: "تصویر فاز سوم",
  },
  {
    id: "phase4",
    phase: "۴",
    title: "عرضه",
    date: "۲۵ فروردین ۱۴۰۴",
    heading: "چگونه عرضه کنیم",
    description:
      "فاز نهایی روی بهینه‌سازی، استقرار و اطمینان از اجرای روان برای انتشار متمرکز است.",
    imageSrc:
      "/block-media/shadcnblocks/block/placeholder-4.svg",
    imageAlt: "تصویر فاز چهارم",
  },
];

const Timeline12 = ({ className }: Timeline12Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("bg-background", className)}>
      <div className="container flex flex-col items-center justify-center py-32">
        <h1 className="mb-12 text-center text-2xll font-semibold tracking-tighter lg:mb-25 lg:text-2xll">
          تنها چهار فاز
        </h1>
        <Tabs defaultValue="phase1" dir="rtl" className="w-full text-start">
          <TabsList className="grid w-full grid-cols-4 bg-transparent p-0">
            {PHASES__DATA.map((phase) => (
              <TabsTrigger
                key={phase.id}
                className="text-md flex items-center justify-center gap-1 rounded-none border-b-2 pb-6 shadow-none! data-[state=active]:border-b-foreground"
                value={phase.id}
              >
                {phase.title}
                <span className="hidden text-foreground/40 md:inline">
                  {phase.phase}
                </span>
              </TabsTrigger>
            ))}
          </TabsList>

          {PHASES__DATA.map((phase) => (
            <TabsContent
              key={phase.id}
              value={phase.id}
              dir="rtl"
              className="mt-12 grid items-start gap-12 lg:grid-cols-2"
            >
              <div className="col-span-1 flex flex-col items-start gap-2 text-start lg:max-w-lg lg:gap-4">
                <p className="text-sm font-semibold tracking-tight text-muted-foreground">
                  {phase.date}
                </p>
                <h2 className="text-3xl font-medium tracking-tighter text-foreground md:text-2xll">
                  {phase.heading}
                </h2>
                <p className="text-lg font-normal tracking-tighter text-muted-foreground">
                  {phase.description}
                </p>
                <Button
                  variant="outline"
                  className="mt-8 flex w-fit items-center gap-2 rounded-full border border-border px-4! py-2"
                >
                  <p className="text-md font-medium text-foreground">
                    برای{" "}
                    <span className="text-foreground/80">دانلود اپ</span>{" "}
                    کلیک کنید
                  </p>
                  <DownloadIcon className="size-4 shrink-0" />
                </Button>
              </div>
              <motion.div
                initial={{ opacity: 0, y: 50 }}
                animate={{ opacity: 100, y: 0 }}
                transition={{ ease: [0, 0.71, 0.2, 1.01], duration: 0.8 }}
                className="relative z-20 col-span-1"
              >
                <Card className="group h-110 w-full rounded-3xl border border-border bg-background p-2 shadow-none">
                  <CardContent className="size-full rounded-2xl border-2 border-background bg-muted">
                    <img
                      src={phase.imageSrc}
                      className="size-full transition-all ease-in-out group-hover:scale-95"
                      alt={phase.imageAlt}
                    />
                  </CardContent>
                </Card>
              </motion.div>
            </TabsContent>
          ))}
        </Tabs>
      </div>
    </section>
  );
};

export { Timeline12 };