"use client";

import { motion } from "framer-motion";

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

interface Project5dProps {
  className?: string;
}

const Project5d = ({ className }: Project5dProps) => {
  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 max-w-4xl">
        <motion.header
          className="pb-16 text-start md:pb-20"
          initial="initial"
          animate="animate"
          variants={staggerContainer}
        >
          <motion.div variants={fadeInUp} className="space-y-6">
            <div className="flex items-center gap-3">
              <div className="h-0.5 w-8 bg-foreground"></div>
              <span className="text-xs font-medium tracking-widest text-muted-foreground">نکسوس لبز</span>
            </div>
            <h1 className="text-4xl font-normal tracking-tight text-foreground md:text-5xl">چشم‌انداز طراحی</h1>
            <p className="max-w-2xl text-base leading-relaxed text-muted-foreground">کاوشی معاصر در الگوهای رابط از مسیر یک دیزاین سیستم. این کار مرز میان کامپوننت‌های استاندارد و تجربه سفارشی را به چالش کسب‌وکار می‌کشد.</p>
          </motion.div>
        </motion.header>

        <motion.main
          initial="initial"
          animate="animate"
          variants={staggerContainer}
          className="space-y-12 text-start"
        >
          <motion.div
            variants={fadeInUp}
            className="relative aspect-[4/3] overflow-hidden bg-muted/30"
          >
            <img
              src="/block-media/shadcnblocks/block/photos/michel-isamuna-kL-EAXnMAp0-unsplash.jpg"
              alt="پژواک  نمای اصلی کتابخانه کامپوننت"
              className="h-full w-full object-cover"
            />
            <div className="absolute inset-0 bg-background/5" />
          </motion.div>

          <motion.div
            variants={fadeInUp}
            className="grid grid-cols-2 gap-8 md:grid-cols-4"
          >
            <div className="space-y-2">
              <p className="text-xs font-medium text-muted-foreground">دمو</p>
              <p className="text-sm text-foreground">مشاهده دموی کامل</p>
            </div>
            <div className="space-y-2">
              <p className="text-xs font-medium text-muted-foreground">سال همکاری</p>
              <p className="text-sm text-foreground">۲۲۴</p>
            </div>
            <div className="space-y-2">
              <p className="text-xs font-medium text-muted-foreground">
                رسانه
              </p>
              <p className="text-sm text-foreground">مهندسی فرانت‌اند</p>
            </div>
            <div className="space-y-2">
              <p className="text-xs font-medium text-muted-foreground">
                وضعیت
              </p>
              <p className="text-sm text-foreground">در حال نمایش</p>
            </div>
          </motion.div>

          <motion.div
            variants={fadeInUp}
            className="relative aspect-[3/2] overflow-hidden bg-muted/30"
          >
            <img
              src="/block-media/shadcnblocks/block/photos/alvin-engler-bIhpiQA009k-unsplash.jpg"
              alt="نمای جزئی از یک کامپوننت  ترکیب کد و طراحی"
              className="h-full w-full object-cover"
            />
            <div className="absolute inset-0 bg-background/5" />
          </motion.div>

          <motion.div variants={fadeInUp} className="space-y-6">
            <h2 className="text-xl font-medium text-foreground">نمایش زنده آنلاین</h2>
            <p className="leading-relaxed text-muted-foreground">این مجموعه از کاوش عمیق ما در الگوهای تکرارشونده رابط کاربری برمی‌خیزد. با مشاهده دقیق و طراحی اصولی، جوهره کامپوننت‌های قابل‌استفاده مجدد، ساختار بلاک‌ها و رفتار حالت‌ها که فرم نهایی رابط را تعریف می‌کنند، استخراج کرده‌ایم.</p>
          </motion.div>

          <motion.div
            variants={fadeInUp}
            className="relative aspect-[16/9] overflow-hidden bg-muted/30"
          >
            <img
              src="/block-media/shadcnblocks/block/photos/christopher-gower-vjMgqUkS8q8-unsplash.jpg"
              alt="نمایش کتابخانه کامپوننت مدرن  ارائه معاصر یک دیزاین سیستم متن‌باز"
              className="h-full w-full object-cover"
            />
            <div className="absolute inset-0 bg-background/5" />
          </motion.div>

          <motion.div variants={fadeInUp} className="pt-8">
            <Button
              variant="default"
              className="w-full bg-foreground py-6 font-medium text-background hover:bg-foreground/90"
            >پژواک  کتابخانه کامپوننت</Button>
          </motion.div>
        </motion.main>
      </div>
    </section>
  );
};

export { Project5d };