"use client";

import { motion } from "framer-motion";

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

interface Project8aProps {
  className?: string;
}

const Project8a = ({ className }: Project8aProps) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <motion.div
        className="container"
        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>

      <motion.div
        className="relative mb-16 w-full"
        initial={{ opacity: 0, scale: 0.95 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ duration: 1, delay: 0.6 }}
      >
        <div className="relative aspect-[16/9] overflow-hidden">
          <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="container"
        initial={{ opacity: 0, y: 30 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8, delay: 0.8 }}
      >
        <div className="grid w-full grid-cols-1 text-start md:grid-cols-2">
          <div className="space-y-2">
            <h3 className="text-lg font-semibold text-foreground">خلاقیت</h3>
          </div>

          <div className="space-y-6">
            <div className="flex justify-between">
              <p className="text-2xl text-muted-foreground">۲۲۴</p>
              <h4 className="text-sm font-semibold text-foreground">
                منطقه خلیج سان‌فرانسیسکو
              </h4>
            </div>

            <p className="text-base leading-relaxed text-foreground">در تقاطع فناوری و طراحی، این مجموعه آینده‌نگر مرزهای رابط‌های سنتی را جابه‌جا می‌کند. گرادیان‌های هولوگرافیک، سطوح شیشه‌ای (glassmorphism) و الگوهای هندسی، زیبایی‌شناسی سایبرپانک می‌آفرینند که عصر دیجیتال ما را بازتاب می‌دهد. این رابط از افکت‌های نور و سطوح بازتابنده بهره می‌برد تا حس آینده‌نگر را تقویت کند و هر صفحه را به بیانی از ظرافت فردا تبدیل کند.</p>

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

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

export { Project8a };