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 Cta16Props {
  className?: string;
}

export function Cta16({ className }: Cta16Props) {
  return (
    <section
      className={cn(
        "section-shell bg-section-canvas",
        layout.scrollMargin,
        layout.sectionY,
        className
      )}
    >
      <Container className="section-content relative">
        <div className="local-highlight" aria-hidden />
        <div
          className={cn(
            "bg-cta-photo-banner relative z-[1] isolate flex min-h-[11.2rem] items-center justify-center overflow-hidden rounded-xl shadow-floating md:min-h-[15.5rem] md:rounded-2xl"
          )}
        >
          <span className="cta-diamond-pattern" aria-hidden />
          <div className="relative z-[1] w-full p-4 sm:p-3 md:p-4">
            <MotionReveal className="flex flex-col gap-4 text-center text-white">
              <div className="flex flex-col gap-3 sm:gap-4">
                <h2 className={cn(type["cta-title"], "text-center text-white")}>
                  مشاهده کاتالوگ امین رایان
                </h2>
                <p
                  className={cn(
                    type["section-intro"],
                    "mx-auto max-w-2xl text-center text-brand-light/90"
                  )}
                >
                  در یک نگاه با شرکت امین رایان آشنا شوید
                </p>
              </div>
              <div className="flex flex-col justify-center gap-2 sm:flex-row">
                <Button size="lg" surface="brand" className="w-full sm:w-auto" asChild>
                  <a href="#contact">دریافت کاتالوگ</a>
                </Button>
              </div>
            </MotionReveal>
          </div>
        </div>
      </Container>
    </section>
  );
}