"use client";

import Link from "next/link";
import { ArrowRight } from "lucide-react";

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

interface Cta6Props {
  className?: string;
}

const Cta6 = ({ className }: Cta6Props) => {
  return (
    <section className={cn("section-blur-separator relative overflow-hidden py-20 md:py-24 lg:py-28", className)} dir="rtl">
      <div
        aria-hidden="true"
        className="pointer-events-none absolute left-1/2 top-1/2 -z-10 -translate-x-1/2 -translate-y-1/2"
      >
        <div className="h-44 w-[24rem] rounded-full bg-primary/10 blur-3xl md:h-52 md:w-[34rem] md:bg-primary/12" />
      </div>
      <div className="container mx-auto px-4 md:px-6">
        <div className="mx-auto max-w-6xl   p-6 shadow-sm md:rounded-3xl md:p-10 lg:p-12">
          <div className="mx-auto max-w-4xl text-center">
            <p className="mb-3 text-caption font-medium text-primary">ویترین متفاوت، فروش متفاوت</p>
            <h2 className="text-heading-2 font-semibold text-foreground">
             برای انتخاب استند و دکور مناسب فروشگاهتان مشاوره بگیرید
            </h2>
            <p className="mx-auto mt-4 max-w-2xl text-body text-muted-foreground">
              کارشناسان مستر دکور با بررسی فضای فروشگاه، نوع محصولات و سبک برند شما، بهترین ترکیب استند و ملزومات ویترین را
              پیشنهاد می دهند تا مشتری در نگاه اول کیفیت شما را حس کند.
            </p>

            <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row sm:gap-4">
              <Button asChild size="lg" variant="primary" className="w-full sm:w-auto">
                <Link href="/consultation">
                  دریافت مشاوره و استعلام قیمت
                  <ArrowRight className="ms-2 size-4" />
                </Link>
              </Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Cta6 };