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';
import { competitors } from '@/lib/competitor-data';

const competitor = competitors['beaconstac'];

export const metadata: Metadata = {
  title: {
    absolute: 'Beaconstac / Uniqode Alternative - Free, €9 or €29',
  },
  description:
    'Uniqode is built for enterprise, and priced for it. If you need dynamic QR codes and scan analytics but not SOC2 and SSO: QR Master is €0, €9 or €29 a month.',
  keywords:
    'beaconstac alternative, uniqode alternative, beaconstac pricing, uniqode too expensive, beaconstac smb alternative, dynamic qr code alternative enterprise',
  alternates: {
    canonical: 'https://www.qrmaster.net/alternatives/beaconstac',
  },
  openGraph: {
    title: 'Beaconstac / Uniqode Alternative for SMBs - QR Master',
    description:
      'Uniqode (formerly Beaconstac) is excellent for enterprise. If you don\'t need SOC2 and SSO but do need reliable dynamic QR + analytics, QR Master starts free at €0.',
    url: 'https://www.qrmaster.net/alternatives/beaconstac',
    type: 'website',
    images: ['/og-image.png'],
  },
  twitter: {
    title: 'Beaconstac / Uniqode Alternative for SMBs - QR Master',
    description:
      'Uniqode (formerly Beaconstac) is built for enterprise. QR Master is the affordable alternative for SMBs and freelancers who need the same core QR functionality.',
  },
};

const comparisonRows = competitor.features;

const faqItems = [
  {
    question: 'What is the difference between Beaconstac and Uniqode?',
    answer:
      'They are the same company. Beaconstac rebranded to Uniqode in 2023. The product is the same enterprise QR code management platform - the name changed, not the features or pricing model. When people search for "Beaconstac alternative" or "Uniqode alternative," they are looking for the same thing.',
  },
  {
    question: 'Why is Uniqode / Beaconstac considered expensive for SMBs?',
    answer:
      'Uniqode\'s entry price is around $5/month, but that tier includes very limited features. To get meaningful analytics, team management, and enough dynamic QR codes for a real use case, you need to spend $49-99/month or more. The enterprise features - SOC2 compliance, SSO/SAML, deep API access - are what justify that pricing for large organizations. For an SMB that needs 50 dynamic QR codes with scan analytics, those enterprise features are not relevant, and paying for them is waste.',
  },
  {
    question: 'Does QR Master have a free plan?',
    answer:
      'Yes. QR Master\'s free plan includes 3 active dynamic QR codes, unlimited static QR codes, and basic scan tracking. No credit card required. Uniqode does not offer a free plan - you pay from the first month. Colors are free on every plan. QR Master Pro at €9/month includes 50 dynamic QR codes, advanced analytics, module shapes and logo embedding. Business at €29/month adds bulk creation and 500 dynamic codes.',
  },
  {
    question: 'Does QR Master support bulk QR code creation like Beaconstac?',
    answer:
      'Yes. QR Master Business (€29/month) supports CSV and Excel upload for bulk creation: up to 1,000 static codes, or up to 500 dynamic ones per batch, the dynamic cap being the Business allowance. Each code can have a different destination URL, label, and UTM parameters. Beaconstac/Uniqode also supports bulk creation, but the feature is locked behind enterprise pricing tiers.',
  },
  {
    question: 'Is QR Master GDPR-compliant?',
    answer:
      'Yes. QR Master hashes IP addresses server-side before any analytics data is stored. No raw IP is ever written to the database. Scan analytics capture device type, time, country-level location, and UTM parameters - without storing personally identifiable information. This is built into the infrastructure and applies to all plans, including the free tier. Uniqode is a US company and requires additional DPA configuration for GDPR compliance.',
  },
  {
    question: 'Who should stay on Beaconstac / Uniqode instead of switching?',
    answer:
      'Uniqode is genuinely the right tool for large enterprises that need SOC2 Type II certification, SSO/SAML authentication, deep API integrations, and formal vendor security review processes. If your procurement team requires a security certification or your IT team needs to integrate QR code management into enterprise identity systems, Uniqode is built for that. QR Master is not an enterprise compliance platform - it is a clean, fast, affordable tool for teams that need dynamic QR codes and analytics without the enterprise overhead.',
  },
  {
    question: 'Can I import my codes from Beaconstac into QR Master?',
    answer:
      'Beaconstac/Uniqode allows CSV export of your QR code data. You can use that export to re-create your dynamic codes in QR Master using the bulk upload feature (Business plan, up to 500 dynamic codes per account). For dynamic codes, the redirect URL changes - you will need to update printed materials or digital placements that point to Beaconstac\'s redirect infrastructure. Static codes are permanently encoded in the image and do not need migration - they continue working regardless of your Beaconstac subscription.',
  },
];

