Split Contact

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

/*
 * Every way to reach the business beside an inquiry form: the channels (facts, fill-ins until
 * given), a map or photo, and a plain HTML form that posts to the app's inquiry route.
 */

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

export function ContactSplit({ content, variant = "form-right", id, tone, preview, formAction, className }: ContactSplitProps) {
  return (
    <Section slug="contact-split" 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} />
          <ChannelList channels={content.channels} columns className={REVEAL} />
          {content.media && (
            <div className={cn("aspect-[16/9] overflow-hidden rounded-xl ring-1 ring-border", REVEAL)}>
              <Media image={content.media} sizes="(min-width: 1024px) 45vw, 100vw" />
            </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 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, 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;

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