"use client";

import { motion } from "framer-motion";

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

interface Project5fProps {
  className?: string;
}

const Project5f = ({ className }: Project5fProps) => {
  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-12 md:pb-16"
          initial="initial"
          animate="animate"
          variants={staggerContainer}
        >
          <motion.div
            variants={fadeInUp}
            className="rounded-xl bg-muted/20 p-8 md:p-12"
          >
            <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
              <div className="space-y-6 text-start">
                <div className="inline-flex items-center gap-3 rounded-full bg-muted/50 px-4 py-2">
                  <div className="h-1.5 w-1.5 rounded-full bg-foreground"></div>
                  <span className="text-sm font-medium text-muted-foreground">درخواست دمو</span>
                </div>
                <h1 className="text-4xl font-bold tracking-tight text-foreground md:text-5xl">مهندسی فرانت‌اند</h1>
                <p className="text-lg leading-relaxed text-muted-foreground">کاوشی معاصر در الگوهای رابط از مسیر یک دیزاین سیستم. این کار مرز میان کامپوننت‌های استاندارد و تجربه سفارشی را به چالش کسب‌وکار می‌کشد.</p>
              </div>
              <div className="rounded-lg bg-background/50 p-6">
                <div className="grid grid-cols-2 gap-6">
                  <div className="text-center">
                    <p className="text-sm font-medium text-muted-foreground">دمو</p>
                    <p className="mt-2 text-lg font-semibold text-foreground">مشاهده دموی زنده</p>
                  </div>
                  <div className="text-center">
                    <p className="text-sm font-medium text-muted-foreground">
                      سال همکاری
                    </p>
                    <p className="mt-2 text-lg font-semibold text-foreground">
                      ۲۲۴
                    </p>
                  </div>
                  <div className="text-center">
                    <p className="text-sm font-medium text-muted-foreground">
                      رسانه
                    </p>
                    <p className="mt-2 text-lg font-semibold text-foreground">نکسوس لبز</p>
                  </div>
                  <div className="text-center">
                    <p className="text-sm font-medium text-muted-foreground">
                      وضعیت
                    </p>
                    <p className="mt-2 text-lg font-semibold text-foreground">
                      فعال
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </motion.div>
        </motion.header>

        <motion.main
          initial="initial"
          animate="animate"
          variants={staggerContainer}
          className="space-y-8"
        >
          <motion.div
            variants={fadeInUp}
            className="relative aspect-[21/9] overflow-hidden rounded-xl 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" />
          </motion.div>

          <motion.div
            variants={fadeInUp}
            className="relative aspect-[16/9] overflow-hidden rounded-xl 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" />
          </motion.div>

          <motion.div
            variants={fadeInUp}
            className="relative aspect-[16/9] overflow-hidden rounded-xl bg-muted/30"
          >
            <img
              src="/block-media/shadcnblocks/block/photos/nastuh-abootalebi-yWwob8kwOCk-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="rounded-xl bg-muted/20 p-8 md:p-12"
          >
            <div className="flex flex-col gap-6 text-start md:flex-row md:items-center md:justify-between">
              <div className="space-y-2">
                <h3 className="text-xl font-bold text-foreground">نمایش زنده آنلاین</h3>
                <p className="text-muted-foreground">نمای جزئی از یک کامپوننت  ترکیب کد و طراحی</p>
              </div>
              <Button
                variant="default"
                className="bg-foreground px-8 py-4 font-medium text-background hover:bg-foreground/90"
              >پژواک  کتابخانه کامپوننت</Button>
            </div>
          </motion.div>
        </motion.main>
      </div>
    </section>
  );
};

export { Project5f };