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';

export const metadata: Metadata = {
  title: {
    absolute: 'Dynamic Barcode Generator – Trackable, Editable Barcodes',
  },
  description:
    'Generate dynamic barcodes you can update after printing. Change the redirect URL anytime, track every scan, and manage all barcodes in one dashboard. Free to start.',
  keywords:
    'dynamic barcode generator, trackable barcode, editable barcode, barcode redirect, barcode analytics, dynamic barcode, barcode scanner tracking',
  alternates: {
    canonical: 'https://www.qrmaster.net/dynamic-barcode-generator',
    languages: {
      'x-default': 'https://www.qrmaster.net/dynamic-barcode-generator',
      en: 'https://www.qrmaster.net/dynamic-barcode-generator',
    },
  },
  openGraph: {
    title: 'Dynamic Barcode Generator – Trackable, Editable Barcodes',
    description:
      'Generate dynamic barcodes that redirect to any URL — and can be updated after printing. Track every scan with device, time, and location data.',
    url: 'https://www.qrmaster.net/dynamic-barcode-generator',
    type: 'website',
    images: ['/og-image.png'],
  },
  twitter: {
    title: 'Dynamic Barcode Generator – Trackable, Editable Barcodes',
    description:
      'Generate dynamic barcodes that redirect to any URL — and can be updated after printing. Track every scan with device, time, and location data.',
  },
};

const featureCards = [
  {
    title: 'Update destination after print',
    description:
      'Keep the same barcode on badges, packaging inserts, or digital displays while changing the URL behind it at any time from your dashboard.',
  },
  {
    title: 'Track every smartphone scan',
    description:
      'See device type, time, country, and referrer for every scan — in the same dashboard as your QR codes.',
  },
  {
    title: 'CODE128 and CODE39 supported',
    description:
      'Dynamic barcodes use URL-capable formats only. CODE128 is the recommended choice for broad scanner compatibility.',
  },
  {
    title: 'Manage codes in one place',
    description:
      'Pause, redirect, or delete any barcode from your dashboard without touching the printed label.',
  },
  {
    title: 'Download SVG or PNG',
    description:
      'Export print-ready barcode assets directly. Use them on labels, event badges, or digital displays.',
  },
  {
    title: 'Scale by plan',
    description:
      'The Free plan includes 3 active dynamic barcodes. Pro includes 50, and Business includes 500.',
  },
];

const staticVsDynamic = [
  {
    feature: 'Change redirect URL after printing',
    static: false,
    dynamic: true,
  },
  {
    feature: 'Track scan analytics (device, country, time)',
    static: false,
    dynamic: true,
  },
  {
    feature: 'Pause or deactivate without reprinting',
    static: false,
    dynamic: true,
  },
  {
    feature: 'Manage all barcodes in one dashboard',
    static: false,
    dynamic: true,
  },
  {
    feature: 'Use across changing campaigns',
    static: false,
    dynamic: true,
  },
];

const useCases = [
  {
    title: 'Event badges & access passes',
    description:
      'Print CODE128 barcodes on event badges that link to personalized schedules, session recordings, or attendee portals. Update the destination as content changes.',
    example:
      'Conference badges with a dynamic barcode redirect to an attendee agenda page — updated in real time as the schedule changes. Scanned with smartphone cameras at check-in kiosks.',
  },
  {
    title: 'Packaging inserts & product cards',
    description:
      'Link physical inserts inside product boxes to setup guides, how-to videos, or support pages. Update the destination when content moves — no reprint needed.',
    example:
      'A hardware brand updates the setup guide URL six months post-launch to a new video format — without reprinting a single insert.',
  },
  {
    title: 'Digital signage & screens',
    description:
      'Display a CODE128 barcode on screens or monitors. Visitors scan with their smartphone and land on a current URL — updated from the dashboard without changing the display.',
    example:
      'A trade-show monitor shows a barcode linking to the current product demo page — redirected to a post-show recording after the event.',
  },
  {
    title: 'Internal asset tracking (browser-based)',
    description:
      'Use CODE128 barcodes on internal assets where staff scan with smartphones to open web-based inventory or maintenance forms. URLs update as systems change.',
    example:
      'IT tags company laptops with dynamic barcodes. Staff scan to open the current helpdesk form — URL updated when the ticketing system moves.',
  },
];

