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: 'Dynamic QR Code Generator - Edit Anytime',
  },
  description:
    'Create dynamic QR codes that can be updated after printing. Change destinations later, review scan context, and keep printed materials useful for longer.',
  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: 'Dynamic QR Code Generator - Edit Anytime',
    description:
      'Create dynamic QR codes that can be updated after printing. Change destinations later and review scan context from one dashboard.',
    url: 'https://www.qrmaster.net/dynamic-qr-code-generator',
    type: 'website',
    images: ['/og-image.png'],
  },
  twitter: {
    title: 'Dynamic QR Code Generator - Edit Anytime',
    description:
      'Create dynamic QR codes that can be updated after printing. Change destinations later and review scan context from 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.',
  },
  {
    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.',
  },
];

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

const howToSchema = {
  '@context': 'https://schema.org',
  '@type': 'HowTo',
  '@id': 'https://www.qrmaster.net/dynamic-qr-code-generator#howto',
  name: 'How to create a dynamic QR code',
  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: '/use-cases',
    title: 'Explore the use-case hub',
    description:
      'See how dynamic QR workflows connect to commercial pages, tools, and support content.',
    ctaLabel: 'Explore QR code use cases',
  },
];

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

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

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

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

              <div className="relative">
                <Card className="p-8 shadow-2xl">
                  <div className="mb-6 text-center">
                    <div className="inline-block rounded-lg bg-gray-200 p-8">
                      <div className="flex h-48 w-48 items-center justify-center rounded-lg bg-black">
                        <span className="font-mono text-sm text-white">QR Code</span>
                      </div>
                    </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">
          <AnswerFirstBlock
            whatIsIt="A dynamic QR code routes through QR Master before sending the scanner to the final destination. That makes it useful when you need to update the destination later and review scan context without replacing the printed QR code."
            whenToUse={[
              'You expect menu links, campaign landing pages, or packaging destinations to change after print',
              'You want scan analytics such as device, time, and location context in one dashboard',
              'You need one reusable QR across flyers, posters, table cards, packaging, or business cards',
            ]}
            comparison={{
              leftTitle: 'Static QR',
              rightTitle: 'Dynamic QR',
              items: [
                { label: 'Destination changes after print', value: true, text: 'Reprint required' },
                { label: 'Scan analytics', value: true, text: 'Not available' },
                { label: 'Reusable across changing campaigns', value: true, text: 'Limited' },
              ],
            }}
            howTo={{
              steps: [
                'Create a QR Master account and choose a dynamic QR workflow',
                'Enter the destination, then download the QR code for print or digital use',
                'Update the destination later from your dashboard without replacing the QR image',
              ],
            }}
          />
        </div>

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

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

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

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

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

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

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

        <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>
    </>
  );
}