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

import {
  CardBody,
  CardContainer,
  CardItem,
} from "@/components/aceternity/3d-card";
import { cn } from "@/lib/utils";

const FEATURES = [
  { id: "instant", label: "کمپین" },
  { id: "one-time", label: "رشد برند" },
  { id: "developer", label: "بازاریابی دیجیتال" },
  { id: "responsive", label: "جذب مخاطب" },
  { id: "production", label: "کمپین" },
  { id: "support", label: "رشد برند" },
  { id: "updates", label: "بازاریابی دیجیتال" },
  { id: "customizable", label: "جذب مخاطب" },
  { id: "performance", label: "کمپین" },
  { id: "accessibility", label: "رشد برند" },
  { id: "cross-browser", label: "بازاریابی دیجیتال" },
  { id: "docs", label: "جذب مخاطب" },
] as const;

interface Feature269Props {
  className?: string;
}

const Feature269 = ({ className }: Feature269Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("h-full w-screen overflow-hidden py-32", className)}
    >
      <div className="relative container flex h-full flex-col items-start justify-between gap-10 lg:flex-row">
        <div className="w-full space-y-5 text-start lg:w-3/5">
          <h1 className="mx-auto mb-15 w-full max-w-lg text-center text-2xll font-semibold tracking-tighter text-balance lg:mx-0 lg:text-start lg:text-2xll">
            کمپین‌هایی بسازید که واقعاً تبدیل می‌شوند
          </h1>
          <div className="mb-18 flex items-center gap-4 px-5 lg:max-w-md">
            <span className="h-px w-full bg-muted-foreground/20" />
            <p className="text-sm text-muted-foreground/50">با سگمنت‌بندی دقیق، پیام مناسب را به مخاطب مناسب برسانید. داده رفتاری نشان می‌دهد کدام محتوا بیشترین تأثیر را روی تبدیل دارد.</p>
            <span className="h-px w-full bg-muted-foreground/20" />
          </div>
          <ul className="grid grid-cols-2 gap-3 lg:max-w-md">
            {FEATURES.map((feature) => (
              <li key={feature.id} className="flex gap-2 lg:items-center">
                <BadgeCheck className="size-4 shrink-0 text-muted-foreground/80" />
                <p className="tracking-tight text-pretty text-muted-foreground/80">
                  {feature.label}
                </p>
              </li>
            ))}
          </ul>
        </div>
        <CardContainer
          className="w-full"
          containerClassName="h-full w-full p-0 m-0 lg:w-2/5"
        >
          <CardBody className="group/card flex h-full w-full! flex-col items-center justify-center rounded-3xl bg-muted/70 p-5">
            <CardItem
              translateZ="60"
              className="mt-10 mb-2 max-w-xs text-center text-3xl leading-none font-semibold tracking-tighter text-balance"
            >
              ببینید کدام کانال بیشترین سرنخ با کیفیت را می‌آورد.
            </CardItem>
            <CardItem
              as="p"
              translateZ="25"
              className="my-4 flex w-full max-w-sm items-center justify-center text-sm tracking-tight"
            >
              <span className="ms-2 opacity-50">کمپین</span>
              <span className="font-semibold">رشد برند</span>
            </CardItem>
            <CardItem translateZ="60" className="mt-4 w-full max-w-[1000px]">
              <img
                src="/block-media/shadcnblocks/block/guri3/img7.jpeg"
                height="1000"
                width="1000"
                className="h-70 w-full rounded-3xl object-cover group-hover/card:shadow-xl"
                alt="تحلیل عملکرد کمپین"
              />
            </CardItem>
          </CardBody>
        </CardContainer>
      </div>
    </section>
  );
};

export { Feature269 };