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 { AnswerFirstBlock } from '@/components/marketing/AnswerFirstBlock';
import { GrowthLinksSection } from '@/components/marketing/GrowthLinksSection';
import { MarketingPageTracker, TrackedCtaLink } from '@/components/marketing/MarketingAnalytics';
import { featuredUseCases } from '@/lib/growth-pages';

export const metadata: Metadata = {
  title: {
    absolute: 'Free Dynamic QR Code Generator – Update After Printing',
  },
  description:
    'Create dynamic QR codes that you can edit after printing. Change the destination URL anytime, track scans, and manage all codes in one dashboard. Free to start.',
  keywords:
    'dynamic qr code generator, editable qr code, dynamic qr code, qr code tracking, update qr code after printing',
  alternates: {
    canonical: 'https://www.qrmaster.net/dynamic-qr-code-generator',
    languages: {
      'x-default': 'https://www.qrmaster.net/dynamic-qr-code-generator',
      en: 'https://www.qrmaster.net/dynamic-qr-code-generator',
    },
  },
  openGraph: {
    title: 'Free Dynamic QR Code Generator – Update After Printing',
    description:
      'Create dynamic QR codes that you can edit after printing. Change the destination URL anytime, track scans, and manage all codes in one dashboard.',
    url: 'https://www.qrmaster.net/dynamic-qr-code-generator',
    type: 'website',
    images: ['/og-image.png'],
  },
  twitter: {
    title: 'Free Dynamic QR Code Generator – Update After Printing',
    description:
      'Create dynamic QR codes that you can edit after printing. Change the destination URL anytime, track scans, and manage all codes in one dashboard.',
  },
};

const featureCards = [
  {
    title: 'Edit destination after print',
    description:
      'Keep the same QR image on flyers, menus, packaging, or cards while the destination URL changes later.',
  },
  {
    title: 'Review scan context',
    description:
      'See scan information in your dashboard, including time, device, and location context.',
  },
  {
    title: 'Apply brand styling',
    description:
      'Use brand colors and logo styling so the QR code fits printed campaigns and product materials.',
  },
  {
    title: 'Manage active codes',
    description:
      'Keep active dynamic QR codes in one dashboard instead of tracking versions across design files.',
  },
  {
    title: 'Use one print asset longer',
    description:
      'Dynamic QR is useful when the printed surface should stay stable even as the linked page changes.',
  },
  {
    title: 'Scale by plan',
    description:
      'The Free plan includes 3 active dynamic QR codes, Pro includes 50, and Business includes 500.',
  },
];

const staticVsDynamic = [
  {
    feature: 'Change the destination after print',
    static: false,
    dynamic: true,
  },
  {
    feature: 'Review scan analytics later',
    static: false,
    dynamic: true,
  },
  {
    feature: 'Keep one print asset across changing campaigns',
    static: false,
    dynamic: true,
  },
  {
    feature: 'Manage active codes in a dashboard',
    static: false,
    dynamic: true,
  },
  {
    feature: 'Apply brand styling',
    static: false,
    dynamic: true,
  },
];

const useCases = [
  {
    title: 'Marketing campaigns',
    description:
      'Update campaign landing pages without reprinting flyers, posters, inserts, or signs.',
    example:
      'Keep the printed QR live while the destination moves from teaser page to launch page.',
  },
  {
    title: 'Product packaging',
    description:
      'Link packaging to manuals, onboarding pages, or support content and update that destination as stock stays in circulation.',
    example: 'Update a software download or setup page without changing the package artwork.',
  },
  {
    title: 'Business cards',
    description:
      'Route contacts to a current landing page, booking page, or profile without printing new cards.',
    example: 'Keep the same printed card while your booking or profile destination changes.',
  },
  {
    title: 'Restaurant menus',
    description:
      'Keep table cards useful when menu links, PDFs, or specials need to change after print.',
    example: 'Update a menu destination for seasonal specials without replacing every table card.',
  },
];

