import React from 'react';
import type { Metadata } from 'next';
import Link from 'next/link';
import { Button } from '@/components/ui/Button';
import { Card } from '@/components/ui/Card';
import SeoJsonLd from '@/components/SeoJsonLd';
import Breadcrumbs, { BreadcrumbItem } from '@/components/Breadcrumbs';
import { breadcrumbSchema } from '@/lib/schema';

export const metadata: Metadata = {
  title: 'Bulk QR Code Generator | Create from Excel | QR Master',
  description: 'Generate hundreds of QR codes instantly from Excel/CSV. Create URLs, vCards, and text codes in bulk. Perfect for inventory, events, and product tagging.',
  keywords: 'bulk qr code generator, batch qr code, qr code from excel, csv qr code generator, mass qr code generation, bulk vcard qr code, bulk qr codes free',
  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 1000s of QR Codes from Excel',
    description: 'Generate hundreds of QR codes at once from CSV or Excel files. Perfect for products, events, and inventory.',
    url: 'https://www.qrmaster.net/bulk-qr-code-generator',
    type: 'website',
    images: [
      {
        url: 'https://www.qrmaster.net/og-image.png',
        width: 1200,
        height: 630,
        alt: 'Bulk QR Code Generator - QR Master',
      },
    ],
  },
  twitter: {
    title: 'Bulk QR Code Generator - Create 1000s of QR Codes from Excel',
    description: 'Generate hundreds of QR codes at once from CSV or Excel files. Perfect for products, events, and inventory.',
  },
};