const breadcrumbItems: BreadcrumbItem[] = [
  { name: 'Home', url: '/' },
  { name: 'Alternatives', url: '/alternatives' },
  { name: 'Beaconstac / Uniqode Alternative', url: '/alternatives/beaconstac' },
];

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

const relatedLinks = [
  {
    href: '/dynamic-qr-code-generator',
    title: 'Dynamic QR Code Generator',
    description:
      'Create dynamic QR codes you can update after printing - with scan analytics, custom branding, and dashboard management.',
    ctaLabel: 'Create your first dynamic QR code',
  },
  {
    href: '/qr-code-analytics',
    title: 'QR Code Analytics',
    description:
      'Track device, time, location, and UTM parameters for every scan - without storing raw IPs or PII.',
    ctaLabel: 'See QR code analytics',
  },
  {
    href: '/bulk-qr-code-generator',
    title: 'Bulk QR Code Generator',
    description:
      'One upload, a whole batch: up to 1,000 static codes or up to 500 dynamic ones. Each code gets its own destination and UTM parameters.',
    ctaLabel: 'Explore bulk QR creation',
  },
  {
    href: '/vs/beaconstac',
    title: 'QR Master vs Uniqode: Full Comparison',
    description:
      'A detailed head-to-head comparison of QR Master and Uniqode across pricing, privacy, analytics, bulk creation, and ease of use.',
    ctaLabel: 'See full comparison',
  },
];

