"use client";

import { motion } from "framer-motion";

import { cn } from "@/lib/utils";

interface Project5bProps {
  className?: string;
}

const Project5b = ({ className }: Project5bProps) => {
  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">
        <motion.header
          className="pb-16 text-start md:pb-20"
          initial="initial"
          animate="animate"
          variants={staggerContainer}
        >
          <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
            <motion.div variants={fadeInUp} className="space-y-6">
              <div className="flex items-center gap-4">
                <div className="h-px w-12 bg-foreground"></div>
                <span className="text-sm font-medium tracking-wider text-muted-foreground">نکسوس لبز</span>
              </div>
              <h1 className="text-6xl font-bold tracking-tight text-foreground md:text-7xl lg:text-8xl">
                پژواک
                <br />۴۵ بلاک</h1>
            </motion.div>
            <div className="flex justify-start pt-16">
              <div className="space-y-4">
                <h3 className="text-lg font-semibold text-foreground">جزئیات نمایش</h3>
                <div className="space-y-2">
                  <p className="text-sm text-muted-foreground">نمایش زنده آنلاین • ۲۲۴</p>
                  <p className="text-sm text-muted-foreground">چشم‌انداز طراحی</p>
                </div>
              </div>
            </div>
          </div>
        </motion.header>

        <motion.main
          initial="initial"
          animate="animate"
          variants={staggerContainer}
          className="space-y-8 md:space-y-20"
        >
          <motion.div variants={fadeInUp} className="relative">
            <div className="relative aspect-[21/9] overflow-hidden rounded-lg bg-muted/30">
              <img
                src="/block-media/shadcnblocks/block/photos/nubelson-fernandes-tAJYoec13xk-unsplash.jpg"
                alt="رابط کاربری، استایل‌دهی مدرن و کتابخانه پایه"
                className="h-full w-full object-cover"
              />
              <div className="absolute inset-0 bg-background/5" />
            </div>
          </motion.div>

          <motion.div
            variants={fadeInUp}
            className="grid grid-cols-1 gap-8 md:grid-cols-2 md:gap-16"
          >
            <div className="space-y-6">
              <div className="relative aspect-square overflow-hidden rounded-lg bg-muted/30">
                <img
                  src="/block-media/shadcnblocks/block/photos/michal-balog-HTNB1UDJ4Hg-unsplash.jpg"
                  alt="پژواک  نمای اصلی کتابخانه کامپوننت"
                  className="h-full w-full object-cover"
                />
                <div className="absolute inset-0 bg-background/5" />
              </div>
            </div>

            <div className="space-y-6">
              <div className="relative aspect-square overflow-hidden rounded-lg bg-muted/30">
                <img
                  src="/block-media/shadcnblocks/block/photos/futuristic-device-design-qcufu.png"
                  alt="جزئیات دست‌ساز کامپوننت با میکرواینتراکشن ظریف"
                  className="h-full w-full object-cover"
                />
                <div className="absolute inset-0 bg-background/5" />
              </div>
            </div>
          </motion.div>

          <motion.div
            variants={fadeInUp}
            className="grid grid-cols-1 gap-8 text-start md:gap-16 lg:grid-cols-2"
          >
            <div className="space-y-8">
              <div className="space-y-4">
                <div className="flex items-center gap-4">
                  <div className="h-px w-16 bg-foreground"></div>
                  <span className="text-sm font-medium tracking-wider text-muted-foreground">
                    مفهوم
                  </span>
                </div>
                <h2 className="text-4xl font-bold tracking-tight text-foreground lg:text-5xl">مشخصات فنی</h2>
              </div>
              <div className="space-y-6">
                <p className="text-lg leading-relaxed text-muted-foreground">این مجموعه از کاوش عمیق ما در الگوهای تکرارشونده رابط کاربری برمی‌خیزد. با مشاهده دقیق و طراحی اصولی، جوهره کامپوننت‌های قابل‌استفاده مجدد را استخراج کرده‌ایم.</p>
                <p className="leading-relaxed text-muted-foreground">این نمایش، توسعه‌دهنده را دعوت می‌کند رابطه خود با بلاک‌های رابط را از نو ببیند و ساختار بلاک‌ها و تعامل حالت‌ها را کاوش کند.</p>
              </div>
            </div>

            <div className="space-y-8">
              <div className="space-y-6">
                <div className="space-y-4">
                  <h3 className="text-xl font-semibold text-foreground">فناوری و فرآیند</h3>
                  <div className="space-y-3">
                    <div className="flex items-start gap-3">
                      <div className="mt-2 h-1 w-1 rounded-full bg-foreground"></div>
                      <p className="text-sm text-muted-foreground">اکوسیستم کامپوننت اوپن‌سورس</p>
                    </div>
                    <div className="flex items-start gap-3">
                      <div className="mt-2 h-1 w-1 rounded-full bg-foreground"></div>
                      <p className="text-sm text-muted-foreground">نمای جزئی از یک کامپوننت</p>
                    </div>
                    <div className="flex items-start gap-3">
                      <div className="mt-2 h-1 w-1 rounded-full bg-foreground"></div>
                      <p className="text-sm text-muted-foreground">مهندسی فرانت‌اند معاصر</p>
                    </div>
                  </div>
                </div>

                <div className="space-y-4">
                  <h3 className="text-xl font-semibold text-foreground">۳۲ تم</h3>
                  <div className="overflow-hidden">
                    <table className="w-full border-t border-b border-muted-foreground/20">
                      <tbody>
                        <tr className="border-b border-muted-foreground/10">
                          <td className="bg-muted/5 px-4 py-3 text-sm font-medium text-muted-foreground">بلاک‌ها</td>
                          <td className="px-4 py-3 text-sm text-foreground">۱۸۰ کامپوننت</td>
                        </tr>
                        <tr className="border-b border-muted-foreground/10">
                          <td className="bg-muted/5 px-4 py-3 text-sm font-medium text-muted-foreground">اوپن‌سورس</td>
                          <td className="px-4 py-3 text-sm text-foreground">کامپوننت‌ها</td>
                        </tr>
                        <tr>
                          <td className="bg-muted/5 px-4 py-3 text-sm font-medium text-muted-foreground">پوشش تست</td>
                          <td className="px-4 py-3 text-sm text-foreground">نمایش کتابخانه کامپوننت مدرن  نمای جزئی از یک بلاک</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </motion.div>
        </motion.main>
      </div>
    </section>
  );
};

export { Project5b };