import { type ReactNode } from 'react';

import { cn } from '@/lib/utils';

interface MarketingCtaProps {
  heading: ReactNode;
  description: ReactNode;
  variant?: 'default' | 'asymmetric-split' | 'editorial-framed';
  children: ReactNode;
  className?: string;
}

export function MarketingCta({
  heading,
  description,
  variant = 'default',
  children,
  className,
}: MarketingCtaProps) {
  if (variant === 'asymmetric-split') {
    return (
      <div
        className={cn(
          'rounded-2xl border border-primary/20 bg-linear-to-br from-primary/8 via-primary/3 to-background p-8 md:p-10',
          className,
        )}
      >
        <div className="grid gap-8 md:grid-cols-[1fr_auto] md:items-center md:gap-12">
          <div>
            <div className="editorial-rule left mb-4">
              <span className="font-data text-xs text-primary">Get started</span>
            </div>
            <h2 className="text-2xl font-bold tracking-tight text-foreground sm:text-3xl">
              {heading}
            </h2>
            <p className="mt-3 max-w-xl text-base text-muted-foreground sm:text-lg">
              {description}
            </p>
          </div>
          <div className="flex flex-col gap-3">{children}</div>
        </div>
      </div>
    );
  }

  if (variant === 'editorial-framed') {
    return (
      <div
        className={cn(
          'relative overflow-hidden rounded-2xl border border-border bg-conic-soft p-8 md:p-12',
          className,
        )}
      >
        <div className="editorial-rule mb-6">
          <span className="font-data text-xs text-muted-foreground">Next step</span>
        </div>
        <div className="text-center">
          <h2 className="text-2xl font-bold tracking-tight text-foreground sm:text-3xl">
            {heading}
          </h2>
          <p className="mt-4 text-lg text-muted-foreground">{description}</p>
          <div className="mt-8 flex flex-wrap items-center justify-center gap-4">{children}</div>
        </div>
      </div>
    );
  }

  return (
    <div
      className={cn(
        'rounded-2xl bg-linear-to-r from-primary/10 via-primary/5 to-background p-8 text-center sm:p-12',
        className,
      )}
    >
      <h2 className="mb-4 text-2xl font-bold tracking-tight text-foreground sm:text-3xl">
        {heading}
      </h2>
      <p className="mb-8 text-base text-muted-foreground sm:text-lg">{description}</p>
      <div className="flex flex-wrap items-center justify-center gap-4">{children}</div>
    </div>
  );
}