Bento Hero

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

/*
 * The copy beside (or above) a three-tile mosaic: a tall photo, a second image and a card listing
 * what the business offers. Tiles reveal one after another as the hero scrolls in.
 */

const FALLBACK: Image = { src: "scene:blocks", alt: "", width: 900, height: 1200 };
const FALLBACK_SECOND: Image = { src: "scene:bloom", alt: "", width: 900, height: 900 };

export type HeroBentoProps = BlockProps<Content, Variant>;

export function HeroBento({ content, variant = "mosaic-right", id, tone, className }: HeroBentoProps) {
  const right = variant === "mosaic-right";
  const tile = "overflow-hidden rounded-xl ring-1 ring-border";
  return (
    <Section
      slug="hero-bento"
      variant={variant}
      id={id}
      tone={tone}
      labelledBy={headingId(id)}
      spacing={false}
      className={cn("overflow-clip py-[clamp(48px,8vw,112px)]", className)}
    >
      <Container className={cn("grid grid-cols-[minmax(0,1fr)] items-center gap-[clamp(36px,5vw,72px)]", right && "lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]")}>
        <div className={cn("grid gap-6", !right && "lg:grid-cols-[minmax(0,1.2fr)_minmax(0,0.8fr)] lg:items-end lg:gap-14")}>
          <div className="grid gap-6">
            <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" />
          </div>
          <div className="grid gap-6">
            <SlotText as="p" value={content.lead} path="lead" className="max-w-[54ch] 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("grid grid-cols-2 gap-3 sm:gap-4", right ? "grid-rows-[auto_auto]" : "sm:grid-cols-[1.2fr_1fr_1fr]")}>
          <div className={cn(tile, right ? "row-span-2 min-h-full" : "col-span-2 aspect-[16/10] sm:col-span-1 sm:aspect-auto sm:min-h-[260px]", REVEAL)}>
            <Media image={content.media ?? FALLBACK} priority sizes="(min-width: 1024px) 25vw, 50vw" />
          </div>
          <div className={cn(tile, "aspect-square", REVEAL)}>
            <Media image={content.secondaryMedia ?? FALLBACK_SECOND} sizes="(min-width: 1024px) 20vw, 50vw" />
          </div>
          <div className={cn("grid content-start gap-3 rounded-xl bg-card p-4 text-card-foreground ring-1 ring-border sm:p-5", REVEAL)}>
            <SlotText value={content.list.label} path="list.label" className="text-label font-medium text-muted-foreground" />
            <ul className="grid gap-2">
              {content.list.items.map((item, index) => (
                <li key={index} className="flex min-w-0 items-baseline gap-2 font-medium">
                  <span aria-hidden="true" className="size-1.5 shrink-0 translate-y-[-2px] rounded-[2px] bg-spectrum-3" />
                  <span data-slot={`list.items.${index}`} className="min-w-0 break-words">
                    {item}
                  </span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </Container>
    </Section>
  );
}

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

export const variants = ["mosaic-right", "mosaic-below"] as const;

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

export const content = sections.hero.extend({
  secondaryMedia: image({ role: "Second image" }).optional(),
  list: z.strictObject({
    label: text({ role: "List label", max: 24 }),
    items: list(text({ role: "List item", max: 28 }), { role: "List items", min: 2, max: 5 }),
  }),
});

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