import { ArrowRight } from "lucide-react";
import { Button } from "@/components/atoms/button";

export function CTABanner() {
  return (
    <div aria-label="Call to action" className="bg-primary-soft">
      <div className="mx-auto max-w-3xl px-6 sm:px-10 lg:px-14 py-14 sm:py-16 text-center">
        <h2 className="text-2xl sm:text-3xl font-extrabold text-foreground font-heading">
          Ready to Get Set Up?
        </h2>
        <p className="mt-2 text-base text-muted-foreground">
          No Japanese required. Our English-speaking team is here to help.
        </p>

        <div className="mt-6 flex flex-col sm:flex-row items-center justify-center gap-3">
          <Button
            as="a"
            href="/services"
            variant="pill"
            size="lg"
            rightIcon={<ArrowRight className="h-5 w-5" />}
          >
            Find Your Plan
          </Button>
          <Button as="a" href="#contact" variant="pillOutline" size="lg">
            Talk to Us
          </Button>
        </div>
      </div>
    </div>
  );
}