const faqItems = [
  {
    question: 'What is a dynamic barcode?',
    answer:
      'A dynamic barcode (CODE128 or CODE39) encodes a short redirect URL. When scanned with a smartphone camera, it opens a browser and routes through QR Master to your current destination — which you can update without changing the printed barcode. Note: it requires a smartphone scan, not a POS laser scanner.',
  },
  {
    question: 'How is a dynamic barcode different from a static one?',
    answer:
      'A static barcode directly encodes a fixed value — a number, URL, or product code — that cannot be changed after printing. A dynamic barcode encodes a redirect link so the final destination can be updated at any time from your dashboard.',
  },
  {
    question:
      'Which barcode formats does QR Master support for dynamic barcodes?',
    answer:
      'Dynamic barcodes require a format that can encode a URL. QR Master supports CODE128 and CODE39 for dynamic barcodes. Numeric-only formats (EAN-13, UPC, ITF-14, MSI, pharmacode) are available as static barcodes only via the free barcode generator tool.',
  },
  {
    question: 'Can I track who scanned my barcode?',
    answer:
      'Yes. Every scan is logged with device type, operating system, country, and time. Scan data appears in your QR Master analytics dashboard alongside your QR codes.',
  },
  {
    question: 'How many dynamic barcodes can I create?',
    answer:
      'The Free plan includes 3 active dynamic barcodes. Pro includes 50, and Business includes 500. All plans share the same dashboard for barcodes and QR codes.',
  },
  {
    question: 'Can I change a barcode destination after printing?',
    answer:
      'Yes — that is the core value of a dynamic barcode. Log in to your dashboard, find the barcode, and update the redirect URL. Scanners immediately reach the new destination.',
  },
  {
    question: 'Do I need to reprint if the linked page changes?',
    answer:
      'No. Dynamic barcodes decouple the printed label from the destination. Update the URL from your dashboard; the physical label stays unchanged.',
  },
  {
    question:
      'What is the difference between a dynamic barcode and a dynamic QR code?',
    answer:
      'Both use the same redirect mechanism. A barcode uses a linear format (CODE128, EAN-13, etc.) readable by laser scanners and most POS systems. A QR code uses a 2D matrix format readable by smartphone cameras. Use barcodes where laser scanner infrastructure exists; use QR codes for consumer-facing materials.',
  },
];

const softwareSchema = {
  '@context': 'https://schema.org',
  '@type': 'SoftwareApplication',
  '@id': 'https://www.qrmaster.net/dynamic-barcode-generator#software',
  name: 'QR Master - Dynamic Barcode Generator',
  applicationCategory: 'BusinessApplication',
  operatingSystem: 'Web Browser',
  offers: {
    '@type': 'Offer',
    price: '0',
    priceCurrency: 'EUR',
    availability: 'https://schema.org/InStock',
  },
  description:
    'Generate dynamic barcodes with redirect URLs you can update after printing. Track every scan and manage all barcodes in one dashboard.',
  featureList: [
    'Update barcode redirect URL after printing',
    'Track scan analytics (device, country, time)',
    'Supports CODE128, EAN-13, UPC, CODE39, ITF-14, MSI, pharmacode',
    'Export print-ready SVG and PNG assets',
    'Manage barcodes and QR codes in one dashboard',
  ],
};

const howToSchema = {
  '@context': 'https://schema.org',
  '@type': 'HowTo',
  '@id': 'https://www.qrmaster.net/dynamic-barcode-generator#howto',
  name: 'How to create a dynamic barcode',
  datePublished: '2024-01-01',
  dateModified: '2026-04-01',
  author: {
    '@type': 'Person',
    name: 'Timo Knuth',
    url: 'https://www.qrmaster.net/authors/timo',
  },
  description:
    'Create a dynamic barcode that redirects to a URL you can update anytime — without reprinting the label.',
  totalTime: 'PT3M',
  step: [
    {
      '@type': 'HowToStep',
      position: 1,
      name: 'Create an account',
      text: 'Sign up for a QR Master account and open the Create dashboard.',
      url: 'https://www.qrmaster.net/signup',
    },
    {
      '@type': 'HowToStep',
      position: 2,
      name: 'Select Barcode type',
      text: 'Choose "Barcode" as the content type, select the format (CODE128, EAN-13, etc.), and enter your destination URL.',
      url: 'https://www.qrmaster.net/signup',
    },
    {
      '@type': 'HowToStep',
      position: 3,
      name: 'Download and apply',
      text: 'Export the barcode as SVG or PNG and apply it to labels, packaging, or digital assets.',
    },
    {
      '@type': 'HowToStep',
      position: 4,
      name: 'Update anytime',
      text: 'Change the destination URL from your dashboard whenever needed — no reprint required.',
    },
  ],
};

const faqSchema = {
  '@context': 'https://schema.org',
  '@type': 'FAQPage',
  '@id': 'https://www.qrmaster.net/dynamic-barcode-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 Barcode Generator', url: '/dynamic-barcode-generator' },
];

const relatedLinks = [
  {
    href: '/dynamic-qr-code-generator',
    title: 'Dynamic QR Code Generator',
    description:
      'The same redirect-and-track approach for 2D QR codes — ideal for consumer-facing print materials scanned by smartphones.',
    ctaLabel: 'Create dynamic QR codes',
  },
  {
    href: '/bulk-qr-code-generator',
    title: 'Bulk Barcode & QR Generator',
    description:
      'Upload a CSV and generate hundreds of dynamic barcodes or QR codes in one batch — with tracking for every code.',
    ctaLabel: 'Generate codes in bulk',
  },
  {
    href: '/qr-code-analytics',
    title: 'Barcode & QR Analytics',
    description:
      'See device, country, time, and UTM data for every scan across all your barcodes and QR codes in one unified view.',
    ctaLabel: 'View analytics features',
  },
  {
    href: '/use-cases/packaging-qr-codes',
    title: 'Packaging Use Case',
    description:
      'How brands use dynamic codes on product packaging to keep printed materials useful after URLs, campaigns, or pages change.',
    ctaLabel: 'Explore packaging use case',
  },
  {
    href: '/reprint-calculator',
    title: 'Reprint Cost Calculator',
    description:
      'Calculate how much static label reprints cost vs. one active dynamic barcode that never needs replacing.',
    ctaLabel: 'Calculate your savings',
  },
  {
    href: '/tools/barcode-generator',
    title: 'Free Static Barcode Generator',
    description:
      'Need a one-time barcode with no redirect? Use the free static barcode generator — no account required.',
    ctaLabel: 'Generate a static barcode',
  },
];

