"use client";

import type { ReactNode } from "react";
import { Reveal } from "@/components/animations/reveal";
import { EyebrowMark } from "@/components/brand/eyebrow";
import { Highlight } from "@/components/brand/highlight";
import { Slide } from "@/components/deck/slide";

type CenteredThesisProps = {
  number: number;
  total: number;
  eyebrow: string;
  /** Text before the highlighted phrase. */
  beforeHighlight: ReactNode;
  /** Single key phrase rendered with animated yellow fill. */
  highlight: ReactNode;
  /** Text after the highlight (often a single character: "." or "?"). */
  afterHighlight?: ReactNode;
  /** Optional tail sentence rendered with rules either side. */
  tail?: ReactNode;
};

/**
 * Centered thesis statement on dark slide. One headline with a single Highlight word.
 * Reserve for the single most important slide of the deck (or each block).
 */
export function CenteredThesis({
  number,
  total,
  eyebrow,
  beforeHighlight,
  highlight,
  afterHighlight = ".",
  tail,
}: CenteredThesisProps) {
  return (
    <Slide variant="feature" number={number} total={total} align="center">
      <div className="flex flex-col items-center gap-12 text-center">
        <Reveal direction="up" duration={0.3}>
          <EyebrowMark>{eyebrow}</EyebrowMark>
        </Reveal>

        <Reveal direction="up" delay={0.2} duration={0.4}>
          <h2
            className="font-display italic text-accent-500"
            style={{
              fontSize: "clamp(36px, 5.6vw, 88px)",
              lineHeight: 1.08,
              letterSpacing: "-0.015em",
              maxWidth: "1500px",
            }}
          >
            {beforeHighlight} <Highlight delay={1.0}>{highlight}</Highlight>
            {afterHighlight}
          </h2>
        </Reveal>

        {tail && (
          <Reveal direction="up" delay={1.5} duration={0.4}>
            <div className="mt-6 flex items-center gap-4">
              <span className="h-px w-8 bg-white/35" aria-hidden />
              <p className="text-white/60" style={{ fontSize: 15, lineHeight: 1.5 }}>
                {tail}
              </p>
              <span className="h-px w-8 bg-white/35" aria-hidden />
            </div>
          </Reveal>
        )}
      </div>
    </Slide>
  );
}