<FeatureBand
	layout="stage"
	id="how-it-works"
	eyebrow="How it works"
	title="From a failed probe to the right phone"
	description="Every alert is <strong>confirmed from two regions</strong> before it pages anyone."
>
	<TabbedStage.Item
		value="watch"
		label="Watch every endpoint"
		description="Probes in six regions check each URL every thirty seconds."
		defaultChecked
	>
		<Panel title="Monitors" rows={MONITORS} />
	</TabbedStage.Item>
	<TabbedStage.Item value="confirm" label="Confirm before paging" description="…">
		<Panel title="checkout.beacon.dev" rows={PROBES} />
	</TabbedStage.Item>
	<TabbedStage.Item value="page" label="Page the right person" description="…">
		<Panel title="Incident #2114" rows={ESCALATION} />
	</TabbedStage.Item>
</FeatureBand>

<FeatureBand
	layout="timeline"
	tone="tinted"
	eyebrow="Incident timeline"
	title="One incident, start to finish"
	description="Seventeen minutes from the first 503 to the all-clear on the status page."
>
	<StepList.Item meta="14:02 UTC" title="Checkout starts failing">…</StepList.Item>
	<StepList.Item meta="14:04 UTC" title="Ana acknowledges">…</StepList.Item>
	<StepList.Item meta="14:11 UTC" title="Status page updated">…</StepList.Item>
	<StepList.Item meta="14:19 UTC" title="Back to green">…</StepList.Item>
</FeatureBand>