"use client";

import { Phone } from "lucide-react";
import { Button } from "@/components/ui/button";
import { formatPhoneForTel } from "@/lib/utils";
import type { SiteSettings } from "@prisma/client";

interface CTASectionProps {
  settings: SiteSettings;
}

export function CTASection({ settings }: CTASectionProps) {
  return (
    <section className="section-default bg-primary text-primary-foreground">
      <div className="content-wrap">
        <div className="max-w-[720px] mx-auto text-center">
          <p className="text-xs uppercase tracking-[0.2em] text-primary-foreground/50 mb-4">
            Ready when you are
          </p>
          <h2 className="font-heading text-3xl md:text-4xl mb-4 text-balance">
            {settings.ctaHeadline}
          </h2>
          <p className="text-primary-foreground/70 mb-8 text-lg leading-relaxed">
            {settings.ctaSubheadline}
          </p>

          <Button
            size="xl"
            className="bg-accent text-accent-foreground hover:bg-accent/90"
            asChild
          >
            <a
              href={`tel:${formatPhoneForTel(settings.phone)}`}
              data-track="cta-call"
              data-conversion="call"
            >
              <Phone className="h-5 w-5" />
              Call {settings.phone}
            </a>
          </Button>
        </div>
      </div>
    </section>
  );
}