---
import type { HTMLAttributes } from 'astro/types';
import { cn } from '@/lib/cn';

interface Props extends HTMLAttributes<'section'> {
  /** Color scheme variant */
  variant?: 'default' | 'invert';
  /** Padding size */
  size?: 'sm' | 'md' | 'lg' | 'xl';
  /** Max width of content */
  maxWidth?: 'sm' | 'md' | 'lg' | 'xl';
  /** Show decorative radial glow */
  glow?: boolean;
}

const {
  variant = 'default',
  size = 'lg',
  maxWidth = 'lg',
  glow = true,
  id,
  class: className,
  ...attrs
} = Astro.props;

const sectionStyles = {
  default: 'bg-background border-t border-border',
  invert: 'invert-section bg-background text-foreground border-t border-border',
};

const sizes = {
  sm: 'py-[var(--space-section-sm)]',
  md: 'py-[var(--space-section-md)]',
  lg: 'py-[var(--space-section-lg)]',
  xl: 'py-[var(--space-section-xl)]',
};

const maxWidths = {
  sm: 'max-w-xl',
  md: 'max-w-2xl',
  lg: 'max-w-3xl',
  xl: 'max-w-4xl',
};

const hasLogoSlot = Astro.slots.has('logo');
const hasHeadingSlot = Astro.slots.has('heading');
const hasDescriptionSlot = Astro.slots.has('description');
const hasActionsSlot = Astro.slots.has('actions');
---

<section
  id={id}
  class={cn('relative overflow-hidden', sectionStyles[variant], sizes[size], className)}
  {...attrs}
>
  {glow && (
    <div
      class="pointer-events-none absolute inset-0"
      style="background: radial-gradient(ellipse 80% 80% at 50% 50%, color-mix(in oklch, var(--color-brand-500) 10%, transparent) 0%, transparent 70%);"
      aria-hidden="true"
    />
  )}
    <div class={cn(maxWidths[maxWidth], 'relative z-10 text-center mx-auto')}>
      {/* Logo Slot - renders before heading */}
      {hasLogoSlot && (
        <div class="mb-[var(--space-stack-lg)]">
          <slot name="logo" />
        </div>
      )}

      {/* Heading Slot */}
      {hasHeadingSlot && (
        <div class={cn(
          'mb-[var(--space-heading-gap)]',
          '[&>h2]:font-display [&>h2]:text-3xl md:[&>h2]:text-4xl lg:[&>h2]:text-5xl [&>h2]:font-bold [&>h2]:text-balance',
          '[&>h2]:text-foreground'
        )}>
          <slot name="heading" />
        </div>
      )}

      {/* Description Slot */}
      {hasDescriptionSlot && (
        <div class={cn(
          'text-lg md:text-xl mb-[var(--space-stack-lg)]',
          '[&>p]:text-lg md:[&>p]:text-xl',
          'text-foreground-muted [&>p]:text-foreground-muted'
        )}>
          <slot name="description" />
        </div>
      )}

      {/* Actions Slot */}
      {hasActionsSlot && (
        <div class="flex flex-col gap-4 sm:flex-row items-center justify-center">
          <slot name="actions" />
        </div>
      )}

      {/* Default slot for additional content */}
      <slot />
    </div>
</section>
