import Link from 'next/link';
import type { ReactNode } from 'react';
import { cn } from '@/lib/cn';

/** Page section with eyebrow + title + optional action. Spatial composition — not everything in a card. */
export function Section({ eyebrow, title, action, children, className, id }: { eyebrow?: string; title?: ReactNode; action?: { href: string; label: string }; children: ReactNode; className?: string; id?: string }) {
  return (
    <section id={id} className={cn('py-8 md:py-12', className)}>
      {(eyebrow || title) && (
        <div className="mb-5 flex items-end justify-between gap-4">
          <div>
            {eyebrow && <p className="eyebrow">{eyebrow}</p>}
            {title && <h2 className="mt-1 text-xl font-semibold tracking-tight md:text-2xl">{title}</h2>}
          </div>
          {action && (
            <Link href={action.href} className="shrink-0 py-1 text-sm text-accent hover:underline">
              {action.label} →
            </Link>
          )}
        </div>
      )}
      {children}
    </section>
  );
}

export function PageHeader({ eyebrow, title, lede, children, className }: { eyebrow?: ReactNode; title: ReactNode; lede?: ReactNode; children?: ReactNode; className?: string }) {
  return (
    <div className={cn('pb-6 pt-8 md:pb-8 md:pt-12', className)}>
      {eyebrow && <p className="eyebrow">{eyebrow}</p>}
      <h1 className="display mt-2 text-3xl md:text-5xl">{title}</h1>
      {lede && <p className="mt-4 max-w-2xl text-[15px] leading-relaxed text-ink-2 md:text-base">{lede}</p>}
      {children}
    </div>
  );
}

/** Stat tile: big tabular number + label + optional hint. */
export function Stat({ label, value, hint, className, accent = false }: { label: string; value: ReactNode; hint?: ReactNode; className?: string; accent?: boolean }) {
  return (
    <div className={cn('min-w-0', className)}>
      <p className="eyebrow">{label}</p>
      <p className={cn('tnum mt-1 text-2xl font-semibold tracking-tight md:text-3xl', accent && 'text-accent')}>{value}</p>
      {hint && <p className="mt-0.5 text-xs text-ink-3">{hint}</p>}
    </div>
  );
}

export function Container({ children, className, wide = false }: { children: ReactNode; className?: string; wide?: boolean }) {
  return <div className={cn('container-x mx-auto w-full', wide ? 'max-w-[1600px]' : 'max-w-[1280px]', className)}>{children}</div>;
}