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

export const metadata: Metadata = {
  title: "About Us",
  description:
    "GroupBuyServices is the best group buy SEO tools provider — 6+ years in the field, trusted by 15,000+ creators.",
};

export default function AboutUsPage() {
  return (
    <>
      <PageHero
        title="About Us"
        subtitle="We make premium tools affordable for everyone through a managed group-buy system."
      />
      <section className="bg-white py-14">
        <div className="mx-auto max-w-3xl space-y-6 px-4 leading-relaxed text-slate-600 sm:px-6 lg:px-8">
          <p>
            {site.shortName} is a Best Group Buy SEO Tools Provider. We offer the most useful tools
            at a reasonable price. For more than 6 years we have helped freelancers, agencies,
            students, and businesses access 100+ premium SEO, content, design, and AI tools while
            saving up to 90% on every subscription.
          </p>
          <p>
            Our managed group-buy system pools subscription costs across thousands of members, so
            everyone gets real premium access — with instant delivery, a user-friendly dashboard,
            99.9% uptime, and 24/7 live chat support.
          </p>
          <p>
            Today we are trusted by more than 15,000 customers worldwide and maintain a 4.9/5
            average rating. Whether you need a single tool or a complete bundle, our team is always
            available on Live Chat, Messenger, and WhatsApp to help you get set up in minutes.
          </p>
          <div className="grid grid-cols-2 gap-4 pt-4 sm:grid-cols-4">
            {[
              { value: "6+ years", label: "in the service field" },
              { value: "15K+", label: "happy customers" },
              { value: "100+", label: "premium tools" },
              { value: "99.9%", label: "uptime guarantee" },
            ].map((s) => (
              <div key={s.label} className="rounded-2xl bg-slate-50 p-5 text-center">
                <p className="text-xl font-extrabold text-slate-900">{s.value}</p>
                <p className="mt-1 text-xs text-slate-500">{s.label}</p>
              </div>
            ))}
          </div>
          <div className="pt-4 text-center">
            <Link
              href="/tools/"
              className="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>
        </div>
      </section>
    </>
  );
}