Contact methods band

Install kit: "Contact methods band"
Library page: https://astro.baysixmedia.com/components/contact-methods-band/
Files: 1 required, 1 supporting

Write each block below to the path named in its header, relative to the project root. A block marked (required) is one the component does not work without; (supporting) is documentation. Nothing here needs downloading except a block that says so in as many words.

===== FILE (required): src/components/ContactMethodsBand.astro =====
---
/**
 * ContactMethodsBand
 *
 * A closing contact section with no form: a dark accent band whose heading
 * and one line sit above a row of the ways to reach the business — phone,
 * email, address, hours, areas served — each a small label over its value,
 * split by vertical rules. The phone and email values are real `tel:` and
 * `mailto:` links, set larger than the rest because they are the actions.
 *
 * Every method is a supplied fact; a method that was not supplied is simply
 * absent. With no methods the component renders nothing. No default heading,
 * number, address, hours, town or claim.
 *
 * Reads --cmb-* custom properties from any ancestor, with fallbacks.
 */

export interface ContactMethod {
	/** Which kind of method: decides emphasis (phone and email are actions). */
	key: "phone" | "email" | "address" | "hours" | "areas";
	/** A short label for the kind ("Phone"). */
	title: string;
	/** The supplied value, one string per line. */
	texts: string[];
	/** tel:, mailto: or a map link. */
	href?: string;
}

export interface ContactMethodsBandProps {
	eyebrow?: string;
	heading?: string;
	/** h2 by default. */
	headingLevel?: "h2" | "h3";
	/** One line under the heading. */
	body?: string;
	methods?: ContactMethod[];
	/** One optional non-phone action (a booking or estimate page). */
	cta?: { label: string; href: string } | null;
	fontStylesheet?: string;
	class?: string;
	id?: string;
}

interface Props extends ContactMethodsBandProps {}

const {
	eyebrow = "",
	heading = "",
	headingLevel = "h2",
	body = "",
	methods = [],
	cta = null,
	fontStylesheet = "https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&display=swap",
	class: className,
	id,
} = Astro.props;

