"use client";

import { motion } from "framer-motion";
import { ChevronRightIcon } from "lucide-react";
import React from "react";

import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils";

interface Feature238Props {
  className?: string;
}

const Feature238 = ({ className }: Feature238Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("bg-background py-32", className)}>
      <div className="container">
        <div className="mb-4 flex items-center justify-center gap-2">
          <img
            className="size-6"
            alt="تحلیل عملکرد کمپین"
            src="/block-media/shadcnblocks/block/block-1.svg"
          />
          <h2 className="text-center text-xl font-semibold tracking-tight text-foreground">
            کمپین‌هایی بسازید که واقعاً تبدیل می‌شوند
          </h2>
        </div>

        <h1 className="text-center text-2xll font-bold tracking-tighter text-balance text-foreground md:text-[100px]">
          بازاریابی را با داده هدایت کنید
          <br />
          هر کانال را از یک داشبورد بسنجید
        </h1>

        <p className="mx-auto mt-6 max-w-3xl text-center text-xl text-pretty text-muted-foreground">
          با سگمنت‌بندی دقیق، پیام مناسب را به مخاطب مناسب برسانید. داده رفتاری نشان می‌دهد کدام محتوا بیشترین تأثیر را روی تبدیل دارد.
        </p>

        <div className="relative mt-8 flex flex-col items-center justify-center">
          <Button className="w-75 rounded-2xl px-2 py-6 shadow-[0px_1px_3px_#0000001a,inset_0px_2px_0px_#ffffff40]">
            ثبت‌نام رایگان
          </Button>
          <a
            href="#"
            className="group relative z-12 flex w-75 items-center justify-center rounded-2xl py-6 text-muted-foreground hover:bg-none"
          >
            گزارش لحظه‌ای هزینه، کلیک و تبدیل به شما کمک می‌کند بودجه را از کانال‌های ضعیف به کانال‌های پربازده منتقل کنید.
            <ChevronRightIcon className="ms-1 size-4 transition-all ease-in-out group-hover:ms-4 rtl:rotate-180" />
          </a>
        </div>

        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 100 }}
          transition={{ ease: [0, 0.71, 0.2, 1.01], duration: 0.8 }}
          className="relative mt-22 h-100"
        >
          <motion.div
            initial={{ y: 250 }}
            animate={{ y: 0 }}
            whileHover={{ y: -50 }}
            transition={{ ease: [0, 0.71, 0.2, 1.01], duration: 0.8 }}
            className="absolute top-20 start-0 z-8 hidden h-[350px] w-[550px] flex-col items-center justify-center rounded-3xl border border-border bg-muted p-2 md:flex"
          >
            <Card className="relative h-full w-full rounded-2xl border">
              <CardContent className="flex h-full w-full items-center justify-center p-0">
                <div className="absolute start-4 top-4 flex items-center gap-2">
                  <div className="size-3.5 rounded-full bg-red-500" />
                  <div className="size-3.5 rounded-full bg-yellow-500" />
                  <div className="size-3.5 rounded-full bg-green-500" />
                </div>
                <img
                  className="size-30"
                  alt="نمودار ROI"
                  src="/block-media/shadcnblocks/block/block-1.svg"
                />
              </CardContent>
            </Card>
          </motion.div>
          <motion.div
            initial={{ y: 250 }}
            animate={{ y: 0 }}
            whileHover={{ y: -50 }}
            transition={{
              ease: [0, 0.71, 0.2, 1.01],
              duration: 0.8,
              delay: 0.05,
            }}
            className="absolute top-0 left-1/2 z-10 flex h-[350px] w-full max-w-[550px] -translate-x-1/2 flex-col items-center justify-center rounded-3xl border border-border bg-muted p-2"
          >
            <Card className="relative h-full w-full rounded-2xl border bg-foreground">
              <CardContent className="flex h-full w-full items-center justify-center p-0">
                <div className="absolute start-4 top-4 flex items-center gap-2">
                  <div className="size-3.5 rounded-full bg-red-500" />
                  <div className="size-3.5 rounded-full bg-yellow-500" />
                  <div className="size-3.5 rounded-full bg-green-500" />
                </div>
                <img
                  className="size-30"
                  alt="داشبورد بازاریابی دیجیتال"
                  src="/block-media/shadcnblocks/block/block-white-1.svg"
                />
              </CardContent>
            </Card>
          </motion.div>
          <motion.div
            initial={{ y: 250 }}
            animate={{ y: 0 }}
            whileHover={{ y: -50 }}
            transition={{
              ease: [0, 0.71, 0.2, 1.01],
              duration: 0.8,
              delay: 0.1,
            }}
            className="absolute -top-18 end-0 z-11 hidden h-[350px] w-[550px] flex-col items-center justify-center rounded-3xl border border-border bg-muted p-2 md:flex"
          >
            <Card className="relative h-full w-full rounded-2xl border">
              <CardContent className="flex h-full w-full items-center justify-center p-0">
                <div className="absolute start-4 top-4 flex items-center gap-2">
                  <div className="size-3.5 rounded-full bg-red-500" />
                  <div className="size-3.5 rounded-full bg-yellow-500" />
                  <div className="size-3.5 rounded-full bg-green-500" />
                </div>
                <img
                  className="size-30"
                  alt="تحلیل عملکرد کمپین"
                  src="/block-media/shadcnblocks/block/block-1.svg"
                />
              </CardContent>
            </Card>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
};

export { Feature238 };