"use client";

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import { cn } from "@/lib/utils";

const images = {
  hero: "/block-media/shadcnblocks/block/lummi/bw12.jpeg",
  carousel: [
    "/block-media/shadcnblocks/block/lummi/bw17.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw7.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw8.jpeg",
  ],
  dayOne: "/block-media/shadcnblocks/block/lummi/bw12.jpeg",
  dayTwo: [
    "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw2.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw4.jpeg",
  ],
};

const PROCESS_ALTS = ["فرآیند پیاده‌سازی ۱", "فرآیند پیاده‌سازی ۲", "فرآیند پیاده‌سازی ۳"];
const CONSTRUCTION_ALTS = [
  "جزئیات پیاده‌سازی ۱",
  "جزئیات پیاده‌سازی ۲",
  "جزئیات پیاده‌سازی ۳",
  "جزئیات پیاده‌سازی ۴",
];

interface Project7Props {
  className?: string;
}

const Project7 = ({ className }: Project7Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("", className)}>
      <section className="relative flex h-[700px] items-center justify-center overflow-hidden">
        <div
          className="absolute inset-0 bg-cover bg-center bg-no-repeat"
          style={{ backgroundImage: `url(${images.hero})` }}
        >
          <div className="absolute inset-0 bg-black/40" />
        </div>

        <div className="relative z-10 mx-auto max-w-4xl px-4 text-center text-white">
          <p className="mb-6 text-sm tracking-[0.2em] text-white/80">استودیو محصول مدرن</p>
          <h1 className="mb-6 text-4xl leading-tight font-semibold md:text-6xl lg:text-7xl">
            مرکانت
            <br />پروژه داشبورد</h1>
          <p className="mx-auto max-w-xl text-base leading-relaxed text-white/80 md:text-xl">با انتخاب دقیق فناوری و راهکار پیاده‌سازی‌های معماری نوآورانه، نه فقط یک رابط، بلکه یک دیزاین سیستم زنده و قابل‌گسترش ساخته‌ایم.</p>
        </div>
      </section>

      <section className="mx-auto max-w-4xl px-4 py-8 text-start md:py-12">
        <div className="mb-12">
          <h2 className="mb-8 text-2xl font-light text-foreground md:text-3xl">فلسفه طراحی و چشم‌انداز</h2>
          <div className="prose prose-gray max-w-none text-muted-foreground">
            <p>بخش‌های مشترک رابط از کامپوننت‌های پایه و الگوهای بازاستفاده بهره می‌برند و کاربر را به یک تجربه منسجم پیوند می‌دهند، در حالی که حسی مدرن و پیچیده حفظ می‌شود.</p>
            <p>هر جزئیات، از چیدمان KPIها تا فیلترهای گزارش، با دقت برنامه‌ریزی شد تا هم تجربه کاربر و هم انسجام کل محصول را ارتقا دهد. این داشبورد فروش، معیارهای کلیدی تیم را در یک نمای یکپارچه نمایش می‌دهد.</p>
            <p>کارایی در هر لایه محصول تنیده شده  از بارگذاری تنبل (بارگذاری هوشمند) و کش هوشمند تا کامپوننت‌های بهینه که تجربه‌ای سریع برای همه کاربران فراهم می‌کنند.</p>
          </div>
        </div>

        <div className="relative">
          <Carousel
            dir="rtl"
            opts={{
              align: "start",
              direction: "rtl",
            }}
            className="w-full"
          >
            <CarouselContent>
              {images.carousel.map((image, index) => (
                <CarouselItem key={index}>
                  <div className="aspect-[5/3] overflow-hidden">
                    <img
                      src={image}
                      alt={PROCESS_ALTS[index] ?? `فرآیند پروژه ${index + 1}`}
                      className="h-full w-full object-cover"
                    />
                  </div>
                </CarouselItem>
              ))}
            </CarouselContent>
            <CarouselPrevious className="start-4" />
            <CarouselNext className="end-4" />
          </Carousel>
        </div>
      </section>

      <section className="mx-auto max-w-4xl px-4 py-8 text-start md:py-12">
        <div className="mb-12">
          <h2 className="mb-8 text-2xl font-light text-foreground md:text-3xl">پیاده‌سازی و فناوری</h2>
          <div className="prose prose-gray max-w-none text-muted-foreground">
            <p>برجسته‌ترین ویژگی محصول، سیستم تم دولایه آن است  لایه‌ای که حالت روشن و تیره را به بهترین شکل مدیریت می‌کند و در عین حال کارایی بالا ارائه می‌دهد. هر صفحه از چیدمان تمام‌عرض بهره می‌برد که نمای کاملی از داده‌ها را قاب می‌گیرد.</p>
            <p>داشبورد مرکانت با جوایز متعدد محصول از جمله نشان بهترین تجربه کاربری و جایزه نوآوری در دیزاین سیستم شناخته شده است. این پروژه نشان می‌دهد چگونه معماری سنجیده فرانت‌اند می‌تواند تراکم داده را مدیریت کند و در عین حال فضاهایی معنادار برای تمرکز کاربر بسازد.</p>
            <p>محصول سامانه ابری پیشرویی با ۴۷ نمای کاربردی که با معماری نوآورانه، کامپوننت‌های پایدار و یکپارچگی هوشمندانه با دیزاین سیستم، کار با داده را بازتعریف می‌کند.</p>
          </div>
        </div>

        <div className="aspect-[16/9] overflow-hidden md:aspect-[21/9]">
          <img
            src={images.dayOne}
            alt="نمای اصلی داشبورد مرکانت"
            className="h-full w-full object-cover"
          />
        </div>
      </section>

      <section className="mx-auto max-w-4xl px-4 py-8 text-start md:py-12">
        <div className="mb-12">
          <h2 className="mb-8 text-2xl font-light text-foreground md:text-3xl">نوآوری معماری فرانت‌اند</h2>
          <div className="prose prose-gray max-w-none text-muted-foreground">
            <p>این پروژه نمایانگر آینده طراحی داشبوردهای سازمانی است  جایی که عملکرد، مقیاس‌پذیری و طراحی کاربرمحور گرد هم می‌آیند تا تجربه‌ای بسازند که واقعاً کار با داده را ارتقا می‌دهد.</p>
            <p>نوآوری فنی ما شامل یک معماری کامپوننت‌محور است که حجم کد را ۳۰٪ کاهش می‌دهد و در عین حال اجازه می‌دهد چیدمان‌های متمایز و منعطف محصول شکل بگیرند. این الگوهای معماری، نماهای کاربردی در چند سطح می‌آفرینند و تجربه کاربر را به سطحی تازه می‌برند.</p>
            <p>فراتر از کیفیت فنی، این محصول به محرکی برای رشد تیم تبدیل شده و سرمایه‌گذاری بیشتر در دیزاین سیستم و ابزارهای مشترک را برانگیخته که به نفع کل سازمان است.</p>
          </div>
        </div>

        <div className="grid grid-cols-2 gap-4 md:gap-6">
          {images.dayTwo.map((image, index) => (
            <div key={index} className="aspect-square overflow-hidden">
              <img
                src={image}
                alt={CONSTRUCTION_ALTS[index] ?? `جزئیات ساخت ${index + 1}`}
                className="h-full w-full object-cover"
              />
            </div>
          ))}
        </div>
      </section>

      <section className="mx-auto max-w-4xl px-4 py-8 text-start md:py-12">
        <h2 className="mb-8 text-2xl font-light text-foreground md:text-3xl">نتایج و دستاوردهای پروژه</h2>
        <div className="prose prose-gray max-w-none text-muted-foreground">
          <p>داشبورد مرکانت فصل تازه‌ای در طراحی محصولات سازمانی است. رویکرد ما بر ساخت یک سیستم ماژولار متمرکز بود که در عین حفظ یکپارچگی و وضوح، حس انسجام را در کل محصول تقویت کند.</p>
          <p>فرآیند ساخت از کامپوننت‌های آماده ری یو آی بهره برد؛ بلاک‌ها به‌صورت ماژولار و با دقت سرهم شدند. این رویکرد زمان توسعه را ۴۰٪ کاهش داد و دوباره‌کاری را به حداقل رساند.</p>
          <p>انتخاب فناوری بر پایداری و کارایی بلندمدت متمرکز بود  رابط کاربری، استایل‌دهی مدرن و کتابخانه پایه زیرساختی می‌سازند که با تغییر داده و حالت، رفتار و ظاهر متفاوتی را به‌درستی نمایش می‌دهد.</p>
        </div>
      </section>
    </section>
  );
};

export { Project7 };