const faqItems = [
  {
    question: 'What is a dynamic QR code?',
    answer:
      'A dynamic QR code points to a redirect URL, which lets you change the final destination later without replacing the printed QR image.',
  },
  {
    question: 'Can I change a dynamic QR code after printing?',
    answer:
      'Yes. You keep the same QR image and update the destination from your dashboard. The printed code never needs to be replaced.',
  },
  {
    question: 'How is it different from a static QR code?',
    answer:
      'A static QR code stores the destination directly in the code and stays fixed. A dynamic QR code routes through QR Master so the destination can be updated and scans can be reviewed later.',
  },
  {
    question: 'How many dynamic QR codes can I create?',
    answer:
      'The Free plan includes 3 active dynamic QR codes. Pro includes 50 dynamic QR codes, and Business includes 500 dynamic QR codes.',
  },
  {
    question: 'Is a dynamic QR code free?',
    answer:
      'Yes — the Free plan includes 3 active dynamic QR codes at no cost. No credit card required to get started.',
  },
  {
    question: 'Can I track how many times a dynamic QR code was scanned?',
    answer:
      'Yes. Every scan is logged in your dashboard with device type, time, and location context. Pro and Business plans include unlimited scan history.',
  },
  {
    question: 'How do I convert a static QR code to a dynamic one?',
    answer:
      'You cannot convert an existing static QR code — the data is permanently encoded in the image. To switch to dynamic, create a new dynamic QR code in QR Master and replace the printed code.',
  },
  {
    question: 'What is the best use case for a dynamic QR code?',
    answer:
      'Dynamic QR codes are ideal whenever the destination may change after printing: restaurant menus, marketing flyers, product packaging, business cards, and event materials.',
  },
];

const softwareSchema = {
  '@context': 'https://schema.org',
  '@type': 'SoftwareApplication',
  '@id': 'https://www.qrmaster.net/dynamic-qr-code-generator#software',
  name: 'QR Master - Dynamic QR Code Generator',
  applicationCategory: 'BusinessApplication',
  operatingSystem: 'Web Browser',
  offers: {
    '@type': 'Offer',
    price: '0',
    priceCurrency: 'EUR',
    availability: 'https://schema.org/InStock',
  },
  description:
    'Create dynamic QR codes that can be updated after printing. Change destinations later and review scan context from one dashboard.',
  featureList: [
    'Edit QR code destinations after printing',
    'Review scan analytics in the dashboard',
    'Apply brand styling with colors and logo',
    'Manage active dynamic QR codes in one place',
    'Scale from 3 active dynamic QR codes on Free to 50 on Pro and 500 on Business',
  ],
};

const howToSchema = {
  '@context': 'https://schema.org',
  '@type': 'HowTo',
  '@id': 'https://www.qrmaster.net/dynamic-qr-code-generator#howto',
  name: 'How to create a dynamic QR code',
  datePublished: '2024-01-01',
  dateModified: '2025-06-01',
  author: {
    '@type': 'Person',
    name: 'Timo Knuth',
    url: 'https://www.qrmaster.net/authors/timo',
  },
  description: 'Create a dynamic QR code and update the destination later without replacing the printed QR image.',
  totalTime: 'PT3M',
  step: [
    {
      '@type': 'HowToStep',
      position: 1,
      name: 'Create an account',
      text: 'Create a QR Master account and choose a dynamic QR workflow.',
      url: 'https://www.qrmaster.net/signup',
    },
    {
      '@type': 'HowToStep',
      position: 2,
      name: 'Enter your destination',
      text: 'Add the destination URL and style the QR code for print or digital use.',
      url: 'https://www.qrmaster.net/signup',
    },
    {
      '@type': 'HowToStep',
      position: 3,
      name: 'Download and deploy',
      text: 'Download the QR code and place it on printed or digital materials.',
    },
    {
      '@type': 'HowToStep',
      position: 4,
      name: 'Update later',
      text: 'Change the destination from your dashboard without replacing the QR image.',
    },
  ],
};

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

const breadcrumbItems: BreadcrumbItem[] = [
  { name: 'Home', url: '/' },
  { name: 'Dynamic QR Code Generator', url: '/dynamic-qr-code-generator' },
];

