---
import ActionLink from "@/components/landing/ActionLink.astro";
import { LucideIcon } from "@/components/ui/lucide-icon";
import ctaBg from "@/assets/cta-bg.jpg";
---

<section class="bg-background px-4 py-10 md:px-6 md:py-12 lg:px-8">
  <div
    class="relative mx-auto max-w-7xl overflow-hidden rounded-3xl border border-border"
  >
    <img
      src={ctaBg.src}
      alt=""
      class="absolute inset-0 size-full object-cover"
      aria-hidden="true"
    />
    <div
      class="pointer-events-none absolute inset-0 bg-black/90"
      aria-hidden="true"
    >
    </div>

    <div
      class="relative flex flex-col items-center gap-6 p-6 text-center md:flex-row md:items-center md:justify-between md:gap-8 md:p-10 md:text-start lg:p-12"
    >
      <div class="flex flex-col items-center gap-4 md:flex-row md:items-center">
        <div
          class="flex size-14 shrink-0 items-center justify-center rounded-xl bg-background md:size-16"
        >
          <img
            src="/logo.svg"
            alt=""
            class="size-8 md:size-9"
            width="36"
            height="36"
          />
        </div>

        <div>
          <h2 class="text-lg font-semibold text-foreground md:text-xl">
            از امروز باشگاه خود را حرفه‌ای‌تر مدیریت کنید
          </h2>
          <p class="mt-1 text-sm text-muted-foreground">
            به ۵۴ باشگاه دیگر در نکستا ملحق شوید.
          </p>
        </div>
      </div>

      <div class="flex w-full flex-col gap-3 md:w-auto md:flex-row md:flex-wrap md:items-center">
        <ActionLink
          href="/plans"
          size="lg"
          class="w-full justify-center rounded-full px-6 md:w-auto [&_svg]:ms-1"
        >
          شروع کنید
          <LucideIcon name="arrowLeft" className="size-4" />
        </ActionLink>
        <ActionLink
          href="/contact"
          variant="outline"
          size="lg"
          class="w-full justify-center rounded-full border-white/40 bg-transparent px-6 text-foreground hover:border-white/60 hover:bg-white/10 hover:text-foreground md:w-auto"
        >
          تماس با ما
        </ActionLink>
      </div>
    </div>
  </div>
</section>