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

export const metadata: Metadata = {
  title: {
    absolute: 'Free QR Code Tracking & Analytics – Track Every Scan',
  },
  description:
    'Track QR code scans for free. See time, device, and location data for every scan. Use dynamic QR codes to measure printed campaigns and placements from one dashboard.',
  keywords:
    'qr code tracking, qr code analytics, track qr scans, dynamic qr tracking, qr scan analytics',
  alternates: {
    canonical: 'https://www.qrmaster.net/qr-code-tracking',
    languages: {
      'x-default': 'https://www.qrmaster.net/qr-code-tracking',
      en: 'https://www.qrmaster.net/qr-code-tracking',
    },
  },
  openGraph: {
    title: 'Free QR Code Tracking & Analytics – Track Every Scan',
    description:
      'Track QR code scans with analytics for time, device, and location context. Use dynamic QR codes to measure placements and campaigns.',
    url: 'https://www.qrmaster.net/qr-code-tracking',
    type: 'website',
    images: ['/og-image.png'],
  },
  twitter: {
    title: 'QR Code Tracking & Analytics - Track Every Scan',
    description:
      'Track QR code scans with analytics for time, device, and location context. Use dynamic QR codes to measure placements and campaigns.',
  },
};

const trackingFeatures = [
  {
    title: 'Time-based scan activity',
    description:
      'Review when scans happen so you can compare campaign bursts, peak service windows, or event timing.',
  },
  {
    title: 'Location context',
    description:
      'See country, city, and region-level scan context in the dashboard to understand where scans are coming from.',
  },
  {
    title: 'Device mix',
    description:
      'Understand whether scans are happening on phone or desktop-heavy traffic patterns and adapt landing pages accordingly.',
  },
  {
    title: 'Total and unique scan reporting',
    description:
      'Use scan counts to understand overall activity and compare repeated scans with broader reach.',
  },
  {
    title: 'Placement-ready measurement',
    description:
      'Track scans from print surfaces such as flyers, menus, signs, packaging, and event materials.',
  },
  {
    title: 'Dynamic QR workflow',
    description:
      'Tracking works with dynamic QR codes that route through QR Master before the scanner reaches the final destination.',
  },
];

const trackingUseCases = [
  {
    title: 'Marketing campaigns',
    description:
      'Measure how printed placements such as flyers, signs, packaging inserts, or booth materials perform over time.',
    benefits: ['Compare placements', 'Review campaign timing', 'See scan context in one dashboard'],
  },
  {
    title: 'Events',
    description:
      'Track which event materials drive scans before, during, and after the event instead of treating every print touchpoint the same.',
    benefits: ['Compare booth and signage scans', 'Watch event-day traffic', 'Keep destinations updateable'],
  },
  {
    title: 'Product and packaging',
    description:
      'Measure which labels, inserts, or support links are getting scans after products leave the warehouse.',
    benefits: ['Track support content usage', 'Compare packaging placements', 'Keep links current'],
  },
  {
    title: 'Restaurant and in-store surfaces',
    description:
      'Review scans from menus, table cards, windows, or counters and compare when in-store prompts actually get used.',
    benefits: ['Spot peak scan periods', 'Compare service surfaces', 'Keep menu links current'],
  },
];

const trackingComparison = [
  { feature: 'Destination can change later', static: false, dynamic: true },
  { feature: 'Scan analytics', static: false, dynamic: true },
  { feature: 'Placement comparison after print', static: false, dynamic: true },
  { feature: 'Reusable for campaigns that evolve', static: false, dynamic: true },
];

const faqItems = [
  {
    question: 'Can I track a static QR code?',
    answer:
      'Static QR codes store the destination directly in the image, so QR Master cannot add the redirect step needed for tracking. Tracking requires a dynamic QR workflow.',
  },
  {
    question: 'What can I measure with QR code tracking?',
    answer:
      'QR Master reports scan activity including time of scan, device type (mobile vs. desktop), and location context (country, city). You can also compare total scans vs. unique scans.',
  },
  {
    question: 'Why does tracking use a dynamic QR code?',
    answer:
      'Tracking happens during the redirect step. A dynamic QR code routes the scan through QR Master first, which makes scan reporting possible before the user reaches the final destination.',
  },
  {
    question: 'When is QR code tracking most useful?',
    answer:
      'It is most useful when you need to compare placements, campaign timing, or printed surfaces and want a measurable record instead of guessing which QR code prompt worked.',
  },
  {
    question: 'Is QR code scan tracking free?',
    answer:
      'Yes — the Free plan includes basic scan tracking for up to 3 active dynamic QR codes. Pro and Business plans include extended scan history, more active codes, and full analytics.',
  },
  {
    question: 'Can I see unlimited scan history?',
    answer:
      'Pro and Business plans include extended scan history and no limits on how many scans are tracked. The Free plan covers tracking for up to 3 active dynamic QR codes.',
  },
];

