import type { Metadata } from "next";
import { Navbar } from "@/components/public/Navbar";
import { Footer } from "@/components/public/Footer";
import { ContactChannelGrid } from "@/components/public/ContactChannelGrid";
import { BreadcrumbJsonLd } from "@/components/public/JsonLd";

export const metadata: Metadata = {
  title: "Contact Us",
  description:
    "Get in touch with the Belgian Bitcoin Embassy community through Telegram, Nostr, or X. Join our monthly Bitcoin meetups in Belgium.",
  openGraph: {
    title: "Contact the Belgian Bitcoin Embassy",
    description:
      "Reach the Belgian Bitcoin community through our decentralized channels.",
  },
  alternates: { canonical: "/contact" },
};

export default function ContactPage() {
  return (
    <>
      <BreadcrumbJsonLd
        items={[
          { name: "Home", href: "/" },
          { name: "Contact", href: "/contact" },
        ]}
      />
      <Navbar />
      <div className="min-h-screen">
        <div className="max-w-3xl mx-auto px-8 pt-16 pb-24">
          <h1 className="text-4xl font-black mb-4">Contact</h1>
          <p className="text-on-surface-variant text-lg mb-12">
            The best way to reach us is through our community channels. We are a
            decentralized community — there is no central office or email inbox.
          </p>

          <ContactChannelGrid />
        </div>
      </div>
      <Footer />
    </>
  );
}
