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

export const metadata: Metadata = {
  title: {
    absolute: 'QR Code Tracking & Analytics - Track Every Scan',
  },
  description: 'Track QR code scans with real-time analytics. Monitor location, device, time, and user behavior. Free QR code tracking software with detailed reports.',
  keywords: 'qr code tracking, qr code analytics, track qr scans, qr code statistics, free qr tracking, qr code monitoring',
  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: 'QR Code Tracking & Analytics - Track Every Scan',
    description: 'Track QR code scans with real-time analytics. Monitor location, device, time, and user behavior.',
    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 real-time analytics. Monitor location, device, time, and user behavior.',
  },
};

export default function QRCodeTrackingPage() {
  const trackingFeatures = [
    {
      icon: '📊',
      title: 'Real-Time Analytics',
      description: 'See scan data instantly as it happens. Monitor your QR code performance in real-time with live dashboards.',
    },
    {
      icon: '🌍',
      title: 'Location Tracking',
      description: 'Know exactly where your QR codes are being scanned. Track by country, city, and region.',
    },
    {
      icon: '📱',
      title: 'Device Detection',
      description: 'Identify which devices scan your codes. Track iOS, Android, desktop, and browser types.',
    },
    {
      icon: '🕐',
      title: 'Time-Based Reports',
      description: 'Analyze scan patterns by hour, day, week, or month. Optimize your campaigns with timing insights.',
    },
    {
      icon: '👥',
      title: 'Unique vs Total Scans',
      description: 'Distinguish between unique users and repeat scans. Measure true reach and engagement.',
    },
    {
      icon: '📈',
      title: 'Campaign Performance',
      description: 'Track ROI with UTM parameters. Measure conversion rates and campaign effectiveness.',
    },
  ];

  const useCases = [
    {
      title: 'Marketing Campaigns',
      description: 'Track print ads, billboards, and product packaging to measure marketing ROI.',
      benefits: ['Measure ad performance', 'A/B test campaigns', 'Track conversions'],
    },
    {
      title: 'Event Management',
      description: 'Monitor event check-ins, booth visits, and attendee engagement in real-time.',
      benefits: ['Live attendance tracking', 'Booth analytics', 'Engagement metrics'],
    },
    {
      title: 'Product Labels',
      description: 'Track product authenticity scans, manual downloads, and warranty registrations.',
      benefits: ['Anti-counterfeiting', 'User registration tracking', 'Product analytics'],
    },
    {
      title: 'Restaurant Menus',
      description: 'See how many customers scan your menu QR codes and when peak times occur.',
      benefits: ['Customer insights', 'Peak time analysis', 'Menu engagement'],
    },
  ];

  const comparisonData = [
    { feature: 'Real-Time Analytics', free: true, qrMaster: true },
    { feature: 'Location Tracking', free: false, qrMaster: true },
    { feature: 'Device Detection', free: false, qrMaster: true },
    { feature: 'Unlimited Scans', free: false, qrMaster: true },
    { feature: 'Historical Data', free: '7 days', qrMaster: 'Unlimited' },
    { feature: 'Export Reports', free: false, qrMaster: true },
    { feature: 'API Access', free: false, qrMaster: true },
  ];

  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, iOS, Android',
    offers: {
      '@type': 'Offer',
      price: '0',
      priceCurrency: 'USD',
      availability: 'https://schema.org/InStock',
    },

    description: 'Track QR code scans with real-time analytics. Monitor location, device, time, and user behavior with our free QR code tracking software.',
    features: [
      'Real-time analytics dashboard',
      'Location tracking by country and city',
      'Device detection (iOS, Android, Desktop)',
      'Time-based scan reports',
      'Unique vs total scan tracking',
      'Campaign performance metrics',
      'Unlimited scans',
      'Export detailed reports',
    ],
  };

  const howToSchema = {
    '@context': 'https://schema.org',
    '@type': 'HowTo',
    '@id': 'https://www.qrmaster.net/qr-code-tracking#howto',
    name: 'How to Track QR Code Scans',
    description: 'Learn how to track and analyze QR code scans with real-time analytics',
    totalTime: 'PT5M',
    step: [
      {
        '@type': 'HowToStep',
        position: 1,
        name: 'Create QR Code',
        text: 'Sign up for free and create a dynamic QR code with tracking enabled',
        url: 'https://www.qrmaster.net/signup',
      },
      {
        '@type': 'HowToStep',
        position: 2,
        name: 'Deploy QR Code',
        text: 'Download and place your QR code on marketing materials, products, or digital platforms',
      },
      {
        '@type': 'HowToStep',
        position: 3,
        name: 'Monitor Analytics',
        text: 'View real-time scan data including location, device, and time patterns in your dashboard',
        url: 'https://www.qrmaster.net/analytics',
      },
      {
        '@type': 'HowToStep',
        position: 4,
        name: 'Optimize Campaigns',
        text: 'Use insights to optimize placement, timing, and targeting of your QR code campaigns',
      },
    ],
  };

  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: '/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',
    },
  ];

  return (
    <>
      <SeoJsonLd data={[softwareSchema, howToSchema, breadcrumbSchema(breadcrumbItems)]} />
      <MarketingPageTracker pageType="commercial" cluster="qr-tracking" />
      <div className="min-h-screen bg-white">
        {/* Hero Section */}
        <section className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-white to-purple-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-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-semibold">
                  <span>📊</span>
                  <span>Free QR Code Tracking</span>
                </div>

                <h1 className="text-5xl lg:text-6xl font-bold text-gray-900 leading-tight">
                  Track Every QR Code Scan with Powerful Analytics
                </h1>

                <p className="text-xl text-gray-600 leading-relaxed">
                  Monitor your QR code performance in real-time. Get detailed insights on location, device, time, and user behavior. Make data-driven decisions with our free tracking software.
                </p>

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

                <div className="flex items-center space-x-6 text-sm text-gray-600">
                  <div className="flex items-center space-x-2">
                    <svg className="w-5 h-5 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>No credit card required</span>
                  </div>
                  <div className="flex items-center space-x-2">
                    <svg className="w-5 h-5 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>Placement-ready reports</span>
                  </div>
                </div>
              </div>

              {/* Analytics Preview */}
              <div className="relative">
                <Card className="p-6 shadow-2xl">
                  <h3 className="font-semibold text-lg mb-4">Live Analytics Dashboard</h3>
                  <div className="space-y-4">
                    <div className="flex justify-between items-center pb-3 border-b">
                      <span className="text-gray-600">Placement view</span>
                      <span className="text-base font-semibold text-primary-600">Flyer vs booth vs table card</span>
                    </div>
                    <div className="flex justify-between items-center pb-3 border-b">
                      <span className="text-gray-600">Time trend</span>
                      <span className="text-base font-semibold text-primary-600">Lunch, event day, or campaign burst</span>
                    </div>
                    <div className="flex justify-between items-center pb-3 border-b">
                      <span className="text-gray-600">Location context</span>
                      <span className="font-semibold">Region and city level view</span>
                    </div>
                    <div className="flex justify-between items-center">
                      <span className="text-gray-600">Device context</span>
                      <span className="font-semibold">Phone, desktop, and scan mix</span>
                    </div>
                  </div>
                </Card>
                <div className="absolute -top-4 -right-4 bg-green-500 text-white px-4 py-2 rounded-full text-sm font-semibold shadow-lg animate-pulse">
                  Live Updates
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Tracking Features */}
        <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">
                Powerful QR Code Tracking Features
              </h2>
              <p className="text-xl text-gray-600 max-w-3xl mx-auto">
                Get complete visibility into your QR code performance with our comprehensive analytics suite
              </p>
            </div>

            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
              {trackingFeatures.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">
          <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">
                QR Code Tracking Use Cases
              </h2>
              <p className="text-xl text-gray-600 max-w-3xl mx-auto">
                See how businesses use QR code tracking to improve their operations
              </p>
            </div>

            <div className="grid md:grid-cols-2 gap-8">
              {useCases.map((useCase, index) => (
                <Card key={index} className="p-8">
                  <h3 className="text-2xl font-bold text-gray-900 mb-3">
                    {useCase.title}
                  </h3>
                  <p className="text-gray-600 mb-6">
                    {useCase.description}
                  </p>
                  <ul className="space-y-2">
                    {useCase.benefits.map((benefit, idx) => (
                      <li key={idx} className="flex items-center space-x-2">
                        <svg className="w-5 h-5 text-green-500 flex-shrink-0" 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>

        {/* Comparison Table */}
        <section className="py-20 bg-gray-50">
          <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">
                QR Master vs Free Tools
              </h2>
              <p className="text-xl text-gray-600">
                See why businesses choose QR Master for QR code tracking
              </p>
            </div>

            <Card className="overflow-hidden">
              <table className="w-full">
                <thead className="bg-gray-100">
                  <tr>
                    <th className="px-6 py-4 text-left text-gray-900 font-semibold">Feature</th>
                    <th className="px-6 py-4 text-center text-gray-900 font-semibold">Free Tools</th>
                    <th className="px-6 py-4 text-center text-primary-600 font-semibold">QR Master</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-200">
                  {comparisonData.map((row, index) => (
                    <tr key={index}>
                      <td className="px-6 py-4 text-gray-900 font-medium">{row.feature}</td>
                      <td className="px-6 py-4 text-center">
                        {typeof row.free === 'boolean' ? (
                          row.free ? (
                            <span className="text-green-500 text-2xl">✓</span>
                          ) : (
                            <span className="text-red-500 text-2xl">✗</span>
                          )
                        ) : (
                          <span className="text-gray-600">{row.free}</span>
                        )}
                      </td>
                      <td className="px-6 py-4 text-center">
                        {typeof row.qrMaster === 'boolean' ? (
                          <span className="text-green-500 text-2xl">✓</span>
                        ) : (
                          <span className="text-primary-600 font-semibold">{row.qrMaster}</span>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </Card>
          </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"
        />

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