Kinetic Type Hero

/**
 * VibeBox Motion · Kinetic Type Hero
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
import { Actions, Container, Eyebrow, headingId, Media, REVEAL, Section, SlotText, type BlockProps } from "@/lib/vibebox/block-kit";
import { KineticHeadline, type KineticSegment } from "@/components/vibebox/kinetic-headline";
import type { Image } from "@/lib/vibebox/content";
import { cn } from "@/lib/utils";
import type { Content, Variant } from "./schema";

/*
 * Poster type: the headline set as large as the screen allows, each word rising into place on
 * load (Kinetic Headline, CSS only), with the photo tucked into a corner or set wide beneath.
 */

const FALLBACK_MEDIA: Image = { src: "scene:ribbon", alt: "", width: 1200, height: 900 };

/** `*word*` becomes the serif emphasis segment. */
function segments(heading: string): KineticSegment[] {
  return heading.split("*").flatMap((part, index): KineticSegment[] => (part ? [index % 2 === 1 ? { text: part, variant: "serif" } : part] : []));
}

export type HeroKineticTypeProps = BlockProps<Content, Variant>;

export function HeroKineticType({ content, variant = "poster", id, tone, className }: HeroKineticTypeProps) {
  const poster = variant === "poster";
  return (
    <Section
      slug="hero-kinetic-type"
      variant={variant}
      id={id}
      tone={tone}
      labelledBy={headingId(id)}
      spacing={false}
      className={cn("overflow-clip py-[clamp(48px,8vw,120px)]", className)}
    >
      <Container className={cn("grid grid-cols-[minmax(0,1fr)] gap-[clamp(32px,5vw,64px)]", poster && "lg:grid-cols-[minmax(0,1.65fr)_minmax(0,0.85fr)] lg:items-end")}>
        <div className="grid gap-7">
          <Eyebrow value={content.eyebrow} />
          <div data-slot="heading">
            <KineticHeadline
              as="h1"
              id={headingId(id)}
              segments={segments(content.heading)}
              className="font-display text-[clamp(2.9rem,1rem+7.6vw,8.5rem)] leading-[0.94] font-semibold tracking-[-0.05em]"
            />
          </div>
          <div className={cn("grid gap-6", !poster && "md:grid-cols-[minmax(0,1fr)_auto] md:items-end md:gap-12")}>
            <SlotText as="p" value={content.lead} path="lead" className="max-w-[52ch] text-[clamp(1.05rem,1.3vw,1.25rem)] leading-relaxed text-pretty text-muted-foreground" />
            <Actions primary={content.primaryAction} secondary={content.secondaryAction} size="lg" />
          </div>
        </div>
        <div className={cn("overflow-hidden rounded-xl ring-1 ring-border", poster ? "aspect-[4/3] lg:aspect-[3/4]" : "aspect-[16/7] sm:aspect-[21/8]", REVEAL)}>
          <Media image={content.media ?? FALLBACK_MEDIA} priority sizes={poster ? "(min-width: 1024px) 30vw, 100vw" : "100vw"} />
        </div>
      </Container>
    </Section>
  );
}

/**
 * VibeBox Motion · Kinetic Type Hero
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
import { sections, type z } from "@/lib/vibebox/content";

export const variants = ["poster", "stacked"] as const;

export type Variant = (typeof variants)[number];

export const content = sections.hero;

export type Content = z.infer<typeof content>;