import type { Metadata } from "next";
import { BenefitTypesGrid } from "@/components/benefits/BenefitTypesGrid";
import { LoginBanner, PaymentBanner } from "@/components/benefits/BenefitsBanners";
import { BenefitsHero } from "@/components/benefits/BenefitsHero";
import { BenefitsTabs } from "@/components/benefits/BenefitsTabs";
import { CardCarousel } from "@/components/benefits/CardCarousel";
import { PageContainer } from "@/components/layout/PageContainer";
import { SiteFooter } from "@/components/layout/SiteFooter";
import { SplitHeader } from "@/components/layout/SplitHeader";
import { WolfBadge } from "@/components/layout/WolfBadge";

export const metadata: Metadata = {
  title: "Membership Benefits | Sterling Protection Partners LTD",
  description:
    "Discover the exclusive benefits, privileges, protection, and services available through your Sterling membership.",
  alternates: {
    canonical: "/membership-benefits",
  },
  openGraph: {
    title: "Membership Benefits | Sterling Protection Partners LTD",
    description:
      "Discover the exclusive benefits, privileges, protection, and services available through your Sterling membership.",
    url: "/membership-benefits",
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "Membership Benefits | Sterling Protection Partners LTD",
    description:
      "Discover the exclusive benefits, privileges, protection, and services available through your Sterling membership.",
  },
};

export default function MembershipBenefitsPage() {
  return (
    <PageContainer>
      <WolfBadge />
      <SplitHeader />
      <BenefitsHero />

      <main className="bg-white px-[53px] py-[10px] text-ink max-[769px]:mt-5 max-[769px]:rounded-2xl max-[769px]:px-6 max-[769px]:shadow-[0_10px_30px_rgba(0,0,0,0.25)]">
        <BenefitsTabs />
        <BenefitTypesGrid />
      </main>

      <PaymentBanner />
      <CardCarousel />
      <LoginBanner />
      <SiteFooter />
    </PageContainer>
  );
}