"use client";

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

type FeatureSlideProps = {
  number: number;
  total: number;
  eyebrow: string;
  title: ReactNode;
  body?: ReactNode;
  align?: "start" | "center" | "end";
  /** If true, title is centered with text-center. Default false (left-aligned hero). */
  centered?: boolean;
};

/**
 * Dark slide variant. Display headline in DM Serif italic + accent.
 * Use for opening/closing slides, manifesto/thesis statements, key transitions.
 */
export function FeatureSlide({
  number,
  total,
  eyebrow,
  title,
  body,
  align = "center",
  centered = false,
}: FeatureSlideProps) {
  return (
    <Slide variant="feature" number={number} total={total} align={align}>
      <div className={centered ? "flex flex-col items-center gap-12 text-center" : "flex flex-col gap-10"}>
        <Reveal direction="up" duration={0.3}>
          <EyebrowMark>{eyebrow}</EyebrowMark>
        </Reveal>

        <Reveal direction="up" delay={0.2} duration={0.4}>
          <h1
            className="font-display italic text-accent-500"
            style={{
              fontSize: "clamp(40px, 6.5vw, 104px)",
              lineHeight: 1.06,
              letterSpacing: "-0.015em",
              maxWidth: centered ? "1500px" : "1300px",
            }}
          >
            {title}
          </h1>
        </Reveal>

        {body && (
          <Reveal direction="up" delay={0.5} duration={0.3}>
            <p
              className="text-white/80"
              style={{
                fontSize: "clamp(16px, 1.5vw, 22px)",
                lineHeight: 1.5,
                maxWidth: "780px",
              }}
            >
              {body}
            </p>
          </Reveal>
        )}
      </div>
    </Slide>
  );
}