import { ArrowRight } from "lucide-react";
import React from "react";

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

interface Feature253Props {
  className?: string;
}

const Feature253 = ({ className }: Feature253Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("relative w-full min-w-0 overflow-hidden py-32", className)}
    >
      <div className="container min-w-0">
        <div className="relative flex h-92 w-full min-w-0 max-w-full flex-col justify-between overflow-hidden rounded-4xl border bg-muted p-6 sm:p-8 md:flex-row">
          <div className="relative z-10 flex h-full min-w-0 max-w-lg flex-col justify-center gap-4 text-start">
            <h1 className="text-xl font-medium tracking-tighter text-balance break-words md:text-2xll">
              زمان حل مسئله را کوتاه کنید
            </h1>
            <p className="text-pretty text-muted-foreground/70">
              پاسخ‌های آماده و پایگاه دانش، زمان پاسخ را کم می‌کند و کیفیت را در کل تیم یکسان نگه می‌دارد.
            </p>
            <Button
              variant="default"
              className="group relative z-10 w-fit rounded-full! border border-none bg-background px-10 tracking-tighter text-foreground shadow-none! hover:bg-background"
            >
              تیکت
              <ArrowRight className="ms-2 -rotate-45 rounded-full bg-foreground p-px text-background transition-all ease-in-out group-hover:rotate-0 rtl:rotate-[135deg] rtl:group-hover:rotate-180" />
            </Button>
          </div>
          <div className="relative mt-6 min-h-40 min-w-0 w-full flex-1 overflow-hidden md:mt-0 md:max-w-md">
            {/* Keep globe peek inside the card — avoid -end-100 / scale-150 bleed */}
            <Globe className="absolute end-0 top-0 size-full max-w-none origin-top md:-end-8 md:top-6 md:scale-110" />
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature253 };