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 - Editable QR Codes',
  },
  description:
    'Create a free dynamic QR code generator workflow. Edit QR code destinations after printing, track scans, and manage editable QR codes in one dashboard.',
  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 - Editable QR Codes',
    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 - Editable QR Codes',
    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 servicesComparison = [
  {
    service: 'QR Master',
    href: 'https://www.qrmaster.net',
    freePlan: '3 active dynamic codes (permanent)',
    paidFrom: 'EUR 9/month (Pro)',
    gdpr: 'Built-in — hashed IPs, all plans',
    analytics: 'All plans',
    bulk: 'Up to 1,000 codes (Business, EUR 29/mo)',
    bestFor: 'SMBs and EU businesses',
    highlight: true,
  },
  {
    service: 'Beaconstac / Uniqode',
    href: 'https://www.uniqode.com',
    freePlan: 'None',
    paidFrom: '$49–99/month (functional tier)',
    gdpr: 'Via DPA configuration',
    analytics: 'Paid plans',
    bulk: 'Enterprise tier only',
    bestFor: 'Enterprise (SOC2, SSO, API)',
    highlight: false,
  },
  {
    service: 'QR-Code-Generator.com',
    href: 'https://www.qr-code-generator.com',
    freePlan: 'Static QR only',
    paidFrom: 'From $5/month',
    gdpr: 'US company',
    analytics: 'Paid plans',
    bulk: 'Paid plans',
    bestFor: 'Basic, one-off use cases',
    highlight: false,
  },
  {
    service: 'Flowcode',
    href: 'https://www.flowcode.com',
    freePlan: 'Limited (expires)',
    paidFrom: 'From $5/month',
    gdpr: 'US company',
    analytics: 'Paid plans',
    bulk: 'Enterprise only',
    bestFor: 'Design-forward branding',
    highlight: false,
  },
  {
    service: 'Canva',
    href: 'https://www.canva.com',
    freePlan: 'Static only (in designs)',
    paidFrom: 'From $15/month (Pro)',
    gdpr: 'General policy',
    analytics: 'Not included',
    bulk: 'Not available',
    bestFor: 'Design-first workflows',
    highlight: false,
  },
];