const softwareSchema = {
  '@context': 'https://schema.org',
  '@type': 'SoftwareApplication',
  '@id': 'https://www.qrmaster.net/qr-code-tracking#software',
  name: 'QR Master - QR Code Tracking & Analytics',
  applicationCategory: 'BusinessApplication',
  operatingSystem: 'Web Browser',
  offers: {
    '@type': 'Offer',
    price: '0',
    priceCurrency: 'EUR',
    availability: 'https://schema.org/InStock',
  },
  description:
    'Track QR code scans with analytics for time, device, and location context. Use dynamic QR codes to measure placements and campaigns.',
  featureList: [
    'Time-based scan reporting',
    'Location context in analytics',
    'Device mix reporting',
    'Total and unique scan reporting',
    'Dynamic QR workflow for trackable printed placements',
  ],
};

const howToSchema = {
  '@context': 'https://schema.org',
  '@type': 'HowTo',
  '@id': 'https://www.qrmaster.net/qr-code-tracking#howto',
  name: 'How to track QR code scans',
  datePublished: '2024-01-01',
  dateModified: '2025-06-01',
  author: {
    '@type': 'Person',
    name: 'Timo Knuth',
    url: 'https://www.qrmaster.net/authors/timo',
  },
  description: 'Create a dynamic QR code, deploy it, and review scan analytics from the QR Master dashboard.',
  totalTime: 'PT5M',
  step: [
    {
      '@type': 'HowToStep',
      position: 1,
      name: 'Create a dynamic QR code',
      text: 'Create a dynamic QR code in QR Master so the scan can route through the tracking step first.',
      url: 'https://www.qrmaster.net/signup',
    },
    {
      '@type': 'HowToStep',
      position: 2,
      name: 'Deploy the QR code',
      text: 'Place the QR code on the flyer, menu, sign, package, or event material you want to measure.',
    },
    {
      '@type': 'HowToStep',
      position: 3,
      name: 'Review analytics',
      text: 'Open the dashboard to review scan context such as time, device, location, and total activity.',
    },
    {
      '@type': 'HowToStep',
      position: 4,
      name: 'Improve the next placement',
      text: 'Use the scan patterns to improve your next campaign, placement, or destination update.',
    },
  ],
};

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

const breadcrumbItems: BreadcrumbItem[] = [
  { name: 'Home', url: '/' },
  { name: 'QR Code Tracking', url: '/qr-code-tracking' },
];

const relatedUseCaseLinks = [
  {
    href: '/use-cases/real-estate-sign-qr-codes',
    title: 'Real Estate Sign QR Codes',
    description:
      'Compare sign, brochure, and open-house scans without blending every property source together.',
    ctaLabel: 'Create your real estate QR code',
  },
  {
    href: '/use-cases/feedback-qr-codes',
    title: 'Feedback QR Codes',
    description:
      'Measure which service surfaces and follow-up prompts actually generate customer responses.',
    ctaLabel: 'Create your feedback QR code',
  },
  {
    href: '/use-cases/coupon-qr-codes',
    title: 'Coupon QR Codes',
    description:
      'Tie printed discount placements to measurable scans so you can compare promotion performance.',
    ctaLabel: 'Create your coupon QR code',
  },
  {
    href: '/qr-code-analytics',
    title: 'QR Code Analytics Dashboard',
    description:
      'Go deeper into placement-level reporting and offline campaign attribution.',
    ctaLabel: 'Explore QR analytics',
  },
  {
    href: '/reprint-calculator',
    title: 'QR Code Reprint Cost Calculator',
    description:
      'See how much dynamic QR codes save vs reprinting static codes each campaign.',
    ctaLabel: 'Calculate reprint savings',
  },
  {
    href: '/use-cases',
    title: 'Explore the use-case hub',
    description:
      'Browse the first commercial workflows built around dynamic updates and measurable scans.',
    ctaLabel: 'Explore QR code use cases',
  },
];

