import { Container } from "@/components/container";
import { MotionReveal } from "@/components/motion-reveal";
import { Button } from "@/components/ui/button";
import { layout } from "@/lib/layout";
import { type } from "@/lib/typography";
import { cn } from "@/lib/utils";

interface Cta10Props {
  heading?: string;
  description?: string;
  buttons?: {
    primary?: {
      text: string;
      url: string;
    };
    secondary?: {
      text: string;
      url: string;
    };
  };
  className?: string;
}

export function Cta10({
  heading = "آماده شروع پروژه هستید؟",
  description = "با امین رایان طراحی سایت و سئو را شروع کنید. مشاوره اولیه رایگان است و مسیر رشد آنلاین کسب‌وکارتان را با هم مشخص می‌کنیم.",
  buttons = {
    primary: {
      text: "درخواست مشاوره",
      url: "#",
    },
    secondary: {
      text: "مشاهده خدمات",
      url: "#services",
    },
  },
  className,
}: Cta10Props) {
  return (
    <section
      id="contact"
      className={cn(
        "section-shell bg-section-canvas",
        layout.scrollMargin,
        layout.sectionY,
        className
      )}
    >
      <Container className="section-content relative">
        <div className="local-highlight" aria-hidden />
        <MotionReveal className="bg-gradient-cta relative z-[1] isolate flex w-full flex-col gap-8 overflow-hidden rounded-xl p-6 text-white shadow-floating sm:gap-10 sm:p-8 md:rounded-2xl lg:flex-row lg:items-center lg:gap-16 lg:p-12">
          <span className="cta-diamond-pattern cta-diamond-pattern--left" aria-hidden />
          <div className="relative z-[1] min-w-0 flex-1">
            <h2 className={cn(type.h2, "mb-3 text-white md:mb-4 lg:mb-6")}>
              {heading}
            </h2>
            <p className={cn(type["section-intro"], "max-w-xl text-brand-light/90")}>
              {description}
            </p>
          </div>
          <div className="relative z-[1] flex w-full shrink-0 flex-col gap-2 sm:w-auto sm:flex-row">
            {buttons.primary && (
              <Button asChild size="lg" surface="brand" className="w-full sm:w-auto">
                <a href={buttons.primary.url}>{buttons.primary.text}</a>
              </Button>
            )}
            {buttons.secondary && (
              <Button
                variant="secondary"
                surface="brand"
                size="lg"
                asChild
                className="w-full sm:w-auto"
              >
                <a href={buttons.secondary.url}>{buttons.secondary.text}</a>
              </Button>
            )}
          </div>
        </MotionReveal>
      </Container>
    </section>
  );
}