"use client";

import { motion } from "framer-motion";
import { ArrowRight, ArrowUpRight, Group } from "lucide-react";
import type { ReactNode } from "react";

import { ShineBorder } from "@/components/magicui/shine-border";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface Feature236Props {
  className?: string;
}

const Feature236 = ({ className }: Feature236Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("bg-background py-32", className)}>
      <div className="container flex flex-col items-center gap-10 md:gap-0">
        <Button
          variant="outline"
          className="flex items-center justify-center gap-5 rounded-full px-5! py-5 text-sm font-medium text-muted-foreground"
        >
          <Group />
          تمام تعاملات، سرنخ‌ها و قراردادها در یک فضای کاری متمرکز جمع می‌شود. تیم فروش بدون جابجایی بین ابزارها، سریع‌تر پیش‌بینی می‌کند و معاملات بیشتری می‌بندد.
          <ArrowUpRight className="rtl:rotate-180" />
        </Button>
        <BracketedBorder>
          <div className="mb-7 flex items-center justify-center gap-5 tracking-tight">
            <div className="relative flex items-center justify-center">
              <span className="absolute inline-block size-2 rounded-full bg-green-300" />
              <span className="absolute inline-block size-3 animate-ping rounded-full bg-green-300" />
            </div>
            <p>از اولین تماس تا تمدید قرارداد، هر مرحله فروش قابل ردیابی است. گزارش‌های لحظه‌ای به مدیران کمک می‌کند گلوگاه‌ها را قبل از از دست دادن درآمد شناسایی کنند.</p>
          </div>
          <h1 className="max-w-xl px-4 text-center text-2xll font-semibold tracking-tighter text-balance text-foreground md:text-[90px] md:leading-22">
            هر سرنخ را تا قرارداد دنبال کنید
          </h1>
        </BracketedBorder>
        <h2 className="text-3xl font-medium tracking-tighter text-foreground">
          فروش تیم‌تان را یکجا مدیریت کنید
        </h2>
        <p className="max-w-2xl px-10 text-center text-pretty text-muted-foreground sm:mt-5 lg:text-xl">
          پروفایل یکپارچه مشتری، تاریخچه تماس و وضعیت معامله را همزمان نشان می‌دهد. تیم‌ها با دید مشترک، هماهنگ‌تر پیش می‌روند و نرخ تبدیل بالاتر می‌رود.
        </p>
        <div className="flex flex-col gap-4 sm:mt-8 md:flex-row">
          <Button className="h-11 w-full rounded-xl sm:w-auto">
            روابط مشتری را در یک نگاه ببینید
          </Button>
          <Button
            variant="outline"
            className="h-11 w-full gap-2 rounded-xl sm:w-auto"
          >
            پایپ‌لاین فروش را شفاف کنید
            <ArrowRight className="size-4 rtl:rotate-180" />
          </Button>
        </div>
      </div>
    </section>
  );
};

const BracketedBorder = ({ children }: { children: ReactNode }) => (
  <motion.div
    initial={{ width: 0, opacity: 0 }}
    className="relative flex flex-col items-center justify-center sm:my-10 md:h-[500px] md:overflow-hidden"
    whileInView={{ width: "65vw", opacity: 1 }}
    viewport={{ once: true }}
    transition={{
      width: {
        type: "spring",
        stiffness: 50,
        damping: 20,
        mass: 1,
      },
      opacity: { duration: 0.5 },
    }}
  >
    <div className="absolute inset-0 hidden border border-foreground/10 md:block">
      <ShineBorder
        duration={10}
        borderWidth={2}
        shineColor={["oklch(87.1% 0.15 154.449)"]}
      />
      <Vector className="absolute start-1 top-1 rotate-90" />
      <Vector className="absolute end-1 top-1 -rotate-180" />
      <Vector className="absolute start-1 bottom-1" />
      <Vector className="absolute end-1 bottom-1 -rotate-90" />
    </div>
    <div className="flex h-full w-screen flex-col items-center justify-center">
      {children}
    </div>
  </motion.div>
);

export { Feature236 };

const Vector = ({ className }: { className?: string }) => (
  <svg
    className={className}
    width="12"
    height="12"
    viewBox="0 0 21 21"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    aria-hidden="true"
  >
    <path
      d="M0.7718 20.3821L0.771792 0.265381C3.72131 0.262685 6.1138 2.65299 6.1138 5.6025V15.1587H15.5512C18.436 15.1587 20.7746 17.4973 20.7746 20.3821H0.7718Z"
      fill="black"
    />
  </svg>
);