import { A } from "@solidjs/router";
import { cn } from "~/lib/utils";
import { Button } from "~/components/ui";
import PageContainer from "~/components/layout/PageContainer";

interface CTABannerSectionProps {
  class?: string;
}

export default function CTABannerSection(props: CTABannerSectionProps) {
  return (
    <section id="cta" class={cn("py-20 md:py-28 scroll-mt-16", props.class)}>
      <PageContainer py="py-8">
        <div class="gradient-card border border-(--color-border)/50 rounded-2xl p-10 md:p-16 text-center">
          <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-[var(--color-text-primary)] mb-4">
            Ready to protect your identity?
          </h2>
          <p class="text-lg text-[var(--color-text-secondary)] max-w-2xl mx-auto mb-10">
            Join thousands of users who trust ShieldAI to keep their digital
            identity safe from emerging threats.
          </p>
          <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <A href="/signup">
              <Button variant="primary" size="lg">
                Create Account
              </Button>
            </A>
            <A href="/login">
              <Button variant="secondary" size="lg">
                Sign In
              </Button>
            </A>
          </div>
        </div>
      </PageContainer>
    </section>
  );
}
