import { tenextButton as TenextButton } from "@/components/shared/Button";
import { PageContainer } from "@/components/shared/PageContainer";
import { ctaContent } from "@/data/site-content";

/**
 * PreFooterCTA — closing conversion banner.
 *
 * Shared across: Home, About, Services, Contacts.
 *
 * Structure (from reference):
 *   - Plain white section
 *   - Large dark heading, left aligned
 *   - "Get in touch" text link, right aligned
 */
export function PreFooterCTA() {
  return (
    <section className="bg-white px-5 py-[60px] md:py-[80px]">
      <PageContainer className="flex flex-col items-center gap-8 text-center md:flex-row md:justify-between md:text-left">
        {/* Heading */}
        <h2
          className="max-w-[700px] text-tenext-dark"
          style={{
            fontFamily: "var(--font-sora)",
            fontSize: "clamp(28px, 3.5vw, 48px)",
            fontWeight: 700,
            lineHeight: 1.15,
          }}
        >
          {ctaContent.preFooter.heading}
        </h2>

        {/* CTA */}
        <TenextButton
          href="/contacts"
          variant="simple"
          className="shrink-0 text-[15px] font-semibold text-tenext-teal"
        >
          {ctaContent.preFooter.linkLabel}
        </TenextButton>
      </PageContainer>
    </section>
  );
}