
import React from 'react';
import type { Metadata } from 'next';
import BarcodeGeneratorClient from './BarcodeGeneratorClient';
import { BarcodeGuide } from './BarcodeGuide';
import { Barcode as BarcodeIcon, Shield, Zap, Printer, Download, Share2, Sparkles, Sliders, Check } from 'lucide-react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';

// SEO Optimized Metadata
export const metadata: Metadata = {
    title: {
        absolute: 'Free Barcode Generator Online – EAN, UPC, Code 128',
    },
    description: 'Free online barcode generator for EAN-13, UPC-A, and Code 128 barcodes. Create scannable labels for retail, inventory, and logistics instantly. Download PNG or SVG — no signup required.',
    keywords: ['barcode generator', 'online barcode maker', 'create barcode free', 'ean-13 generator', 'upc-a generator', 'code 128 generator', 'barcode creator', 'printable barcodes'],
    alternates: {
        canonical: 'https://www.qrmaster.net/tools/barcode-generator',
        languages: {
            'x-default': 'https://www.qrmaster.net/tools/barcode-generator',
            en: 'https://www.qrmaster.net/tools/barcode-generator',
        },
    },
    openGraph: {
        title: 'Barcode Generator: Create EAN, UPC & Code 128',
        description: 'Barcode Generator: Create professional labels instantly. Free & Secured.',
        url: 'https://www.qrmaster.net/tools/barcode-generator',
        siteName: 'QR Master',
        locale: 'en_US',
        type: 'website',
        images: [{ url: '/barcode-generator-preview.png', width: 1200, height: 630 }],
    },
    twitter: {
        card: 'summary_large_image',
        title: 'Free Barcode Generator',
        description: 'Create custom barcodes in seconds. Download high-quality PNG/SVG.',
    },
    robots: {
        index: true,
        follow: true,
    },
};

// JSON-LD Structured Data
const jsonLd = {
    '@context': 'https://schema.org',
    '@graph': [
        generateSoftwareAppSchema(
            'Barcode Generator',
            'Generate custom printable barcodes instantly for EAN, UPC, Code 128 and more.',
            '/barcode-generator-preview.png',
            'UtilitiesApplication'
        ),
        {
            '@type': 'HowTo',
            name: 'How to Create a Barcode',
            datePublished: '2024-06-01',
            dateModified: '2025-06-01',
            author: {
                '@type': 'Person',
                name: 'Timo Knuth',
                url: 'https://www.qrmaster.net/authors/timo',
            },
            description: 'Create custom barcodes for products or inventory.',
            step: [
                {
                    '@type': 'HowToStep',
                    position: 1,
                    name: 'Enter Content',
                    text: 'Type or paste the numeric or alphanumeric data for your barcode.',
                },
                {
                    '@type': 'HowToStep',
                    position: 2,
                    name: 'Select Format',
                    text: 'Choose the appropriate barcode type (e.g., Code 128 for general use, EAN-13 for retail).',
                },
                {
                    '@type': 'HowToStep',
                    position: 3,
                    name: 'Customize Design',
                    text: 'Adjust the height and width of the barcode to fit your needs.',
                },
                {
                    '@type': 'HowToStep',
                    position: 4,
                    name: 'Toggle Text',
                    text: 'Decide if you want the human-readable value to appear below the barcode.',
                },
                {
                    '@type': 'HowToStep',
                    position: 5,
                    name: 'Download & Print',
                    text: 'Save your barcode as PNG or SVG and print it for labels or inventory.',
                },
            ],
            totalTime: 'PT20S',
        },
        generateFaqSchema({
            'What is a Barcode Generator?': {
                question: 'What is a Barcode Generator?',
                answer: 'A Barcode Generator is an online tool that converts numbers or text into scannable barcode images that can be used for products, labels, and inventory systems.',
            },
            'Is this barcode generator free to use?': {
                question: 'Is this barcode generator free to use?',
                answer: 'Yes, our online barcode generator is completely free to use with no hidden costs or sign-ups required. You can generate, download, and print barcodes instantly.',
            },
            'Which barcode format should I use?': {
                question: 'Which barcode format should I use?',
                answer: 'EAN-13 is standard for retail in Europe/Global. UPC-A is standard for retail in USA/Canada. Code 128 is best for logistics and internal tracking as it supports letters and numbers.',
            },
            'Can I download barcodes in vector format (SVG)?': {
                question: 'Can I download barcodes in vector format (SVG)?',
                answer: 'Yes! We offer SVG downloads. SVG files are vector-based, meaning they can be scaled to any size without losing quality—perfect for professional product packaging.',
            },
            'How do I generate a barcode online?': {
                question: 'How do I generate a barcode online?',
                answer: 'To generate a barcode online, enter your product number or text, select the desired barcode format (such as EAN-13 or Code 128), and click the generate button. The barcode will be created instantly.',
            },
            'Are generated barcodes scannable?': {
                question: 'Are generated barcodes scannable?',
                answer: 'Yes, barcodes generated with a proper barcode generator are fully scannable. We generate standard-compliant barcodes readable by any standard optical or laser barcode scanner.',
            },
            'Can I use these barcodes for Amazon (EAN/UPC)?': {
                question: 'Can I use these barcodes for Amazon (EAN/UPC)?',
                answer: 'You can generate the image for Amazon here if you already have your EAN/UPC number. However, you cannot "create" a valid global EAN number here—you must purchase those official numbers from GS1 to sell on major platforms like Amazon.',
            },
            'What is the difference between a barcode and a QR code?': {
                question: 'What is the difference between a barcode and a QR code?',
                answer: 'A barcode stores data horizontally (1D) and is mainly used for product IDs. A QR code stores data in 2D (matrix) and can hold much more information, such as URLs, vCards, or WiFi credentials.',
            },
        }),
    ],
};

