import React from 'react';
import type { Metadata } from 'next';
import Link from 'next/link';
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';

export const metadata: Metadata = {
  title: 'Dynamic QR Code Generator | Edit & Track QR | QR Master',
  description: 'Create editable dynamic QR codes. Update destination URLs, track scans, and manage content anytime without reprinting. Free generator with analytics.',
  keywords: 'dynamic qr code generator, editable qr code, dynamic qr code, free dynamic qr code, qr code generator dynamic, best dynamic qr code generator',
  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 QR Codes Anytime | QR Master',
    description: 'Create dynamic QR codes that can be edited after printing. Change URLs, track scans, and update content anytime.',
    url: 'https://www.qrmaster.net/dynamic-qr-code-generator',
    type: 'website',
    images: [
      {
        url: 'https://www.qrmaster.net/og-image.png',
        width: 1200,
        height: 630,
        alt: 'Dynamic QR Code Generator - QR Master',
      },
    ],
  },
  twitter: {
    title: 'Dynamic QR Code Generator - Edit QR Codes Anytime | QR Master',
    description: 'Create dynamic QR codes that can be edited after printing. Change URLs, track scans, and update content anytime.',
  },
};

export default function DynamicQRCodeGeneratorPage() {
  const dynamicFeatures = [
    {
      icon: '✏️',
      title: 'Edit Anytime',
      description: 'Change the destination URL or content after your QR code is printed. No need to reprint!',
    },
    {
      icon: '📊',
      title: 'Advanced Analytics',
      description: 'Track scans, locations, devices, and time patterns. Get insights to optimize your campaigns.',
    },
    {
      icon: '🎨',
      title: 'Full Customization',
      description: 'Add your logo, brand colors, custom shapes, and frames. Make your QR code stand out.',
    },
    {
      icon: '🔄',
      title: 'A/B Testing',
      description: 'Test different landing pages without changing the QR code. Optimize conversions easily.',
    },
    {
      icon: '⏰',
      title: 'Schedule Content',
      description: 'Set time-based redirects. Show different content based on day, time, or season.',
    },
    {
      icon: '🌍',
      title: 'Geo-Targeting',
      description: 'Redirect users to different pages based on their location. Perfect for multi-region campaigns.',
    },
  ];

  const staticVsDynamic = [
    {
      feature: 'Edit After Printing',
      static: false,
      dynamic: true,
    },
    {
      feature: 'Track Scans',
      static: false,
      dynamic: true,
    },
    {
      feature: 'A/B Testing',
      static: false,
      dynamic: true,
    },
    {
      feature: 'Analytics Dashboard',
      static: false,
      dynamic: true,
    },
    {
      feature: 'Custom Domain',
      static: false,
      dynamic: true,
    },
    {
      feature: 'Password Protection',
      static: false,
      dynamic: true,
    },
    {
      feature: 'Expiration Date',
      static: false,
      dynamic: true,
    },
  ];

  const useCases = [
    {
      title: 'Marketing Campaigns',
      icon: '📢',
      description: 'Update campaign landing pages without reprinting materials. Test different offers and track performance.',
      example: 'Print QR codes on billboards, then test different promotions weekly.',
    },
    {
      title: 'Product Packaging',
      icon: '📦',
      description: 'Link to product manuals, videos, or registration forms. Update information as products evolve.',
      example: 'Update software download links without changing packaging.',
    },
    {
      title: 'Business Cards',
      icon: '💼',
      description: 'Keep your contact information current. Update your vCard details without printing new cards.',
      example: 'Change job title, phone, or email anytime.',
    },
    {
      title: 'Restaurant Menus',
      icon: '🍽️',
      description: 'Update menu items, prices, and specials daily. Track which items get the most views.',
      example: 'Show daily specials without printing new menus.',
    },
  ];

  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: 'USD',
      availability: 'https://schema.org/InStock',
    },
    aggregateRating: {
      '@type': 'AggregateRating',
      ratingValue: '4.9',
      ratingCount: '2150',
    },
    description: 'Create dynamic QR codes that can be edited after printing. Change destination URLs, track scans, and update content without reprinting.',
    featureList: [
      'Edit QR codes after printing',
      'Real-time scan tracking',
      'A/B testing capabilities',
      'Custom branding and design',
      'Geo-targeting options',
      'Scheduled content updates',
      'Password protection',
      'Expiration dates',
    ],
  };

  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: 'Learn how to create editable QR codes that can be updated after printing',
    totalTime: 'PT3M',
    step: [
      {
        '@type': 'HowToStep',
        position: 1,
        name: 'Sign Up Free',
        text: 'Create a free QR Master account to start generating dynamic QR codes',
        url: 'https://www.qrmaster.net/signup',
      },
      {
        '@type': 'HowToStep',
        position: 2,
        name: 'Generate QR Code',
        text: 'Enter your destination URL and customize the design with your branding',
        url: 'https://www.qrmaster.net/signup',
      },
      {
        '@type': 'HowToStep',
        position: 3,
        name: 'Download and Print',
        text: 'Download your QR code in high resolution and add it to your marketing materials',
      },
      {
        '@type': 'HowToStep',
        position: 4,
        name: 'Update Anytime',
        text: 'Log into your dashboard to change the destination URL whenever needed - no reprinting required',
        url: 'https://www.qrmaster.net/dashboard',
      },
    ],
  };

  const faqSchema = {
    '@context': 'https://schema.org',
    '@type': 'FAQPage',
    '@id': 'https://www.qrmaster.net/dynamic-qr-code-generator#faq',
    mainEntity: [
      {
        '@type': 'Question',
        name: 'What is a dynamic QR code?',
        acceptedAnswer: {
          '@type': 'Answer',
          text: 'A dynamic QR code is an editable QR code that redirects through a short URL, allowing you to change the destination without reprinting the code. Unlike static QR codes, dynamic codes can be tracked and updated anytime.',
        },
      },
      {
        '@type': 'Question',
        name: 'Can I edit a QR code after printing?',
        acceptedAnswer: {
          '@type': 'Answer',
          text: 'Yes, with dynamic QR codes you can edit the destination URL anytime after printing. The QR code image stays the same, but the content it points to can be changed from your dashboard.',
        },
      },
      {
        '@type': 'Question',
        name: 'Is dynamic QR code generator free?',
        acceptedAnswer: {
          '@type': 'Answer',
          text: 'Yes, QR Master offers a free plan for creating dynamic QR codes with basic tracking features. Premium plans include advanced analytics and customization options.',
        },
      },
    ],
  };

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

  return (
    <>
      <SeoJsonLd data={[softwareSchema, howToSchema, faqSchema, breadcrumbSchema(breadcrumbItems)]} />
      <div className="min-h-screen bg-white">
        {/* Hero Section */}
        <section className="relative overflow-hidden bg-gradient-to-br from-purple-50 via-white to-blue-50 py-20">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
            <Breadcrumbs items={breadcrumbItems} />
            <div className="grid lg:grid-cols-2 gap-12 items-center">
              <div className="space-y-8">
                <div className="inline-flex items-center space-x-2 bg-purple-100 text-purple-800 px-4 py-2 rounded-full text-sm font-semibold">
                  <span>✨</span>
                  <span>Edit After Printing</span>
                </div>

                <h1 className="text-5xl lg:text-6xl font-bold text-gray-900 leading-tight">
                  Dynamic QR Code Generator
                </h1>

                <p className="text-xl text-gray-600 leading-relaxed">
                  Create QR codes you can edit anytime - even after printing. Change URLs, track scans, and update content without reprinting. The smart choice for businesses.
                </p>

                <div className="space-y-3">
                  {[
                    'Edit content after printing',
                    'Track scans and analytics',
                    'A/B test without reprinting',
                    'Custom branding and design',
                  ].map((feature, index) => (
                    <div key={index} className="flex items-center space-x-3">
                      <div className="flex-shrink-0 w-5 h-5 bg-green-500 rounded-full flex items-center justify-center">
                        <svg className="w-3 h-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 sm:flex-row gap-4">
                  <Link href="/signup">
                    <Button size="lg" className="text-lg px-8 py-4 w-full sm:w-auto">
                      Create Dynamic QR Code
                    </Button>
                  </Link>
                  <Link href="/pricing">
                    <Button variant="outline" size="lg" className="text-lg px-8 py-4 w-full sm:w-auto">
                      View Pricing
                    </Button>
                  </Link>
                </div>
              </div>

              {/* Visual Demo */}
              <div className="relative">
                <Card className="p-8 shadow-2xl">
                  <div className="text-center mb-6">
                    <div className="inline-block bg-gray-200 rounded-lg p-8">
                      <div className="w-48 h-48 bg-black rounded-lg flex items-center justify-center">
                        <span className="text-white text-sm font-mono">QR Code</span>
                      </div>
                    </div>
                  </div>
                  <div className="space-y-3 text-sm">
                    <div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
                      <span className="text-gray-700">Current URL:</span>
                      <span className="text-blue-600 font-mono">summer-sale.com</span>
                    </div>
                    <div className="flex items-center justify-center">
                      <svg className="w-6 h-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 p-3 bg-green-50 rounded-lg">
                      <span className="text-gray-700">Updated URL:</span>
                      <span className="text-green-600 font-mono">fall-sale.com</span>
                    </div>
                  </div>
                  <p className="text-center text-sm text-gray-600 mt-4">
                    Same QR code, different destination!
                  </p>
                </Card>
                <div className="absolute -top-4 -right-4 bg-purple-500 text-white px-4 py-2 rounded-full text-sm font-semibold shadow-lg">
                  No Reprint Needed!
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Static vs Dynamic */}
        <section className="py-20 bg-gray-50">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-6xl">
            <div className="text-center mb-16">
              <h2 className="text-4xl font-bold text-gray-900 mb-4">
                Dynamic vs Static QR Codes
              </h2>
              <p className="text-xl text-gray-600 max-w-3xl mx-auto">
                Understand why dynamic QR codes are the smart choice for businesses
              </p>
            </div>

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

        {/* Features */}
        <section className="py-20">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
            <div className="text-center mb-16">
              <h2 className="text-4xl font-bold text-gray-900 mb-4">
                Powerful Dynamic QR Features
              </h2>
              <p className="text-xl text-gray-600 max-w-3xl mx-auto">
                Everything you need to create, manage, and optimize your QR code campaigns
              </p>
            </div>

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

        {/* Use Cases */}
        <section className="py-20 bg-gray-50">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
            <div className="text-center mb-16">
              <h2 className="text-4xl font-bold text-gray-900 mb-4">
                How Businesses Use Dynamic QR Codes
              </h2>
              <p className="text-xl text-gray-600 max-w-3xl mx-auto">
                Real-world examples of dynamic QR code applications
              </p>
            </div>

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

        {/* How It Works */}
        <section className="py-20">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-5xl">
            <div className="text-center mb-16">
              <h2 className="text-4xl font-bold text-gray-900 mb-4">
                How Dynamic QR Codes Work
              </h2>
              <p className="text-xl text-gray-600">
                Simple technology, powerful results
              </p>
            </div>

            <div className="grid md:grid-cols-3 gap-8">
              <Card className="p-6 text-center">
                <div className="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-2xl font-bold text-primary-600">1</span>
                </div>
                <h3 className="text-xl font-semibold text-gray-900 mb-2">Create QR Code</h3>
                <p className="text-gray-600">
                  Generate a dynamic QR code with a short redirect URL
                </p>
              </Card>

              <Card className="p-6 text-center">
                <div className="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-2xl font-bold text-primary-600">2</span>
                </div>
                <h3 className="text-xl font-semibold text-gray-900 mb-2">Print Anywhere</h3>
                <p className="text-gray-600">
                  Add to packaging, posters, cards, or anywhere you need
                </p>
              </Card>

              <Card className="p-6 text-center">
                <div className="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-2xl font-bold text-primary-600">3</span>
                </div>
                <h3 className="text-xl font-semibold text-gray-900 mb-2">Update Anytime</h3>
                <p className="text-gray-600">
                  Change the destination URL from your dashboard whenever needed
                </p>
              </Card>
            </div>
          </div>
        </section>

        {/* CTA Section */}
        <section className="py-20 bg-gradient-to-r from-purple-600 to-blue-600 text-white">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl text-center">
            <h2 className="text-4xl font-bold mb-6">
              Start Creating Dynamic QR Codes Today
            </h2>
            <p className="text-xl mb-8 text-purple-100">
              Join thousands of businesses who never worry about reprinting QR codes again
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Link href="/signup">
                <Button size="lg" variant="secondary" className="text-lg px-8 py-4 w-full sm:w-auto bg-white text-purple-600 hover:bg-gray-100">
                  Get Started Free
                </Button>
              </Link>
              <Link href="/signup">
                <Button size="lg" variant="outline" className="text-lg px-8 py-4 w-full sm:w-auto border-white text-white hover:bg-white/10">
                  Create QR Code Now
                </Button>
              </Link>
            </div>
          </div>
        </section>
      </div>
    </>
  );
}