export default function DynamicBarcodeGeneratorPage() {
  return (
    <>
      <SeoJsonLd
        data={[
          softwareSchema,
          howToSchema,
          faqSchema,
          breadcrumbSchema(breadcrumbItems),
        ]}
      />
      <MarketingPageTracker pageType="commercial" cluster="dynamic-barcode" />
      <div className="min-h-screen bg-white">
        {/* HERO */}
        <section className="relative overflow-hidden bg-white pb-32 pt-28 sm:pt-40">
          <style dangerouslySetInnerHTML={{__html: `
            @keyframes mesh-blob-1 {
              0% { transform: translate(0px, 0px) scale(1) rotate(0deg); }
              50% { transform: translate(3px, -5px) scale(1.01) rotate(0.5deg); }
              100% { transform: translate(0px, 0px) scale(1) rotate(0deg); }
            }
            @keyframes mesh-blob-2 {
              0% { transform: translate(0px, 0px) scale(1) rotate(0deg); }
              50% { transform: translate(-5px, 4px) scale(1.01) rotate(-0.5deg); }
              100% { transform: translate(0px, 0px) scale(1) rotate(0deg); }
            }
            @keyframes mesh-blob-3 {
              0% { transform: translate(0px, 0px) scale(1) rotate(0deg); }
              50% { transform: translate(5px, 2px) scale(0.99) rotate(0.5deg); }
              100% { transform: translate(0px, 0px) scale(1) rotate(0deg); }
            }
          `}} />
          <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none">
            {/* The signature Stripe diagonal background container */}
            <div className="absolute inset-x-0 -top-40 h-[120%] origin-top-left -skew-y-[6deg] bg-[#f6f9fc] border-b border-[rgba(229,237,245,1)]">
              
              {/* Distinct overlapping strands (Schwung) resembling real light ribbons */}
              <div 
                className="absolute right-0 top-0 h-full w-full pointer-events-none overflow-hidden [mask-image:linear-gradient(to_right,transparent,black_15%,black_100%)] xl:[mask-image:linear-gradient(to_right,transparent,black_25%,black_100%)]" 
              >
                <svg 
                  className="absolute right-[-10%] top-[-10%] h-[120%] w-[120%] opacity-90" 
                  viewBox="0 0 1000 1000" 
                  preserveAspectRatio="xMaxYMax slice"
                >
                  <defs>
                    <linearGradient id="ribbon1" x1="0%" y1="0%" x2="100%" y2="100%">
                      <stop offset="0%" stopColor="#fbac30" />
                      <stop offset="50%" stopColor="#ea2261" />
                      <stop offset="100%" stopColor="#5f45ff" />
                    </linearGradient>
                    <linearGradient id="ribbon2" x1="0%" y1="0%" x2="100%" y2="100%">
                      <stop offset="0%" stopColor="#ea2261" />
                      <stop offset="100%" stopColor="#5f45ff" />
                    </linearGradient>
                    <linearGradient id="ribbon3" x1="0%" y1="0%" x2="100%" y2="100%">
                      <stop offset="0%" stopColor="#5f45ff" />
                      <stop offset="100%" stopColor="#e439ca" />
                    </linearGradient>
                    
                    <filter id="heavy" x="-50%" y="-50%" width="200%" height="200%">
                      <feGaussianBlur stdDeviation="80" />
                    </filter>
                    <filter id="medium" x="-50%" y="-50%" width="200%" height="200%">
                      <feGaussianBlur stdDeviation="40" />
                    </filter>
                    <filter id="sharp" x="-50%" y="-50%" width="200%" height="200%">
                      <feGaussianBlur stdDeviation="15" />
                    </filter>
                    <filter id="grain">
                      <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"/>
                      <feColorMatrix type="saturate" values="0" />
                    </filter>
                  </defs>

                  {/* Deep blurry purple/pink background shape */}
                  <g style={{ animation: 'mesh-blob-3 25s infinite ease-in-out' }} className="origin-center">
                    <path 
                      d="M 600 -200 Q 100 400, 900 1200" 
                      fill="none" 
                      stroke="url(#ribbon3)" 
                      strokeWidth="450" 
                      filter="url(#heavy)" 
                      opacity="0.5"
                    />
                  </g>
                  
                  {/* Middle wider ribbon (Pink/Purple) */}
                  <g style={{ animation: 'mesh-blob-2 22s infinite ease-in-out reverse' }} className="origin-center">
                    <path 
                      d="M 550 -200 Q 50 450, 850 1200" 
                      fill="none" 
                      stroke="url(#ribbon2)" 
                      strokeWidth="350" 
                      filter="url(#medium)" 
                      opacity="0.7"
                    />
                  </g>
                  
                  {/* Thinner, sharper top strand (Orange/Pink) */}
                  <g style={{ animation: 'mesh-blob-1 20s infinite ease-in-out' }} className="origin-center">
                    <path 
                      d="M 500 -200 Q -50 500, 800 1200" 
                      fill="none" 
                      stroke="url(#ribbon1)" 
                      strokeWidth="200" 
                      filter="url(#sharp)" 
                      opacity="0.9"
                    />
                  </g>

                  {/* Grain/Texture overlay */}
                  <rect width="1000" height="1000" filter="url(#grain)" opacity="0.6" style={{ mixBlendMode: 'overlay' }} />
                </svg>
              </div>

            </div>
          </div>
          <div className="container relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <Breadcrumbs items={breadcrumbItems} />
            <div className="grid items-center gap-16 lg:grid-cols-2">
              <div className="space-y-8">
                <div className="inline-flex items-center rounded bg-[#e5edf5] px-3 py-1 text-xs font-medium text-[#533afd] uppercase tracking-wider">
                  Track every scan · Update anytime
                </div>

                <div className="space-y-6">
                  <h1 className="text-[48px] sm:text-[56px] font-[300] leading-[1.05] tracking-[-1.4px] text-[#061b31]">
                    Dynamic Barcode Generator
                  </h1>
                  <p className="text-[18px] font-[300] leading-[1.6] text-black max-w-lg">
                    Create CODE128 or CODE39 barcodes that encode a redirect
                    URL. When scanned with a smartphone, they open a browser and
                    redirect to your destination — which you can update anytime
                    without reprinting.
                  </p>
                </div>

                <div className="space-y-4 pt-2">
                  {[
                    'Scanned by smartphone cameras — redirect opens in the browser',
                    'Update the destination from your dashboard without touching the label',
                    'Track every scan — device, country, time, and UTM data',
                    'Free plan includes 3 active dynamic barcodes — no credit card required',
                  ].map((feature) => (
                    <div key={feature} className="flex items-start gap-3">
                      <div className="mt-1 flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full bg-[#15be53]/20 border border-[#15be53]/40">
                        <svg
                          className="h-2.5 w-2.5 text-[#108c3d]"
                          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-[16px] font-[300] text-black">
                        {feature}
                      </span>
                    </div>
                  ))}
                </div>

                <div className="flex flex-col gap-4 sm:flex-row pt-4">
                  <TrackedCtaLink
                    href="/signup"
                    ctaLabel="Create Dynamic Barcode"
                    ctaLocation="hero_primary"
                    pageType="commercial"
                    cluster="dynamic-barcode"
                  >
                    <button className="w-full sm:w-auto rounded bg-[#533afd] px-6 py-3 text-[16px] font-[400] text-white shadow-[0_2px_5px_rgba(50,50,93,0.25),0_1px_3px_rgba(0,0,0,0.1)] transition-colors hover:bg-[#4434d4]">
                      Create Dynamic Barcode
                    </button>
                  </TrackedCtaLink>
                  <TrackedCtaLink
                    href="/tools/barcode-generator"
                    ctaLabel="Try Free Static Barcode"
                    ctaLocation="hero_secondary"
                    pageType="commercial"
                    cluster="dynamic-barcode"
                  >
                    <button className="w-full sm:w-auto rounded bg-transparent border border-[#b9b9f9] px-6 py-3 text-[16px] font-[400] text-[#533afd] transition-colors hover:bg-[#533afd]/5">
                      Try Free Static Barcode
                    </button>
                  </TrackedCtaLink>
                </div>
              </div>

              {/* Hero visual — barcode mockup */}
              <div className="relative mt-8 lg:mt-0">
                <div className="rounded-[8px] border border-[#e5edf5] bg-white p-8 shadow-[0_30px_45px_-30px_rgba(50,50,93,0.25),0_18px_36px_-18px_rgba(0,0,0,0.1)]">
                  {/* Simulated barcode SVG */}
                  <div className="mb-8 flex justify-center">
                    <div className="rounded-[4px] bg-[#f6f9fc] p-6 border border-[#e5edf5]">
                      <svg
                        width="280"
                        height="100"
                        viewBox="0 0 280 100"
                        xmlns="http://www.w3.org/2000/svg"
                        aria-label="Dynamic barcode example"
                      >
                        {/* Guard bars */}
                        <rect
                          x="8"
                          y="10"
                          width="3"
                          height="72"
                          fill="#061b31"
                        />
                        <rect
                          x="13"
                          y="10"
                          width="2"
                          height="72"
                          fill="#061b31"
                        />
                        {/* Data bars pattern */}
                        <rect
                          x="18"
                          y="10"
                          width="4"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="24"
                          y="10"
                          width="2"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="28"
                          y="10"
                          width="5"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="35"
                          y="10"
                          width="2"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="39"
                          y="10"
                          width="3"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="44"
                          y="10"
                          width="4"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="50"
                          y="10"
                          width="2"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="54"
                          y="10"
                          width="5"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="61"
                          y="10"
                          width="3"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="66"
                          y="10"
                          width="2"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="70"
                          y="10"
                          width="4"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="76"
                          y="10"
                          width="2"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="80"
                          y="10"
                          width="6"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="88"
                          y="10"
                          width="2"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="92"
                          y="10"
                          width="3"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="97"
                          y="10"
                          width="5"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="104"
                          y="10"
                          width="2"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="108"
                          y="10"
                          width="4"
                          height="64"
                          fill="#061b31"
                        />
                        {/* Center guard */}
                        <rect
                          x="115"
                          y="10"
                          width="2"
                          height="72"
                          fill="#061b31"
                        />
                        <rect
                          x="119"
                          y="10"
                          width="3"
                          height="72"
                          fill="#061b31"
                        />
                        {/* More data bars */}
                        <rect
                          x="125"
                          y="10"
                          width="4"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="131"
                          y="10"
                          width="2"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="135"
                          y="10"
                          width="5"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="142"
                          y="10"
                          width="3"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="147"
                          y="10"
                          width="2"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="151"
                          y="10"
                          width="4"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="157"
                          y="10"
                          width="2"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="161"
                          y="10"
                          width="6"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="169"
                          y="10"
                          width="3"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="174"
                          y="10"
                          width="2"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="178"
                          y="10"
                          width="5"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="185"
                          y="10"
                          width="2"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="189"
                          y="10"
                          width="4"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="195"
                          y="10"
                          width="3"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="200"
                          y="10"
                          width="2"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="204"
                          y="10"
                          width="5"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="211"
                          y="10"
                          width="4"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="217"
                          y="10"
                          width="2"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="221"
                          y="10"
                          width="3"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="226"
                          y="10"
                          width="5"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="233"
                          y="10"
                          width="2"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="237"
                          y="10"
                          width="4"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="243"
                          y="10"
                          width="3"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="248"
                          y="10"
                          width="2"
                          height="64"
                          fill="#061b31"
                        />
                        <rect
                          x="252"
                          y="10"
                          width="5"
                          height="64"
                          fill="#061b31"
                        />
                        {/* End guard bars */}
                        <rect
                          x="260"
                          y="10"
                          width="2"
                          height="72"
                          fill="#061b31"
                        />
                        <rect
                          x="264"
                          y="10"
                          width="3"
                          height="72"
                          fill="#061b31"
                        />
                        <rect
                          x="269"
                          y="10"
                          width="2"
                          height="72"
                          fill="#061b31"
                        />
                        {/* Number below */}
                        <text
                          x="140"
                          y="96"
                          textAnchor="middle"
                          fill="#64748d"
                          fontSize="12"
                          fontFamily="monospace"
                        >
                          CODE128 · dynamic redirect
                        </text>
                      </svg>
                    </div>
                  </div>
                  <div className="space-y-4 font-mono text-[13px]">
                    <div className="flex flex-col gap-2 rounded-[4px] border border-[#e5edf5] bg-white p-4 shadow-[0_2px_5px_rgba(50,50,93,0.05),0_1px_3px_rgba(0,0,0,0.02)]">
                      <div className="flex items-center justify-between">
                        <span className="text-[#273951] uppercase tracking-wider text-[10px] font-bold">
                          Encoded redirect
                        </span>
                      </div>
                      <span className="text-[#533afd]">qrmaster.net/r/abc</span>
                    </div>
                    <div className="flex justify-center -my-2 relative z-10">
                      <div className="bg-white rounded-full p-1 border border-[#e5edf5]">
                        <svg
                          className="h-4 w-4 text-[#15be53]"
                          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>
                    <div className="flex flex-col gap-2 rounded-[4px] border border-[#15be53]/30 bg-[#15be53]/5 p-4 shadow-[0_2px_5px_rgba(50,50,93,0.05),0_1px_3px_rgba(0,0,0,0.02)]">
                      <div className="flex items-center justify-between">
                        <span className="text-[#108c3d] uppercase tracking-wider text-[10px] font-bold">
                          Current destination
                        </span>
                      </div>
                      <span className="text-[#108c3d]">yourpage.com/v2</span>
                    </div>
                  </div>
                  <p className="mt-6 text-center text-[12px] font-[300] text-[#64748d]">
                    Same barcode label, destination changeable anytime.
                  </p>
                </div>
                <div className="absolute -right-4 -top-4 rounded bg-[#ea2261] px-3 py-1.5 text-[11px] font-[400] text-white shadow-[0_5px_15px_rgba(234,34,97,0.3)]">
                  No reprint needed
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* HOW IT WORKS */}
        <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 Dynamic Barcode
          </h2>
          <AnswerFirstBlock
            whatIsIt="A dynamic barcode encodes a short redirect URL into a standard linear format (CODE128, EAN-13, etc.). When scanned, it routes through QR Master — logging the scan and forwarding to your chosen destination, which you can update anytime from the dashboard."
            whenToUse={[
              'Event badges, access passes, or conference materials scanned by smartphone cameras',
              'Product packaging inserts or cards where visitors scan with their phone to reach a web page',
              'Digital signage or screens displaying a barcode for smartphone users to scan',
              'Internal asset tracking where staff use smartphones (not laser scanners) to open web forms',
            ]}
            comparison={{
              leftTitle: 'Static Barcode',
              rightTitle: 'Dynamic Barcode',
              items: [
                {
                  label: 'URL changeable after print',
                  value: true,
                  text: 'Fixed at print time',
                },
                {
                  label: 'Scan analytics available',
                  value: true,
                  text: 'Not available',
                },
                {
                  label: 'Pause or deactivate remotely',
                  value: true,
                  text: 'Not possible',
                },
              ],
            }}
            howTo={{
              steps: [
                'Create a QR Master account and open the Create dashboard',
                'Select "Barcode" as the content type, pick a format, and enter your destination URL',
                'Download the barcode as SVG or PNG and apply it to your label or packaging',
                'Update the redirect URL anytime from your dashboard — no reprint required',
              ],
            }}
          />
        </div>

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

        {/* STATIC VS DYNAMIC TABLE */}
        <section className="bg-white py-24">
          <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-[32px] font-[300] tracking-[-0.64px] text-[#061b31]">
                Dynamic vs static barcodes
              </h2>
              <p className="mx-auto max-w-3xl text-[18px] font-[300] leading-[1.6] text-[#64748d]">
                Dynamic barcodes are the better fit when the linked page,
                document, or destination changes after labels are already in
                circulation.
              </p>
            </div>

            <div className="rounded-[8px] border border-[#e5edf5] bg-white shadow-[0_15px_35px_rgba(50,50,93,0.1),0_5px_15px_rgba(0,0,0,0.07)] overflow-hidden">
              <div className="grid md:grid-cols-3">
                <div className="bg-[#f6f9fc] p-8 border-r border-[#e5edf5] hidden md:block">
                  <h3 className="mb-6 text-[14px] uppercase tracking-wider font-bold text-[#273951]">
                    Feature
                  </h3>
                  {staticVsDynamic.map((item) => (
                    <div
                      key={item.feature}
                      className="border-b border-[#e5edf5] py-4 last:border-b-0 h-[72px] flex items-center"
                    >
                      <p className="text-[16px] font-[400] text-[#061b31]">
                        {item.feature}
                      </p>
                    </div>
                  ))}
                </div>
                <div className="bg-white p-8 border-r border-[#e5edf5]">
                  <h3 className="mb-6 text-[14px] uppercase tracking-wider font-bold text-[#64748d] text-center">
                    Static Barcode
                  </h3>
                  {staticVsDynamic.map((item) => (
                    <div
                      key={item.feature}
                      className="flex flex-col md:flex-row items-center justify-center border-b border-[#e5edf5] py-4 last:border-b-0 md:h-[72px]"
                    >
                      <span className="text-[14px] font-[400] text-[#061b31] md:hidden mb-2 text-center">
                        {item.feature}
                      </span>
                      <span
                        className={
                          item.static
                            ? 'text-[20px] text-[#15be53]'
                            : 'text-[20px] text-[#ea2261]'
                        }
                      >
                        {item.static ? '✓' : '—'}
                      </span>
                    </div>
                  ))}
                </div>
                <div className="bg-[#f9fafe] p-8">
                  <h3 className="mb-6 text-[14px] uppercase tracking-wider font-bold text-[#533afd] text-center">
                    Dynamic Barcode
                  </h3>
                  {staticVsDynamic.map((item) => (
                    <div
                      key={item.feature}
                      className="flex flex-col md:flex-row items-center justify-center border-b border-[#e5edf5] py-4 last:border-b-0 md:h-[72px]"
                    >
                      <span className="text-[14px] font-[400] text-[#061b31] md:hidden mb-2 text-center">
                        {item.feature}
                      </span>
                      <span
                        className={
                          item.dynamic
                            ? 'text-[20px] text-[#15be53] font-bold'
                            : 'text-[20px] text-[#ea2261]'
                        }
                      >
                        {item.dynamic ? '✓' : '—'}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* FEATURE CARDS */}
        <section className="bg-[#f6f9fc] py-24 border-t border-b border-[#e5edf5]">
          <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-[32px] font-[300] tracking-[-0.64px] text-[#061b31]">
                What dynamic barcodes give you
              </h2>
              <p className="mx-auto max-w-3xl text-[18px] font-[300] leading-[1.6] text-[#64748d]">
                The same redirect-and-track infrastructure that powers QR
                Master's dynamic QR codes — now available for standard linear
                barcode formats.
              </p>
            </div>

            <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
              {featureCards.map((feature) => (
                <div
                  key={feature.title}
                  className="rounded-[6px] border border-[#e5edf5] bg-white p-8 transition-shadow hover:shadow-[0_15px_35px_rgba(50,50,93,0.1),0_5px_15px_rgba(0,0,0,0.07)]"
                >
                  <h3 className="mb-3 text-[22px] font-[300] tracking-[-0.22px] text-[#061b31]">
                    {feature.title}
                  </h3>
                  <p className="text-[16px] font-[300] leading-[1.6] text-[#64748d]">
                    {feature.description}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* USE CASES */}
        <section className="bg-white py-24">
          <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-[32px] font-[300] tracking-[-0.64px] text-[#061b31]">
                Where dynamic barcodes fit best
              </h2>
              <p className="mx-auto max-w-3xl text-[18px] font-[300] leading-[1.6] text-[#64748d]">
                Use dynamic barcodes wherever a label, package, or badge must
                stay useful even as the page behind it changes.
              </p>
            </div>

            <div className="grid gap-8 md:grid-cols-2">
              {useCases.map((useCase) => (
                <div
                  key={useCase.title}
                  className="rounded-[6px] border border-[#e5edf5] bg-white p-10 shadow-[0_15px_35px_rgba(23,23,23,0.08)]"
                >
                  <h3 className="mb-4 text-[26px] font-[300] tracking-[-0.26px] text-[#061b31]">
                    {useCase.title}
                  </h3>
                  <p className="mb-6 text-[16px] font-[300] leading-[1.6] text-[#64748d]">
                    {useCase.description}
                  </p>
                  <div className="rounded-[4px] border-l-2 border-[#533afd] bg-[#f9fafe] p-5">
                    <p className="text-[14px] font-[300] leading-[1.6] text-[#273951]">
                      <strong className="font-[400] text-[#061b31]">
                        Example:
                      </strong>{' '}
                      {useCase.example}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* STATS SECTION */}
        <section className="bg-[#1c1e54] py-24">
          <div className="container mx-auto max-w-4xl px-4 sm:px-6 lg:px-8 text-center md:text-left">
            <div className="flex flex-col md:flex-row md:items-end justify-between gap-8 mb-16">
              <div className="max-w-2xl">
                <div className="flex items-center gap-3 mb-6 justify-center md:justify-start">
                  <div className="bg-[#ea2261] rounded-full p-1">
                    <svg
                      className="w-4 h-4 text-white"
                      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>
                  </div>
                  <span className="text-[12px] font-[400] text-[#ffd7ef] uppercase tracking-wider">
                    Why dynamic barcodes matter
                  </span>
                </div>
                <h2 className="text-[32px] font-[300] tracking-[-0.64px] text-white mb-6">
                  The Business Case for Updatable Barcodes
                </h2>
                <p className="text-[18px] font-[300] leading-[1.6] text-[rgba(255,255,255,0.7)]">
                  Static barcodes are a liability when the page or document
                  behind them changes. Dynamic barcodes eliminate that risk —
                  and add scan intelligence to every label.
                </p>
              </div>
            </div>

            <div className="grid md:grid-cols-2 gap-8 mb-12">
              <div className="rounded-[6px] border border-[rgba(255,255,255,0.1)] bg-[rgba(255,255,255,0.03)] p-8 backdrop-blur-sm">
                <div className="text-[48px] font-[300] tracking-[-0.96px] text-[#f96bee] mb-4">
                  46%
                </div>
                <p className="text-[16px] font-[300] leading-[1.6] text-white mb-6">
                  of small businesses report wasted budget from printing and
                  direct-mail errors. Dynamic barcodes eliminate the need to
                  reprint when URLs or pages change.
                </p>
                <p className="text-[12px] font-[300] text-[rgba(255,255,255,0.5)]">
                  Source:{' '}
                  <a
                    href="https://thedma.org/"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="underline hover:text-white transition-colors"
                  >
                    Data &amp; Marketing Association (DMA)
                  </a>
                </p>
              </div>

              <div className="rounded-[6px] border border-[rgba(255,255,255,0.1)] bg-[rgba(255,255,255,0.03)] p-8 backdrop-blur-sm">
                <div className="text-[48px] font-[300] tracking-[-0.96px] text-[#f96bee] mb-4">
                  89% vs 33%
                </div>
                <p className="text-[16px] font-[300] leading-[1.6] text-white mb-6">
                  Customer retention rate for companies with strong omnichannel
                  tracking (offline scan → online analytics) vs. companies
                  without it.
                </p>
                <p className="text-[12px] font-[300] text-[rgba(255,255,255,0.5)]">
                  Source:{' '}
                  <a
                    href="https://www.aberdeengroup.com/"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="underline hover:text-white transition-colors"
                  >
                    Aberdeen Group
                  </a>
                </p>
              </div>
            </div>

            <p className="text-[12px] font-[300] text-[rgba(255,255,255,0.4)] italic text-center md:text-left">
              By Timo Knuth, QR Master · Last updated: April 2026
            </p>
          </div>
        </section>

        {/* FORMAT GUIDE */}
        <section className="bg-[#f6f9fc] py-24 border-t border-b border-[#e5edf5]">
          <div className="container mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
            <div className="mb-12 text-center">
              <h2 className="mb-4 text-[32px] font-[300] tracking-[-0.64px] text-[#061b31]">
                Which barcode format works dynamically?
              </h2>
              <p className="text-[18px] font-[300] leading-[1.6] text-[#64748d] max-w-2xl mx-auto">
                Dynamic barcodes must encode a URL — so only formats that
                support full ASCII strings work. Numeric-only formats like
                EAN-13, UPC, and ITF-14 cannot embed a redirect URL and are
                available as <strong>static barcodes only</strong>.
              </p>
            </div>

            <div className="mb-12">
              <h3 className="text-[14px] font-[400] text-[#108c3d] uppercase tracking-wider mb-6 text-center md:text-left">
                Dynamic-capable formats
              </h3>
              <div className="grid gap-6 sm:grid-cols-2">
                {[
                  {
                    format: 'CODE128',
                    badge: 'Recommended',
                    badgeColor:
                      'bg-[rgba(21,190,83,0.2)] text-[#108c3d] border-[rgba(21,190,83,0.4)]',
                    description:
                      'High-density alphanumeric. Can encode any URL. Best general-purpose choice for event badges, inserts, and digital signage.',
                  },
                  {
                    format: 'CODE39',
                    badge: 'Industrial',
                    badgeColor:
                      'bg-[rgba(21,190,83,0.2)] text-[#108c3d] border-[rgba(21,190,83,0.4)]',
                    description:
                      'Supports uppercase letters and digits. Can encode short URLs. Common in automotive and defense environments.',
                  },
                ].map((item) => (
                  <div
                    key={item.format}
                    className="rounded-[6px] border border-[#e5edf5] bg-white p-6 shadow-[0_3px_6px_rgba(23,23,23,0.06)]"
                  >
                    <div className="flex items-center gap-3 mb-4">
                      <span className="font-mono text-[14px] font-[500] text-[#061b31] uppercase">
                        {item.format}
                      </span>
                      <span
                        className={`text-[10px] px-2 py-0.5 rounded-[4px] font-[300] border ${item.badgeColor}`}
                      >
                        {item.badge}
                      </span>
                    </div>
                    <p className="text-[14px] font-[300] leading-[1.6] text-[#64748d]">
                      {item.description}
                    </p>
                  </div>
                ))}
              </div>
            </div>

            <div>
              <h3 className="text-[14px] font-[400] text-[#64748d] uppercase tracking-wider mb-6 text-center md:text-left">
                Static only — numeric formats
              </h3>
              <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                {[
                  {
                    format: 'EAN-13',
                    description:
                      '13-digit retail standard. Used by POS laser scanners. Cannot encode a URL.',
                  },
                  {
                    format: 'UPC',
                    description:
                      '12-digit North American retail format. Numeric only.',
                  },
                  {
                    format: 'ITF-14',
                    description:
                      'Shipping carton format. 14 digits, numeric only.',
                  },
                  {
                    format: 'Pharmacode',
                    description:
                      'Pharmaceutical standard. Single integer only.',
                  },
                ].map((item) => (
                  <div
                    key={item.format}
                    className="rounded-[4px] border border-[#e5edf5] bg-white p-5 opacity-80"
                  >
                    <span className="font-mono text-[12px] font-[500] text-[#273951] uppercase">
                      {item.format}
                    </span>
                    <p className="text-[12px] font-[300] leading-[1.4] text-[#64748d] mt-2">
                      {item.description}
                    </p>
                  </div>
                ))}
              </div>
              <p className="text-[13px] font-[300] text-[#64748d] mt-6 text-center md:text-left">
                All numeric formats are available as static barcodes via the{' '}
                <a
                  href="/tools/barcode-generator"
                  className="text-[#533afd] hover:underline"
                >
                  free barcode generator
                </a>
                .
              </p>
            </div>
          </div>
        </section>

        {/* RELATED LINKS */}
        <GrowthLinksSection
          eyebrow="Best next workflows"
          title="See where dynamic barcodes fit your stack"
          description="Dynamic barcodes work best alongside QR codes, bulk generation, and unified analytics — all available in the same QR Master dashboard."
          links={relatedLinks}
          pageType="commercial"
          cluster="dynamic-barcode"
        />

        {/* CTA BANNER */}
        <section className="bg-white py-32 border-t border-[#e5edf5]">
          <div className="container mx-auto max-w-4xl px-4 text-center sm:px-6 lg:px-8">
            <h2 className="mb-6 text-[48px] font-[300] tracking-[-0.96px] text-[#061b31]">
              Start creating dynamic barcodes today
            </h2>
            <p className="mb-10 text-[18px] font-[300] leading-[1.6] text-[#64748d]">
              Free plan includes 3 active dynamic barcodes. No credit card
              required. Upgrade when you need more.
            </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-barcode"
              >
                <button className="w-full sm:w-auto rounded-[4px] bg-[#533afd] px-6 py-3 text-[16px] font-[400] text-white shadow-[0_2px_5px_rgba(50,50,93,0.25),0_1px_3px_rgba(0,0,0,0.1)] transition-colors hover:bg-[#4434d4]">
                  Get Started Free
                </button>
              </TrackedCtaLink>
              <TrackedCtaLink
                href="/pricing"
                ctaLabel="View Pricing"
                ctaLocation="footer_secondary"
                pageType="commercial"
                cluster="dynamic-barcode"
              >
                <button className="w-full sm:w-auto rounded-[4px] bg-transparent border border-[#b9b9f9] px-6 py-3 text-[16px] font-[400] text-[#533afd] transition-colors hover:bg-[#533afd]/5">
                  View Pricing
                </button>
              </TrackedCtaLink>
            </div>
          </div>
        </section>
      </div>
    </>
  );
}