export default function BeaconstacAlternativePage() {
  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="grid items-start gap-16 lg:grid-cols-2">
              <div className="max-w-xl">
                <div
                  className="mb-6 inline-block rounded px-3 py-1.5 text-xs font-semibold uppercase tracking-widest"
                  style={{ backgroundColor: '#DCFCE7', color: '#166534', letterSpacing: '0.12em' }}
                >
                  SMB-friendly pricing
                </div>
                <div className="mb-8 space-y-5">
                  <h1
                    className="text-4xl font-extrabold leading-[1.08] tracking-tight text-gray-900 sm:text-5xl"
                    style={{ color: '#111110' }}
                  >
                    A Beaconstac / Uniqode Alternative Built for SMBs and Freelancers
                  </h1>
                  <p className="text-lg leading-relaxed" style={{ color: '#52525B' }}>
                    Uniqode (formerly Beaconstac) is the right tool for enterprises that need SOC2, SSO, and deep API
                    access. If you need reliable dynamic QR codes with analytics and don&apos;t need the enterprise
                    compliance stack, QR Master starts free and grows with you.
                  </p>
                </div>
                <ul className="mb-10 space-y-3">
                  {[
                    'Free plan with 3 active dynamic QR codes - no credit card required',
                    'Pro at €9/month vs Uniqode\'s $49-99/month for comparable features',
                    'GDPR-compliant analytics out of the box - no DPA configuration needed',
                    'Bulk creation on Business: 1,000 static or 500 dynamic (€29/month)',
                    'Simple onboarding - no enterprise setup process',
                  ].map((feature) => (
                    <li key={feature} className="flex items-start gap-3">
                      <span
                        className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-xs font-bold text-white"
                        style={{ backgroundColor: '#16A34A' }}
                      >
                        ✓
                      </span>
                      <span className="text-base font-medium" style={{ color: '#27272A' }}>{feature}</span>
                    </li>
                  ))}
                </ul>
                <div className="flex flex-col gap-3 sm:flex-row">
                  <TrackedCtaLink
                    href="/signup"
                    ctaLabel="Start Free"
                    ctaLocation="hero_primary"
                    pageType="commercial"
                    cluster="competitor"
                  >
                    <Button size="lg" className="h-13 w-full px-8 text-base sm:w-auto">
                      Start Free
                    </Button>
                  </TrackedCtaLink>
                  <TrackedCtaLink
                    href="/pricing"
                    ctaLabel="See Pricing"
                    ctaLocation="hero_secondary"
                    pageType="commercial"
                    cluster="competitor"
                  >
                    <Button variant="outline" size="lg" className="h-13 w-full px-8 text-base sm:w-auto">
                      See Pricing
                    </Button>
                  </TrackedCtaLink>
                </div>
              </div>

              {/* Pricing comparison visual */}
              <div className="lg:pt-4">
                <div className="rounded-2xl border p-8" style={{ borderColor: '#E4E0D9', backgroundColor: '#FFFFFF' }}>
                  <h3 className="mb-6 text-center text-sm font-semibold uppercase tracking-[0.12em]" style={{ color: '#71717A' }}>Pricing for 50 dynamic QR codes with analytics</h3>
                  <div className="space-y-4">
                    <div className="rounded-xl border p-5" style={{ borderColor: '#E4E0D9', backgroundColor: '#FAFAF8' }}>
                      <div className="flex items-center justify-between">
                        <div>
                          <p className="font-semibold text-gray-800">Uniqode (Beaconstac)</p>
                          <p className="text-sm text-gray-500">Starter plan with analytics</p>
                        </div>
                        <div className="text-right">
                          <p className="text-2xl font-bold text-gray-800">$49-99</p>
                          <p className="text-xs text-gray-500">per month</p>
                        </div>
                      </div>
                      <p className="mt-3 text-xs text-gray-500">No free plan. Enterprise features you likely won&apos;t use.</p>
                    </div>
                    <div className="rounded-xl border p-5" style={{ borderColor: '#BBF7D0', backgroundColor: '#F0FDF4' }}>
                      <div className="flex items-center justify-between">
                        <div>
                          <p className="font-semibold text-purple-800">QR Master Pro</p>
                          <p className="text-sm text-purple-600">50 dynamic QRs + full analytics</p>
                        </div>
                        <div className="text-right">
                          <p className="text-2xl font-bold text-purple-800">€9</p>
                          <p className="text-xs text-purple-600">per month</p>
                        </div>
                      </div>
                      <p className="mt-3 text-xs text-purple-600">Free plan available. Cancel anytime. GDPR-compliant by default.</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Why Uniqode is Overkill */}
        <section className="py-24" style={{ backgroundColor: '#F8F7F4' }}>
          <div className="container mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
            <h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl" style={{ color: '#111110' }}>
              Why Uniqode / Beaconstac is the wrong tool for most SMBs
            </h2>
            <p className="mb-12 text-lg" style={{ color: '#71717A' }}>
              Enterprise tooling is valuable, but most SMB QR workflows do not need to subsidize it.
            </p>
            <div className="space-y-6 text-lg leading-relaxed" style={{ color: '#52525B' }}>
              <p>
                Uniqode (formerly Beaconstac) is genuinely excellent at what it does. The platform is built for large
                enterprises that operate in compliance-heavy industries - healthcare, finance, government contracting -
                where vendors need SOC2 Type II certification, single sign-on integration, formal security review, and
                a dedicated account team. For those buyers, Uniqode is a legitimate choice.
              </p>
              <p>
                The problem is that all of that infrastructure costs money, and Uniqode passes those costs through in
                its pricing. The entry plan at around $5/month is misleadingly cheap - it supports so few codes and
                offers so few features that almost no real use case fits it. To get 50 dynamic QR codes with proper
                analytics and team features, you are looking at $49-99/month before you even touch the enterprise
                tier.
              </p>
              <p>
                For a restaurant owner who wants to update their digital menu link once a quarter, or a marketing
                manager running a campaign with 20 QR codes on printed materials, or a freelancer building print
                campaigns for clients - the SOC2 certification is irrelevant, and $49+/month is a hard number to
                justify when the core functionality needed is &ldquo;create QR codes, track scans, update
                destinations.&rdquo;
              </p>
              <p>
                QR Master is built for that majority use case. It doesn&apos;t have SOC2. It doesn&apos;t have SSO.
                What it has is reliable dynamic QR code management, scan analytics with GDPR-compliant tracking, and
                bulk creation - at a price that makes sense for teams that don&apos;t need the enterprise compliance
                layer.
              </p>
            </div>
            <div
              className="mt-10 rounded-2xl border p-8"
              style={{ backgroundColor: '#FFFFFF', borderColor: '#E4E0D9', borderLeft: '4px solid #16A34A' }}
            >
              <h3 className="mb-2 text-lg font-semibold" style={{ color: '#166534' }}>When you should stay on Uniqode</h3>
              <p style={{ color: '#27272A' }}>
                If your organization requires a SOC2-certified QR code vendor, needs SSO/SAML integration, or goes
                through formal vendor security review - Uniqode is built for exactly that. QR Master is not. This page
                is for the much larger group of SMBs and marketing teams who are paying enterprise prices for
                functionality they could get at a fraction of the cost.
              </p>
            </div>
          </div>
        </section>

        {/* Feature Comparison 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' }}>Uniqode vs QR Master: feature comparison</h2>
            <p className="mb-12 text-lg" style={{ color: '#71717A' }}>
              Where the platforms overlap and where they diverge.
            </p>
            <div className="overflow-hidden rounded-xl border" 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' }}>Feature</div>
                <div className="border-l p-5" style={{ borderColor: '#E4E0D9' }}>
                  <p className="mb-1 text-xs font-semibold uppercase tracking-wider" style={{ color: '#166534' }}>Competitor</p>
                  <p className="text-sm font-bold" style={{ color: '#27272A' }}>Uniqode (Beaconstac)</p>
                </div>
                <div className="border-l p-5" style={{ borderColor: '#E4E0D9', backgroundColor: '#F0FDF4' }}>
                  <p className="mb-1 text-xs font-semibold uppercase tracking-wider" style={{ color: '#16A34A' }}>Alternative</p>
                  <p className="text-sm font-bold" style={{ color: '#27272A' }}>QR Master</p>
                </div>
              </div>
              {comparisonRows.map((row, i) => (
                <div
                  key={row.feature}
                  className="grid grid-cols-3"
                  style={{ borderTop: '1px solid #E4E0D9', backgroundColor: i % 2 === 0 ? '#FFFFFF' : '#FAFAF8' }}
                >
                  <div className="p-5">
                    <p className="text-sm font-semibold" style={{ color: '#18181B' }}>{row.feature}</p>
                    {row.note && <p className="mt-1 text-xs leading-snug" style={{ color: '#71717A' }}>{row.note}</p>}
                  </div>
                  <div className="flex items-center border-l p-5" style={{ borderColor: '#E4E0D9' }}>
                    {typeof row.competitor === 'boolean' ? (
                      <span className={`text-lg font-semibold ${row.competitor ? 'text-green-600' : 'text-red-500'}`}>
                        {row.competitor ? '✓' : '✗'}
                      </span>
                    ) : (
                      <span className="text-sm" style={{ color: '#52525B' }}>{row.competitor}</span>
                    )}
                  </div>
                  <div className="flex items-center border-l p-5" style={{ borderColor: '#E4E0D9', backgroundColor: 'rgba(240,253,244,0.5)' }}>
                    {typeof row.qrMaster === 'boolean' ? (
                      <span className={`text-lg font-semibold ${row.qrMaster ? 'text-green-600' : 'text-red-500'}`}>
                        {row.qrMaster ? '✓' : '✗'}
                      </span>
                    ) : (
                      <span className="text-sm font-semibold" style={{ color: '#15803D' }}>{row.qrMaster}</span>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Detailed Comparisons */}
        <section className="py-24" style={{ backgroundColor: '#F8F7F4' }}>
          <div className="container mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
            <h2 className="mb-12 text-3xl font-bold tracking-tight sm:text-4xl" style={{ color: '#111110' }}>Key differences explained</h2>
            <div className="space-y-12">
              <div>
                <h3 className="mb-4 text-xl font-bold" style={{ color: '#18181B' }}>Pricing structure</h3>
                <p className="text-lg leading-relaxed" style={{ color: '#52525B' }}>
                  Uniqode starts at around $5/month but that plan is largely a placeholder - it supports so few codes
                  with so few features that most users immediately hit its limits. The next meaningful tier is $49/month
                  or higher. There is no free plan.
                </p>
                <p className="mt-4 text-lg leading-relaxed" style={{ color: '#52525B' }}>
                  QR Master free plan includes 3 active dynamic QR codes, unlimited static codes, and basic scan
                  tracking - permanently, without a credit card. Pro at €9/month (cancel anytime) covers 50 dynamic
                  codes with full analytics, module shapes and logo. Business at €29/month adds 500 codes and bulk
                  creation. The gap between what you get at €9/month on QR Master vs $49/month on Uniqode is significant
                  - not because QR Master has more features, but because it doesn&apos;t charge you for enterprise
                  infrastructure you don&apos;t use.
                </p>
              </div>

              <div>
                <h3 className="mb-4 text-xl font-bold" style={{ color: '#18181B' }}>Complexity and onboarding</h3>
                <p className="text-lg leading-relaxed" style={{ color: '#52525B' }}>
                  Uniqode is a mature enterprise platform. The interface reflects that - it is comprehensive, with
                  organization management, user roles, integration settings, and compliance tooling all visible.
                  For an enterprise IT team, that depth is valuable. For a marketing manager or restaurant owner who
                  just needs to create and track 20 dynamic QR codes, it adds overhead without adding value.
                </p>
                <p className="mt-4 text-lg leading-relaxed" style={{ color: '#52525B' }}>
                  QR Master is deliberately simpler. Create a QR code, set the destination, download it, and see scans
                  in the dashboard. The workflow is designed around the most common use cases - not around the edge
                  cases that enterprise compliance teams need.
                </p>
              </div>

              <div>
                <h3 className="mb-4 text-xl font-bold" style={{ color: '#18181B' }}>GDPR compliance</h3>
                <p className="text-lg leading-relaxed" style={{ color: '#52525B' }}>
                  Uniqode is a US company. GDPR compliance for EU users requires reviewing their Data Processing
                  Agreement, confirming data residency, and in some cases additional configuration. It is not
                  impossible, but it requires deliberate setup.
                </p>
                <p className="mt-4 text-lg leading-relaxed" style={{ color: '#52525B' }}>
                  QR Master anonymizes scan data at the infrastructure level. IP addresses are hashed server-side with
                  a salt before any data is written - the raw IP is never stored. No configuration required. This
                  applies from the free plan upward and is documented in the platform&apos;s open codebase.
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* Who Should Switch */}
        <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 should switch, and who shouldn&apos;t</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' }}>
                  Good fit for QR Master
                </div>
                <ul className="mt-4 space-y-3">
                  {[
                    'SMBs paying Uniqode\'s mid-tier rates for features they use only partially',
                    'Marketing teams that need dynamic QR + analytics without enterprise complexity',
                    'EU businesses that need GDPR-compliant tracking without custom DPA setup',
                    'Freelancers and agencies who need a tool they can spin up for clients quickly',
                    'Teams that need bulk QR creation but can\'t justify the Uniqode enterprise tier',
                  ].map((item) => (
                    <li key={item} className="flex items-start gap-2 text-gray-700">
                      <span className="mt-1 text-green-500">✓</span>
                      <span>{item}</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' }}>
                  When Uniqode is genuinely the better choice
                </div>
                <ul className="mt-4 space-y-3">
                  {[
                    'Your procurement process requires a SOC2 Type II certified vendor',
                    'Your IT team needs SSO/SAML integration for QR code management',
                    'You have a dedicated API integration requiring Uniqode\'s deep API access',
                    'You manage QR codes at a scale (thousands) and need enterprise team management',
                  ].map((item) => (
                    <li key={item} className="flex items-start gap-2 text-gray-700">
                      <span className="mt-1 text-gray-400">→</span>
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>
              </Card>
            </div>
          </div>
        </section>

        {/* Migration */}
        <section className="border-t bg-white py-24" style={{ borderColor: '#E4E0D9' }}>
          <div className="container mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
            <h2 className="mb-3 text-3xl font-bold tracking-tight sm:text-4xl" style={{ color: '#111110' }}>How to migrate from Beaconstac / Uniqode</h2>
            <p className="mb-8 text-lg" style={{ color: '#71717A' }}>
              Uniqode allows CSV export of your QR code data, which makes migration manageable. Here&apos;s the process:
            </p>
            <div className="space-y-0">
              {[
                {
                  step: '1',
                  title: 'Export your QR code data from Uniqode',
                  body: 'In your Uniqode dashboard, use the export feature to download a CSV of your QR codes including destination URLs, labels, and metadata.',
                },
                {
                  step: '2',
                  title: 'Create a QR Master account',
                  body: 'The free plan gives you 3 dynamic codes immediately. For larger migrations, start with a Pro (€9/month) or Business (€29/month) plan - Business includes bulk upload from CSV.',
                },
                {
                  step: '3',
                  title: 'Use bulk upload to re-create your codes',
                  body: 'On the Business plan, upload your CSV directly into QR Master\'s bulk creation tool. Each code is generated with its destination URL and can be downloaded as a batch ZIP of SVG/PNG files.',
                },
                {
                  step: '4',
                  title: 'Update digital placements',
                  body: 'Replace QR code images on your website, email, and digital materials immediately - these don\'t require a physical reprint.',
                },
                {
                  step: '5',
                  title: 'Replace printed materials on your next natural cycle',
                  body: 'For materials like menus, flyers, or packaging, schedule replacement at the next natural reprint. Keep your Uniqode account active until the transition is complete.',
                },
              ].map((step) => (
                <div key={step.step} className="flex gap-6 py-7" style={{ borderBottom: step.step !== '5' ? '1px solid #E4E0D9' : 'none' }}>
                  <div className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white" style={{ backgroundColor: '#18181B' }}>
                    {step.step}
                  </div>
                  <div>
                    <h3 className="mb-1 text-base font-bold" style={{ color: '#18181B' }}>{step.title}</h3>
                    <p className="text-sm leading-relaxed" style={{ color: '#52525B' }}>{step.body}</p>
                  </div>
                </div>
              ))}
            </div>
          </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="Common questions about switching from Beaconstac / Uniqode" />
          </div>
        </div>

        {/* Growth Links */}
        <div style={{ backgroundColor: '#F8F7F4', borderTop: '1px solid #E4E0D9' }}>
          <GrowthLinksSection
            eyebrow="Related pages"
            title="See what QR Master offers"
            description="Explore the features that make QR Master the practical choice for SMBs and marketing teams."
            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' }}>
              Enterprise comparisons, without the enterprise styling.
            </p>
            <h2 className="mb-5 text-4xl font-extrabold leading-tight tracking-tight text-white sm:text-5xl">Enterprise-quality QR management. SMB-friendly pricing.</h2>
            <p className="mx-auto mb-10 max-w-2xl text-lg" style={{ color: '#A1A1AA' }}>
              Free plan with 3 dynamic codes. Pro at €9/month for 50 codes with analytics and branding.
              No SOC2. No SSO. No enterprise invoice for features you don&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="/vs/beaconstac"
                ctaLabel="See Full Comparison"
                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' }}
                >
                  See Full Comparison
                </Button>
              </TrackedCtaLink>
            </div>
          </div>
        </section>
      </div>
    </>
  );
}
