"use client";

import { motion, useInView } from "framer-motion";
import { MoveUpRight } from "lucide-react";
import { useRef } from "react";

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

const heroImage =
  "/block-media/shadcnblocks/block/photos/tiny-home/erik-mclean-g3U7sqtdJ1w-unsplash.jpg";

const gridImages2 = [
  "/block-media/shadcnblocks/block/photos/tiny-home/erik-mclean-u9-yqtr6YrM-unsplash.jpg",
  "/block-media/shadcnblocks/block/photos/tiny-home/erik-mclean-VEaI2ftIV2M-unsplash.jpg",
];

const projectDetails = [
  { label: "سازمان مشتری", value: "پروژه داخلی" },
  { label: "موقعیت", value: "اوسفول، نروژ" },
  { label: "سال همکاری", value: "۲۲۴" },
  {
    label: "دامنه کار",
    value: "معماری کامپوننت‌محور، فناوری پایدار، سیستم تم مستقل",
  },
] as const;

const FadeUpOnScroll = ({
  children,
  delay = 0,
}: {
  children: React.ReactNode;
  delay?: number;
}) => {
  const ref = useRef<HTMLDivElement | null>(null);
  const isInView = useInView(ref, { once: true, margin: "-50px" });

  return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, y: 24 }}
      animate={isInView ? { opacity: 1, y: 0 } : {}}
      transition={{ duration: 0.8, delay, ease: "easeOut" }}
    >
      {children}
    </motion.div>
  );
};

interface Project1Props {
  className?: string;
}

const Project1 = ({ className }: Project1Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-8 lg:py-32", className)}>
      <div className="container space-y-6">
        <FadeUpOnScroll>
          <header className="border-b border-border pb-6 text-start md:pb-8">
            <div className="flex flex-row gap-2 md:flex-row md:gap-3">
              <h1 className="text-3xl text-foreground md:text-2xl lg:text-5xl">
                پروژه
              </h1>
              <h2 className="text-3xl font-light text-muted-foreground md:text-2xl lg:text-5xl">نورث‌بیس</h2>
            </div>
          </header>
        </FadeUpOnScroll>

        <div className="flex justify-between gap-6 font-medium">
          <p className="max-w-3xl text-start leading-relaxed font-medium text-muted-foreground">یک صفحه فرود مینیمال که سادگی و آرامش بصری طراحی اسکاندیناوی را در یک رابط سبک و سریع جای داده است.</p>
          <a
            href="#"
            className="inline-flex shrink-0 items-center gap-1 text-primary hover:underline"
          >
            مشاهده وب‌سایت
            <MoveUpRight className="h-4 w-5 rtl:-scale-x-100" />
          </a>
        </div>

        <FadeUpOnScroll delay={0.15}>
          <div className="overflow-hidden rounded-sm border border-border">
            <img
              src={heroImage}
              alt="صفحه فرود مینیمال با تایپوگرافی روشن و فضای خالی فراوان."
              className="aspect-[16/7] w-full object-cover"
            />
          </div>
        </FadeUpOnScroll>

        <FadeUpOnScroll delay={0.25}>
          <div className="flex flex-col items-start justify-end py-4 md:py-6">
            <div className="space-y-6 text-start lg:w-1/2">
              <p className="text-sm leading-relaxed text-muted-foreground md:text-base lg:text-lg">هر بخش رابط با دقت طراحی شده  کامپوننت‌های توکار، چیدمان منعطف و نماهای واکنش‌گرا، تجربه‌ای روان بدون پیچیدگی اضافی را ممکن می‌سازند. بهینه برای سرعت و ساخته‌شده با بلاک‌های آماده ری یو آی، این رابط روی همه دستگاه‌ها یکدست کار می‌کند و اصول سادگی و کارایی را در خود جای داده است.</p>
              <p className="text-sm leading-relaxed text-muted-foreground md:text-base lg:text-lg">این صفحه فرود، طراحی اسکاندیناوی را به جوهره خود رسانده است. تایپوگرافی سبک و فضای خالی سنجیده، خوانایی را به حداکثر می‌رسانند و با چیدمان مینیمال، تمرکز کاربر روی محتوای اصلی دست‌نخورده باقی می‌ماند. کل رابط با بلاک‌های آماده ری یو آی و بهینه برای سرعت ساخته شده است.</p>
              <div className="space-y-4">
                {projectDetails.map((detail) => (
                  <div
                    key={detail.label}
                    className="flex flex-col border-b border-border py-3 text-sm sm:flex-row sm:items-center sm:justify-between md:text-base"
                  >
                    <span className="text-xs font-medium tracking-wide text-muted-foreground md:text-sm">
                      {detail.label}
                    </span>
                    <span className="font-semibold text-foreground">
                      {detail.value}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </FadeUpOnScroll>

        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:gap-6">
          {gridImages2.map((src, i) => (
            <div
              key={i}
              className="overflow-hidden rounded-sm border border-border"
            >
              <img
                src={src}
                alt={
                  i === 0
                    ? "نمای داخلی رابط مینیمال با تایپوگرافی روشن، کارت‌های توکار و تم گرم."
                    : "صفحه تنظیمات با نمای کامل و دسترسی سریع."
                }
                className="w-full object-cover transition-transform duration-500"
              />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Project1 };