"use client";

import { motion } from "framer-motion";

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

interface Project8cProps {
  className?: string;
}

const Project8c = ({ className }: Project8cProps) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <motion.div
        className="container max-w-4xl"
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8 }}
      >
        <div className="mb-16 text-center">
          <motion.h1
            className="mb-4 text-3xl font-bold tracking-tight text-foreground md:text-8xl"
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
          >
            تایرل فشن
          </motion.h1>
          <motion.p
            className="text-xl text-muted-foreground md:text-2xl"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.4 }}
          >ثبت زیبایی‌شناسی یک تم تیره نئو-نوآر.</motion.p>
        </div>

        <motion.div
          className="relative mx-auto mb-12 max-w-2xl"
          initial={{ opacity: 0, scale: 0.95 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 1, delay: 0.6 }}
        >
          <div className="relative aspect-[3/2] overflow-hidden rounded-lg">
            <img
              src="/block-media/shadcnblocks/block/photos/glitch-portrait-pir7z.jpg"
              alt="نمای خلاق رابط با تم پویا"
              className="h-full w-full object-cover"
            />
          </div>
        </motion.div>

        <motion.div
          className="space-y-12 text-start"
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.8 }}
        >
          <div className="flex items-center justify-between border-b border-border pb-4">
            <div className="space-y-2">
              <h3 className="text-lg font-semibold text-foreground">
                خلاقیت
              </h3>
            </div>
            <div className="text-start">
              <p className="text-2xl text-muted-foreground">۲۲۴</p>
              <h4 className="text-sm font-semibold text-foreground">
                منطقه خلیج سان‌فرانسیسکو
              </h4>
            </div>
          </div>

          <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
            <div className="space-y-6">
              <p className="text-base leading-relaxed text-foreground">در تقاطع فناوری و طراحی، این مجموعه آینده‌نگر مرزهای رابط‌های سنتی را جابه‌جا می‌کند. گرادیان‌های هولوگرافیک، سطوح شیشه‌ای (glassmorphism) و الگوهای هندسی، زیبایی‌شناسی سایبرپانک می‌آفرینند که عصر دیجیتال ما را بازتاب می‌دهد.</p>

              <p className="text-base leading-relaxed text-foreground">داشبورد CRM با طراحی مینیمال که KPIهای فروش، خط لوله معاملات و عملکرد تیم را در یک نمای یکپارچه نمایش می‌دهد. هر ویجت داده‌های زنده را از اتصال Salesforce و HubSpot دریافت می‌کند.</p>
            </div>

            <div className="space-y-1 text-base text-muted-foreground">
              <h5 className="mb-3 font-medium text-foreground">عوامل پروژه (تیم)</h5>
              <p>مدیر خلاق: مایا چن</p>
              <p>طراح تجربه کاربری: الکس ریورا</p>
              <p>طراح رابط: جوردان کیم</p>
              <p>معمار فرانت‌اند: سام پاتل</p>
              <p>مهندس کیفیت (QA): کیسی ونگ</p>
              <p>مهندس دیزاین سیستم: رایلی مارتینز</p>
              <p>توسعه‌دهنده فرانت‌اند: تیلور بروکس</p>
            </div>
          </div>
        </motion.div>
      </motion.div>
    </section>
  );
};

export { Project8c };