import React from 'react';
import type { Metadata } from 'next';
import { Button } from '@/components/ui/Button';
import { Card } from '@/components/ui/Card';
import SeoJsonLd from '@/components/SeoJsonLd';
import Breadcrumbs, { BreadcrumbItem } from '@/components/Breadcrumbs';
import { breadcrumbSchema } from '@/lib/schema';
import { FAQSection } from '@/components/aeo/FAQSection';
import { GrowthLinksSection } from '@/components/marketing/GrowthLinksSection';
import { MarketingPageTracker, TrackedCtaLink } from '@/components/marketing/MarketingAnalytics';

export const metadata: Metadata = {
  title: {
    absolute: 'QR Master vs Beaconstac (Uniqode) - Full Comparison 2025',
  },
  description:
    'QR Master vs Beaconstac (now Uniqode): detailed comparison of pricing, GDPR compliance, analytics, bulk creation, and ease of use. Which is right for your team?',
  keywords:
    'qr master vs beaconstac, qr master vs uniqode, beaconstac vs qr master, uniqode comparison, beaconstac alternative comparison',
  alternates: {
    canonical: 'https://www.qrmaster.net/vs/beaconstac',
  },
  openGraph: {
    title: 'QR Master vs Beaconstac (Uniqode) - Full Comparison 2025',
    description:
      'Pricing, privacy, analytics, and bulk creation compared. Which QR code platform is right for your team?',
    url: 'https://www.qrmaster.net/vs/beaconstac',
    type: 'website',
    images: ['/og-image.png'],
  },
  twitter: {
    title: 'QR Master vs Beaconstac (Uniqode) - Full Comparison 2025',
    description:
      'Pricing, privacy, analytics, and bulk creation compared head-to-head.',
  },
};

