import type { ReactNode } from 'react';
import { cn } from '../lib/cn';

export interface HeroCta {
  label: string;
  href: string;
}

export interface HeroProps {
  eyebrow?: ReactNode;
  title: ReactNode;
  subtitle?: ReactNode;
  primaryCta?: HeroCta;
  secondaryCta?: HeroCta;
  visual?: ReactNode;
  align?: 'left' | 'center';
  className?: string;
}

export function Hero({
  eyebrow,
  title,
  subtitle,
  primaryCta,
  secondaryCta,
  visual,
  align = 'left',
  className,
}: HeroProps) {
  const centered = align === 'center';

  return (
    <section className={cn('w-full bg-bg', className)}>
      <div
        className={cn(
          'mx-auto max-w-7xl px-4 md:px-6 py-16 md:py-24 lg:py-32',
          visual ? 'grid gap-12 md:grid-cols-2 md:items-center' : '',
          !visual && centered && 'text-center'
        )}
      >
        <div className={cn('flex flex-col', centered && !visual ? 'items-center' : 'items-start')}>
          {eyebrow && (
            <div className="mb-4 inline-flex items-center px-3 py-1 rounded-full bg-primary-soft text-primary-deep text-xs font-medium uppercase tracking-wider">
              {eyebrow}
            </div>
          )}
          <h1 className={cn(
            'font-display font-semibold tracking-tight text-text',
            'text-4xl md:text-5xl lg:text-6xl'
          )}>
            {title}
          </h1>
          {subtitle && (
            <p className={cn(
              'mt-5 text-lg md:text-xl text-text-2 max-w-2xl',
              centered && !visual && 'mx-auto'
            )}>
              {subtitle}
            </p>
          )}
          {(primaryCta || secondaryCta) && (
            <div className={cn(
              'mt-8 flex flex-wrap gap-3',
              centered && !visual && 'justify-center'
            )}>
              {primaryCta && (
                <a
                  href={primaryCta.href}
                  className="inline-flex items-center justify-center h-11 px-6 rounded-md bg-primary text-primary-on text-sm font-medium hover:bg-primary-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-ring transition-colors"
                >
                  {primaryCta.label}
                </a>
              )}
              {secondaryCta && (
                <a
                  href={secondaryCta.href}
                  className="inline-flex items-center justify-center h-11 px-6 rounded-md border border-border bg-surface text-text text-sm font-medium hover:bg-surface-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-ring transition-colors"
                >
                  {secondaryCta.label}
                </a>
              )}
            </div>
          )}
        </div>

        {visual && (
          <div className="relative w-full">{visual}</div>
        )}
      </div>
    </section>
  );
}