"use client";

import { motion } from "framer-motion";

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

interface Project5Props {
  className?: string;
}

const Project5 = ({ className }: Project5Props) => {
  const fadeInUp = {
    initial: { opacity: 0, y: 20 },
    animate: { opacity: 1, y: 0 },
    transition: { duration: 0.6 },
  };

  const staggerContainer = {
    animate: {
      transition: {
        staggerChildren: 0.1,
      },
    },
  };

  return (
    <section dir="rtl" lang="fa" className={cn("py-24 md:py-32", className)}>
      <div className="container space-y-8">
        <motion.header
          className="pb-8 text-start md:pb-12"
          initial="initial"
          animate="animate"
          variants={staggerContainer}
        >
          <div className="flex flex-col gap-y-12 lg:flex-row lg:items-start lg:justify-between">
            <motion.div variants={fadeInUp} className="flex-1">
              <h1 className="text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl">چشم‌انداز طراحی</h1>
              <motion.p
                variants={fadeInUp}
                className="mt-6 max-w-xl text-lg leading-relaxed font-medium text-muted-foreground"
              >کاوشی معاصر در الگوهای رابط از مسیر یک دیزاین سیستم. این کار مرز میان کامپوننت‌های استاندارد و تجربه سفارشی را به چالش کسب‌وکار می‌کشد و گفت‌وگویی میان کاربر و سادگی خام رابط می‌آفریند.</motion.p>
            </motion.div>

            <motion.div
              variants={fadeInUp}
              className="w-full max-w-md space-y-4"
            >
              <div className="flex items-center justify-between border-b border-border pb-3">
                <span className="font-medium text-muted-foreground">
                  استودیو
                </span>
                <span className="font-medium text-foreground">نکسوس لبز</span>
              </div>
              <div className="flex items-center justify-between border-b border-border pb-3">
                <span className="font-medium text-muted-foreground">دمو</span>
                <span className="font-medium text-foreground">مهندسی فرانت‌اند</span>
              </div>
              <div className="flex items-center justify-between border-b border-border pb-3">
                <span className="font-medium text-muted-foreground">سال همکاری</span>
                <span className="font-medium text-foreground">۲۲۴</span>
              </div>
              <div className="flex items-center justify-between border-b border-border pb-3">
                <span className="font-medium text-muted-foreground">
                  حوزه
                </span>
                <span className="font-medium text-foreground">نمایش</span>
              </div>
              <div className="flex items-center justify-between">
                <span className="font-medium text-muted-foreground">نمایش زنده آنلاین</span>
                <Button
                  variant="link"
                  className="h-auto p-0 font-medium text-foreground hover:text-primary"
                >
                  مشاهده جزئیات
                </Button>
              </div>
            </motion.div>
          </div>
        </motion.header>

        <motion.main
          initial="initial"
          animate="animate"
          variants={staggerContainer}
        >
          <motion.div
            variants={fadeInUp}
            className="relative aspect-video overflow-hidden rounded-lg bg-muted/30"
          >
            <img
              src="/block-media/shadcnblocks/block/photos/nubelson-fernandes-xxa7qYObMrI-unsplash.jpg"
              alt="نمایش کتابخانه کامپوننت مدرن  ارائه معاصر یک دیزاین سیستم متن‌باز"
              className="h-full w-full object-cover"
            />
            <div className="absolute inset-0 bg-background/5" />
          </motion.div>
        </motion.main>

        <motion.div
          initial="initial"
          animate="animate"
          variants={staggerContainer}
          className="space-y-8"
        >
          <motion.div
            variants={fadeInUp}
            className="grid grid-cols-1 gap-8 md:grid-cols-2"
          >
            <div className="relative aspect-video overflow-hidden rounded-lg bg-muted/30">
              <img
                src="/block-media/shadcnblocks/block/photos/pawel-czerwinski-O4fAgtXLRwI-unsplash.jpg"
                alt="پژواک  کتابخانه کامپوننت متن‌باز مبتنی بر ری یو آی"
                className="h-full w-full object-cover"
              />
              <div className="absolute inset-0 bg-background/5" />
            </div>
            <div className="relative aspect-video overflow-hidden rounded-lg bg-muted/30">
              <img
                src="/block-media/shadcnblocks/block/photos/marvin-meyer-SYTO3xs06fU-unsplash.jpg"
                alt="نمای جزئی از یک کامپوننت  ترکیب کد و طراحی"
                className="h-full w-full object-cover"
              />
              <div className="absolute inset-0 bg-background/5" />
            </div>
          </motion.div>
        </motion.div>

        <motion.div
          className="py-12 md:py-16"
          initial="initial"
          animate="animate"
          variants={staggerContainer}
        >
          <div className="flex flex-col gap-y-8 text-start md:flex-row md:items-start md:justify-between">
            <motion.div variants={fadeInUp}>
              <h2 className="text-lg font-semibold tracking-wide text-foreground">پژواک  کتابخانه کامپوننت</h2>
            </motion.div>
            <motion.div variants={fadeInUp} className="max-w-2xl">
              <p className="text-lg leading-relaxed font-medium text-muted-foreground">این مجموعه از کاوش عمیق ما در الگوهای تکرارشونده رابط کاربری برمی‌خیزد. با مشاهده دقیق و طراحی اصولی، جوهره کامپوننت‌های قابل‌استفاده مجدد، ساختار بلاک‌ها و رفتار حالت‌ها که فرم نهایی رابط را تعریف می‌کنند، استخراج کرده‌ایم. این نمایش، توسعه‌دهنده را دعوت می‌کند رابطه خود با بلاک‌های رابط را از منظری تازه ببیند.</p>
            </motion.div>
          </div>
        </motion.div>
      </div>
    </section>
  );
};

export { Project5 };