const categories: Array<{
  name: string;
  qrMaster: { rating: Rating; summary: string; detail: string };
  beaconstac: { rating: Rating; summary: string; detail: string };
}> = [
  {
    name: 'Pricing',
    qrMaster: {
      rating: 'strong',
      summary: 'Starts free. Pro at EUR 9/month, Business at EUR 29/month.',
      detail:
        'QR Master has a permanently free plan with 3 active dynamic QR codes and unlimited static codes. Pro (EUR 9/month or EUR 90/year) gives you 50 dynamic codes, full analytics, and custom branding. Business (EUR 29/month or EUR 290/year) adds 500 dynamic codes and bulk creation. No annual contract required on any plan - cancel anytime.',
    },
    beaconstac: {
      rating: 'weak',
      summary: 'No free plan. Meaningful features start at $49-99/month.',
      detail:
        'Uniqode (formerly Beaconstac) starts at around $5/month but that tier is extremely limited in the number of codes and features. To get analytics, team management, and enough dynamic codes for a real use case, you need $49-99/month or higher. Enterprise pricing (SOC 2, SSO, API) is custom-quoted above that.',
    },
  },
  {
    name: 'Free Plan',
    qrMaster: {
      rating: 'strong',
      summary: '3 active dynamic QR codes permanently free. Unlimited static codes.',
      detail:
        'The free plan requires no credit card, has no trial period, and does not deactivate codes after a set number of days. 3 dynamic codes stay active as long as your account exists. You can create unlimited static QR codes at no cost. Basic scan tracking is included.',
    },
    beaconstac: {
      rating: 'weak',
      summary: 'No free plan available.',
      detail:
        'Uniqode does not offer a free tier. All plans require a paid subscription from day one. Their entry plan at ~$5/month is so restricted in features and code volume that it is not practical for any real use case - effectively forcing users to a higher paid tier immediately.',
    },
  },
  {
    name: 'GDPR & Privacy',
    qrMaster: {
      rating: 'strong',
      summary: 'Hashed IPs by default. No PII stored. Applies to all plans.',
      detail:
        'QR Master hashes IP addresses server-side with a salted hash before writing any scan data. The raw IP address is never stored. Analytics data includes device type, time, country-level location, and UTM parameters - all without personally identifiable information. This is the default behavior, not an optional setting, and applies from the free plan upward. The implementation is in the open codebase at src/lib/hash.ts.',
    },
    beaconstac: {
      rating: 'mixed',
      summary: 'US company. GDPR compliance requires DPA review and configuration.',
      detail:
        'Uniqode (Beaconstac) is a US-based company. GDPR compliance for EU users requires reviewing their Data Processing Agreement, confirming data residency options, and potentially additional configuration. It is achievable, but not automatic. Organizations with strict EU data handling requirements need to do due diligence before using Uniqode for analytics involving EU users.',
    },
  },
  {
    name: 'Analytics',
    qrMaster: {
      rating: 'strong',
      summary: 'Device, OS, location, time, UTM parameters. All plans.',
      detail:
        'Scan analytics are available on all plans including free. Basic scan tracking is included from the free tier. Pro (EUR 9/month) adds advanced analytics - device type, OS, country-level location, scan timestamp, and UTM parameters - plus the full analytics dashboard with trends and code-level breakdowns.',
    },
    beaconstac: {
      rating: 'strong',
      summary: 'Comprehensive analytics on paid plans. Strong dashboard.',
      detail:
        'Uniqode offers a well-designed analytics dashboard with scan counts, device breakdown, location data, and campaign-level reporting. For enterprise teams with multiple codes across many campaigns, the organizational features in their analytics are a genuine strength. Analytics unlock on paid tiers - the base $5 plan has very limited tracking.',
    },
  },
  {
    name: 'Bulk QR Creation',
    qrMaster: {
      rating: 'strong',
      summary: 'Up to 1,000 codes per CSV/Excel upload. Business plan (EUR 29/month).',
      detail:
        'The Business plan includes CSV and Excel bulk upload for generating up to 1,000 unique QR codes in one batch. Each code in the batch can have a different destination URL, label, campaign name, and UTM parameters. The batch downloads as a ZIP of SVG and PNG files. This is designed for product packaging, event programs, direct mail campaigns, and retail displays.',
    },
    beaconstac: {
      rating: 'mixed',
      summary: 'Bulk creation available but locked to enterprise tiers.',
      detail:
        'Uniqode does support bulk QR code creation, but the feature is only accessible at higher enterprise price points. For teams that need bulk creation as a core workflow, the cost of unlocking it on Uniqode significantly exceeds QR Master\'s Business plan pricing.',
    },
  },
  {
    name: 'Ease of Use',
    qrMaster: {
      rating: 'strong',
      summary: 'Simple, focused interface. Create, manage, track - no onboarding complexity.',
      detail:
        'QR Master is designed for the most common QR code workflows. Creating a dynamic code, setting a destination, styling it, and downloading it takes minutes. The dashboard organizes codes clearly and analytics are surfaced without additional configuration. There is no enterprise onboarding process, no sales cycle, and no setup calls required.',
    },
    beaconstac: {
      rating: 'mixed',
      summary: 'Comprehensive but complex. More suitable for enterprise teams.',
      detail:
        'Uniqode is a mature enterprise platform with a corresponding interface depth. Team management, user roles, integration settings, compliance tooling, and API configuration are all visible in the product. For a dedicated IT or operations team managing QR codes at enterprise scale, that depth is valuable. For a small marketing team or freelancer, it adds cognitive overhead to tasks that should be simple.',
    },
  },
  {
    name: 'Enterprise Features (SOC2, SSO, API)',
    qrMaster: {
      rating: 'weak',
      summary: 'Not available. QR Master is not an enterprise compliance platform.',
      detail:
        'QR Master does not offer SOC2 Type II certification, SAML/SSO integration, or a deep programmatic API for enterprise integrations. If your procurement process requires a SOC2-certified vendor or your IT team needs SSO integration, QR Master is not the right tool for your organization.',
    },
    beaconstac: {
      rating: 'strong',
      summary: 'SOC2 Type II certified. SSO/SAML available. Deep API access.',
      detail:
        'Uniqode is one of the few QR code platforms with formal SOC2 Type II certification. SAML/SSO integration is available for enterprise accounts, enabling QR code access to be managed through your identity provider. A documented API allows deep integration with other enterprise systems. These are genuine strengths for the enterprise buyer.',
    },
  },
];

