"use client";

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

type BlockDividerProps = {
  number: number;
  total: number;
  blockNumber: string;
  eyebrow: string;
  title: ReactNode;
  subtitle?: ReactNode;
};

/**
 * Block transition. Massive faded number + accent italic display title.
 * Place between thematic blocks (after closing slide of previous block).
 */
export function BlockDivider({
  number,
  total,
  blockNumber,
  eyebrow,
  title,
  subtitle,
}: BlockDividerProps) {
  return (
    <Slide variant="feature" number={number} total={total} align="center">
      <div className="flex flex-col gap-10">
        <motion.div
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          viewport={{ once: true, amount: 0.3 }}
          transition={{ duration: 0.4 }}
          className="kpi-figure"
          style={{ fontSize: "clamp(64px, 8vw, 110px)", color: "rgba(255,255,255,0.7)" }}
        >
          {blockNumber}
        </motion.div>

        <Reveal direction="up" delay={0.2} duration={0.4}>
          <EyebrowMark>{eyebrow}</EyebrowMark>
        </Reveal>

        <Reveal direction="up" delay={0.28} duration={0.4}>
          <h2
            className="font-display italic text-accent-500"
            style={{
              fontSize: "clamp(44px, 7.2vw, 128px)",
              lineHeight: 1,
              letterSpacing: "-0.015em",
              maxWidth: "1500px",
            }}
          >
            {title}
          </h2>
        </Reveal>

        {subtitle && (
          <Reveal direction="up" delay={0.8} duration={0.3}>
            <p
              className="text-white/85"
              style={{ fontSize: "clamp(17px, 1.6vw, 24px)", lineHeight: 1.5, maxWidth: "780px" }}
            >
              {subtitle}
            </p>
          </Reveal>
        )}
      </div>
    </Slide>
  );
}