import { type SVGProps, useId } from "react";

import {
  Carousel,
  CarouselContent,
  CarouselItem,
} from "@/components/ui/carousel";
import { cn } from "@/lib/utils";

interface About8Props {
  className?: string;
}

const contentShell = "container max-w-5xl";
const proseStack = "space-y-5 md:space-y-8 lg:space-y-10";
const textInsetStart = "ps-6 md:ps-10 lg:ps-12";
const textFromStart = cn(textInsetStart, "max-w-2xl w-full");

const About8 = ({ className }: About8Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      {/* Hero Section */}
      <section
        className={cn("relative py-10 md:py-12 lg:py-15", contentShell)}
      >
        <div className={textFromStart}>
          <h1 className="text-xl font-semibold tracking-tight md:text-2xll lg:text-2xll">
            بانکی،
                                  <br />
            متفاوت
                                </h1>
          <p className="mt-4 text-xl text-muted-foreground md:text-3xl">
            مأموریت ما ایجاد تحول در خدمات مالی با بهره‌گیری از ظرفیت عظیم داده‌های مالی بلااستفاده است.
                                </p>
        </div>
        {/* Background decoration */}
        <>
          <div className="absolute -inset-40 z-[-1] [mask-image:radial-gradient(circle_at_center,black_0%,black_20%,transparent_80%)]">
            <PlusSigns className="h-full w-full text-foreground/[0.05]" />
          </div>
        </>
      </section>

      {/* Stats Section */}
      <section className={cn("border-y py-5", contentShell)}>
        <div className={textInsetStart}>
          <h2 className="font-mono text-sm font-semibold tracking-widest text-accent-foreground">
            در یک نگاه
          </h2>
          <div className="mt-6 grid grid-cols-2 gap-8 md:grid-cols-4">
          <div>
            <h3 className="text-xl font-medium tracking-tight md:text-2xll lg:text-2xll">
              ۱۵۰ هزار ریال
                                          </h3>
            <p className="mt-1 font-medium text-muted-foreground">
              سرمایه جذب‌شده
            </p>
          </div>
          <div>
            <h3 className="text-xl font-medium tracking-tight md:text-2xll lg:text-2xll">
             ۲۰ هزار 
                                          </h3>
            <p className="mt-1 font-medium text-muted-foreground">شرکت</p>
          </div>
          <div>
            <h3 className="text-xl font-medium tracking-tight md:text-2xll lg:text-2xll">
              1.3B
            </h3>
            <p className="mt-1 font-medium text-muted-foreground">
              تراکنش ماهانه
            </p>
          </div>
          <div>
            <h3 className="text-xl font-medium tracking-tight md:text-2xll lg:text-2xll">
              1.5K
            </h3>
            <p className="mt-1 font-medium text-muted-foreground">
              اتصال در دقیقه
            </p>
          </div>
          </div>
        </div>
      </section>

      {/* Mission Section */}
      <section className={cn("py-10 md:py-12 lg:py-15", contentShell)}>
        <div className={cn(textFromStart, proseStack)}>
          <p className="text-lg">
            خدمات مالی در حال تحول‌اند. اکنون زمان آن رسیده است که زیرساخت‌های مالی سازنده محصول‌محور و مبتنی بر اتصال هوشمند باشند؛ اما این تحول به معماری و زیرساختی نو نیاز دارد.
                                </p>

          <h2 className="text-xl font-medium tracking-tight md:text-3xl">
            همیشه به ما گفته بودند بانک‌ها نمی‌توانند پلتفرم باشند.
          </h2>
          <p className="text-lg">
            سال‌ها تلاش شد با افزودن لایه‌های اتصال هوشمند به سامانه‌های قدیمی، مشکلات برطرف شود؛ اما نتیجه چیزی جز پیچیدگی و ناکارآمدی نبود. تجربه کار با پلتفرم‌هایی مانند سامانه مالی، درگاه پرداخت و اعتبار خرید نشان داد که راهکارهای فعلی پاسخگوی نیاز آینده نیستند. ما باور داریم زیرساخت بانکی باید از پایه و با رویکرد اتصال‌محور بازطراحی شود.
                                </p>
        </div>
      </section>

      {/* Image Grid Section */}
      <section className="my-5 pb-10 md:my-8 md:pb-12 lg:my-12 lg:pb-15">
        <Carousel
          opts={{
            align: "start",
            direction: "rtl",
          }}
        >
          <CarouselContent className="-mr-4 ml-0">
            <CarouselItem className="basis-[80%] pl-0 pr-4 lg:basis-1/3 xl:basis-[40%]">
              <div className="relative h-[330px] lg:h-[440px] xl:h-[600px]">
                <img
                  src="/block-media/shadcnblocks/block/placeholder-1.svg"
                  alt="عضو تیم در حال کار"
                  className="object-cover"
                />
              </div>
            </CarouselItem>
            <CarouselItem className="basis-[80%] pl-0 pr-4 lg:basis-1/3 xl:basis-[40%]">
              <div className="relative h-[330px] lg:h-[440px] xl:h-[600px]">
                <img
                  src="/block-media/shadcnblocks/block/placeholder-1.svg"
                  alt="فضای کاری مدرن"
                  className="object-cover"
                />
              </div>
            </CarouselItem>
            <CarouselItem className="basis-[80%] pl-0 pr-4 lg:basis-1/3 xl:basis-[40%]">
              <div className="relative h-[330px] lg:h-[440px] xl:h-[600px]">
                <img
                  src="/block-media/shadcnblocks/block/placeholder-1.svg"
                  alt="همکاری تیم"
                  className="object-cover"
                />
              </div>
            </CarouselItem>
          </CarouselContent>
        </Carousel>
      </section>

      {/* CoreAPI Section */}
      <section className={contentShell}>
        <div className={cn("ms-auto me-0 max-w-2xl w-full", proseStack)}>
          <p className="text-lg">
            توسعه ری یو آی را از سال ۲۱۹ آغاز کردیم و در سال ۲۲۲ نخستین نسخه آن را منتشر کردیم. تمام نقطه‌های اتصال از ابتدا طراحی شده‌اند؛ بدون بدهی فنی و وابستگی به سامانه‌های قدیمی، تا زیرساختی ماندگار برای آینده خدمات مالی فراهم شود.
                                </p>

          <h2 className="text-xl font-medium tracking-tight md:text-3xl">
            ما فقط یک شرکت فناوری یا فین‌تک معمولی نیستیم؛ رویکرد ما از پایه متفاوت است.
                                </h2>

          <p className="text-lg">
            مالکیت شرکت کاملاً در اختیار بنیان‌گذاران و اعضای تیم است. با حفظ تیمی چابک و سودآور، تمام تمرکز خود را بر ارائه زیرساختی قابل اعتماد برای توسعه‌دهندگان گذاشته‌ایم.
                                </p>
        </div>
      </section>

      {/* Founding Team Section */}
      <section className={cn("py-10 md:py-12 lg:py-15", contentShell)}>
        <div className="grid gap-5 md:grid-cols-2 md:gap-10 lg:gap-16">
          <div className="order-2 md:order-1">
            <div className={textFromStart}>
              <h2 className="text-xl font-semibold tracking-tight md:text-xl">
                تیم بنیان‌گذار
              </h2>
              <p className="mt-5 text-lg md:mt-6">
                ساخت ری یو آی را از ۲۱۹ آغاز کردیم و در ۲۲۲ عرضه کردیم. هر
                نقطه اتصال از صفر طراحی شده  بدون بدهی فنی یا سیستم کهنه. برای
                نوآوری مالی در صد سال آینده ساخته شده‌ایم. صددرصد در مالکیت
                بنیان‌گذاران و تیم است، سودآوریم و تیم را کوچک نگه می‌داریم.
                به‌مرور این صفحه کامل‌تر می‌شود، اما الان تمرکزمان بر تحویل به
                توسعه‌دهندگان است. اگر به ساخت آینده اتصال‌های مالی علاقه‌مندید،
                موقعیت‌های باز زیر را ببینید.
              </p>
            </div>
          </div>
          <img
            src="/block-media/shadcnblocks/block/placeholder-1.svg"
            alt="همکاری تیم بنیان‌گذار"
            width={480}
            height={400}
            className="order-1 object-cover md:order-2"
          />
        </div>
      </section>
    </section>
  );
};

interface PlusSignsProps extends SVGProps<SVGSVGElement> {
  className?: string;
}

const PlusSigns = ({ className, ...props }: PlusSignsProps) => {
  const GAP = 16;
  const STROKE_WIDTH = 1;
  const PLUS_SIZE = 6;
  const id = useId();
  const patternId = `plus-pattern-${id}`;

  return (
    <svg width={GAP * 2} height={GAP * 2} className={className} {...props}>
      <defs>
        <pattern
          id={patternId}
          x="0"
          y="0"
          width={GAP}
          height={GAP}
          patternUnits="userSpaceOnUse"
        >
          <line
            x1={GAP / 2}
            y1={(GAP - PLUS_SIZE) / 2}
            x2={GAP / 2}
            y2={(GAP + PLUS_SIZE) / 2}
            stroke="currentColor"
            strokeWidth={STROKE_WIDTH}
          />
          <line
            x1={(GAP - PLUS_SIZE) / 2}
            y1={GAP / 2}
            x2={(GAP + PLUS_SIZE) / 2}
            y2={GAP / 2}
            stroke="currentColor"
            strokeWidth={STROKE_WIDTH}
          />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill={`url(#${patternId})`} />
    </svg>
  );
};

export { About8 };