import type { Metadata } from "next";
import Link from "next/link";
import PageHero from "@/components/PageHero";

export const metadata: Metadata = {
  title: "Blog",
  description: "Guides, updates, and tips from the GroupBuyServices team.",
};

export default function BlogsPage() {
  return (
    <>
      <PageHero
        title="Blog"
        subtitle="Guides, updates, and tips from the GroupBuyServices team."
      />
      <section className="bg-white py-20">
        <div className="mx-auto max-w-3xl px-4 text-center sm:px-6 lg:px-8">
          <span className="text-5xl" aria-hidden>📝</span>
          <h2 className="mt-4 text-xl font-bold text-slate-900">New posts coming soon</h2>
          <p className="mt-2 text-sm text-slate-500">
            We&apos;re working on tutorials and tool guides. In the meantime, explore our tools and
            packages.
          </p>
          <Link
            href="/tools/"
            className="mt-6 inline-block rounded-xl bg-brand-600 px-7 py-3 text-sm font-semibold text-white transition-colors hover:bg-brand-700"
          >
            Browse All Tools
          </Link>
        </div>
      </section>
    </>
  );
}