import React from 'react';
import type { Metadata } from 'next';
import PricingClient from './PricingClient';
import SeoJsonLd from '@/components/SeoJsonLd';
import { AnswerFirstBlock } from '@/components/marketing/AnswerFirstBlock';
import { FAQSection } from '@/components/aeo/FAQSection';
import { breadcrumbSchema, faqPageSchema } from '@/lib/schema';

export const metadata: Metadata = {
  title: {
    absolute: 'Pricing Plans | QR Master',
  },
  description:
    'Compare QR Master pricing plans. Free includes 3 active dynamic QR codes, Pro includes 50, and Business includes 500 plus bulk QR creation.',
  alternates: {
    canonical: 'https://www.qrmaster.net/pricing',
  },
  robots: {
    index: true,
    follow: true,
  },
  openGraph: {
    title: 'Pricing Plans | QR Master',
    description:
      'Compare QR Master pricing plans. Free includes 3 active dynamic QR codes, Pro includes 50, and Business includes 500 plus bulk QR creation.',
    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',
      },
    ],
  },
};

const faqItems = [
  {
    question: 'How many dynamic QR codes are included in each plan?',
    answer:
      'Free includes 3 active dynamic QR codes. Pro includes 50 dynamic QR codes. Business includes 500 dynamic QR codes.',
  },
  {
    question: 'Do all plans include static QR codes?',
    answer:
      'Yes. All plans include unlimited static QR codes.',
  },
  {
    question: 'Which plan includes bulk QR creation?',
    answer:
      'Bulk QR creation is included in the Business plan.',
  },
  {
    question: 'Which plans include analytics and branding?',
    answer:
      'The Free plan includes basic scan tracking. Pro adds advanced analytics and custom branding. Business includes everything from Pro plus bulk QR creation and priority email support.',
  },
];

const breadcrumbItems = [
  { name: 'Home', url: '/' },
  { name: 'Pricing', url: '/pricing' },
];

export default function PricingPage() {
  return (
    <>
      <SeoJsonLd data={[breadcrumbSchema(breadcrumbItems), faqPageSchema(faqItems)]} />

      <div className="bg-white">
        <div className="container mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
          <AnswerFirstBlock
            whatIsIt="QR Master pricing is organized around how many active dynamic QR codes you need and whether you need advanced analytics, branding, or bulk creation. Free includes 3 active dynamic QR codes, Pro includes 50, and Business includes 500 plus bulk QR creation."
            whenToUse={[
              'Choose Free when you need a small number of active dynamic QR codes and unlimited static QR codes',
              'Choose Pro when you need more active dynamic QR codes plus advanced analytics and custom branding',
              'Choose Business when you need 500 active dynamic QR codes and the bulk QR creation workflow',
            ]}
            comparison={{
              leftTitle: 'Lower plans',
              rightTitle: 'Higher plan adds',
              items: [
                { label: 'Dynamic QR capacity', value: true, text: '3 or 50 active codes' },
                { label: 'Bulk QR creation', value: true, text: 'Not included before Business' },
                { label: 'Advanced analytics and branding', value: true, text: 'Basic or Pro-level only' },
              ],
            }}
            howTo={{
              steps: [
                'Estimate how many active dynamic QR codes you need at one time',
                'Decide whether you also need advanced analytics, branding, or bulk creation',
                'Choose the plan that matches the current workflow instead of paying for unused capacity',
              ],
            }}
          />
        </div>

        <div className="container mx-auto max-w-5xl px-4 pb-4 sm:px-6 lg:px-8">
          <FAQSection items={faqItems} title="Pricing questions" />
        </div>

        <div className="sr-only">
          <h2>Compare our plans</h2>
          <p>
            Free includes 3 active dynamic QR codes and unlimited static QR codes. Pro
            includes 50 dynamic QR codes, advanced analytics, and custom branding.
            Business includes 500 dynamic QR codes, everything from Pro, bulk QR creation
            up to 1,000, and priority email support.
          </p>
        </div>

        <PricingClient />
      </div>
    </>
  );
}
