import React from 'react';
import type { Metadata } from 'next';
import PricingClient from './PricingClient';

export const metadata: Metadata = {
    title: {
        absolute: 'Pricing Plans | QR Master'
    },
    description: 'Choose the perfect QR code plan for your needs. Free, Pro, and Business plans with dynamic QR codes, analytics, bulk generation, and custom branding.',
    alternates: {
        canonical: 'https://www.qrmaster.net/pricing',
    },
    robots: {
        index: true,
        follow: true,
    },
    openGraph: {
        title: 'Pricing Plans | QR Master',
        description: 'Choose the perfect QR code plan for your needs.',
        url: 'https://www.qrmaster.net/pricing',
        type: 'website',
        images: [
            {
                url: 'https://www.qrmaster.net/og-image.png',
                width: 1200,
                height: 630,
                alt: 'QR Master Pricing Plans',
            },
        ],
    },
};

export default function PricingPage() {
    return (
        <>
            {/* Server-rendered H1 for SEO */}
            <h1 className="sr-only">QR Master Pricing – Choose Your QR Code Plan</h1>
            <div className="sr-only">
                <h2>Compare our plans</h2>
                <p>Find the best QR code solution for your business. From free personal tiers to enterprise-grade dynamic code management.</p>
            </div>
            <PricingClient />
        </>
    );
}
