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 - Create QR Codes from a Spreadsheet',
  },
  description:
    'Generate up to 1,000 static QR codes from CSV or Excel files in the QR Master Business plan. Upload, preview, download as ZIP, or save the batch to your dashboard.',
  keywords:
    'bulk qr code generator, qr code from excel, csv qr code generator, bulk qr codes, 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 - Create QR Codes from a Spreadsheet',
    description:
      'Generate up to 1,000 static QR codes from CSV or Excel files in the QR Master Business plan.',
    url: 'https://www.qrmaster.net/bulk-qr-code-generator',
    type: 'website',
    images: ['/og-image.png'],
  },
  twitter: {
    title: 'Bulk QR Code Generator - Create QR Codes from a Spreadsheet',
    description:
      'Generate up to 1,000 static QR codes from CSV or Excel files in the QR Master Business plan.',
  },
};

const featureCards = [
  {
    title: 'Spreadsheet upload',
    description:
      'Upload CSV, XLS, or XLSX files and map the title and content columns before generating the batch.',
  },
  {
    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 QR output',
    description:
      'Bulk creation currently generates static QR codes. These codes do not include post-print editing or tracking.',
  },
  {
    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: '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 large static batches for packaging, inserts, manuals, or support labels when every unit needs a QR code.',
    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 when a static QR is enough.',
    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:
      'No. The current bulk creation flow generates static QR codes, so those codes do not include post-print editing or tracking.',
  },
  {
    question: 'What file formats can I upload?',
    answer:
      'The current flow accepts CSV, XLS, and XLSX files.',
  },
  {
    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',
  operatingSystem: 'Web Browser',
  offers: {
    '@type': 'Offer',
    price: '29',
    priceCurrency: 'EUR',
    availability: 'https://schema.org/InStock',
  },
  description:
    'Generate up to 1,000 static QR codes from CSV or Excel files in the QR Master Business plan.',
  featureList: [
    'CSV, XLS, and XLSX upload',
    'Up to 1,000 rows per upload',
    'Static 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">
                    Generate up to 1,000 static QR codes from a CSV or Excel file. Upload,
                    preview, download the batch as ZIP, or save it into your dashboard.
                  </p>
                </div>

                <div className="space-y-3">
                  {[
                    'CSV, XLS, and XLSX upload',
                    'Up to 1,000 rows per upload',
                    'Static QR code output',
                    '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">
                    Designed for bulk static output, not dynamic 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. It is useful when you need many printable QR codes quickly, not when you need post-print editing or tracking."
            whenToUse={[
              'You need many static 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>

        <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">
              Use the Business-plan bulk flow when you need a large static QR batch from a single spreadsheet.
            </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>
    </>
  );
}