const SAFE = /^(?:https?:|mailto:|tel:|[#/.?])/i;
const safe = (href?: string) => (href && SAFE.test(href.trim()) ? href.trim() : undefined);
const items = methods
	.map((m) => ({ ...m, texts: (m?.texts ?? []).filter((t) => typeof t === "string" && t.trim()) }))
	.filter((m) => m.title?.trim() && m.texts.length > 0);
const action = cta && cta.label?.trim() && safe(cta.href) ? { label: cta.label.trim(), href: safe(cta.href)! } : null;
const Heading = headingLevel;
const primary = (key: string) => key === "phone" || key === "email";
---

{items.length > 0 && fontStylesheet && <link rel="stylesheet" href={fontStylesheet} />}
{
	items.length > 0 && (
		<section class:list={["cmb", className]} id={id}>
			<div class="cmb-inner">
				{(eyebrow.trim() || heading.trim() || body.trim() || action) && (
					<div class="cmb-lead">
						<div>
							{eyebrow.trim() && <p class="cmb-eyebrow">{eyebrow}</p>}
							{heading.trim() && <Heading class="cmb-heading">{heading}</Heading>}
							{body.trim() && <p class="cmb-body">{body}</p>}
						</div>
						{action && (
							<a class="cmb-cta" href={action.href}>
								{action.label}
							</a>
						)}
					</div>
				)}
				<dl class="cmb-methods">
					{items.map((m) => (
						<div class:list={["cmb-method", { "cmb-method--primary": primary(m.key) }]}>
							<dt>{m.title}</dt>
							<dd>
								{m.texts.map((t, i) =>
									safe(m.href) && i === 0 ? (
										<a href={safe(m.href)}>{t}</a>
									) : (
										<span>{t}</span>
									),
								)}
							</dd>
						</div>
					))}
				</dl>
			</div>
		</section>
	)
}

<style>
	.cmb {
		--cmb-bg: var(--cmb-surface, #16362c);
		--cmb-ink-color: var(--cmb-ink, #f1ede3);
		--cmb-muted-color: var(--cmb-muted, rgb(241 237 227 / 0.68));
		--cmb-accent-color: var(--cmb-accent, #e8c46b);
		--cmb-rule: rgb(241 237 227 / 0.18);
		background: var(--cmb-bg);
		color: var(--cmb-ink-color);
		font-family: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	}

	.cmb-inner {
		max-width: 1280px;
		margin-inline: auto;
		padding: clamp(56px, 8vw, 104px) clamp(20px, 5vw, 48px);
	}

	.cmb-lead {
		display: grid;
		gap: 24px;
		margin-bottom: clamp(36px, 5vw, 56px);
	}

	.cmb-eyebrow {
		margin: 0 0 14px;
		font-size: 0.8125rem;
		font-weight: 700;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--cmb-accent-color);
	}

	.cmb-heading {
		margin: 0;
		max-width: 20ch;
		font-weight: 800;
		font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
		line-height: 1.02;
		letter-spacing: -0.02em;
	}

	.cmb-body {
		margin: 16px 0 0;
		max-width: 52ch;
		font-size: 1.0625rem;
		line-height: 1.55;
		color: var(--cmb-muted-color);
	}

	.cmb-cta {
		display: inline-flex;
		align-items: center;
		justify-self: start;
		min-height: 48px;
		padding: 0 22px;
		border: 2px solid var(--cmb-accent-color);
		border-radius: 999px;
		color: var(--cmb-ink-color);
		font-weight: 700;
		text-decoration: none;
	}

	/* The methods: a column on a phone, a ruled row from 900px. */
	.cmb-methods {
		display: grid;
		margin: 0;
		border-top: 1px solid var(--cmb-rule);
	}

	.cmb-method {
		display: grid;
		gap: 6px;
		padding-block: 20px;
		border-bottom: 1px solid var(--cmb-rule);
		min-width: 0;
	}

	.cmb-method dt {
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--cmb-accent-color);
	}

	.cmb-method dd {
		display: grid;
		gap: 2px;
		margin: 0;
		font-size: 1.0625rem;
		line-height: 1.45;
		overflow-wrap: anywhere;
	}

	.cmb-method--primary dd {
		font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
		font-weight: 700;
		font-variant-numeric: tabular-nums;
	}

	.cmb-method a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		color: inherit;
		text-decoration: underline;
		text-decoration-color: var(--cmb-accent-color);
		text-decoration-thickness: 2px;
		text-underline-offset: 5px;
	}

	.cmb a:focus-visible {
		outline: 3px solid var(--cmb-accent-color);
		outline-offset: 4px;
	}

	@media (min-width: 900px) {
		.cmb-lead {
			grid-template-columns: minmax(0, 1fr) auto;
			align-items: end;
			column-gap: 48px;
		}

		.cmb-methods {
			grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
			border-top: 0;
		}

		.cmb-method {
			align-content: start;
			padding: 4px 28px 4px 0;
			border-bottom: 0;
		}

		.cmb-method + .cmb-method {
			padding-left: 28px;
			border-left: 1px solid var(--cmb-rule);
		}
	}

	@media (prefers-reduced-motion: no-preference) {
		.cmb-cta,
		.cmb-method a {
			transition:
				background-color 160ms ease,
				text-decoration-color 160ms ease;
		}
	}

	.cmb-cta:hover {
		background: var(--cmb-accent-color);
		color: #16130a;
	}
</style>

===== END src/components/ContactMethodsBand.astro =====

===== FILE (supporting): src/components/ContactMethodsBand.md =====
# Contact methods band

A closing contact section with no form: a dark accent band with a heading and
one line above a row of the ways to reach the business — phone, email,
address, hours, areas served — each a small label over its value, split by
vertical rules. Phone and email are real `tel:` / `mailto:` links, set larger
because they are the actions.

Catalog page: `/components/contact-methods-band`

## Files required

- **`ContactMethodsBand.astro`** — the whole component. No script, no images.
- `ContactMethodsBand.md` — this file.

## Props

| Prop | Type | Default | What it does |
| :--- | :--- | :--- | :--- |
| `methods` | `{ key, title, texts[], href? }[]` | `[]` | One entry per supplied way to reach the business. No methods: nothing renders. An entry with no text is dropped. |
| `eyebrow`, `heading`, `body` | `string?` | `""` | Each renders only when given. |
| `headingLevel` | `"h2" \| "h3"` | `"h2"` | |
| `cta` | `{ label, href } \| null` | `null` | One optional non-phone action. |
| `fontStylesheet`, `class`, `id` | | | Loads Archivo by default. |

`key` decides emphasis only: `phone` and `email` are set larger. The Build
Agent feeds `methods` from the derived `facts.contactMethods` records, so each
value is a supplied fact under a fixed label.

===== END src/components/ContactMethodsBand.md =====

--- VERIFIED IN THE COMPONENT LIBRARY ---
Production-ready in the library.
Verified 2026-09-25 at 1440, 1280, 1024, 768, 640, 390, 360, 320px.
Passed: full-page context, keyboard, no javascript, reduced motion, two instances, no overflow, declarations corroborated, lifecycle.
Library source fingerprint: sha256:8891ba47ffdd280b7d3f222c8db76d25fc9d0f9064dcfce279161740583d112b — MATCHES the files below.

--- NOT PROVEN ---
- ClientRouter: not applicable — this component ships no script.

--- WHAT THIS DOES NOT CERTIFY ---
Verification was performed on the unmodified component, in an isolated fixture, in the
library. It says nothing about this project's CSS, routes, layout or data, and nothing
about the component once you adapt it. A verified component is a good starting point,
not a guarantee about the installation you are about to build.

--- TEST IN THIS PROJECT AFTER INSTALLING OR CUSTOMISING ---
- Horizontal overflow at 1440, 1280, 1024, 834, 390 and 320px.
- Keyboard operation end to end, including visible focus.
- The no-JavaScript render.
- prefers-reduced-motion: reduce.
- Two instances on one page, if this project renders more than one.
- If this project uses <ClientRouter />: teardown and reinitialisation across a real navigation.

“Contact methods band” from my Astro Component Library:
https://astro.baysixmedia.com/components/contact-methods-band/

Use the existing library component as the implementation source. Preserve its design structure, layout, proportions, spacing system, responsive behavior, visual effects, animations, transitions, hover states, interactions, and accessibility.

The copy, colors, typography, images, and other content may be adapted to match the destination website. Do not redesign, simplify, or reinterpret the component’s underlying design build or effects.