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

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

export interface HeroProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
  eyebrow?: { label: string; icon?: React.ReactNode };
  title: React.ReactNode;
  description?: React.ReactNode;
  primaryCta?: HeroCta;
  secondaryCta?: HeroCta;
  visual?: React.ReactNode;
  align?: 'left' | 'center';
  decorative?: boolean;
}

function HeroCtaButton({
  cta,
  variant,
}: {
  cta: HeroCta;
  variant: React.ComponentProps<typeof Button>['variant'];
}) {
  if (cta.href) {
    return (
      <Button asChild variant={variant} size="lg">
        <a href={cta.href} onClick={cta.onClick}>
          {cta.label}
        </a>
      </Button>
    );
  }

  return (
    <Button variant={variant} size="lg" onClick={cta.onClick}>
      {cta.label}
    </Button>
  );
}

/**
 * Full-width, above-the-fold marketing hero section.
 *
 * @description
 * The lead block for landing and marketing pages: an optional `PillBadge`
 * eyebrow, a very large headline, supporting copy, and up to two `<Button>`
 * CTAs. Automatically switches from a single column to a two-column layout
 * once a `visual` (screenshot, illustration, collage) is supplied.
 *
 * @ai-rules
 * 1. Pass `visual` for the two-column desktop layout; omit it for a single-column hero.
 * 2. `primaryCta` renders as `default` (primary/brand) and `secondaryCta` as `secondary`, both via `<Button>` (`size="lg"`) — never hand-roll buttons.
 * 3. Set `decorative` to add a token-based gradient blob backdrop; it is purely visual and never shifts layout.
 * 4. `align="center"` centers the eyebrow/heading/copy/CTAs — pair it with omitting `visual` for a classic centered hero.
 */
export function Hero({
  eyebrow,
  title,
  description,
  primaryCta,
  secondaryCta,
  visual,
  align = 'left',
  decorative = false,
  className,
  ...props
}: HeroProps) {
  const isCentered = align === 'center';

  return (
    <section className={cn('relative overflow-hidden py-16 md:py-24', className)} {...props}>
      {decorative && (
        <div
          className="pointer-events-none absolute inset-0 z-0 overflow-hidden"
          aria-hidden="true"
        >
          <div className="absolute left-1/2 top-1/2 h-72 w-72 -translate-x-1/2 -translate-y-1/2 rounded-full bg-[linear-gradient(135deg,var(--gradient-start),var(--gradient-end))] opacity-20 blur-3xl md:h-[28rem] md:w-[28rem] lg:h-[36rem] lg:w-[36rem]" />
        </div>
      )}

      <div className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div
          className={cn('grid items-center gap-12', visual ? 'lg:grid-cols-2' : 'mx-auto max-w-3xl')}
        >
          <div
            className={cn(
              'flex flex-col gap-6',
              isCentered ? 'items-center text-center' : 'items-start text-left'
            )}
          >
            {eyebrow && <PillBadge icon={eyebrow.icon}>{eyebrow.label}</PillBadge>}

            <h1 className="text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl">
              {title}
            </h1>

            {description && (
              <p className="max-w-2xl text-lg text-muted-foreground">{description}</p>
            )}

            {(primaryCta || secondaryCta) && (
              <div
                className={cn(
                  'flex flex-col gap-3 pt-2 sm:flex-row',
                  isCentered && 'sm:justify-center'
                )}
              >
                {primaryCta && <HeroCtaButton cta={primaryCta} variant="default" />}
                {secondaryCta && <HeroCtaButton cta={secondaryCta} variant="secondary" />}
              </div>
            )}
          </div>

          {visual && <div className="relative">{visual}</div>}
        </div>
      </div>
    </section>
  );
}