type Rating = 'strong' | 'weak' | 'mixed';

const ratingColors: Record<Rating, string> = {
  strong: 'text-green-600',
  weak: 'text-red-500',
  mixed: 'text-amber-600',
};

const ratingLabels: Record<Rating, string> = {
  strong: 'Strong',
  weak: 'Limited',
  mixed: '~ Mixed',
};

const faqItems = [
  {
    question: 'What is the main difference between QR Master and Beaconstac / Uniqode?',
    answer:
      'QR Master is built for SMBs and marketing teams that need reliable dynamic QR codes with analytics at an affordable price - free plan with 3 codes, Pro at EUR 9/month. Uniqode (formerly Beaconstac) is built for enterprises that need SOC 2 certification, SSO/SAML integration, and deep API access, and prices accordingly ($49-99+/month for meaningful features, no free plan). Both platforms handle the core QR functionality well - the difference is in who they\'re priced for.',
  },
  {
    question: 'Is Beaconstac the same as Uniqode?',
    answer:
      'Yes. Beaconstac rebranded to Uniqode in 2023. The underlying platform, features, and pricing model are the same - only the name changed. If you are searching for "Beaconstac alternative" or "Uniqode alternative," you\'re looking at the same product.',
  },
  {
    question: 'Does QR Master have GDPR-compliant analytics like Uniqode?',
    answer:
      'Yes, and QR Master handles GDPR compliance at the infrastructure level rather than requiring configuration. IP addresses are hashed server-side before any scan data is stored - the raw IP is never written. All analytics (device, location, time) are captured without PII. Uniqode achieves GDPR compliance through its DPA process and data residency options, which requires review and setup rather than being automatic.',
  },
  {
    question: 'Which platform is better for bulk QR code creation?',
    answer:
      'QR Master Business (EUR 29/month) includes CSV/Excel bulk upload for up to 1,000 unique codes per batch - at a fraction of the cost of unlocking equivalent bulk features in Uniqode. If bulk creation is your primary use case, QR Master is the more practical choice unless you also need Uniqode\'s enterprise compliance features.',
  },
  {
    question: 'Does QR Master offer a free trial?',
    answer:
      'QR Master has a permanently free plan rather than a time-limited trial. The free plan includes 3 active dynamic QR codes and unlimited static codes - no credit card required, no expiration date. This is different from Uniqode, which has no free tier, and from some competitors that offer a 14-day trial that deactivates codes afterward.',
  },
  {
    question: 'Can I migrate from Uniqode to QR Master?',
    answer:
      'Yes. Uniqode allows CSV export of your QR code data. You can use that export to re-create your dynamic codes in QR Master - bulk upload via the Business plan makes large migrations manageable. Static QR codes are permanently encoded and do not need to be migrated - they remain valid regardless of which platform generated them.',
  },
];

const breadcrumbItems: BreadcrumbItem[] = [
  { name: 'Home', url: '/' },
  { name: 'Comparisons', url: '/vs' },
  { name: 'QR Master vs Beaconstac', url: '/vs/beaconstac' },
];

const faqSchema = {
  '@context': 'https://schema.org',
  '@type': 'FAQPage',
  '@id': 'https://www.qrmaster.net/vs/beaconstac#faq',
  mainEntity: faqItems.map((item) => ({
    '@type': 'Question',
    name: item.question,
    acceptedAnswer: {
      '@type': 'Answer',
      text: item.answer,
    },
  })),
};

