Split Bloom Contact

/**
 * VibeBox Motion · Split Bloom Contact
 * 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 { ChannelList, Container, headingId, InquiryForm, Media, REVEAL, Section, SectionHead, type BlockProps } from "@/lib/vibebox/block-kit";
import { ContactBloom, type ContactChannels } from "@/components/vibebox/contact-bloom";
import { isFillIn } from "@/lib/vibebox/content/runtime";
import { cn } from "@/lib/utils";
import type { Content, Variant } from "./schema";

/*
 * The split contact section with a quick way out: beside the channels, a Contact Bloom button
 * opens the phone, text and chat apps the business uses. It shows once at least one of those
 * channels is a real value, never for fill-ins.
 */

const BLOOM_KINDS = ["phone", "sms", "viber", "messenger", "whatsapp", "email"] as const;

function bloomChannels(channels: Content["channels"]): ContactChannels {
  const found: ContactChannels = {};
  for (const channel of channels) {
    const kind = BLOOM_KINDS.find((candidate) => candidate === channel.kind);
    if (kind && !isFillIn(channel.value) && !found[kind]) found[kind] = channel.value;
  }
  return found;
}

export type ContactSplitBloomProps = BlockProps<Content, Variant> & {
  /** Where the form posts (assembled apps handle /api/inquiries). */
  formAction?: string;
};

export function ContactSplitBloom({ content, variant = "form-right", id, tone, preview, formAction, className }: ContactSplitBloomProps) {
  const quick = bloomChannels(content.channels);
  return (
    <Section slug="contact-split-bloom" variant={variant} id={id} tone={tone} labelledBy={headingId(id)} className={className}>
      <Container className="grid grid-cols-[minmax(0,1fr)] gap-[clamp(36px,5vw,72px)] lg:grid-cols-2">
        <div className={cn("grid content-start gap-8", variant === "form-left" && "lg:order-2")}>
          <SectionHead eyebrow={content.eyebrow} heading={content.heading} lead={content.lead} id={id} />
          {content.media && (
            <div className={cn("aspect-[21/9] overflow-hidden rounded-xl ring-1 ring-border", REVEAL)}>
              <Media image={content.media} sizes="(min-width: 1024px) 45vw, 100vw" />
            </div>
          )}
          <ChannelList channels={content.channels} columns className={REVEAL} />
          <div data-slot="bloomLabel" className={cn("justify-self-start", REVEAL)}>
            {Object.keys(quick).length > 0 ? (
              <ContactBloom channels={quick} label={content.bloomLabel} direction="down" />
            ) : (
              <span className="inline-flex h-11 items-center rounded-full border border-dashed border-border-strong px-5 text-small text-muted-foreground">{content.bloomLabel}</span>
            )}
          </div>
        </div>
        {content.form && (
          <div className={cn("self-start rounded-xl bg-card p-6 text-card-foreground ring-1 ring-border sm:p-8", REVEAL)}>
            <InquiryForm form={content.form} action={formAction} preview={preview} source={id} />
          </div>
        )}
      </Container>
    </Section>
  );
}

/**
 * VibeBox Motion · Split Bloom Contact
 * 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, text, type z } from "@/lib/vibebox/content";

export const variants = ["form-right", "form-left"] as const;

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

export const content = sections.contact.extend({
  bloomLabel: text({ role: "Quick contact button", max: 24 }),
});

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