Centered Hero

/**
 * VibeBox Motion · Centered 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 { cn } from "@/lib/utils";
import type { Content, Variant } from "./schema";

/*
 * One promise in the middle of the page: the headline, intro and actions centred, a row of
 * highlights, and the media below. `halo` rings the copy with soft circles; `panel` sets it all
 * on a gradient surface.
 */

export type HeroCenteredProps = BlockProps<Content, Variant>;

export function HeroCentered({ content, variant = "stack", id, tone, className }: HeroCenteredProps) {
  const halo = variant === "halo";
  const panel = variant === "panel";
  const copy = (
    <div className="relative mx-auto grid max-w-4xl justify-items-center gap-6 text-center">
      <Eyebrow value={content.eyebrow} />
      <SlotText as="h1" value={content.heading} path="heading" id={headingId(id)} reveal className="font-display text-h1 font-semibold tracking-[-0.04em] text-balance" />
      <SlotText as="p" value={content.lead} path="lead" className="max-w-[56ch] text-[clamp(1.05rem,1.3vw,1.25rem)] leading-relaxed text-pretty text-muted-foreground" />
      <Actions primary={content.primaryAction} secondary={content.secondaryAction} size="lg" className="mt-1 justify-center" />
      {content.highlights.length > 0 && (
        <ul className="mt-2 flex flex-wrap justify-center gap-2">
          {content.highlights.map((item, index) => (
            <li key={index} data-slot={`highlights.${index}`} className="rounded-full border border-border bg-card/70 px-3.5 py-1.5 text-small font-medium">
              {item}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
  const media = content.media && (
    <div
      className={cn(
        "relative mx-auto overflow-hidden rounded-xl ring-1 ring-border",
        halo ? "aspect-square w-[min(300px,72vw)]" : "aspect-[16/9] w-full max-w-5xl",
        REVEAL,
      )}
    >
      <Media image={content.media} priority sizes="(min-width: 1024px) 1024px, 100vw" />
    </div>
  );
  return (
    <Section
      slug="hero-centered"
      variant={variant}
      id={id}
      tone={tone}
      labelledBy={headingId(id)}
      spacing={false}
      className={cn("overflow-clip py-[clamp(48px,8vw,120px)]", className)}
    >
      {halo && (
        <div
          aria-hidden="true"
          className="pointer-events-none absolute top-[38%] left-1/2 -z-10 aspect-square w-[min(980px,140vw)] -translate-x-1/2 -translate-y-1/2 rounded-full [mask-image:radial-gradient(circle,black_28%,transparent_70%)]"
          style={{ background: "repeating-radial-gradient(circle, transparent 0 46px, color-mix(in oklab, var(--spectrum-3) 30%, transparent) 47px 48px)" }}
        />
      )}
      <Container>
        <div
          className={cn(
            "grid gap-[clamp(40px,6vw,72px)]",
            panel && "rounded-xl px-5 py-12 ring-1 ring-border sm:px-10 sm:py-16 lg:px-16",
          )}
          style={
            panel
              ? { background: "linear-gradient(150deg, color-mix(in oklab, var(--spectrum-2) 14%, var(--card)), color-mix(in oklab, var(--spectrum-5) 10%, var(--card)))" }
              : undefined
          }
        >
          {copy}
          {media}
        </div>
      </Container>
    </Section>
  );
}

/**
 * VibeBox Motion · Centered 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 { list, sections, text, z } from "@/lib/vibebox/content";

export const variants = ["stack", "halo", "panel"] as const;

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

export const content = sections.hero.extend({
  highlights: list(text({ role: "Highlight", max: 28 }), { role: "Highlights", min: 0, max: 5 }),
});

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