import Link from "next/link";
import { Band, CtaBand, PageHead, SiteNav, body, h3, small } from "@/components/site";
import JsonLd from "@/components/JsonLd";
import { graph } from "@/lib/schema";
/* Shared furniture for the guides.
*
* These pages exist to be found by someone searching for the problem rather than the product — a
* linen services manager working out how to run a stocktake, not someone shopping for software.
* So they are written to be useful on their own: a person who reads one, does the thing manually
* and never signs up has still been helped, and the page has still done its job.
*
* The product is mentioned where it genuinely bears on the step and nowhere else. A guide that
* turns into an advertisement three paragraphs in is one people stop trusting, and stop linking
* to, which defeats the entire point of writing it. */
const SITE = process.env.NEXT_PUBLIC_SITE_URL || "https://threadcount.tech";
export type Step = { n: string; h: string; p: React.ReactNode };
export function GuideMeta({ slug, title, description, updated }: { slug: string; title: string; description: string; updated: string }) {
return (
);
}
export function GuideHead({ kicker, title, lede }: { kicker: string; title: string; lede: string }) {
return (
<>
);
}
/** A numbered step. The number carries the sequence, so the prose doesn’t have to.
*
* The index is drawn in neutral-600, not the neutral-400 it used to be: on the paper ground that
* is 1.9:1, which is under every threshold there is, and a step number nobody can read is a
* numbered list that has stopped being numbered. neutral-400 stays fine where it is used on the
* ink panels — it is only text on paper that fails. */
export function Steps({ steps }: { steps: Step[] }) {
return (
{steps.map((s) => (
{s.n}
{s.h}
{s.p}
))}
);
}
/** The thing that goes wrong, stated plainly. These are the parts people actually search for. */
export function Pitfalls({ items }: { items: [string, string][] }) {
return (
{items.map(([h, p]) => (
{h}
{p}
))}
);
}
export function GuideFoot({ related }: { related: [string, string][] }) {
return (
<>