/**
 * SectionHeader — editorial-style heading block used to introduce major
 * marketing sections. Replaces the recurring "centered h2 + muted subtitle"
 * pattern that reads as AI-generic.
 *
 * Differentiator: an eyebrow rule with monospace label (think New Yorker
 * section header), oversized headline with optional `marker` emphasis on a
 * single phrase, and a constrained subhead. Left-aligned by default so
 * paragraphs scan naturally — center alignment is opt-in.
 *
 * Usage:
 *   <SectionHeader
 *     eyebrow="The product"
 *     title="Three things that used to take hours."
 *     emphasis="Now happen in minutes."
 *     description="Diagnose, draft, and prove what worked — all without a spreadsheet."
 *   />
 */
import { type PropsWithChildren, useEffect, useRef, useState } from 'react';

import { cn } from '@/lib/utils';

interface SectionHeaderProps extends PropsWithChildren {
  eyebrow?: string;
  title: string;
  /** Phrase appended to the title and wrapped in a marker-style highlight. */
  emphasis?: string;
  description?: string;
  align?: 'left' | 'center';
  /** When true, marker animation triggers on view. */
  animateEmphasis?: boolean;
  className?: string;
  /** Heading level. Default h2; bump to h1 only on hero. */
  as?: 'h1' | 'h2' | 'h3';
}

export function SectionHeader({
  eyebrow,
  title,
  emphasis,
  description,
  align = 'left',
  animateEmphasis = true,
  className,
  as = 'h2',
  children,
}: SectionHeaderProps) {
  const Heading = as;
  const wrapperRef = useRef<HTMLDivElement | null>(null);
  const [emphasisInView, setEmphasisInView] = useState(false);

  useEffect(() => {
    if (!emphasis || !animateEmphasis) return;
    const el = wrapperRef.current;
    if (!el) return;

    const prefersReduce =
      typeof window !== 'undefined' &&
      window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
    if (prefersReduce) {
      setEmphasisInView(true);
      return;
    }

    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setEmphasisInView(true);
          observer.disconnect();
        }
      },
      { threshold: 0.5 },
    );
    observer.observe(el);
    return () => observer.disconnect();
  }, [emphasis, animateEmphasis]);

  return (
    <div
      ref={wrapperRef}
      className={cn(
        'space-y-4',
        align === 'center' ? 'mx-auto max-w-3xl text-center' : 'max-w-3xl',
        className,
      )}
    >
      {eyebrow && (
        <div
          className={cn(
            'editorial-rule',
            align === 'center' ? '' : 'left',
            align === 'left' && 'before:hidden',
          )}
        >
          <span className="font-data">{eyebrow}</span>
        </div>
      )}
      <Heading
        className={cn(
          'tracking-tight text-foreground',
          as === 'h1'
            ? 'text-4xl font-extrabold sm:text-5xl md:text-6xl'
            : 'text-3xl font-bold sm:text-4xl md:text-5xl',
        )}
      >
        {title}
        {emphasis && (
          <>
            {' '}
            <span className={cn('marker', emphasisInView && 'in-view')}>{emphasis}</span>
          </>
        )}
      </Heading>
      {description && (
        <p
          className={cn(
            'text-base text-muted-foreground sm:text-lg leading-relaxed',
            align === 'center' && 'mx-auto max-w-2xl',
          )}
        >
          {description}
        </p>
      )}
      {children}
    </div>
  );
}