export default function QRCodeTrackingPage() {
  return (
    <>
      <SeoJsonLd data={[softwareSchema, howToSchema, faqSchema, breadcrumbSchema(breadcrumbItems)]} />
      <MarketingPageTracker pageType="commercial" cluster="qr-tracking" />
      <div className="min-h-screen bg-white">
        <section className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-white to-purple-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-blue-100 px-4 py-2 text-sm font-semibold text-blue-800">
                  Trackable dynamic QR workflows
                </div>

                <div className="space-y-5">
                  <h1 className="text-5xl font-bold leading-tight text-gray-900 lg:text-6xl">
                    Track every QR code scan with useful context
                  </h1>
                  <p className="text-xl leading-relaxed text-gray-600">
                    Use dynamic QR codes to measure scans by time, device, and location context,
                    so printed campaigns and physical placements stop being guesswork.
                  </p>
                </div>

                <div className="space-y-3">
                  {[
                    'Track printed placements with a dynamic QR workflow',
                    'Review time, device, and location context',
                    'Compare total and unique scan activity',
                    'Use one dashboard to improve the next campaign or placement',
                  ].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="Start Tracking Free"
                    ctaLocation="hero_primary"
                    pageType="commercial"
                    cluster="qr-tracking"
                  >
                    <Button size="lg" className="w-full px-8 py-4 text-lg sm:w-auto">
                      Start Tracking Free
                    </Button>
                  </TrackedCtaLink>
                  <TrackedCtaLink
                    href="/dynamic-qr-code-generator"
                    ctaLabel="Create Dynamic QR Code"
                    ctaLocation="hero_secondary"
                    pageType="commercial"
                    cluster="qr-tracking"
                  >
                    <Button variant="outline" size="lg" className="w-full px-8 py-4 text-lg sm:w-auto">
                      Create Dynamic QR Code
                    </Button>
                  </TrackedCtaLink>
                </div>
              </div>

              <div className="relative">
                <Card className="p-6 shadow-2xl">
                  <h3 className="mb-4 text-lg font-semibold">Analytics overview</h3>
                  <div className="space-y-4">
                    <div className="flex items-center justify-between border-b pb-3">
                      <span className="text-gray-600">Placement view</span>
                      <span className="font-semibold text-primary-600">Flyer, sign, menu, package</span>
                    </div>
                    <div className="flex items-center justify-between border-b pb-3">
                      <span className="text-gray-600">Time trend</span>
                      <span className="font-semibold text-primary-600">Hourly and daily patterns</span>
                    </div>
                    <div className="flex items-center justify-between border-b pb-3">
                      <span className="text-gray-600">Location context</span>
                      <span className="font-semibold">Country, city, region</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-gray-600">Device mix</span>
                      <span className="font-semibold">Phone or desktop traffic</span>
                    </div>
                  </div>
                </Card>
                <div className="absolute -right-4 -top-4 rounded-full bg-green-500 px-4 py-2 text-sm font-semibold text-white shadow-lg">
                  Dynamic QR required
                </div>
              </div>
            </div>
          </div>
        </section>

        <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <AnswerFirstBlock
            whatIsIt="QR code tracking works when a dynamic QR code routes the scan through QR Master before the scanner reaches the final destination. That redirect step is what makes analytics such as time, device, and location context possible."
            whenToUse={[
              'You want to compare placements such as flyers, signs, menus, packaging, or event surfaces',
              'You need a measurable record of scans instead of relying on guesswork after print is deployed',
              'You expect the destination to change while keeping the same printed QR code in use',
            ]}
            comparison={{
              leftTitle: 'Static QR only',
              rightTitle: 'Dynamic QR with tracking',
              items: [
                { label: 'Destination can change later', value: true, text: 'Not available' },
                { label: 'Scan analytics', value: true, text: 'Not available' },
                { label: 'Placement comparison after print', value: true, text: 'Limited' },
              ],
            }}
            howTo={{
              steps: [
                'Create a dynamic QR code in QR Master',
                'Place it on the print surface or campaign you want to measure',
                'Review analytics and improve the next placement or destination update',
              ],
            }}
          />
        </div>

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

        <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">What QR tracking helps you measure</h2>
              <p className="mx-auto max-w-3xl text-xl text-gray-600">
                These are the analytics surfaces the current product experience already supports without inventing extra claims.
              </p>
            </div>

            <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
              {trackingFeatures.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="py-20">
          <div className="container mx-auto max-w-5xl 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">Tracking setup comparison</h2>
              <p className="text-xl text-gray-600">
                Tracking is a dynamic QR workflow, not a static QR workflow with retroactive reporting.
              </p>
            </div>

            <Card className="overflow-hidden">
              <table className="w-full">
                <thead className="bg-gray-100">
                  <tr>
                    <th className="px-6 py-4 text-left font-semibold text-gray-900">Capability</th>
                    <th className="px-6 py-4 text-center font-semibold text-gray-900">Static QR</th>
                    <th className="px-6 py-4 text-center font-semibold text-primary-600">Dynamic QR tracking</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-200">
                  {trackingComparison.map((row) => (
                    <tr key={row.feature}>
                      <td className="px-6 py-4 font-medium text-gray-900">{row.feature}</td>
                      <td className="px-6 py-4 text-center text-gray-600">{row.static ? 'Yes' : 'No'}</td>
                      <td className="px-6 py-4 text-center font-semibold text-primary-600">
                        {row.dynamic ? 'Yes' : 'No'}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </Card>
          </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 tracking is most useful</h2>
              <p className="mx-auto max-w-3xl text-xl text-gray-600">
                Use tracking where physical surfaces or campaigns need measurable follow-through after they are deployed.
              </p>
            </div>

            <div className="grid gap-8 md:grid-cols-2">
              {trackingUseCases.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-6 text-gray-600">{useCase.description}</p>
                  <ul className="space-y-2">
                    {useCase.benefits.map((benefit) => (
                      <li key={benefit} className="flex items-center gap-2">
                        <svg className="h-5 w-5 flex-shrink-0 text-green-500" 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>
                        <span className="text-gray-700">{benefit}</span>
                      </li>
                    ))}
                  </ul>
                </Card>
              ))}
            </div>
          </div>
        </section>

        {/* WHY QR TRACKING MATTERS — STATISTICS */}
        <section className="bg-white py-16">
          <div className="container mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
            <div className="flex items-center gap-2 mb-3">
              <svg className="w-5 h-5 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" /></svg>
              <span className="text-sm font-semibold text-emerald-600 uppercase tracking-wider">Research-backed impact</span>
            </div>
            <h2 className="text-3xl font-bold text-gray-900 mb-4">
              Why Tracking Makes QR Codes Measurable Marketing Assets
            </h2>
            <p className="text-gray-600 mb-10 max-w-2xl">
              Without scan analytics, a printed QR code is invisible — you can't tell if your campaign placement is working. Tracking turns every scan into actionable data.
            </p>

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

              <div className="bg-blue-50 border border-blue-100 rounded-2xl p-6">
                <div className="text-4xl font-extrabold text-blue-600 mb-2">46%</div>
                <p className="text-gray-700 text-sm leading-relaxed mb-3">
                  of small businesses identify print and direct mail errors as a major source of wasted marketing budget. QR tracking reveals which placements actually drive scans — so you reprint only what works.
                </p>
                <p className="text-xs text-gray-500">
                  Source: <a href="https://thedma.org/" target="_blank" rel="noopener noreferrer" className="underline hover:text-gray-700">Data &amp; Marketing Association (DMA)</a>
                </p>
              </div>
            </div>

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

        <GrowthLinksSection
          eyebrow="Tracking-led workflows"
          title="Where scan visibility matters most"
          description="These are the workflows where scan context, placement comparison, and destination flexibility make QR tracking materially more useful."
          links={relatedUseCaseLinks}
          pageType="commercial"
          cluster="qr-tracking"
        />

        <section className="bg-gradient-to-r from-primary-600 to-purple-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 tracking your QR codes today</h2>
            <p className="mb-8 text-xl text-primary-100">
              Measure scans with enough context to improve the next placement, campaign, or printed workflow.
            </p>
            <div className="flex flex-col justify-center gap-4 sm:flex-row">
              <TrackedCtaLink
                href="/signup"
                ctaLabel="Create Free Account"
                ctaLocation="footer_primary"
                pageType="commercial"
                cluster="qr-tracking"
              >
                <Button
                  size="lg"
                  variant="secondary"
                  className="w-full bg-white px-8 py-4 text-lg text-primary-600 hover:bg-gray-100 sm:w-auto"
                >
                  Create Free Account
                </Button>
              </TrackedCtaLink>
              <TrackedCtaLink
                href="/dynamic-qr-code-generator"
                ctaLabel="Create Dynamic QR Code"
                ctaLocation="footer_secondary"
                pageType="commercial"
                cluster="qr-tracking"
              >
                <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"
                >
                  Create Dynamic QR Code
                </Button>
              </TrackedCtaLink>
            </div>
          </div>
        </section>
      </div>
    </>
  );
}
