"use client";

import { motion } from "framer-motion";

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

interface Project5gProps {
  className?: string;
}

const Project5g = ({ className }: Project5gProps) => {
  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 md:pb-24"
          initial="initial"
          animate="animate"
          variants={staggerContainer}
        >
          <div className="grid grid-cols-1 gap-16 lg:grid-cols-5">
            <motion.div variants={fadeInUp} className="text-start lg:col-span-3">
              <div className="space-y-8">
                <div className="space-y-4">
                  <span className="text-sm font-medium tracking-widest text-muted-foreground">نکسوس لبز / ۲۲۴</span>
                  <h1 className="text-5xl font-bold tracking-tight text-foreground md:text-6xl lg:text-7xl">
                    پژواک
                    <span className="text-muted-foreground">
                      <br />نمایش</span>
                  </h1>
                </div>
                <p className="max-w-2xl text-xl leading-relaxed text-muted-foreground">کاوشی معاصر در الگوهای رابط از مسیر یک دیزاین سیستم. این کار مرز میان کامپوننت‌های استاندارد و تجربه سفارشی را به چالش کسب‌وکار می‌کشد.</p>
              </div>
            </motion.div>

            <motion.div variants={fadeInUp} className="lg:col-span-2">
              <div className="relative aspect-[3/4] 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>
          </div>
        </motion.header>

        <motion.main
          initial="initial"
          animate="animate"
          variants={staggerContainer}
          className="space-y-16"
        >
          <motion.div
            variants={fadeInUp}
            className="grid grid-cols-1 gap-8 lg:grid-cols-3"
          >
            <div className="lg:col-span-2">
              <div className="relative aspect-[16/10] 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>
            </div>

            <div className="space-y-8 text-start">
              <div className="space-y-6">
                <h2 className="text-2xl font-bold text-foreground">اوپن‌سورس</h2>
                <div className="space-y-4">
                  <div className="border-s-2 border-border ps-4">
                    <p className="text-sm font-medium text-muted-foreground">دمو</p>
                    <p className="text-lg font-semibold text-foreground">دمو در دسترس</p>
                  </div>
                  <div className="border-s-2 border-border ps-4">
                    <p className="text-sm font-medium text-muted-foreground">
                      رسانه
                    </p>
                    <p className="text-lg font-semibold text-foreground">برنامه‌ریزی دمو</p>
                  </div>
                </div>
              </div>

              <div className="relative aspect-square 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" />
              </div>
            </div>
          </motion.div>

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

            <div className="flex items-end justify-start">
              <div className="space-y-4 text-start">
                <div>
                  <p className="text-sm text-muted-foreground">مهندسی فرانت‌اند</p>
                  <p className="text-lg font-semibold text-foreground">
                    هر روز ۱۰ صبح تا ۶ عصر
                  </p>
                </div>
                <Button
                  variant="default"
                  className="bg-foreground px-8 py-4 font-medium text-background hover:bg-foreground/90"
                >نمایش زنده آنلاین</Button>
              </div>
            </div>
          </motion.div>
        </motion.main>
      </div>
    </section>
  );
};

export { Project5g };