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

export const metadata: Metadata = {
  title: {
    absolute: 'Bulk QR Code Generator - Static or Dynamic, from Excel',
  },
  description:
    'Upload a CSV or Excel file and get up to 1,000 static QR codes at once, or up to 500 trackable dynamic ones on Business. Preview every row before you generate.',
  keywords:
    'bulk qr code generator, bulk qr code generator excel, batch qr code generator, qr code from excel, csv qr code generator, bulk qr generator, bulk qr code generator in google sheets, spreadsheet qr generation',
  alternates: {
    canonical: 'https://www.qrmaster.net/bulk-qr-code-generator',
    languages: {
      'x-default': 'https://www.qrmaster.net/bulk-qr-code-generator',
      en: 'https://www.qrmaster.net/bulk-qr-code-generator',
    },
  },
  openGraph: {
    title: 'Bulk QR Code Generator - Static or Dynamic, from Excel',
    description:
      'One spreadsheet in, a full batch out. Up to 1,000 static codes, or up to 500 trackable dynamic ones.',
    url: 'https://www.qrmaster.net/bulk-qr-code-generator',
    type: 'website',
    images: ['/og-image.png'],
  },
  twitter: {
    title: 'Bulk QR Code Generator - Static or Dynamic, from Excel',
    description:
      'One spreadsheet in, a full batch out. Up to 1,000 static codes, or up to 500 trackable dynamic ones.',
  },
};

const featureCards = [
  {
    title: 'Spreadsheet upload',
    description:
      'Upload CSV, XLS, or XLSX files from Excel, Numbers, Airtable, or a Google Sheets export and map the title and content columns before generating the batch.',
  },
  {
    title: 'Excel and Google Sheets workflow',
    description:
      'Prepare rows in Excel or Google Sheets, export to CSV/XLSX, then generate the full QR code batch from one clean spreadsheet.',
  },
  {
    title: 'Up to 1,000 rows per upload',
    description:
      'The current bulk creation flow limits each upload to 1,000 rows so the batch stays predictable and reviewable.',
  },
  {
    title: 'Static or dynamic output',
    description:
      'Choose per upload. Static for large print batches. Dynamic when the destination has to stay editable and the scans have to be countable.',
  },
  {
    title: 'ZIP download',
    description:
      'Download the generated QR codes together as a ZIP archive of SVG files for easier handoff or print prep.',
  },
  {
    title: 'Optional dashboard save',
    description:
      'After generation, you can save the batch into your QR Master dashboard for later management.',
  },
  {
    title: 'Business plan access',
    description:
      'The current bulk creation workflow is available to Business plan subscribers and is positioned around scale, not single-code creation.',
  },
];

const inputExamples = [
  {
    title: 'Google Sheets export',
    content: 'Name,URL\nMenu QR,https://example.com/menu\nFlyer QR,https://example.com/flyer',
    note: 'Export a Google Sheet as CSV and upload it as a batch QR code generator input.',
  },
  {
    title: 'Excel product list',
    content: 'SKU,URL\nSKU-1001,https://example.com/products/1001',
    note: 'Use Excel or XLSX rows when each product, insert, or label needs its own QR code.',
  },
  {
    title: 'Website URLs',
    content: 'https://example.com/product',
    note: 'Useful for product pages, flyers, support pages, or campaign destinations.',
  },
  {
    title: 'vCard data',
    content: 'John,Doe,john@example.com,+1234567890,Company,Sales',
    note: 'Useful when each spreadsheet row contains contact card data you want encoded into the QR.',
  },
  {
    title: 'Coordinates',
    content: '37.7749,-122.4194,Main Office',
    note: 'Useful for location or asset workflows where the content string already contains the coordinates.',
  },
  {
    title: 'Plain text',
    content: 'SN-12345-ABCDE',
    note: 'Useful for serials, labels, and operational identifiers.',
  },
];

const useCases = [
  {
    title: 'Product labels and inserts',
    description:
      'Generate a batch for packaging, inserts, manuals, or support labels. Static when the link is permanent, dynamic when the linked page will change.',
    points: ['One spreadsheet as input', 'Consistent file naming', 'Printable SVG output'],
  },
  {
    title: 'Event materials',
    description:
      'Produce batches for badges, handouts, booth materials, or attendee resources. Use dynamic codes when the event page changes after print.',
    points: ['Batch generation from one file', 'Preview before generation', 'Download everything together'],
  },
  {
    title: 'Inventory and asset labels',
    description:
      'Encode asset IDs, location strings, or internal references without building each QR code one by one.',
    points: ['Works with text content', 'Good for offline labeling', 'Save the finished set to the dashboard'],
  },
  {
    title: 'Bulk print preparation',
    description:
      'Prepare many QR codes for printers or production teams from one spreadsheet instead of manual single-code exports.',
    points: ['SVG batch download', 'Up to 1,000 rows per upload', 'Business-plan workflow'],
  },
];

