import { Button } from "@/components/button";
import { Container } from "@/components/container";
import { ArrowLinkIcon } from "@/components/icon-system";
import { Reveal } from "@/components/reveal";
import { company } from "@/data/company";

type CTASectionProps = {
  title: string;
  description: string;
  actionLabel?: string;
  leadType?: string;
  subject?: string;
  sourceSection?: string;
};

export function CTASection({ title, description, actionLabel = "Zatražite procenu projekta", leadType, subject, sourceSection = "CTA sekcija" }: CTASectionProps) {
  return (
    <section className="relative overflow-hidden border-y border-white/10 bg-[#111111] py-16 text-white sm:py-20">
      <div className="absolute inset-0 blueprint-grid opacity-80" />
      <div className="absolute left-1/2 top-0 h-64 w-[38rem] -translate-x-1/2 rounded-full bg-accent-sky/10 blur-3xl" />
      <div className="absolute bottom-0 right-0 h-64 w-[28rem] rounded-full bg-accent-ice/[0.06] blur-3xl" />
      <Container className="relative">
        <Reveal className="grid items-center gap-8 rounded-3xl border border-white/10 bg-white/[0.035] p-6 shadow-[0_30px_100px_rgb(0_0_0_/_0.24)] sm:p-8 md:grid-cols-[1fr_auto] lg:p-10">
          <div>
            <p className="text-xs font-semibold uppercase tracking-[0.18em] text-accent-ice">Sledeći korak</p>
            <h2 className="mt-4 max-w-3xl text-3xl font-semibold leading-[1.1] sm:text-4xl">{title}</h2>
            <p className="mt-5 max-w-2xl text-base leading-7 text-slate-300">{description}</p>
          </div>
          <div className="flex flex-col gap-3 sm:flex-row md:flex-col">
            <Button
              href="/kontakt"
              variant="primary"
              size="lg"
              className="gap-2"
              data-lead-type={leadType}
              data-lead-subject={subject ?? `Upit: ${title}`}
              data-source-section={sourceSection}
            >
              {actionLabel}
              <ArrowLinkIcon />
            </Button>
            <Button href={company.phoneHref} variant="darkOutline" size="lg" data-source-section={sourceSection}>
              Pozovite {company.phone}
            </Button>
          </div>
        </Reveal>
      </Container>
    </section>
  );
}