import { HowItWorks } from "@/components/landing/HowItWorks";
import brand from "@/brand.config";

export const metadata = { title: "Help" };

export default function HelpPage() {
  return (
    <div className="pb-16">
      <div className="mx-auto max-w-3xl px-4 py-16">
        <h1 className="text-3xl font-semibold tracking-tight text-sand-900 dark:text-sand-50">
          Help
        </h1>
        <p className="mt-2 text-sand-600 dark:text-sand-400">
          Get connected in under five minutes. Humans on WhatsApp, 24/7.
        </p>
      </div>
      <HowItWorks />
      <div className="mx-auto max-w-3xl px-4 pt-10 text-sm text-sand-600 dark:text-sand-400">
        Need a human?{" "}
        <a href={`mailto:${brand.supportEmail}`} className="font-medium" style={{ color: "var(--brand-accent)" }}>
          {brand.supportEmail}
        </a>
        {" · "}
        <a href="/contact" className="font-medium" style={{ color: "var(--brand-accent)" }}>
          All channels
        </a>
      </div>
    </div>
  );
}