const faqItems = [
  {
    question: 'How many QR codes can I generate at once?',
    answer:
      'The current bulk creation flow accepts up to 1,000 rows per upload.',
  },
  {
    question: 'Are bulk-generated QR codes dynamic or trackable?',
    answer:
      'Both are available. Static is the default and runs up to 1,000 rows per upload. Dynamic codes stay editable after print and are trackable, capped at 500 on Business by your dynamic code allowance.',
  },
  {
    question: 'What file formats can I upload?',
    answer:
      'The current flow accepts CSV, XLS, and XLSX files.',
  },
  {
    question: 'Can I use Google Sheets as the source?',
    answer:
      'Yes. Prepare the batch in Google Sheets, export it as CSV or XLSX, then upload that file to QR Master. The workflow is the same as an Excel upload.',
  },
  {
    question: 'Is this a batch QR code generator?',
    answer:
      'Yes. QR Master bulk creation is a batch QR code generator for spreadsheet rows. Each row becomes one QR code, and the finished batch can be downloaded together.',
  },
  {
    question: 'Which plan includes bulk QR creation?',
    answer:
      'Bulk QR creation is currently available in the Business plan.',
  },
];

const softwareSchema = {
  '@context': 'https://schema.org',
  '@type': 'SoftwareApplication',
  '@id': 'https://www.qrmaster.net/bulk-qr-code-generator#software',
  name: 'QR Master - Bulk QR Code Generator',
  applicationCategory: 'BusinessApplication',
  aggregateRating: {
    '@type': 'AggregateRating',
    ratingValue: getAggregateRating().ratingValue,
    reviewCount: getAggregateRating().reviewCount,
    bestRating: getAggregateRating().bestRating,
    worstRating: getAggregateRating().worstRating,
  },
  operatingSystem: 'Web Browser',
  offers: {
    '@type': 'Offer',
    price: '29',
    priceCurrency: 'EUR',
    availability: 'https://schema.org/InStock',
  },
  description:
    'Generate up to 1,000 static QR codes, or up to 500 trackable dynamic codes, from CSV, Excel, XLSX, or exported Google Sheets files on the QR Master Business plan.',
  featureList: [
    'CSV, XLS, and XLSX upload',
    'Excel and Google Sheets CSV export workflow',
    'Up to 1,000 rows per upload',
    'Static or dynamic QR code generation',
    'ZIP download of generated SVG files',
    'Optional save-to-dashboard step',
  ],
};

const howToSchema = {
  '@context': 'https://schema.org',
  '@type': 'HowTo',
  '@id': 'https://www.qrmaster.net/bulk-qr-code-generator#howto',
  name: 'How to generate bulk QR codes from a spreadsheet',
  datePublished: '2024-01-01',
  dateModified: '2025-06-01',
  author: {
    '@type': 'Person',
    name: 'Timo Knuth',
    url: 'https://www.qrmaster.net/authors/timo',
  },
  description:
    'Upload a spreadsheet, map the title and content columns, preview the batch, then generate and download the QR codes.',
  totalTime: 'PT10M',
  step: [
    {
      '@type': 'HowToStep',
      position: 1,
      name: 'Prepare the spreadsheet',
      text: 'Create a CSV, XLS, or XLSX file with one row per QR code and at least title and content data.',
    },
    {
      '@type': 'HowToStep',
      position: 2,
      name: 'Upload and map columns',
      text: 'Upload the file in the Business-plan bulk creation flow and map the title and content columns.',
      url: 'https://www.qrmaster.net/bulk-creation',
    },
    {
      '@type': 'HowToStep',
      position: 3,
      name: 'Preview the batch',
      text: 'Review the detected rows and confirm the content before generating the final QR batch.',
    },
    {
      '@type': 'HowToStep',
      position: 4,
      name: 'Generate and download',
      text: 'Generate the QR codes, then download the ZIP archive or save the finished set to the dashboard.',
    },
  ],
};

const faqSchema = {
  '@context': 'https://schema.org',
  '@type': 'FAQPage',
  '@id': 'https://www.qrmaster.net/bulk-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: 'Bulk QR Code Generator', url: '/bulk-qr-code-generator' },
];

