CTA with Image

"use client";
 
import { Button } from "@/components/ui/button";
import { ArrowRight, Check } from "lucide-react";
import Image from "next/image";
 
interface CTAImageSplitProps {
  headline: string;
  description?: string;
  features?: string[];
  imageUrl: string;
  imageAlt?: string;
  imagePosition?: "left" | "right";
  variant?: "default" | "primary" | "dark";
  primaryCTA: {
    text: string;
    href?: string;
    onClick?: () => void;
  };
  secondaryCTA?: {
    text: string;
    href?: string;
    onClick?: () => void;
  };
}
 
const variants = {
  default: {
    section: "bg-background",
    headline: "text-foreground",
    description: "text-muted-foreground",
    features: "text-foreground",
    primaryButton: "",
    secondaryButton: "",
  },
  primary: {
    section: "bg-primary text-primary-foreground",
    headline: "text-primary-foreground",
    description: "text-primary-foreground/80",
    features: "text-primary-foreground",
    primaryButton: "bg-background text-foreground hover:bg-background/90",
    secondaryButton:
      "border-primary-foreground/30 text-primary-foreground hover:bg-primary-foreground/10",
  },
  dark: {
    section: "bg-slate-950",
    headline: "text-white",
    description: "text-slate-400",
    features: "text-slate-300",
    primaryButton: "bg-white text-slate-950 hover:bg-slate-100",
    secondaryButton:
      "border-slate-700 text-white hover:bg-slate-900 hover:text-white",
  },
};
 
export function CTAImageSplit({
  headline,
  description,
  features,
  imageUrl,
  imageAlt = "CTA Image",
  imagePosition = "right",
  variant = "default",
  primaryCTA,
  secondaryCTA,
}: CTAImageSplitProps) {
  const styles = variants[variant];
 
  return (
    <section
      className={`relative overflow-hidden py-16 sm:py-24 ${styles.section}`}
    >
      <div className="container mx-auto px-6">
        <div
          className={`grid items-center gap-12 lg:grid-cols-2 lg:gap-16 ${
            imagePosition === "left" ? "lg:flex-row-reverse" : ""
          }`}
        >
          {/* Content */}
          <div
            className={`${imagePosition === "left" ? "lg:order-2" : "lg:order-1"}`}
          >
            <h2
              className={`mb-4 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl ${styles.headline}`}
            >
              {headline}
            </h2>
 
            {description && (
              <p className={`mb-6 text-lg sm:text-xl ${styles.description}`}>
                {description}
              </p>
            )}
 
            {/* Features */}
            {features && features.length > 0 && (
              <ul className="mb-8 space-y-3">
                {features.map((feature, index) => (
                  <li key={index} className="flex items-start gap-3">
                    <div
                      className={`mt-1 flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full ${
                        variant === "default"
                          ? "bg-primary/10 text-primary"
                          : variant === "primary"
                            ? "bg-primary-foreground/20 text-primary-foreground"
                            : "bg-white/20 text-white"
                      }`}
                    >
                      <Check className="h-3.5 w-3.5 stroke-[3]" />
                    </div>
                    <span className={`text-base ${styles.features}`}>
                      {feature}
                    </span>
                  </li>
                ))}
              </ul>
            )}
 
            {/* CTAs */}
            <div className="flex flex-col gap-4 sm:flex-row">
              <Button
                size="lg"
                onClick={primaryCTA.onClick}
                className={`group font-medium ${styles.primaryButton}`}
              >
                {primaryCTA.text}
                <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
              </Button>
 
              {secondaryCTA && (
                <Button
                  size="lg"
                  variant="outline"
                  onClick={secondaryCTA.onClick}
                  className={`font-medium ${styles.secondaryButton}`}
                >
                  {secondaryCTA.text}
                </Button>
              )}
            </div>
          </div>
 
          {/* Image */}
          <div
            className={`relative ${imagePosition === "left" ? "lg:order-1" : "lg:order-2"}`}
          >
            <div className="relative aspect-[4/3] overflow-hidden rounded-2xl shadow-2xl">
              <Image
                src={imageUrl}
                alt={imageAlt}
                fill
                className="object-cover"
                sizes="(max-width: 768px) 100vw, 50vw"
              />
            </div>
            {/* Decorative element */}
            <div
              className={`absolute -bottom-6 -right-6 -z-10 h-full w-full rounded-2xl ${
                variant === "default"
                  ? "bg-primary/10"
                  : variant === "primary"
                    ? "bg-primary-foreground/10"
                    : "bg-white/10"
              }`}
            />
          </div>
        </div>
      </div>
    </section>
  );
}