import type { ReactNode } from 'react';

export function SectionHeading({
  eyebrow,
  title,
  subtitle,
  align = 'center',
  light,
}: {
  eyebrow?: string;
  title: string;
  subtitle?: string;
  align?: 'left' | 'center';
  light?: boolean;
}) {
  const alignClass = align === 'center' ? 'text-center mx-auto' : 'text-left';
  return (
    <div className={`max-w-3xl ${alignClass}`}>
      {eyebrow && (
        <p
          className={`mb-2 text-sm font-semibold uppercase tracking-widest ${light ? 'text-white/80' : 'text-primary'}`}
        >
          {eyebrow}
        </p>
      )}
      <h2
        className={`font-[family-name:var(--font-display)] text-3xl font-bold tracking-tight md:text-4xl ${light ? 'text-white' : 'text-[var(--color-text)]'}`}
      >
        {title}
      </h2>
      {subtitle && (
        <p className={`mt-4 text-lg leading-relaxed ${light ? 'text-white/85' : 'text-muted'}`}>
          {subtitle}
        </p>
      )}
    </div>
  );
}

export function PageHero({
  title,
  subtitle,
  children,
}: {
  title: string;
  subtitle?: string;
  children?: ReactNode;
}) {
  return (
    <section
      className="relative overflow-hidden border-b border-theme px-4 py-16 md:py-24"
      style={{ background: 'var(--color-hero-gradient)' }}
    >
      <div className="pointer-events-none absolute -right-20 top-0 h-64 w-64 rounded-full bg-[var(--color-primary)] opacity-10 blur-3xl" />
      <div className="pointer-events-none absolute -left-10 bottom-0 h-48 w-48 rounded-full bg-[var(--color-secondary)] opacity-15 blur-3xl" />
      <div className="relative mx-auto max-w-6xl">
        <h1 className="font-[family-name:var(--font-display)] text-4xl font-bold text-[var(--color-text)] md:text-5xl lg:text-6xl">
          {title}
        </h1>
        {subtitle && <p className="mt-4 max-w-2xl text-lg text-muted md:text-xl">{subtitle}</p>}
        {children}
      </div>
    </section>
  );
}