"use client";
import { motion } from "framer-motion";

import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

const projects1prop = [
  {
    title: "شکوفایی تجربه",
    description:
      "طراحی پروتوتایپ‌های پیشرفته رابط برای داشبوردها و محصولات مدرن.",
    image:
      "/block-media/shadcnblocks/block/photos/ali-moradi-qNic6LXHw-w-unsplash.jpg",
    tag: "معماری رابط",
  },
  {
    title: "طراحی رابط",
    description:
      "شکل‌دهی تجربه onboarding محصول از مسیر پروتوتایپ‌های سه‌بعدی و چیدمان مفهومی برای صفحات اصلی.",
    image:
      "/block-media/shadcnblocks/block/photos/israel-andrade-YI_9SivVt_s-unsplash.jpg",
    tag: "معماری اطلاعات",
  },
  {
    title: "چیدمان ماژولار",
    description:
      "کاوش الگوهای چیدمان فشرده و ماژولار برای داشبوردهای متراکم از داده.",
    image:
      "/block-media/shadcnblocks/block/photos/nastuh-abootalebi-eHD8Y1Znfpk-unsplash.jpg",
    tag: "مفهوم طراحی",
  },
  {
    title: "نماهای کلی محصول",
    description:
      "خلق چیدمان‌های رابط آرام و ظریف که کارایی را با هماهنگی بصری متعادل می‌کنند.",
    image:
      "/block-media/shadcnblocks/block/photos/simone-hutsch-lISGL8VWpPE-unsplash.jpg",
    tag: "معماری فرانت‌اند",
  },
  {
    title: "فرم + جریان",
    description:
      "بازتعریف چیدمان‌های باز داشبورد با گذارهای روان و استفاده بهینه از فضا.",
    image:
      "/block-media/shadcnblocks/block/photos/simone-hutsch-uR__S5GX8Io-unsplash.jpg",
    tag: "داشبورد ادمین تمام‌صفحه",
  },
];

interface Projects1Props {
  className?: string;
}

const Projects1 = ({ className }: Projects1Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mb-10 flex items-center justify-between border-b border-border pb-4 text-start">
          <h2 className="text-2xl font-semibold sm:text-lg">برجسته‌های معماری فرانت‌اند</h2>
        </div>
        <div className="space-y-12">
          {projects1prop.map((project, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, ease: "easeOut" }}
              className="flex flex-col-reverse gap-6 text-start md:grid md:grid-cols-2 md:pt-10"
            >
              <div className="flex flex-col justify-between">
                <h3 className="mb-2 text-lg font-medium sm:text-4xl">
                  {project.title}
                </h3>
                <div>
                  <p className="mb-3 max-w-sm text-sm font-medium text-foreground">
                    {project.description}
                  </p>
                  <Badge variant="outline" className="px-3 py-2">
                    {project.tag}
                  </Badge>
                </div>
              </div>

              <motion.div
                className="aspect-[3/2] w-full overflow-hidden rounded-sm"
                initial={{ y: -80, opacity: 0 }}
                whileInView={{ y: 0, opacity: 1 }}
                transition={{ duration: 0.8, ease: "easeOut" }}
                viewport={{ once: true }}
              >
                <img
                  src={project.image}
                  alt={project.title}
                  className="h-full w-full rounded-sm object-cover"
                />
              </motion.div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Projects1 };