const relatedUseCaseLinks = [
  {
    href: featuredUseCases[0].href,
    title: featuredUseCases[0].title,
    description: featuredUseCases[0].summary,
    ctaLabel: featuredUseCases[0].ctaLabel,
  },
  {
    href: '/use-cases/payment-qr-codes',
    title: 'Payment QR Codes',
    description:
      'Use one printed payment prompt that stays useful even when the checkout or provider path changes.',
    ctaLabel: 'Create your payment QR code',
  },
  {
    href: featuredUseCases[1].href,
    title: featuredUseCases[1].title,
    description: featuredUseCases[1].summary,
    ctaLabel: featuredUseCases[1].ctaLabel,
  },
  {
    href: '/qr-code-tracking',
    title: 'Track Every QR Code Scan',
    description:
      'See device, time, and location context for every scan. Understand which placements drive real activity.',
    ctaLabel: 'Track your QR scans',
  },
  {
    href: '/reprint-calculator',
    title: 'QR Code Reprint Cost Calculator',
    description:
      'Calculate how much static QR reprints cost vs one active dynamic QR code.',
    ctaLabel: 'Calculate reprint savings',
  },
  {
    href: '/use-cases',
    title: 'Explore the use-case hub',
    description:
      'See how dynamic QR workflows connect to commercial pages, tools, and support content.',
    ctaLabel: 'Explore QR code use cases',
  },
];

