import type { ReactNode } from 'react';
import type { StoryBeat } from '@/lib/demo-kit/types';
import { cn } from '@/lib/utils';

export interface BeatSectionProps {
  beat: StoryBeat;
  /** 1-based. The narrative is numbered so a reader can be told "see beat 3". */
  number: number;
  children: ReactNode;
  className?: string;
}

/**
 * One beat of the exec narrative: a number, a title, a claim, and the surface
 * that makes the claim true.
 *
 * The claim is typeset as an assertion — large, high contrast, above the
 * evidence — because the failure mode of a demo site is a visitor watching a
 * pretty animation and never learning what it was supposed to prove.
 */
export function BeatSection({ beat, number, children, className }: BeatSectionProps) {
  const headingId = `beat-${beat.id}-title`;
  return (
    <section
      id={beat.id}
      aria-labelledby={headingId}
      data-surface={beat.surface}
      className={cn('scroll-mt-[var(--app-header-h)] py-10 lg:py-14', className)}
    >
      <header className="mb-6 lg:mb-8">
        <div className="flex items-baseline gap-3">
          <span
            aria-hidden="true"
            className="nums select-none text-sm font-semibold tabular-nums text-accent-fg"
          >
            {String(number).padStart(2, '0')}
          </span>
          <h2 id={headingId} className="text-xl font-semibold tracking-tight lg:text-2xl">
            {beat.title}
          </h2>
        </div>
        <p className="mt-3 max-w-2xl text-pretty text-lg leading-snug text-fg lg:text-xl">
          {beat.claim}
        </p>
      </header>
      {children}
    </section>
  );
}