import { ChevronRight, Menu } from "lucide-react";

import { Avatar, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface Feature109Props {
  className?: string;
}

const Feature109 = ({ className }: Feature109Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("relative w-full overflow-hidden py-32", className)}
    >
      <div className="container min-w-0">
        <div className="grid min-w-0 place-items-center gap-10 lg:grid-cols-2">
          <div className="flex min-w-0 flex-col gap-5 text-start">
            <Badge variant="outline" className="w-fit bg-background">
              کمپین
            </Badge>
            <h3 className="text-balance text-3xl font-semibold lg:text-2xll">
              ردیابی UTM
            </h3>
            <p className="text-balance text-muted-foreground lg:text-lg">
              گزارش ROI
            </p>
            <Button
              className="mt-2.5 h-auto max-w-full gap-2 whitespace-normal text-balance"
              size="lg"
            >
              با سگمنت‌بندی دقیق، پیام مناسب را به مخاطب مناسب برسانید. داده رفتاری نشان می‌دهد کدام محتوا بیشترین تأثیر را روی تبدیل دارد.
              <Menu className="h-auto w-4 shrink-0" />
            </Button>
          </div>
          <div className="relative w-full min-w-0 overflow-hidden rounded-xl">
            <img
              src="/block-media/external/unsplash/photo-1567320743368-9db24e12ebf0.jpg"
              alt="تحلیل عملکرد کمپین"
              className="max-w-full rounded-xl object-cover md:aspect-video lg:aspect-auto"
            />
            <div className="absolute inset-0 rounded-xl bg-linear-to-t from-primary via-transparent to-transparent" />
            <div className="absolute inset-0 flex h-full w-full min-w-0 flex-col justify-between p-7">
              <span className="ms-auto flex w-fit max-w-full items-center gap-2 rounded-full bg-background/30 px-4 py-2.5 text-sm font-semibold backdrop-blur-sm">
                <Avatar className="size-7 shrink-0 rounded-full">
                  <AvatarImage
                    src="/block-media/shadcnblocks/block/avatar-1.webp"
                    alt="نمودار ROI"
                  />
                </Avatar>
                رشد برند
              </span>
              <div className="flex min-w-0 flex-col gap-5 text-background">
                <h4 className="text-balance text-lg font-semibold lg:text-3xl">
                  مدیریت کمپین
                </h4>
                <a href="#" className="flex items-center gap-1 font-medium">
                  سگمنت‌بندی مخاطب
                  <ChevronRight className="h-auto w-4 shrink-0 rtl:rotate-180" />
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature109 };