Contact support

import Link from "next/link"

import { Callout } from "@/components/ui/callout"
import { Widget } from "@/components/ui/widget"

/** Where a reader goes when nothing on the shelf answers the question. */
export function ContactCard() {
  return (
    <Widget
      data-widget="widget-support-help-contact-card"
      title="Still stuck?"
      description="Two ways to reach a person"
      footer="Support answers between 08:00 and 20:00 UTC on working days."
    >
      <Callout title="Open a ticket and we will pick it up">
        <p>
          A ticket keeps the whole conversation, the workspace it is about, and anything you
          attach, in one place.{" "}
          <Link href="/support" className="text-foreground underline underline-offset-4">
            Open a ticket
          </Link>{" "}
          or write to{" "}
          <a href="mailto:support@northwind.example" className="text-foreground underline underline-offset-4">
            support@northwind.example
          </a>
          .
        </p>
      </Callout>
    </Widget>
  )
}