const relatedUseCaseLinks = [
  {
    href: '/use-cases/packaging-qr-codes',
    title: 'Packaging QR Codes',
    description:
      'Use bulk generation when labels, inserts, or packaging need many QR codes produced from one spreadsheet.',
    ctaLabel: 'Create your packaging QR code',
  },
  {
    href: '/use-cases',
    title: 'Explore the use-case hub',
    description:
      'See where bulk creation fits into broader QR workflows and adjacent commercial pages.',
    ctaLabel: 'Explore QR code use cases',
  },
  {
    href: '/custom-qr-code-generator',
    title: 'Custom QR Code Generator',
    description:
      'Use single-code design workflows when you need more styling control than the current bulk flow exposes.',
    ctaLabel: 'Design a custom QR code',
  },
  {
    href: '/pricing',
    title: 'Pricing',
    description:
      'Review which plan includes bulk creation and how it fits alongside dynamic QR and analytics features.',
    ctaLabel: 'View pricing',
  },
];

export default function BulkQRCodeGeneratorPage() {
  return (
    <>
      <SeoJsonLd data={[softwareSchema, howToSchema, faqSchema, breadcrumbSchema(breadcrumbItems)]} />
      <MarketingPageTracker pageType="commercial" cluster="bulk-qr" />
      <div className="min-h-screen bg-white">
        <section className="relative overflow-hidden bg-gradient-to-br from-green-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-green-100 px-4 py-2 text-sm font-semibold text-green-800">
                  Business-plan spreadsheet workflow
                </div>

                <div className="space-y-5">
                  <h1 className="text-5xl font-bold leading-tight text-gray-900 lg:text-6xl">
                    Bulk QR Code Generator
                  </h1>
                  <p className="text-xl leading-relaxed text-gray-600">
                    Stop mapping spreadsheet rows to QR codes by hand. Upload a
                    CSV or Excel file, preview every code, and download up to
                    1,000 print-ready codes in minutes - static, or dynamic when you need to edit and track them later.
                  </p>
                </div>

                <div className="space-y-3">
                  {[
                    'CSV, XLS, and XLSX upload',
                    'Up to 1,000 rows per upload',
                    'Static or dynamic output per upload',
                    'ZIP download and optional save to dashboard',
                  ].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">
                  <Link href="/pricing">
                    <Button size="lg" className="w-full px-8 py-4 text-lg sm:w-auto">
                      View Business Plan
                    </Button>
                  </Link>
                  <Link href="/signup">
                    <Button variant="outline" size="lg" className="w-full px-8 py-4 text-lg sm:w-auto">
                      Sign Up
                    </Button>
                  </Link>
                </div>
              </div>

              <div className="relative">
                <Card className="p-6 shadow-2xl">
                  <h3 className="mb-4 text-lg font-semibold">Spreadsheet to ZIP workflow</h3>
                  <div className="mb-4 rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-8 text-center">
                    <p className="font-medium text-gray-700">products.xlsx</p>
                    <p className="text-sm text-gray-500">Upload, map, preview, generate</p>
                  </div>
                  <div className="mb-4 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="grid grid-cols-4 gap-2">
                    {[1, 2, 3, 4, 5, 6, 7, 8].map((item) => (
                      <div
                        key={item}
                        className="flex aspect-square items-center justify-center rounded bg-gray-200 text-xs text-gray-500"
                      >
                        QR {item}
                      </div>
                    ))}
                  </div>
                  <p className="mt-4 text-center text-sm text-gray-600">
                    Static for large print batches. Dynamic when you need tracking.
                  </p>
                </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">
                  Up to 1,000 rows
                </div>
              </div>
            </div>
          </div>
        </section>

        <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <AnswerFirstBlock
            whatIsIt="QR Master bulk creation is a spreadsheet-driven Business-plan workflow for generating up to 1,000 static QR codes in one upload, or up to 500 dynamic ones that stay editable and trackable after print."
            whenToUse={[
              'You need many QR codes from one spreadsheet instead of one-by-one creation',
              'You want SVG files downloaded together as a ZIP archive',
              'You are preparing labels, inserts, event materials, or other repeatable print batches',
            ]}
            comparison={{
              leftTitle: 'Single-code workflow',
              rightTitle: 'Bulk workflow',
              items: [
                { label: 'Spreadsheet upload', value: true, text: 'Manual entry' },
                { label: 'Batch generation', value: true, text: 'One at a time' },
                { label: 'Output format', value: true, text: 'Single export' },
              ],
            }}
            howTo={{
              steps: [
                'Prepare a CSV, XLS, or XLSX file with one row per QR code',
                'Upload the file and map the title and content columns',
                'Preview the batch, then generate and download the QR codes as a ZIP or save them to the dashboard',
              ],
            }}
          />
        </div>

        <div className="container mx-auto max-w-5xl px-4 pb-2 sm:px-6 lg:px-8">
          <p className="text-xs text-gray-400 italic px-1">
            By Timo Knuth, QR Master · Last updated: June 2025
          </p>
        </div>

        <section className="bg-white py-16">
          <div className="container mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
            <div className="mb-10 max-w-3xl">
              <p className="mb-3 text-sm font-semibold uppercase tracking-wider text-green-600">
                Excel, CSV, and Google Sheets
              </p>
              <h2 className="text-3xl font-bold text-gray-900">
                Batch QR code generation from spreadsheet rows
              </h2>
              <p className="mt-4 text-lg leading-relaxed text-gray-600">
                Use QR Master as a bulk QR code generator when your source data
                already lives in Excel, a CSV export, or Google Sheets. Keep one
                row per QR code, map the columns, preview the batch, then export
                the generated SVG files together.
              </p>
            </div>

            <div className="grid gap-6 md:grid-cols-3">
              {[
                {
                  title: '1. Prepare columns',
                  body: 'Use columns such as title, URL, SKU, campaign, or location. The content column is what the QR code encodes.',
                },
                {
                  title: '2. Export clean data',
                  body: 'Save Excel as XLSX or export Google Sheets to CSV. Avoid merged cells and keep one QR code per row.',
                },
                {
                  title: '3. Generate the batch',
                  body: 'Upload the file, map title and content, preview the rows, and download the finished QR codes as a ZIP.',
                },
              ].map((step) => (
                <Card key={step.title} className="p-6">
                  <h3 className="mb-2 text-xl font-semibold text-gray-900">
                    {step.title}
                  </h3>
                  <p className="text-gray-600">{step.body}</p>
                </Card>
              ))}
            </div>
          </div>
        </section>

        <div className="container mx-auto max-w-5xl px-4 pb-8 sm:px-6 lg:px-8">
          <FAQSection items={faqItems} title="Bulk QR 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 the current bulk flow supports</h2>
              <p className="mx-auto max-w-3xl text-xl text-gray-600">
                This section stays aligned with the actual Business-plan bulk creation experience in the app.
              </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="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">Example input content</h2>
              <p className="mx-auto max-w-3xl text-xl text-gray-600">
                The current workflow maps a title column and a content column. What you encode in the content field is up to the row data you provide.
              </p>
            </div>

            <div className="grid gap-6 md:grid-cols-2">
              {inputExamples.map((example) => (
                <Card key={example.title} className="p-6">
                  <h3 className="mb-3 text-xl font-semibold text-gray-900">{example.title}</h3>
                  <div className="mb-3 rounded-lg bg-gray-50 p-3">
                    <code className="break-all text-sm text-gray-800">{example.content}</code>
                  </div>
                  <p className="text-gray-600">{example.note}</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 bulk generation fits best</h2>
              <p className="mx-auto max-w-3xl text-xl text-gray-600">
                Bulk creation is strongest when one spreadsheet feeds a real print, labeling, or operational workflow.
              </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-6 text-gray-600">{useCase.description}</p>
                  <ul className="space-y-2">
                    {useCase.points.map((point) => (
                      <li key={point} 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">{point}</span>
                      </li>
                    ))}
                  </ul>
                </Card>
              ))}
            </div>
          </div>
        </section>

        <GrowthLinksSection
          eyebrow="Bulk-ready workflows"
          title="Where bulk QR creation becomes operationally useful"
          description="Bulk generation is strongest when one spreadsheet feeds a real deployment workflow across packaging, events, labels, or repeated print runs."
          links={relatedUseCaseLinks}
          pageType="commercial"
          cluster="bulk-qr"
        />

        <section className="bg-gradient-to-r from-green-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">Generate bulk QR codes without one-by-one setup</h2>
            <p className="mb-8 text-xl text-green-100">
              One spreadsheet in, a full batch out. Static up to 1,000, or dynamic and trackable up to 500 on Business.
            </p>
            <div className="flex flex-col justify-center gap-4 sm:flex-row">
              <Link href="/pricing">
                <Button
                  size="lg"
                  variant="secondary"
                  className="w-full bg-white px-8 py-4 text-lg text-green-600 hover:bg-gray-100 sm:w-auto"
                >
                  View Business Plan
                </Button>
              </Link>
              <Link href="/signup">
                <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"
                >
                  Sign Up
                </Button>
              </Link>
            </div>
          </div>
        </section>
      </div>
    </>
  );
}