export default function BulkQRCodeGeneratorPage() {
  const qrCodeTypes = [
    {
      type: 'URL',
      icon: '🌐',
      title: 'Website Links',
      description: 'Generate QR codes for websites, landing pages, and online content',
      format: 'https://example.com/product',
      example: 'Product Page,URL,https://example.com/product',
    },
    {
      type: 'VCARD',
      icon: '👤',
      title: 'Contact Cards',
      description: 'Create vCard QR codes with contact information',
      format: 'FirstName,LastName,Email,Phone,Organization,Title',
      example: 'John Doe,VCARD,John,Doe,john' + '@' + 'example.com,+1234567890,Company Inc,CEO',
    },
    {
      type: 'GEO',
      icon: '📍',
      title: 'Locations',
      description: 'Generate location QR codes with GPS coordinates',
      format: 'latitude,longitude,label',
      example: 'Office Location,GEO,37.7749,-122.4194,Main Office',
    },
    {
      type: 'PHONE',
      icon: '📞',
      title: 'Phone Numbers',
      description: 'Create QR codes that dial phone numbers',
      format: '+1234567890',
      example: 'Support Hotline,PHONE,+1234567890',
    },
    {
      type: 'TEXT',
      icon: '📝',
      title: 'Plain Text',
      description: 'Generate QR codes with any text content',
      format: 'Your text content here',
      example: 'Serial Number,TEXT,SN-12345-ABCDE',
    },
  ];

  const bulkFeatures = [
    {
      icon: '📊',
      title: 'Excel & CSV Import',
      description: 'Upload Excel or CSV files to generate hundreds of QR codes in seconds. Simple column mapping.',
    },
    {
      icon: '⚡',
      title: 'Fast Processing',
      description: 'Generate up to 1000 QR codes in under a minute. Optimized for speed and reliability.',
    },
    {
      icon: '🎨',
      title: 'Unified Branding',
      description: 'Apply your logo, colors, and design to all QR codes at once. Consistent brand identity.',
    },
    {
      icon: '📦',
      title: 'Batch Download',
      description: 'Download all QR codes as a ZIP file with custom filenames. Organized and ready to use.',
    },
    {
      icon: '📈',
      title: 'Individual Tracking',
      description: 'Track each QR code separately. See which products or locations perform best.',
    },
    {
      icon: '🔄',
      title: 'Update in Bulk',
      description: 'Edit multiple QR codes at once. Save time when updating campaigns or product info.',
    },
  ];

  const useCases = [
    {
      title: 'Product Labels',
      icon: '🏷️',
      description: 'Generate unique QR codes for each product SKU. Link to manuals, warranty info, or product pages.',
      stats: ['1000+ products', 'Individual tracking', 'Custom naming'],
    },
    {
      title: 'Event Tickets',
      icon: '🎟️',
      description: 'Create unique QR codes for every attendee. Enable fast check-ins and track attendance.',
      stats: ['Unique per ticket', 'Real-time validation', 'Analytics dashboard'],
    },
    {
      title: 'Asset Management',
      icon: '💼',
      description: 'Tag equipment, furniture, and assets with unique QR codes. Track location and maintenance.',
      stats: ['Equipment tracking', 'Maintenance logs', 'Location history'],
    },
    {
      title: 'Marketing Campaigns',
      icon: '📢',
      description: 'Generate codes for different locations or channels. Track which campaigns perform best.',
      stats: ['Location-specific', 'Campaign tracking', 'ROI measurement'],
    },
  ];

  const howItWorks = [
    {
      step: 1,
      title: 'Prepare Your File',
      description: 'Create an Excel or CSV file with your URLs, names, and any custom data.',
      example: 'Product Name | URL | SKU',
    },
    {
      step: 2,
      title: 'Upload & Map',
      description: 'Upload your file and map columns to QR code fields. Preview before generating.',
      example: 'Map columns: Name → Title, URL → Destination',
    },
    {
      step: 3,
      title: 'Customize Design',
      description: 'Apply logo, colors, and branding to all QR codes at once. Consistent look.',
      example: 'Add logo, set colors, choose frame',
    },
    {
      step: 4,
      title: 'Generate & Download',
      description: 'Click generate and download all QR codes as PNG files in a ZIP archive.',
      example: 'product-001.png, product-002.png, ...',
    },
  ];

  const fileFormat = [
    { column: 'name', description: 'QR code title/label', required: true },
    { column: 'url', description: 'Destination URL', required: true },
    { column: 'description', description: 'Optional description', required: false },
    { column: 'tags', description: 'Comma-separated tags', required: false },
  ];

  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: '0',
      priceCurrency: 'USD',
      availability: 'https://schema.org/InStock',
    },
    aggregateRating: {
      '@type': 'AggregateRating',
      ratingValue: '4.8',
      ratingCount: '980',
    },
    description: 'Generate hundreds of QR codes at once from CSV or Excel files. Perfect for products, events, inventory management with custom branding.',
    featureList: [
      'Excel and CSV file import',
      'Generate up to 1000 QR codes at once',
      'Unified branding and design',
      'Batch download as ZIP',
      'Individual tracking per code',
      'Bulk update capabilities',
      'Custom filenames',
      'High-resolution exports',
    ],
  };

  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 Excel',
    description: 'Learn how to create hundreds of QR codes from an Excel or CSV file',
    totalTime: 'PT10M',
    step: [
      {
        '@type': 'HowToStep',
        position: 1,
        name: 'Prepare Excel File',
        text: 'Create an Excel or CSV file with columns for name, URL, and any custom data you need',
      },
      {
        '@type': 'HowToStep',
        position: 2,
        name: 'Upload File',
        text: 'Log into QR Master and upload your file to the bulk generator',
        url: 'https://www.qrmaster.net/bulk-creation',
      },
      {
        '@type': 'HowToStep',
        position: 3,
        name: 'Map Columns',
        text: 'Map your file columns to QR code fields (name, URL, description, etc.)',
      },
      {
        '@type': 'HowToStep',
        position: 4,
        name: 'Customize Design',
        text: 'Apply your logo, brand colors, and design settings to all QR codes at once',
      },
      {
        '@type': 'HowToStep',
        position: 5,
        name: 'Generate and Download',
        text: 'Click generate and download all QR codes as a ZIP file with custom filenames',
      },
    ],
  };

  const faqSchema = {
    '@context': 'https://schema.org',
    '@type': 'FAQPage',
    '@id': 'https://www.qrmaster.net/bulk-qr-code-generator#faq',
    mainEntity: [
      {
        '@type': 'Question',
        name: 'How many QR codes can I generate at once?',
        acceptedAnswer: {
          '@type': 'Answer',
          text: 'With QR Master, you can generate up to 1000 QR codes at once from a CSV or Excel file. For larger volumes, contact our enterprise team.',
        },
      },
      {
        '@type': 'Question',
        name: 'What file formats are supported?',
        acceptedAnswer: {
          '@type': 'Answer',
          text: 'QR Master supports CSV (.csv), Excel (.xlsx, .xls), and other spreadsheet formats. Simply ensure your file has columns for name and destination URL.',
        },
      },
      {
        '@type': 'Question',
        name: 'Can I apply my branding to all QR codes?',
        acceptedAnswer: {
          '@type': 'Answer',
          text: 'Yes, you can apply your logo, brand colors, and custom design to all QR codes in your bulk generation. All codes will have consistent branding.',
        },
      },
      {
        '@type': 'Question',
        name: 'Are bulk generated QR codes trackable?',
        acceptedAnswer: {
          '@type': 'Answer',
          text: 'Yes, each QR code generated in bulk is individually trackable. You can see scans, locations, and analytics for every single code in your dashboard.',
        },
      },
    ],
  };

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

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

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

                <p className="text-xl text-gray-600 leading-relaxed">
                  Create hundreds or thousands of QR codes from Excel or CSV files. Generate URLs, vCards, locations, phone numbers, and text QR codes in bulk. Perfect for products, events, inventory, and marketing campaigns.
                </p>

                <div className="space-y-3">
                  {[
                    'Upload Excel or CSV files',
                    'Generate URLs, vCards, locations & more',
                    'Custom branding on all codes',
                    'Download as organized ZIP',
                  ].map((feature, index) => (
                    <div key={index} className="flex items-center space-x-3">
                      <div className="flex-shrink-0 w-5 h-5 bg-green-500 rounded-full flex items-center justify-center">
                        <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
                          <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                        </svg>
                      </div>
                      <span className="text-gray-700">{feature}</span>
                    </div>
                  ))}
                </div>

                <div className="flex flex-col sm:flex-row gap-4">
                  <Link href="/signup">
                    <Button size="lg" className="text-lg px-8 py-4 w-full sm:w-auto">
                      Start Bulk Generation
                    </Button>
                  </Link>
                  <Link href="/signup">
                    <Button variant="outline" size="lg" className="text-lg px-8 py-4 w-full sm:w-auto">
                      Try Single QR First
                    </Button>
                  </Link>
                </div>
              </div>

              {/* Visual Example */}
              <div className="relative">
                <Card className="p-6 shadow-2xl">
                  <h3 className="font-semibold text-lg mb-4">Upload Your File</h3>
                  <div className="bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg p-8 text-center mb-4">
                    <div className="text-4xl mb-2">📊</div>
                    <p className="text-gray-600 font-medium mb-1">products.xlsx</p>
                    <p className="text-sm text-gray-500">1,247 rows ready</p>
                  </div>
                  <div className="flex items-center justify-center mb-4">
                    <svg className="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
                    </svg>
                  </div>
                  <div className="grid grid-cols-4 gap-2">
                    {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
                      <div key={i} className="aspect-square bg-gray-200 rounded flex items-center justify-center text-xs text-gray-500">
                        QR {i}
                      </div>
                    ))}
                  </div>
                  <p className="text-center text-sm text-gray-600 mt-4">
                    + 1,239 more codes
                  </p>
                </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">
                  1000s at Once!
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Supported QR Code Types */}
        <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">
                Supported QR Code Types
              </h2>
              <p className="text-xl text-gray-600 max-w-3xl mx-auto">
                Generate multiple types of QR codes from your CSV or Excel file. Each type has its own format requirements.
              </p>
            </div>

            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
              {qrCodeTypes.map((qrType, index) => (
                <Card key={index} className="p-6 hover:shadow-lg transition-shadow">
                  <div className="flex items-center space-x-3 mb-4">
                    <div className="text-3xl">{qrType.icon}</div>
                    <div>
                      <h3 className="text-lg font-semibold text-gray-900">
                        {qrType.title}
                      </h3>
                      <span className="text-xs font-mono text-gray-500">{qrType.type}</span>
                    </div>
                  </div>
                  <p className="text-gray-600 mb-4 text-sm">
                    {qrType.description}
                  </p>
                  <div className="bg-gray-50 rounded-lg p-3 mb-3">
                    <p className="text-xs font-semibold text-gray-700 mb-1">Format:</p>
                    <code className="text-xs text-gray-900 break-all">{qrType.format}</code>
                  </div>
                  <div className="bg-blue-50 rounded-lg p-3">
                    <p className="text-xs font-semibold text-blue-700 mb-1">CSV Example:</p>
                    <code className="text-xs text-blue-900 break-all">{qrType.example}</code>
                  </div>
                </Card>
              ))}
            </div>

            <div className="mt-12 bg-gradient-to-r from-blue-50 to-purple-50 rounded-lg p-8">
              <h3 className="text-xl font-bold text-gray-900 mb-4 text-center">
                📥 CSV/Excel File Format
              </h3>
              <p className="text-gray-600 text-center mb-6">
                Your file must have at least these three columns: <code className="bg-white px-2 py-1 rounded">title</code>, <code className="bg-white px-2 py-1 rounded">contentType</code>, and <code className="bg-white px-2 py-1 rounded">content</code>
              </p>
              <div className="bg-white rounded-lg p-6 shadow-sm overflow-x-auto">
                <table className="w-full text-sm">
                  <thead>
                    <tr className="border-b-2 border-gray-300">
                      <th className="text-left py-2 px-3 font-semibold text-gray-700">title</th>
                      <th className="text-left py-2 px-3 font-semibold text-gray-700">contentType</th>
                      <th className="text-left py-2 px-3 font-semibold text-gray-700">content</th>
                      <th className="text-left py-2 px-3 font-semibold text-gray-700">tags</th>
                    </tr>
                  </thead>
                  <tbody className="font-mono text-xs">
                    <tr className="border-b border-gray-200">
                      <td className="py-2 px-3">Product Page</td>
                      <td className="py-2 px-3">URL</td>
                      <td className="py-2 px-3">https://example.com/product</td>
                      <td className="py-2 px-3">product,shop</td>
                    </tr>
                    <tr className="border-b border-gray-200">
                      <td className="py-2 px-3">John Doe</td>
                      <td className="py-2 px-3">VCARD</td>
                      <td className="py-2 px-3">John,Doe,john{'@'}example.com,+1234567890,Company,CEO</td>
                      <td className="py-2 px-3">contact</td>
                    </tr>
                    <tr className="border-b border-gray-200">
                      <td className="py-2 px-3">Office Location</td>
                      <td className="py-2 px-3">GEO</td>
                      <td className="py-2 px-3">37.7749,-122.4194,Main Office</td>
                      <td className="py-2 px-3">location</td>
                    </tr>
                    <tr className="border-b border-gray-200">
                      <td className="py-2 px-3">Support Hotline</td>
                      <td className="py-2 px-3">PHONE</td>
                      <td className="py-2 px-3">+1234567890</td>
                      <td className="py-2 px-3">support</td>
                    </tr>
                    <tr>
                      <td className="py-2 px-3">Serial Number</td>
                      <td className="py-2 px-3">TEXT</td>
                      <td className="py-2 px-3">SN-12345-ABCDE</td>
                      <td className="py-2 px-3">product,serial</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </section>

        {/* 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 Bulk Generation Features
              </h2>
              <p className="text-xl text-gray-600 max-w-3xl mx-auto">
                Everything you need to create and manage QR codes at scale
              </p>
            </div>

            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
              {bulkFeatures.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>

        {/* How It Works */}
        <section className="py-20">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-6xl">
            <div className="text-center mb-16">
              <h2 className="text-4xl font-bold text-gray-900 mb-4">
                How Bulk QR Generation Works
              </h2>
              <p className="text-xl text-gray-600">
                Simple 4-step process to create hundreds of QR codes
              </p>
            </div>

            <div className="space-y-8">
              {howItWorks.map((item, index) => (
                <Card key={index} className="p-8">
                  <div className="flex items-start space-x-6">
                    <div className="flex-shrink-0 w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center">
                      <span className="text-2xl font-bold text-primary-600">{item.step}</span>
                    </div>
                    <div className="flex-1">
                      <h3 className="text-2xl font-bold text-gray-900 mb-2">
                        {item.title}
                      </h3>
                      <p className="text-gray-600 mb-3">
                        {item.description}
                      </p>
                      <div className="bg-blue-50 border-l-4 border-blue-500 p-3">
                        <p className="text-sm text-gray-700 font-mono">
                          {item.example}
                        </p>
                      </div>
                    </div>
                  </div>
                </Card>
              ))}
            </div>
          </div>
        </section>

        {/* File Format Guide */}
        <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">
                CSV/Excel File Format
              </h2>
              <p className="text-xl text-gray-600">
                Simple file structure for bulk QR code generation
              </p>
            </div>

            <Card className="overflow-hidden shadow-xl mb-8">
              <table className="w-full">
                <thead className="bg-gray-100">
                  <tr>
                    <th className="px-6 py-4 text-left text-gray-900 font-semibold">Column</th>
                    <th className="px-6 py-4 text-left text-gray-900 font-semibold">Description</th>
                    <th className="px-6 py-4 text-center text-gray-900 font-semibold">Required</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-200">
                  {fileFormat.map((field, index) => (
                    <tr key={index}>
                      <td className="px-6 py-4">
                        <code className="bg-gray-100 px-2 py-1 rounded text-sm font-mono text-gray-900">
                          {field.column}
                        </code>
                      </td>
                      <td className="px-6 py-4 text-gray-600">{field.description}</td>
                      <td className="px-6 py-4 text-center">
                        {field.required ? (
                          <span className="text-red-500 font-semibold">Yes</span>
                        ) : (
                          <span className="text-gray-400">No</span>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </Card>

            <Card className="p-6 bg-blue-50 border border-blue-200">
              <h4 className="font-semibold text-gray-900 mb-2">Example CSV:</h4>
              <pre className="bg-white p-4 rounded border border-blue-200 overflow-x-auto text-sm font-mono">
                {`name,url,description,tags
Product A,https://example.com/product-a,Premium Widget,electronics,featured
Product B,https://example.com/product-b,Standard Widget,electronics
Product C,https://example.com/product-c,Budget Widget,electronics,sale`}
              </pre>
            </Card>
          </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">
                Bulk QR Code Use Cases
              </h2>
              <p className="text-xl text-gray-600 max-w-3xl mx-auto">
                Industries and scenarios where bulk generation shines
              </p>
            </div>

            <div className="grid md:grid-cols-2 gap-8">
              {useCases.map((useCase, index) => (
                <Card key={index} className="p-8">
                  <div className="flex items-start space-x-4">
                    <div className="text-4xl">{useCase.icon}</div>
                    <div className="flex-1">
                      <h3 className="text-2xl font-bold text-gray-900 mb-3">
                        {useCase.title}
                      </h3>
                      <p className="text-gray-600 mb-4">
                        {useCase.description}
                      </p>
                      <ul className="space-y-2">
                        {useCase.stats.map((stat, 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">{stat}</span>
                          </li>
                        ))}
                      </ul>
                    </div>
                  </div>
                </Card>
              ))}
            </div>
          </div>
        </section>

        {/* CTA Section */}
        {/* CTA Section */}
        <section className="py-24 bg-slate-900 relative overflow-hidden">
          {/* Background Decorations */}
          <div className="absolute top-0 right-0 -mr-20 -mt-20 w-96 h-96 bg-blue-500/20 rounded-full blur-3xl opacity-50" />
          <div className="absolute bottom-0 left-0 -ml-20 -mb-20 w-80 h-80 bg-green-500/20 rounded-full blur-3xl opacity-50" />

          <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl text-center relative z-10">
            <h2 className="text-4xl lg:text-5xl font-bold mb-6 text-white tracking-tight">
              Ready to Generate <span className="text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-blue-400">1000s of Codes?</span>
            </h2>
            <p className="text-xl mb-10 text-slate-300 leading-relaxed max-w-2xl mx-auto">
              Stop doing it manually. Upload your Excel file and get your QR codes in seconds. Professional, branded, and trackable.
            </p>
            <div className="flex flex-col sm:flex-row gap-5 justify-center">
              <Link href="/signup">
                <Button size="lg" className="text-lg px-8 py-6 h-auto w-full sm:w-auto bg-white text-slate-900 hover:bg-slate-50 font-bold shadow-xl shadow-blue-900/20 transition-all hover:-translate-y-1">
                  Start Bulk Generation
                </Button>
              </Link>
              <Link href="/pricing">
                <Button size="lg" variant="outline" className="text-lg px-8 py-6 h-auto w-full sm:w-auto border-slate-700 text-white hover:bg-slate-800 hover:border-slate-600 transition-all">
                  View Pricing
                </Button>
              </Link>
            </div>

            <p className="mt-8 text-sm text-slate-500">
              No credit card required for free trial.
            </p>
          </div>
        </section>
      </div>
    </>
  );
}