import * as React from 'react';
import { Button } from '../../ui/button';
import { cn } from '../../shared/utils';

export interface CTASectionAction {
  label: string;
  href?: string;
  onClick?: () => void;
}

export interface CTASectionProps extends React.HTMLAttributes<HTMLElement> {
  title: string;
  description?: string;
  cta: CTASectionAction;
  secondaryCta?: CTASectionAction;
}

/**
 * Full-width dark band prompting a primary conversion action.
 *
 * @description
 * A high-impact closing section for marketing pages: a bold left-aligned
 * headline, optional supporting copy, and up to two CTA buttons on a flat
 * `bg-sidebar` surface — the same token-driven dark surface used elsewhere
 * on this page (e.g. the methodology section) — so it stays legible across
 * all Xertica-ui themes without per-theme contrast tuning or a gradient.
 *
 * @ai-rules
 * 1. The background is a flat `bg-sidebar` surface with a `border-sidebar-border` hairline — never reintroduce a gradient or hardcode colors here.
 * 2. Both buttons use their natural variants (`default` for `cta`, `outline` for `secondaryCta`) with no color overrides — they already contrast correctly against `bg-sidebar`; do not force-style them with one-off colors.
 * 3. Each `cta`/`secondaryCta` needs either `href` (renders an `<a>`) or `onClick`.
 */
export function CTASection({
  title,
  description,
  cta,
  secondaryCta,
  className,
  ...props
}: CTASectionProps) {
  return (
    <section
      className={cn(
        'w-full rounded-[var(--radius-card)] border border-sidebar-border bg-sidebar px-6 py-16 md:py-20',
        className
      )}
      {...props}
    >
      <div className="flex flex-col gap-8 md:flex-row md:items-center md:justify-between">
        <div className="max-w-xl">
          <h2 className="text-2xl font-bold text-sidebar-foreground md:text-4xl">{title}</h2>
          {description && <p className="mt-6 text-sidebar-foreground/70">{description}</p>}
        </div>

        <div className="flex flex-col gap-3 sm:flex-row md:shrink-0">
          <Button asChild={!!cta.href} onClick={cta.onClick}>
            {cta.href ? <a href={cta.href}>{cta.label}</a> : cta.label}
          </Button>

          {secondaryCta && (
            <Button variant="outline" asChild={!!secondaryCta.href} onClick={secondaryCta.onClick}>
              {secondaryCta.href ? (
                <a href={secondaryCta.href}>{secondaryCta.label}</a>
              ) : (
                secondaryCta.label
              )}
            </Button>
          )}
        </div>
      </div>
    </section>
  );
}
