import Link from "next/link";
import brand from "@/brand.config";
import { buildSupportLink } from "@/vendor/ui/brand";

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

export default function ContactPage() {
  return (
    <div className="mx-auto max-w-2xl px-4 py-16">
      <h1 className="text-3xl font-semibold tracking-tight text-sand-900 dark:text-sand-50">
        Get in touch
      </h1>
      <p className="mt-2 mb-10 text-sand-600 dark:text-sand-400">
        Real humans. 24/7. Pick the channel you already have open.
      </p>
      <div className="space-y-3">
        <Link
          href={buildSupportLink("whatsapp", { message: `Hi ${brand.name}!` })}
          target="_blank"
          rel="noopener noreferrer"
          className="flex items-center justify-between rounded-2xl border border-sand-200 bg-white px-5 py-4 text-sand-900 dark:border-sand-800 dark:bg-sand-900 dark:text-sand-50"
        >
          <span className="font-medium">WhatsApp</span>
          <span className="text-sm text-sand-500">24/7</span>
        </Link>
        <Link
          href={buildSupportLink("sms")}
          className="flex items-center justify-between rounded-2xl border border-sand-200 bg-white px-5 py-4 text-sand-900 dark:border-sand-800 dark:bg-sand-900 dark:text-sand-50"
        >
          <span className="font-medium">SMS</span>
          <span className="text-sm text-sand-500">{brand.supportWhatsapp}</span>
        </Link>
        <a
          href={`mailto:${brand.supportEmail}`}
          className="flex items-center justify-between rounded-2xl border border-sand-200 bg-white px-5 py-4 text-sand-900 dark:border-sand-800 dark:bg-sand-900 dark:text-sand-50"
        >
          <span className="font-medium">Email</span>
          <span className="text-sm text-sand-500">{brand.supportEmail}</span>
        </a>
      </div>
    </div>
  );
}