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">
            صورتحساب‌یار صورتحساب اشتراک، درآمد تکرارشونده و وصول را برای کسب‌وکارهای SaaS ساده و شفاف می‌کند.
                                </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">
            مدیریت درآمد SaaS از صدور فاکتور فراتر رفته است. تیم‌های مالی به هم‌ترازی لحظه‌ای بین اشتراک، مصرف و حسابداری نیاز دارند.
                                </p>

          <h2 className="text-xl font-medium tracking-tight md:text-3xl">
            گفته می‌شد سیستم صورتحساب باید پیچیده و کند باشد.
          </h2>
          <p className="text-lg">
            سال‌ها افزودن پلاگین به ERPهای قدیمی فقط پیچیدگی بیشتر ساخت. صورتحساب‌یار از پایه برای مدل اشتراک، تخفیف، مالیات و گزارش MRR طراحی شده است تا تیم مالی و محصول روی یک داده واحد کار کنند.
                                </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">
            ساخت صورتحساب‌یار از ۲۰۱۹ آغاز و در ۲۰۲۲ عرضه عمومی شد. اتصال‌ها به درگاه پرداخت، CRM و حسابداری از ابتدا و بدون وابستگی به سامانه‌های قدیمی طراحی شده‌اند.
                                </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">
                صورتحساب‌یار را از ۲۰۱۹ ساختیم و در ۲۰۲۲ عرضه کردیم. هر اتصال پرداخت و گزارش از صفر طراحی شده است. مالکیت کامل با بنیان‌گذاران و تیم است و روی تحویل پایدار به مشتریان تمرکز داریم. اگر به ساخت زیرساخت درآمد SaaS علاقه‌مندید، موقعیت‌های باز را ببینید.
              </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 };