import React from "react";

import { Ripple } from "@/components/magicui/ripple";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface Feature252Props {
  className?: string;
}

const Feature252 = ({ className }: Feature252Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "relative w-full min-w-0 overflow-hidden bg-muted py-32",
        className,
      )}
    >
      <div className="container min-w-0">
        <div className="relative h-92 w-full min-w-0 max-w-full overflow-hidden rounded-4xl border bg-background p-4">
          <svg
            className="absolute start-0 top-0 size-full max-w-full p-4"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            aria-hidden="true"
          >
            <rect
              opacity="0.2"
              width="100%"
              height="100%"
              rx="22"
              strokeWidth="2"
              stroke="currentColor"
              strokeDasharray="7 12"
            />
          </svg>
          <div className="relative flex size-full min-w-0 items-center justify-center overflow-hidden rounded-3xl text-center">
            <div className="relative z-10 flex min-w-0 flex-col items-center gap-4 px-2">
              <p className="mx-auto max-w-sm text-pretty text-muted-foreground lg:text-xl">
                گزارش‌های بصری نشان می‌دهند کدام اقدام بیشترین اثر را روی درآمد و نگهداشت مشتری داشته است.
              </p>
              <h1 className="text-xl font-medium tracking-tighter text-balance break-words sm:text-2xl md:text-2xll">
                داده پراکنده را به تصمیم تبدیل کنید
              </h1>
              <Button
                variant="secondary"
                className="relative z-10 mb-16 w-fit rounded-none! border px-10 sm:mb-20"
              >
                شروع کنید
              </Button>
            </div>

            {/* Keep ripple circles inside the card: smaller radius + milder offset */}
            <Ripple
              mainCircleSize={280}
              numCircles={6}
              className="absolute inset-x-0 -bottom-32 top-auto h-64 overflow-hidden"
            />
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature252 };