Contact Cards

/**
 * VibeBox Motion · Contact Cards
 * 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 { ChannelValue, CHANNEL_ICONS, Container, headingId, Icon, REVEAL, Section, SectionHead, SlotText, type BlockProps } from "@/lib/vibebox/block-kit";
import { cn } from "@/lib/utils";
import type { Content, Variant } from "./schema";

/*
 * One card per way to reach the business (call, visit, message), or a list of rows. Each value
 * is a link when it can be (tel:, mailto:, chat apps, maps) and a fill-in until given.
 */

export type ContactCardsProps = BlockProps<Content, Variant>;

export function ContactCards({ content, variant = "cards", id, tone, className }: ContactCardsProps) {
  const list = variant === "list";
  return (
    <Section slug="contact-cards" variant={variant} id={id} tone={tone} labelledBy={headingId(id)} className={className}>
      <Container className={cn("grid gap-[clamp(32px,4vw,56px)]", list && "lg:grid-cols-[minmax(0,0.8fr)_minmax(0,1.2fr)] lg:gap-20")}>
        <SectionHead eyebrow={content.eyebrow} heading={content.heading} lead={content.lead} id={id} />
        <ul className={cn(list ? "grid border-t border-border" : "grid gap-4 sm:grid-cols-2 lg:grid-cols-3")}>
          {content.channels.map((channel, index) => (
            <li
              key={index}
              className={cn(
                list ? "grid grid-cols-[auto_minmax(0,1fr)] items-start gap-4 border-b border-border py-5" : "grid content-start gap-4 rounded-xl bg-card p-6 text-card-foreground ring-1 ring-border",
                REVEAL,
              )}
            >
              <span className="inline-grid size-11 place-items-center rounded-lg bg-[color-mix(in_oklab,var(--spectrum-2)_12%,var(--card))] ring-1 ring-border">
                <Icon name={CHANNEL_ICONS[channel.kind]} />
              </span>
              <div className="grid min-w-0 gap-1">
                <SlotText value={channel.label} path={`channels.${index}.label`} className="text-small text-muted-foreground" />
                <ChannelValue channel={channel} path={`channels.${index}.value`} className={cn("font-semibold", !list && "text-[1.1rem]")} />
              </div>
            </li>
          ))}
        </ul>
      </Container>
    </Section>
  );
}

/**
 * VibeBox Motion · Contact Cards
 * 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 = ["cards", "list"] as const;

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

export const content = sections.contact.omit({ form: true, media: true });

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