"use client";

import { ArrowRight } from "lucide-react";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface Project2dProps {
  title: string;
  title2?: string;
  year: string;
  category: string;
  client: string;
  imageSrc: string;
  imageAlt: string;
  imageCaption?: string;
  overviewHeading: string;
  mainDescription: string;
  detailDescription: string;
  buttonText: string;
  className?: string;
}

const Project2d = ({
  title = "دیجیتال",
  title2 = "تیم",
  year = "«۲۲۴»",
  category = "«دیزاین سیستم»",
  client = "«استودیو محصول»",
  imageSrc = "/block-media/shadcnblocks/block/photos/artistic-portrait-glitch-yqp6z.png",
  imageAlt = "میز کار طراح با ابزارها و عناصر دیزاین سیستم",
  imageCaption = "نمای داشبورد فروش با نمودارهای KPI و خط لوله معاملات",
  overviewHeading = "مرور پروژه",
  mainDescription = "یک رابط پویا که KPIهای فروش، نرخ تبدیل و عملکرد تیم را در یک داشبورد یکپارچه نمایش می‌دهد.",
  detailDescription = "این پروژه بر یک صفحه فرود محصول متمرکز است که برای بازتاب روح نوآورانه و پویای برند طراحی شده است. رابط با گرادیان‌های نرم و میکروانیمیشن‌های ظریف ساخته شده تا حس حرکت و مدرن‌بودن را منتقل کند. ترکیب تایپوگرافی درشت و تم تیره، هویت آینده‌نگر برند را تجسم می‌کند و چیدمان واکنش‌گرا تجربه‌ای یکدست و به‌یادماندنی می‌سازد. این رابط با بلاک‌های آماده shadcn پیاده شده تا ترکیبی از خلاقیت، سرعت و کیفیت را به نمایش بگذارد.",
  buttonText = "تماس با ما",
  className,
}: Project2dProps) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container mx-auto px-6 py-20 lg:px-12">
        <div className="mb-40">
          <div className="grid grid-cols-12 gap-8 lg:gap-16">
            <div className="col-span-12 text-start lg:col-span-7">
              <div className="mb-12">
                <div className="mb-6 inline-flex items-center gap-4">
                  <div className="h-px w-16 bg-foreground"></div>
                  <span className="text-sm font-medium tracking-widest text-muted-foreground">
                    پروژه
                  </span>
                </div>
                <h1 className="text-5xl leading-[0.95] font-light tracking-tight text-foreground md:text-7xl lg:text-8xl xl:text-9xl">
                  {title}
                  {title2 && (
                    <>
                      <br />
                      {title2}
                    </>
                  )}
                </h1>
              </div>
            </div>

            <div className="col-span-12 lg:col-span-5">
              <div className="h-full lg:pt-32">
                <div className="space-y-8">
                  <div className="rounded-lg bg-muted/50 p-8">
                    <div className="grid grid-cols-1 gap-6 text-start">
                      <div className="flex items-center justify-between border-b border-border pb-4">
                        <span className="text-sm font-medium text-muted-foreground">
                          سال همکاری
                        </span>
                        <span className="font-medium text-foreground">
                          {year}
                        </span>
                      </div>
                      <div className="flex items-center justify-between border-b border-border pb-4">
                        <span className="text-sm font-medium text-muted-foreground">
                          حوزه
                        </span>
                        <span className="font-medium text-foreground">
                          {category}
                        </span>
                      </div>
                      <div className="flex items-center justify-between">
                        <span className="text-sm font-medium text-muted-foreground">
                          سازمان مشتری
                        </span>
                        <span className="font-medium text-foreground">
                          {client}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="mb-32">
          <div className="relative">
            <div className="aspect-[5/3] overflow-hidden rounded-2xl">
              <img
                src={imageSrc}
                alt={imageAlt}
                className="h-full w-full object-cover"
              />
            </div>
            {imageCaption && (
              <div className="absolute -end-4 bottom-8 max-w-xs rounded-lg bg-background/95 p-4 lg:-end-8">
                <p className="text-start text-sm font-medium text-muted-foreground">
                  {imageCaption}
                </p>
              </div>
            )}
          </div>
        </div>

        <div className="grid grid-cols-12 gap-8 lg:gap-16">
          <div className="col-span-12 text-start lg:col-span-4">
            <div className="sticky top-8">
              <h2 className="mb-6 text-sm font-medium tracking-widest text-muted-foreground">
                {overviewHeading}
              </h2>
              <div className="h-px w-12 bg-foreground"></div>
            </div>
          </div>

          <div className="col-span-12 text-start lg:col-span-8">
            <div className="space-y-12">
              <h3 className="text-3xl leading-relaxed font-light text-foreground md:text-4xl">
                {mainDescription}
              </h3>

              <div className="prose prose-lg max-w-none">
                <p className="text-lg leading-relaxed text-muted-foreground">
                  {detailDescription}
                </p>
              </div>

              <div className="pt-8">
                <Button variant="outline" size="lg" className="group gap-2">
                  {buttonText}
                  <ArrowRight className="size-4 transition-transform rtl:rotate-180" />
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Project2d };