export default function DynamicQRCodeGeneratorPage() {
  return (
    <>
      <SeoJsonLd data={[softwareSchema, howToSchema, faqSchema, breadcrumbSchema(breadcrumbItems)]} />
      <MarketingPageTracker pageType="commercial" cluster="dynamic-qr" />
      <div className="min-h-screen bg-white">
        <section className="relative overflow-hidden bg-gradient-to-br from-purple-50 via-white to-blue-50 py-20">
          <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <Breadcrumbs items={breadcrumbItems} />
            <div className="grid items-center gap-12 lg:grid-cols-2">
              <div className="space-y-8">
                <div className="inline-flex items-center rounded-full bg-purple-100 px-4 py-2 text-sm font-semibold text-purple-800">
                  Edit after printing
                </div>

                <div className="space-y-5">
                  <h1 className="text-5xl font-bold leading-tight text-gray-900 lg:text-6xl">
                    Dynamic QR Code Generator
                  </h1>
                  <p className="text-xl leading-relaxed text-gray-600">
                    Create QR codes you can update after printing. Change the destination later,
                    review scan context, and keep printed materials useful for longer.
                  </p>
                </div>

                <div className="space-y-3">
                  {[
                    'Change the destination without replacing the printed QR image',
                    'Review scan context in one dashboard',
                    'Apply logo and brand colors',
                    'Scale from 3 active dynamic QR codes on Free to 50 on Pro and 500 on Business',
                  ].map((feature) => (
                    <div key={feature} className="flex items-center gap-3">
                      <div className="flex h-5 w-5 items-center justify-center rounded-full bg-green-500">
                        <svg className="h-3 w-3 text-white" fill="currentColor" viewBox="0 0 20 20">
                          <path
                            fillRule="evenodd"
                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                            clipRule="evenodd"
                          />
                        </svg>
                      </div>
                      <span className="text-gray-700">{feature}</span>
                    </div>
                  ))}
                </div>

                <div className="flex flex-col gap-4 sm:flex-row">
                  <TrackedCtaLink
                    href="/signup"
                    ctaLabel="Create Dynamic QR Code"
                    ctaLocation="hero_primary"
                    pageType="commercial"
                    cluster="dynamic-qr"
                  >
                    <Button size="lg" className="w-full px-8 py-4 text-lg sm:w-auto">
                      Create Dynamic QR Code
                    </Button>
                  </TrackedCtaLink>
                  <TrackedCtaLink
                    href="/pricing"
                    ctaLabel="View Pricing"
                    ctaLocation="hero_secondary"
                    pageType="commercial"
                    cluster="dynamic-qr"
                  >
                    <Button variant="outline" size="lg" className="w-full px-8 py-4 text-lg sm:w-auto">
                      View Pricing
                    </Button>
                  </TrackedCtaLink>
                </div>
              </div>

              <div className="relative">
                <Card className="p-8 shadow-2xl">
                  <div className="mb-6 text-center">
                    <div className="inline-block rounded-lg bg-gray-100 p-6">
                      <svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Dynamic QR code example">
                        {/* Top-left position detection pattern */}
                        <rect x="8" y="8" width="44" height="44" rx="4" fill="#1e293b"/>
                        <rect x="16" y="16" width="28" height="28" rx="2" fill="white"/>
                        <rect x="22" y="22" width="16" height="16" rx="1" fill="#1e293b"/>
                        {/* Top-right position detection pattern */}
                        <rect x="108" y="8" width="44" height="44" rx="4" fill="#1e293b"/>
                        <rect x="116" y="16" width="28" height="28" rx="2" fill="white"/>
                        <rect x="122" y="22" width="16" height="16" rx="1" fill="#1e293b"/>
                        {/* Bottom-left position detection pattern */}
                        <rect x="8" y="108" width="44" height="44" rx="4" fill="#1e293b"/>
                        <rect x="16" y="116" width="28" height="28" rx="2" fill="white"/>
                        <rect x="22" y="122" width="16" height="16" rx="1" fill="#1e293b"/>
                        {/* Data modules */}
                        <rect x="60" y="8" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="76" y="8" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="92" y="8" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="60" y="20" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="92" y="20" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="68" y="32" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="84" y="32" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="8" y="60" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="24" y="60" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="40" y="60" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="8" y="76" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="32" y="76" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="8" y="92" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="24" y="92" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="40" y="92" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="60" y="60" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="76" y="60" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="92" y="60" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="108" y="60" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="124" y="60" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="144" y="60" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="60" y="76" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="84" y="76" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="108" y="76" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="132" y="76" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="60" y="92" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="76" y="92" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="100" y="92" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="124" y="92" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="144" y="92" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="60" y="108" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="84" y="108" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="108" y="108" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="132" y="108" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="60" y="124" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="76" y="124" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="100" y="124" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="124" y="124" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="144" y="124" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="60" y="140" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="84" y="140" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="108" y="140" width="8" height="8" rx="1" fill="#1e293b"/>
                        <rect x="132" y="140" width="8" height="8" rx="1" fill="#1e293b"/>
                        {/* Center logo area */}
                        <rect x="68" y="68" width="24" height="24" rx="4" fill="white"/>
                        <rect x="71" y="71" width="18" height="18" rx="3" fill="#7c3aed"/>
                        <text x="80" y="83" textAnchor="middle" fill="white" fontSize="10" fontWeight="bold">Q</text>
                      </svg>
                    </div>
                  </div>
                  <div className="space-y-3 text-sm">
                    <div className="flex items-center justify-between rounded-lg bg-blue-50 p-3">
                      <span className="text-gray-700">Current destination</span>
                      <span className="font-mono text-blue-600">launch.example</span>
                    </div>
                    <div className="flex justify-center">
                      <svg className="h-6 w-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
                      </svg>
                    </div>
                    <div className="flex items-center justify-between rounded-lg bg-green-50 p-3">
                      <span className="text-gray-700">Updated destination</span>
                      <span className="font-mono text-green-600">menu.example</span>
                    </div>
                  </div>
                  <p className="mt-4 text-center text-sm text-gray-600">
                    Same QR image, different destination later.
                  </p>
                </Card>
                <div className="absolute -right-4 -top-4 rounded-full bg-purple-500 px-4 py-2 text-sm font-semibold text-white shadow-lg">
                  No reprint needed
                </div>
              </div>
            </div>
          </div>
        </section>

        <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold text-gray-900 pt-12 pb-2">How to Create a Free Dynamic QR Code</h2>
          <AnswerFirstBlock
            whatIsIt="A dynamic QR code routes through QR Master before sending the scanner to the final destination. That makes it useful when you need to update the destination later and review scan context without replacing the printed QR code."
            whenToUse={[
              'You expect menu links, campaign landing pages, or packaging destinations to change after print',
              'You want scan analytics such as device, time, and location context in one dashboard',
              'You need one reusable QR across flyers, posters, table cards, packaging, or business cards',
            ]}
            comparison={{
              leftTitle: 'Static QR',
              rightTitle: 'Dynamic QR',
              items: [
                { label: 'Destination changes after print', value: true, text: 'Reprint required' },
                { label: 'Scan analytics', value: true, text: 'Not available' },
                { label: 'Reusable across changing campaigns', value: true, text: 'Limited' },
              ],
            }}
            howTo={{
              steps: [
                'Create a QR Master account and choose a dynamic QR workflow',
                'Enter the destination, then download the QR code for print or digital use',
                'Update the destination later from your dashboard without replacing the QR image',
              ],
            }}
          />
        </div>

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

        <section className="bg-gray-50 py-20">
          <div className="container mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
            <div className="mb-16 text-center">
              <h2 className="mb-4 text-4xl font-bold text-gray-900">Dynamic vs static QR codes</h2>
              <p className="mx-auto max-w-3xl text-xl text-gray-600">
                Dynamic QR is the better fit when the destination may change after the printed code is already in use.
              </p>
            </div>

            <Card className="overflow-hidden shadow-xl">
              <div className="grid md:grid-cols-3">
                <div className="bg-white p-6">
                  <h3 className="mb-4 text-lg font-semibold">Feature</h3>
                  {staticVsDynamic.map((item) => (
                    <div key={item.feature} className="border-b py-4 last:border-b-0">
                      <p className="font-medium text-gray-900">{item.feature}</p>
                    </div>
                  ))}
                </div>
                <div className="bg-gray-50 p-6">
                  <h3 className="mb-4 text-lg font-semibold text-gray-600">Static QR</h3>
                  {staticVsDynamic.map((item) => (
                    <div key={item.feature} className="flex items-center justify-center border-b py-4 last:border-b-0">
                      <span className={item.static ? 'text-2xl text-green-500' : 'text-2xl text-red-500'}>
                        {item.static ? 'Yes' : 'No'}
                      </span>
                    </div>
                  ))}
                </div>
                <div className="bg-primary-50 p-6">
                  <h3 className="mb-4 text-lg font-semibold text-primary-600">Dynamic QR</h3>
                  {staticVsDynamic.map((item) => (
                    <div key={item.feature} className="flex items-center justify-center border-b py-4 last:border-b-0">
                      <span className={item.dynamic ? 'text-2xl text-green-500' : 'text-2xl text-red-500'}>
                        {item.dynamic ? 'Yes' : 'No'}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            </Card>
          </div>
        </section>

        <section className="py-20">
          <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div className="mb-16 text-center">
              <h2 className="mb-4 text-4xl font-bold text-gray-900">What you can do with dynamic QR</h2>
              <p className="mx-auto max-w-3xl text-xl text-gray-600">
                These are the core product benefits verified by the current QR Master flows and plan limits.
              </p>
            </div>

            <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
              {featureCards.map((feature) => (
                <Card key={feature.title} className="p-6 transition-shadow hover:shadow-lg">
                  <h3 className="mb-2 text-xl font-semibold text-gray-900">{feature.title}</h3>
                  <p className="text-gray-600">{feature.description}</p>
                </Card>
              ))}
            </div>
          </div>
        </section>

        <section className="bg-gray-50 py-20">
          <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div className="mb-16 text-center">
              <h2 className="mb-4 text-4xl font-bold text-gray-900">Where dynamic QR fits best</h2>
              <p className="mx-auto max-w-3xl text-xl text-gray-600">
                Use dynamic QR where the destination may evolve after the printed material is already deployed.
              </p>
            </div>

            <div className="grid gap-8 md:grid-cols-2">
              {useCases.map((useCase) => (
                <Card key={useCase.title} className="p-8">
                  <h3 className="mb-3 text-2xl font-bold text-gray-900">{useCase.title}</h3>
                  <p className="mb-4 text-gray-600">{useCase.description}</p>
                  <div className="border-l-4 border-blue-500 bg-blue-50 p-4">
                    <p className="text-sm text-gray-700">
                      <strong>Example:</strong> {useCase.example}
                    </p>
                  </div>
                </Card>
              ))}
            </div>
          </div>
        </section>

        {/* WHY DYNAMIC QR — STATISTICS */}
        <section className="bg-white py-16">
          <div className="container mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
            <div className="flex items-center gap-2 mb-3">
              <svg className="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" /></svg>
              <span className="text-sm font-semibold text-purple-600 uppercase tracking-wider">Research-backed impact</span>
            </div>
            <h2 className="text-3xl font-bold text-gray-900 mb-4">
              Why Dynamic QR Codes Deliver Better Business Outcomes
            </h2>
            <p className="text-gray-600 mb-10 max-w-2xl">
              The ability to update destinations after printing — and track every scan — transforms a static print asset into a measurable marketing channel.
            </p>

            <div className="grid md:grid-cols-2 gap-6 mb-8">
              <div className="bg-purple-50 border border-purple-100 rounded-2xl p-6">
                <div className="text-4xl font-extrabold text-purple-600 mb-2">89% vs 33%</div>
                <p className="text-gray-700 text-sm leading-relaxed mb-3">
                  Companies with strong omnichannel customer engagement — enabled by closed-loop tracking from offline to online — retain <strong>89% of their customers</strong>, compared to only 33% for companies with weak omnichannel engagement.
                </p>
                <p className="text-xs text-gray-500">
                  Source: <a href="https://www.aberdeengroup.com/" target="_blank" rel="noopener noreferrer" className="underline hover:text-gray-700">Aberdeen Group</a> — Omnichannel Customer Engagement Study
                </p>
              </div>

              <div className="bg-blue-50 border border-blue-100 rounded-2xl p-6">
                <div className="text-4xl font-extrabold text-blue-600 mb-2">46%</div>
                <p className="text-gray-700 text-sm leading-relaxed mb-3">
                  of small businesses report printing and direct mail errors as a major source of wasted marketing budget. Dynamic QR codes eliminate this risk — update the destination, never reprint.
                </p>
                <p className="text-xs text-gray-500">
                  Source: <a href="https://thedma.org/" target="_blank" rel="noopener noreferrer" className="underline hover:text-gray-700">Data & Marketing Association (DMA)</a>
                </p>
              </div>
            </div>

            <p className="text-xs text-gray-400 italic">
              By Timo Knuth, QR Master · Last updated: June 2025 · Based on independent academic and industry research
            </p>
          </div>
        </section>

        <GrowthLinksSection
          eyebrow="Best next workflows"
          title="See where dynamic QR becomes most useful"
          description="These are the strongest first workflows for dynamic QR because the printed asset stays the same while the destination or campaign context keeps moving."
          links={relatedUseCaseLinks}
          pageType="commercial"
          cluster="dynamic-qr"
        />

        <section className="bg-gradient-to-r from-purple-600 to-blue-600 py-20 text-white">
          <div className="container mx-auto max-w-4xl px-4 text-center sm:px-6 lg:px-8">
            <h2 className="mb-6 text-4xl font-bold">Start creating dynamic QR codes today</h2>
            <p className="mb-8 text-xl text-purple-100">
              Use one QR code that can keep working even when the destination behind it needs to change.
            </p>
            <div className="flex flex-col justify-center gap-4 sm:flex-row">
              <TrackedCtaLink
                href="/signup"
                ctaLabel="Get Started Free"
                ctaLocation="footer_primary"
                pageType="commercial"
                cluster="dynamic-qr"
              >
                <Button
                  size="lg"
                  variant="secondary"
                  className="w-full bg-white px-8 py-4 text-lg text-purple-600 hover:bg-gray-100 sm:w-auto"
                >
                  Get Started Free
                </Button>
              </TrackedCtaLink>
              <TrackedCtaLink
                href="/pricing"
                ctaLabel="View Pricing"
                ctaLocation="footer_secondary"
                pageType="commercial"
                cluster="dynamic-qr"
              >
                <Button
                  size="lg"
                  variant="outline"
                  className="w-full border-white px-8 py-4 text-lg text-white hover:bg-white/10 sm:w-auto"
                >
                  View Pricing
                </Button>
              </TrackedCtaLink>
            </div>
          </div>
        </section>
      </div>
    </>
  );
}