export default function BarcodeGeneratorPage() {
    return (
        <>
            <script
                type="application/ld+json"
                dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
            />
            <ToolBreadcrumb toolName="Barcode Generator" toolSlug="barcode-generator" />

            <div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>

                {/* HERO SECTION */}
                <section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden bg-slate-900">
                    <div className="absolute inset-0 opacity-10">
                        {/* Barcode Pattern */}
                        <svg className="w-full h-full" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
                            <defs>
                                <pattern id="barcode_pattern" width="60" height="60" patternUnits="userSpaceOnUse">
                                    <path d="M5 0 V 60 M15 0 V 60 M20 0 V 60 M35 0 V 60 M40 0 V 60 M55 0 V 60" stroke="white" strokeWidth="2" strokeOpacity="0.5" />
                                </pattern>
                            </defs>
                            <rect width="100%" height="100%" fill="url(#barcode_pattern)" />
                        </svg>
                    </div>

                    <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
                        <div className="text-center lg:text-left">
                            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
                                <span className="flex h-2 w-2 relative">
                                    <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
                                    <span className="relative inline-flex rounded-full h-2 w-2 bg-blue-400"></span>
                                </span>
                                Free Tool — Professional & Fast
                            </div>

                            <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
                                Free Online <span className="text-blue-400">Barcode Generator</span>
                            </h1>

                            <p className="text-lg md:text-xl text-slate-400 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
                                A <strong>barcode generator</strong> converts any number or text into a scannable barcode image — ready to download, print, and use on products, labels, or inventory systems.
                                <span className="text-white block sm:inline mt-2 sm:mt-0"> Supports EAN-13, UPC-A, and Code 128. No signup required.</span>
                            </p>

                            <div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
                                <div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
                                    <Check className="w-4 h-4 text-blue-400" />
                                    Retail Ready
                                </div>
                                <div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
                                    <Check className="w-4 h-4 text-blue-400" />
                                    Vector SVG Export
                                </div>
                                <div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
                                    <Check className="w-4 h-4 text-blue-400" />
                                    No Registration
                                </div>
                            </div>
                        </div>

                        {/* Visual Abstract */}
                        <div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
                            <div className="absolute w-[500px] h-[500px] bg-blue-500/10 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />

                            <div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform rotate-2 hover:-rotate-1 transition-all duration-700 group">
                                <div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent rounded-3xl" />

                                <div className="w-full bg-gradient-to-br from-blue-400 to-indigo-600 rounded-xl shadow-lg p-5 mb-6 relative overflow-hidden text-white">
                                    <div className="flex justify-between items-start mb-4">
                                        <BarcodeIcon className="w-8 h-8 opacity-80" />
                                        <div className="bg-white/20 px-2 py-1 rounded text-xs font-bold uppercase tracking-wider">Label</div>
                                    </div>
                                    <div className="text-xl font-bold tracking-wider mb-1">PROD-98234</div>
                                    <div className="text-xs opacity-70">Inventory ID</div>
                                </div>

                                <div className="w-48 h-32 bg-white rounded-xl p-4 shadow-inner relative overflow-hidden flex flex-col items-center justify-center">
                                    <div className="w-full h-16 bg-black flex gap-1 mb-2">
                                        {[2, 4, 1, 3, 2, 1, 4, 2, 1, 3].map((w, i) => (
                                            <div key={i} className="bg-black flex-1" style={{ flex: w }} />
                                        ))}
                                    </div>
                                    <div className="text-[10px] font-mono font-bold tracking-widest uppercase">98234001A</div>
                                </div>

                                {/* Floating Badge */}
                                <div className="absolute -bottom-6 -right-6 bg-slate-900 border border-white/10 py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
                                    <div className="bg-blue-500/20 p-2 rounded-full">
                                        <Printer className="w-5 h-5 text-blue-500" />
                                    </div>
                                    <div className="text-left">
                                        <div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Ready</div>
                                        <div className="text-sm font-bold text-white">Print Instantly</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                {/* GENERATOR SECTION */}
                <section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
                    <BarcodeGeneratorClient />
                </section>

                {/* HOW IT WORKS */}
                <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
                    <div className="max-w-4xl mx-auto">
                        <h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
                            How Our Barcode Generator Works
                        </h2>

                        <div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
                            <article className="text-center">
                                <div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
                                    <Sliders className="w-6 h-6 text-white" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">1. Configure</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">
                                    Enter your data and select the format.
                                </p>
                            </article>

                            <article className="text-center">
                                <div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
                                    <Sparkles className="w-6 h-6 text-white" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">2. Customize</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">
                                    Adjust height, width and text display.
                                </p>
                            </article>

                            <article className="text-center">
                                <div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
                                    <Zap className="w-6 h-6 text-white" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">3. Preview</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">
                                    See your barcode update in real-time.
                                </p>
                            </article>

                            <article className="text-center">
                                <div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
                                    <Download className="w-6 h-6 text-white" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">4. Download</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">
                                    Save as professional PNG or SVG.
                                </p>
                            </article>

                            <article className="text-center">
                                <div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
                                    <Printer className="w-6 h-6 text-white" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">5. Print</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">
                                    Print labels directly from your browser.
                                </p>
                            </article>
                        </div>
                    </div>
                </section>

                {/* RELATED TOOLS */}
                <RelatedTools />

                {/* SEO GUIDE */}
                <BarcodeGuide />

            </div>
        </>
    );
}