const relatedLinks = [
  {
    href: '/alternatives/beaconstac',
    title: 'Beaconstac / Uniqode Alternative',
    description:
      'Why SMBs and freelancers outgrow Uniqode\'s pricing model and what QR Master offers instead.',
    ctaLabel: 'Read the alternative guide',
  },
  {
    href: '/dynamic-qr-code-generator',
    title: 'Dynamic QR Code Generator',
    description:
      'Create QR codes that update after printing - with analytics, custom branding, and dashboard management.',
    ctaLabel: 'Create a dynamic QR code',
  },
  {
    href: '/qr-code-analytics',
    title: 'QR Code Analytics',
    description:
      'Full scan analytics with device, location, and UTM data - GDPR-compliant by default.',
    ctaLabel: 'Explore analytics',
  },
  {
    href: '/pricing',
    title: 'QR Master Pricing',
    description:
      'Free for 3 dynamic codes. Pro at EUR 9/month. Business at EUR 29/month. No forced annual contracts.',
    ctaLabel: 'See pricing',
  },
];

export default function VsBeaconstacPage() {
  return (
    <>
      <SeoJsonLd data={[faqSchema, breadcrumbSchema(breadcrumbItems)]} />
      <MarketingPageTracker pageType="commercial" cluster="competitor" />
      <div className="min-h-screen" style={{ backgroundColor: '#F8F7F4', color: '#18181B' }}>

        {/* Hero */}
        <section className="border-b bg-white" style={{ borderColor: '#E4E0D9' }}>
          <div className="container mx-auto max-w-7xl px-4 pb-20 pt-10 sm:px-6 lg:px-8">
            <div className="mb-10">
              <Breadcrumbs items={breadcrumbItems} />
            </div>
            <div className="mb-12 text-center">
              <div
                className="mb-6 inline-flex items-center rounded px-3 py-1.5 text-xs font-semibold uppercase tracking-widest"
                style={{ backgroundColor: '#DCFCE7', color: '#166534', letterSpacing: '0.12em' }}
              >
                Head-to-head comparison
              </div>
              <h1 className="mb-6 text-4xl font-extrabold leading-[1.08] tracking-tight text-gray-900 sm:text-5xl" style={{ color: '#111110' }}>
                QR Master vs Beaconstac / Uniqode
              </h1>
              <p className="mx-auto max-w-3xl text-lg leading-relaxed" style={{ color: '#52525B' }}>
                Both platforms handle dynamic QR code management and analytics. The difference is who they are built
                for. QR Master is priced and designed for SMBs and marketing teams. Uniqode (formerly Beaconstac) is
                priced and designed for enterprise organizations with compliance requirements.
              </p>
            </div>

            {/* TL;DR */}
            <Card className="mx-auto max-w-4xl rounded-2xl border bg-white p-8 shadow-none" style={{ borderColor: '#E4E0D9' }}>
              <h2 className="mb-6 text-center text-xl font-bold text-gray-900">Key differences at a glance</h2>
              <div className="grid gap-6 md:grid-cols-2">
                <div className="rounded-xl border p-6" style={{ borderColor: '#BBF7D0', backgroundColor: '#F0FDF4' }}>
                  <h3 className="mb-3 font-bold" style={{ color: '#166534' }}>QR Master</h3>
                  <ul className="space-y-2 text-sm" style={{ color: '#27272A' }}>
                    <li>Free plan with 3 active dynamic codes</li>
                    <li>Pro at EUR 9/month - 50 codes + full analytics</li>
                    <li>Business at EUR 29/month - 500 codes + bulk creation</li>
                    <li>GDPR-compliant by default (hashed IPs)</li>
                    <li>Simple onboarding - no sales process</li>
                    <li>No SOC 2 certification</li>
                    <li>No SSO/SAML integration</li>
                  </ul>
                </div>
                <div className="rounded-xl border p-6" style={{ borderColor: '#E4E0D9', backgroundColor: '#FAFAF8' }}>
                  <h3 className="mb-3 font-bold" style={{ color: '#52525B' }}>Uniqode (Beaconstac)</h3>
                  <ul className="space-y-2 text-sm" style={{ color: '#52525B' }}>
                    <li>No free plan - paid from day one</li>
                    <li>Meaningful features at $49-99+/month</li>
                    <li>Comprehensive enterprise analytics</li>
                    <li>SOC 2 Type II certified</li>
                    <li>SSO/SAML for enterprise identity management</li>
                    <li>Deep API for custom integrations</li>
                    <li>~ GDPR requires DPA review and setup</li>
                  </ul>
                </div>
              </div>
            </Card>
          </div>
        </section>

        {/* Category Breakdown */}
        <section className="py-24" style={{ backgroundColor: '#F8F7F4' }}>
          <div className="container mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
            <h2 className="mb-12 text-3xl font-bold tracking-tight sm:text-4xl" style={{ color: '#111110' }}>Category-by-category breakdown</h2>
            <div className="space-y-8">
              {categories.map((cat) => (
                <Card key={cat.name} className="overflow-hidden rounded-xl border bg-white shadow-none" style={{ borderColor: '#E4E0D9' }}>
                  <div className="border-b px-6 py-4" style={{ backgroundColor: '#FAFAF8', borderColor: '#E4E0D9' }}>
                    <h3 className="text-xl font-bold" style={{ color: '#18181B' }}>{cat.name}</h3>
                  </div>
                  <div className="grid md:grid-cols-2">
                    <div className="border-r p-6" style={{ borderColor: '#E4E0D9' }}>
                      <div className="mb-3 flex items-center gap-2">
                        <span className="font-semibold" style={{ color: '#166534' }}>QR Master</span>
                        <span className={`text-sm font-semibold ${ratingColors[cat.qrMaster.rating]}`}>
                          {ratingLabels[cat.qrMaster.rating]}
                        </span>
                      </div>
                      <p className="mb-3 font-medium" style={{ color: '#27272A' }}>{cat.qrMaster.summary}</p>
                      <p className="text-sm leading-relaxed" style={{ color: '#52525B' }}>{cat.qrMaster.detail}</p>
                    </div>
                    <div className="p-6">
                      <div className="mb-3 flex items-center gap-2">
                        <span className="font-semibold" style={{ color: '#52525B' }}>Uniqode (Beaconstac)</span>
                        <span className={`text-sm font-semibold ${ratingColors[cat.beaconstac.rating]}`}>
                          {ratingLabels[cat.beaconstac.rating]}
                        </span>
                      </div>
                      <p className="mb-3 font-medium" style={{ color: '#27272A' }}>{cat.beaconstac.summary}</p>
                      <p className="text-sm leading-relaxed" style={{ color: '#52525B' }}>{cat.beaconstac.detail}</p>
                    </div>
                  </div>
                </Card>
              ))}
            </div>
          </div>
        </section>

        {/* Who Each Is For */}
        <section className="py-24" style={{ backgroundColor: '#F8F7F4' }}>
          <div className="container mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
            <h2 className="mb-12 text-3xl font-bold tracking-tight sm:text-4xl" style={{ color: '#111110' }}>Who each platform is right for</h2>
            <div className="grid gap-6 md:grid-cols-2">
              <Card className="rounded-xl border bg-white p-8 shadow-none" style={{ borderColor: '#BBF7D0', borderTopWidth: '3px', borderTopColor: '#16A34A' }}>
                <div className="mb-4 inline-flex items-center rounded-full px-3 py-1 text-sm font-semibold" style={{ backgroundColor: '#DCFCE7', color: '#166534' }}>
                  QR Master is the better fit if...
                </div>
                <ul className="mt-4 space-y-4">
                  {[
                    {
                      label: 'You\'re an SMB or freelancer',
                      body: 'who needs dynamic QR codes with analytics and doesn\'t require enterprise compliance tooling',
                    },
                    {
                      label: 'You\'re in the EU',
                      body: 'and need GDPR-compliant scan tracking without manually configuring a DPA or reviewing data residency',
                    },
                    {
                      label: 'You want to start free',
                      body: 'and upgrade only when you have validated the tool works for your use case',
                    },
                    {
                      label: 'You need bulk creation',
                      body: 'for product packaging, print campaigns, or events - up to 1,000 codes per batch at EUR 29/month',
                    },
                    {
                      label: 'You want a simple interface',
                      body: 'that handles QR code management without enterprise overhead',
                    },
                  ].map((item) => (
                    <li key={item.label} className="flex items-start gap-2">
                      <span className="mt-0.5 text-purple-500">+</span>
                      <span className="text-gray-700">
                        <strong>{item.label}</strong> {item.body}
                      </span>
                    </li>
                  ))}
                </ul>
              </Card>

              <Card className="rounded-xl border bg-white p-8 shadow-none" style={{ borderColor: '#E4E0D9', borderTopWidth: '3px', borderTopColor: '#A1A1AA' }}>
                <div className="mb-4 inline-flex items-center rounded-full px-3 py-1 text-sm font-semibold" style={{ backgroundColor: '#F4F4F5', color: '#52525B' }}>
                  Uniqode / Beaconstac is the better fit if...
                </div>
                <ul className="mt-4 space-y-4">
                  {[
                    {
                      label: 'You require SOC2 Type II',
                      body: 'and your procurement process mandates a certified vendor - Uniqode has this, QR Master does not',
                    },
                    {
                      label: 'You need SSO/SAML',
                      body: 'to manage QR code platform access through your enterprise identity provider',
                    },
                    {
                      label: 'You have a large team',
                      body: 'with complex user roles, organization hierarchies, and API integrations with other enterprise systems',
                    },
                    {
                      label: 'You manage thousands of codes',
                      body: 'at enterprise scale where Uniqode\'s organizational tools provide meaningful value',
                    },
                  ].map((item) => (
                    <li key={item.label} className="flex items-start gap-2">
                      <span className="mt-0.5 text-gray-400">-&gt;</span>
                      <span className="text-gray-700">
                        <strong>{item.label}</strong> {item.body}
                      </span>
                    </li>
                  ))}
                </ul>
              </Card>
            </div>
          </div>
        </section>

        {/* Pricing Table */}
        <section className="border-y bg-white py-24" style={{ borderColor: '#E4E0D9' }}>
          <div className="container mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
            <h2 className="mb-3 text-3xl font-bold tracking-tight sm:text-4xl" style={{ color: '#111110' }}>Pricing comparison</h2>
            <p className="mb-12 text-lg" style={{ color: '#71717A' }}>
              What you pay for equivalent use cases at each platform.
            </p>
            <Card className="overflow-hidden rounded-xl border bg-white shadow-none" style={{ borderColor: '#E4E0D9' }}>
              <div className="grid grid-cols-3" style={{ backgroundColor: '#F8F7F4', borderBottom: '1px solid #E4E0D9' }}>
                <div className="p-5 text-sm font-semibold" style={{ color: '#71717A' }}>Use Case</div>
                <div className="border-l p-5 text-sm font-semibold" style={{ borderColor: '#E4E0D9', color: '#52525B' }}>Uniqode (Beaconstac)</div>
                <div className="border-l p-5 text-sm font-semibold" style={{ borderColor: '#E4E0D9', backgroundColor: '#F0FDF4', color: '#166534' }}>QR Master</div>
              </div>
              {[
                {
                  useCase: 'Testing (1-3 dynamic codes)',
                  beaconstac: 'No free plan - must pay from day 1',
                  qrMaster: 'Free forever - no credit card',
                },
                {
                  useCase: '50 dynamic codes + analytics + branding',
                  beaconstac: '$49-99/month',
                  qrMaster: 'EUR 9/month',
                },
                {
                  useCase: 'Bulk creation (500-1,000 codes)',
                  beaconstac: 'Enterprise tier - custom pricing',
                  qrMaster: 'EUR 29/month (Business plan)',
                },
                {
                  useCase: 'GDPR-compliant analytics',
                  beaconstac: 'Requires DPA review and setup',
                  qrMaster: 'Built in - all plans',
                },
                {
                  useCase: 'SOC2 compliance',
                  beaconstac: 'Available (enterprise)',
                  qrMaster: 'Not available',
                },
                {
                  useCase: 'SSO/SAML',
                  beaconstac: 'Enterprise plans',
                  qrMaster: 'Not available',
                },
              ].map((row, i) => (
                <div key={row.useCase} className="grid grid-cols-3" style={{ borderTop: '1px solid #E4E0D9', backgroundColor: i % 2 === 0 ? '#FFFFFF' : '#FAFAF8' }}>
                  <div className="p-4 text-sm font-medium" style={{ color: '#18181B' }}>{row.useCase}</div>
                  <div className="border-l p-4 text-sm" style={{ borderColor: '#E4E0D9', color: '#52525B' }}>{row.beaconstac}</div>
                  <div className="border-l p-4 text-sm font-semibold" style={{ borderColor: '#E4E0D9', backgroundColor: 'rgba(240,253,244,0.5)', color: '#166534' }}>{row.qrMaster}</div>
                </div>
              ))}
            </Card>
          </div>
        </section>

        {/* FAQ */}
        <div className="bg-white" style={{ borderTop: '1px solid #E4E0D9' }}>
          <div className="container mx-auto max-w-4xl px-4 py-24 sm:px-6 lg:px-8">
          <FAQSection items={faqItems} title="QR Master vs Beaconstac / Uniqode - frequently asked questions" />
          </div>
        </div>

        {/* Growth Links */}
        <div style={{ backgroundColor: '#F8F7F4', borderTop: '1px solid #E4E0D9' }}>
        <GrowthLinksSection
          eyebrow="Related pages"
          title="More QR Master resources"
          description="Explore the features, pricing, and alternative guides for QR Master."
          links={relatedLinks}
          pageType="commercial"
          cluster="competitor"
        />
        </div>

        {/* Final CTA */}
        <section className="py-24" style={{ backgroundColor: '#111110' }}>
          <div className="container mx-auto max-w-4xl px-4 text-center sm:px-6 lg:px-8">
            <p className="mb-6 text-xs font-bold uppercase tracking-widest" style={{ color: '#16A34A' }}>
              Side-by-side, without the noise.
            </p>
            <h2 className="mb-4 text-4xl font-bold text-white">
              The SMB-friendly choice. Start free, upgrade when you need to.
            </h2>
            <p className="mx-auto mb-10 max-w-2xl text-lg" style={{ color: '#A1A1AA' }}>
              3 dynamic codes free forever. Pro at EUR 9/month. Business at EUR 29/month.
              No enterprise invoice for features your team doesn&apos;t use.
            </p>
            <div className="flex flex-col justify-center gap-4 sm:flex-row">
              <TrackedCtaLink
                href="/signup"
                ctaLabel="Start Free"
                ctaLocation="footer_primary"
                pageType="commercial"
                cluster="competitor"
              >
                <Button
                  size="lg"
                  className="h-13 w-full px-8 text-base font-semibold sm:w-auto"
                  style={{ backgroundColor: '#FFFFFF', color: '#111110' }}
                >
                  Start Free
                </Button>
              </TrackedCtaLink>
              <TrackedCtaLink
                href="/pricing"
                ctaLabel="View Pricing"
                ctaLocation="footer_secondary"
                pageType="commercial"
                cluster="competitor"
              >
                <Button
                  size="lg"
                  variant="outline"
                  className="h-13 w-full px-8 text-base font-medium sm:w-auto"
                  style={{ borderColor: '#3F3F46', color: '#D4D4D8' }}
                >
                  View Pricing
                </Button>
              </TrackedCtaLink>
            </div>
          </div>
        </section>
      </div>
    </>
  );
}