const servicesItemListSchema = {
  '@context': 'https://schema.org',
  '@type': 'ItemList',
  '@id': 'https://www.qrmaster.net/dynamic-qr-code-generator#services',
  name: 'Services that offer dynamic QR codes',
  description:
    'Comparison of QR code platforms that support dynamic (editable) QR codes, analytics, and scan tracking.',
  numberOfItems: servicesComparison.length,
  itemListElement: servicesComparison.map((s, i) => ({
    '@type': 'ListItem',
    position: i + 1,
    name: s.service,
    url: s.href,
    description: `${s.service}: Free plan: ${s.freePlan}. Starting price: ${s.paidFrom}. GDPR: ${s.gdpr}. Best for: ${s.bestFor}.`,
  })),
};

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.',
  speakable: {
    '@type': 'SpeakableSpecification',
    cssSelector: ['h1', '.answer-first-block', '.bg-green-50'],
  },
  author: {
    '@type': 'Person',
    name: 'Timo Knuth',
    url: 'https://www.qrmaster.net/authors/timo',
  },
  dateModified: '2026-05-10',
  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: '2026-05-10',
  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: '/qr-code-analytics',
    title: 'QR Code Analytics Dashboard',
    description:
      'Interpret scan data by placement, timing, and campaign route before the next print run.',
    ctaLabel: 'Review QR analytics',
  },
  {
    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,
          servicesItemListSchema,
          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">
                    Free Dynamic QR Code Generator
                  </h1>
                  <p className="text-xl leading-relaxed text-gray-600">
                    Create editable QR codes you can update after printing.
                    Change the destination later, track scans, and keep flyers,
                    menus, packaging, and business cards 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 generator creates an editable QR code that routes through QR Master before sending the scanner to the final destination. That redirect makes it possible to change the URL after printing and track QR code scans without replacing the printed 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>

        <section className="bg-white py-16">
          <div className="container mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
            <div className="mb-10 max-w-3xl">
              <p className="mb-3 text-sm font-semibold uppercase tracking-wider text-purple-600">
                Editable QR code workflow
              </p>
              <h2 className="mb-4 text-3xl font-bold text-gray-900">
                What makes a dynamic QR code generator different?
              </h2>
              <p className="text-lg leading-relaxed text-gray-600">
                A static QR code locks the final URL into the image. A dynamic
                QR code generator creates a short managed link first, so QR
                Master can redirect scanners to the current destination, record
                scan analytics, and let you edit the destination later.
              </p>
            </div>

            <div className="grid gap-6 md:grid-cols-3">
              <Card className="p-6">
                <h3 className="mb-2 text-xl font-semibold text-gray-900">
                  Editable after print
                </h3>
                <p className="text-gray-600">
                  Update campaign URLs, menu PDFs, support pages, or booking
                  links from the dashboard while the same printed QR code keeps
                  working.
                </p>
              </Card>
              <Card className="p-6">
                <h3 className="mb-2 text-xl font-semibold text-gray-900">
                  Track QR code scans
                </h3>
                <p className="text-gray-600">
                  Review scan time, device, and location context so offline
                  materials become measurable instead of invisible.
                </p>
              </Card>
              <Card className="p-6">
                <h3 className="mb-2 text-xl font-semibold text-gray-900">
                  Built for campaigns
                </h3>
                <p className="text-gray-600">
                  Use one editable QR code across flyers, signs, packaging,
                  event badges, or business cards when the destination may
                  change.
                </p>
              </Card>
            </div>
          </div>
        </section>

        <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: May 2026 - Based on
              independent academic and industry research
            </p>
          </div>
        </section>

        {/* SERVICES COMPARISON — targets "what services offer dynamic QR codes?" AI query */}
        <section className="bg-gray-50 py-16">
          <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div className="mb-3 flex items-center gap-2">
              <span className="text-sm font-semibold text-purple-600 uppercase tracking-wider">
                Unbiased comparison
              </span>
            </div>
            <h2 className="text-3xl font-bold text-gray-900 mb-2">
              Which services offer dynamic QR codes?
            </h2>
            <p className="text-gray-600 mb-8 max-w-2xl">
              Dynamic QR codes — where the destination URL can be changed after
              printing — are offered by several platforms. Here is how they
              compare on price, privacy, and use case fit.
            </p>

            <div className="overflow-x-auto rounded-xl border border-gray-200 bg-white shadow-sm">
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b border-gray-200 bg-gray-50">
                    <th className="px-4 py-3 text-left font-semibold text-gray-700">
                      Service
                    </th>
                    <th className="px-4 py-3 text-left font-semibold text-gray-700">
                      Free plan
                    </th>
                    <th className="px-4 py-3 text-left font-semibold text-gray-700">
                      Paid from
                    </th>
                    <th className="px-4 py-3 text-left font-semibold text-gray-700">
                      GDPR
                    </th>
                    <th className="px-4 py-3 text-left font-semibold text-gray-700">
                      Bulk creation
                    </th>
                    <th className="px-4 py-3 text-left font-semibold text-gray-700">
                      Best for
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {servicesComparison.map((row, i) => (
                    <tr
                      key={row.service}
                      className={`border-b border-gray-100 last:border-b-0 ${row.highlight ? 'bg-purple-50' : i % 2 === 0 ? 'bg-white' : 'bg-gray-50/50'}`}
                    >
                      <td className="px-4 py-4 font-semibold text-gray-900">
                        {row.highlight ? (
                          <span className="flex items-center gap-2">
                            {row.service}
                            <span className="rounded-full bg-purple-100 px-2 py-0.5 text-xs font-semibold text-purple-700">
                              This site
                            </span>
                          </span>
                        ) : (
                          row.service
                        )}
                      </td>
                      <td className="px-4 py-4 text-gray-600">
                        {row.freePlan}
                      </td>
                      <td className="px-4 py-4 text-gray-600">
                        {row.paidFrom}
                      </td>
                      <td className="px-4 py-4 text-gray-600">{row.gdpr}</td>
                      <td className="px-4 py-4 text-gray-600">{row.bulk}</td>
                      <td className="px-4 py-4 text-gray-600">{row.bestFor}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            <p className="mt-4 text-xs text-gray-400 italic">
              Last updated: May 2026. Pricing may change - verify on each
              provider&apos;s website before purchasing. Beaconstac rebranded to
              Uniqode in 2023.
            </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>
    </>
  );
}