import { BookOpen, CheckCircle, TrendingUp } from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link';
import { FAQSection } from '@/components/aeo/FAQSection';
import { BarcodeFormatPicker } from './BarcodeFormatPicker';

export function BarcodeGuide() {
    return (
        <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white" id="guide">
            <div className="max-w-3xl mx-auto prose prose-slate prose-lg">

                <div className="flex items-center gap-3 mb-2 not-prose">
                    <div className="p-3 bg-blue-100/50 rounded-xl">
                        <BookOpen className="w-8 h-8 text-blue-600" />
                    </div>
                    <h2 className="text-3xl font-bold text-slate-900 m-0">
                        Barcode Generator – How Barcodes Work and Why They Matter
                    </h2>
                </div>
                <p className="text-xs text-slate-400 mb-8 not-prose">
                    By <strong className="text-slate-600">Timo Knuth</strong>, QR Master · Last updated: June 2025 · GS1-verified content
                </p>

                <p className="lead text-xl text-slate-600">
                    Barcodes are an essential part of modern commerce, logistics, and inventory management. A <strong>Barcode Generator</strong> allows businesses and individuals to create scannable barcodes quickly and efficiently for products, packaging, and internal systems. Whether you run an online shop, manage a warehouse, or sell products locally, understanding how barcodes work can save time and reduce errors.
                </p>
                <p>
                    In this article, you will learn what barcodes are, how they work, and how a <strong>Barcode Generator</strong> helps you create professional barcodes in seconds.
                </p>

                {/* SEO Image */}
                <div className="my-8 rounded-2xl overflow-hidden shadow-lg not-prose border border-slate-100">
                    <Image
                        src="/barcode-generator-preview.png"
                        alt="Free Online Barcode Generator Preview - Create EAN, UPC, and Code 128 Barcodes"
                        className="w-full h-64 sm:h-80 object-cover"
                        width={800}
                        height={320}
                        priority
                    />
                    <div className="bg-slate-50 p-4 text-sm text-slate-500 text-center border-t border-slate-100">
                        Use our <strong>free barcode generator</strong> to create scannable codes.
                    </div>
                </div>

                <h2>What Is a Barcode?</h2>
                <p>
                    A barcode is a visual representation of data that can be read by machines. It consists of vertical lines with different widths and spacing, which encode numbers or characters. When scanned with a barcode scanner or smartphone, the information is instantly translated into readable data.
                </p>
                <p>
                    Barcodes are commonly used to identify products, track inventory, manage logistics, and speed up checkout processes. They reduce manual input and significantly lower the risk of human error.
                </p>

                <h2>How Does a Barcode Generator Work?</h2>
                <p>
                    A Barcode Generator converts text or numeric input into a barcode format that scanners can read. The process is simple:
                </p>
                <ul className="list-none pl-0 space-y-4 not-prose my-8">
                    <li className="flex gap-4">
                        <div className="w-8 h-8 mt-1 rounded-full bg-slate-100 flex items-center justify-center shrink-0 text-slate-600 font-bold text-sm">1</div>
                        <div>
                            <strong className="text-slate-900 block mb-1">Input Data</strong>
                            <p className="text-slate-600 m-0 text-base">You enter a number or text (for example, a product ID).</p>
                        </div>
                    </li>
                    <li className="flex gap-4">
                        <div className="w-8 h-8 mt-1 rounded-full bg-slate-100 flex items-center justify-center shrink-0 text-slate-600 font-bold text-sm">2</div>
                        <div>
                            <strong className="text-slate-900 block mb-1">Select Format</strong>
                            <p className="text-slate-600 m-0 text-base">You select a barcode format such as EAN-13 or Code 128.</p>
                        </div>
                    </li>
                    <li className="flex gap-4">
                        <div className="w-8 h-8 mt-1 rounded-full bg-slate-100 flex items-center justify-center shrink-0 text-slate-600 font-bold text-sm">3</div>
                        <div>
                            <strong className="text-slate-900 block mb-1">Generate</strong>
                            <p className="text-slate-600 m-0 text-base">The generator creates a scannable barcode image instantly.</p>
                        </div>
                    </li>
                    <li className="flex gap-4">
                        <div className="w-8 h-8 mt-1 rounded-full bg-slate-100 flex items-center justify-center shrink-0 text-slate-600 font-bold text-sm">4</div>
                        <div>
                            <strong className="text-slate-900 block mb-1">Download</strong>
                            <p className="text-slate-600 m-0 text-base">You download or print the barcode for use.</p>
                        </div>
                    </li>
                </ul>
                <p>
                    A modern <strong>Barcode Generator</strong> works directly in the browser and does not require additional software.
                </p>

                <h2>Common Types of Barcodes</h2>
                <p>
                    Different barcode formats are used for different purposes. Choosing the right one is important for compatibility and scanning accuracy.
                </p>

                <div className="not-prose overflow-x-auto my-8">
                    <table className="w-full text-sm border-collapse rounded-xl overflow-hidden border border-slate-200">
                        <thead>
                            <tr className="bg-slate-900 text-white">
                                <th className="text-left p-3 font-semibold">Format</th>
                                <th className="text-left p-3 font-semibold">Use Case</th>
                                <th className="text-left p-3 font-semibold">Digits / Chars</th>
                                <th className="text-left p-3 font-semibold">Region</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr className="border-t border-slate-100 bg-white">
                                <td className="p-3 font-bold text-blue-700">EAN-13</td>
                                <td className="p-3 text-slate-600">Retail products, supermarkets</td>
                                <td className="p-3 text-slate-500 font-mono text-xs">13 numeric</td>
                                <td className="p-3 text-slate-600">Europe / Global</td>
                            </tr>
                            <tr className="border-t border-slate-100 bg-slate-50">
                                <td className="p-3 font-bold text-indigo-700">UPC-A</td>
                                <td className="p-3 text-slate-600">Retail products (North America)</td>
                                <td className="p-3 text-slate-500 font-mono text-xs">12 numeric</td>
                                <td className="p-3 text-slate-600">USA / Canada</td>
                            </tr>
                            <tr className="border-t border-slate-100 bg-white">
                                <td className="p-3 font-bold text-emerald-700">Code 128</td>
                                <td className="p-3 text-slate-600">Shipping, logistics, inventory</td>
                                <td className="p-3 text-slate-500 font-mono text-xs">Variable alphanumeric</td>
                                <td className="p-3 text-slate-600">Universal</td>
                            </tr>
                            <tr className="border-t border-slate-100 bg-slate-50">
                                <td className="p-3 font-bold text-orange-700">Code 39</td>
                                <td className="p-3 text-slate-600">Industrial, automotive, defense</td>
                                <td className="p-3 text-slate-500 font-mono text-xs">Variable alphanumeric</td>
                                <td className="p-3 text-slate-600">Industrial</td>
                            </tr>
                            <tr className="border-t border-slate-100 bg-white">
                                <td className="p-3 font-bold text-purple-700">MSI</td>
                                <td className="p-3 text-slate-600">Shelf / bin labeling, warehouse</td>
                                <td className="p-3 text-slate-500 font-mono text-xs">Variable numeric</td>
                                <td className="p-3 text-slate-600">Retail / Warehouse</td>
                            </tr>
                            <tr className="border-t border-slate-100 bg-slate-50">
                                <td className="p-3 font-bold text-red-700">Pharmacode</td>
                                <td className="p-3 text-slate-600">Pharmaceutical packaging</td>
                                <td className="p-3 text-slate-500 font-mono text-xs">3–131071 numeric</td>
                                <td className="p-3 text-slate-600">Pharma</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <BarcodeFormatPicker />

                <h2>Why Use a Barcode Generator?</h2>
                <p>Using a Barcode Generator offers several advantages:</p>
                <div className="not-prose grid gap-4 mb-8">
                    <div className="flex gap-4 items-start">
                        <CheckCircle className="w-5 h-5 text-green-500 mt-1 shrink-0" />
                        <div>
                            <h5 className="font-bold text-slate-900 m-0">Speed</h5>
                            <p className="text-slate-600 text-sm m-0">Create barcodes instantly without technical knowledge.</p>
                        </div>
                    </div>
                    <div className="flex gap-4 items-start">
                        <CheckCircle className="w-5 h-5 text-green-500 mt-1 shrink-0" />
                        <div>
                            <h5 className="font-bold text-slate-900 m-0">Accuracy</h5>
                            <p className="text-slate-600 text-sm m-0">Reduce manual data entry errors.</p>
                        </div>
                    </div>
                    <div className="flex gap-4 items-start">
                        <CheckCircle className="w-5 h-5 text-green-500 mt-1 shrink-0" />
                        <div>
                            <h5 className="font-bold text-slate-900 m-0">Flexibility</h5>
                            <p className="text-slate-600 text-sm m-0">Generate barcodes for different formats and use cases.</p>
                        </div>
                    </div>
                    <div className="flex gap-4 items-start">
                        <CheckCircle className="w-5 h-5 text-green-500 mt-1 shrink-0" />
                        <div>
                            <h5 className="font-bold text-slate-900 m-0">Cost-effective</h5>
                            <p className="text-slate-600 text-sm m-0">No need for expensive software or hardware.</p>
                        </div>
                    </div>
                </div>
                <p>
                    For small businesses, online shops, and startups, a <strong>free Barcode Generator</strong> is often the easiest way to get started.
                </p>

                <h2>Barcode Accuracy: What the Research Shows</h2>
                <p>
                    Barcodes are not just convenient — they are scientifically proven to reduce errors across industries. Independent research from logistics, healthcare, and economics consistently shows the same result: switching from manual data entry to barcode scanning produces dramatic accuracy gains.
                </p>

                <div className="not-prose grid gap-4 my-8">
                    <div className="rounded-xl border border-slate-200 bg-slate-50 p-5">
                        <div className="flex items-start gap-4">
                            <div className="shrink-0 rounded-lg bg-green-100 p-2">
                                <TrendingUp className="w-5 h-5 text-green-700" />
                            </div>
                            <div>
                                <p className="font-bold text-slate-900 mb-1">
                                    99%+ Inventory Accuracy vs. 92% Manual
                                </p>
                                <p className="text-sm text-slate-600 mb-2">
                                    Studies on warehouse management systems consistently find that manual inventory processes achieve around 92% accuracy. Implementing barcode scanning raises that figure to over 99%, reducing mismatches, write-offs, and fulfillment errors in a single step.
                                </p>
                                <p className="text-xs text-slate-400">
                                    Sources:{' '}
                                    <a
                                        href="https://www.gs1.org/standards/barcodes"
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        className="underline hover:text-slate-600"
                                    >
                                        GS1 Barcode Standards
                                    </a>
                                    {'; '}
                                    research cited in the{' '}
                                    <em>International Journal of Supply Chain Management</em>
                                    {'; Auburn University RFID/Barcode Lab inventory accuracy benchmarks.'}
                                </p>
                            </div>
                        </div>
                    </div>

                    <div className="rounded-xl border border-slate-200 bg-slate-50 p-5">
                        <div className="flex items-start gap-4">
                            <div className="shrink-0 rounded-lg bg-blue-100 p-2">
                                <TrendingUp className="w-5 h-5 text-blue-700" />
                            </div>
                            <div>
                                <p className="font-bold text-slate-900 mb-1">
                                    50% Reduction in Critical Data-Entry Errors (Healthcare)
                                </p>
                                <p className="text-sm text-slate-600 mb-2">
                                    In mission-critical environments where precision is non-negotiable, the case for barcoding is even stronger. Clinical research demonstrates that Barcode Medication Administration (BCMA) systems cut administration data errors by up to 50%. If barcodes are reliable enough for hospitals, they are reliable enough for your inventory.
                                </p>
                                <p className="text-xs text-slate-400">
                                    Sources:{' '}
                                    <a
                                        href="https://www.nejm.org/doi/full/10.1056/NEJMsa020992"
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        className="underline hover:text-slate-600"
                                    >
                                        New England Journal of Medicine — "Effect of Bar-Code Technology on the Safety of Medication Administration"
                                    </a>
                                    {'; '}
                                    <a
                                        href="https://www.ahrq.gov/patient-safety/settings/hospital/medication/barcode.html"
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        className="underline hover:text-slate-600"
                                    >
                                        AHRQ — Barcode Medication Administration (BCMA) research
                                    </a>
                                    {'.'}
                                </p>
                            </div>
                        </div>
                    </div>

                    <div className="rounded-xl border border-slate-200 bg-slate-50 p-5">
                        <div className="flex items-start gap-4">
                            <div className="shrink-0 rounded-lg bg-purple-100 p-2">
                                <TrendingUp className="w-5 h-5 text-purple-700" />
                            </div>
                            <div>
                                <p className="font-bold text-slate-900 mb-1">
                                    Significant Productivity Gains at Checkout (Retail Economics)
                                </p>
                                <p className="text-sm text-slate-600 mb-2">
                                    The productivity impact of barcodes extends beyond accuracy. Economic research from the National Bureau of Economic Research (NBER) documents dramatic throughput gains for retailers when switching from manual key-entry to barcode scanners — an effect that transformed checkout speed and operational cost structures across the industry.
                                </p>
                                <p className="text-xs text-slate-400">
                                    Source:{' '}
                                    <a
                                        href="https://www.nber.org/papers/w7492"
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        className="underline hover:text-slate-600"
                                    >
                                        NBER Working Paper — "Raising the Barcode Scanner: Technology and Productivity in the Retail Sector"
                                    </a>
                                    {'.'}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <h2>Barcode vs QR Code</h2>
                <p>
                    Although barcodes and QR codes are often confused, they serve different purposes. A barcode stores data horizontally and is mainly used for product identification. A <Link href="/tools/url-qr-code" className="text-blue-600 hover:underline">QR code</Link> stores data both horizontally and vertically and can contain more complex information such as URLs or <Link href="/tools/vcard-qr-code" className="text-blue-600 hover:underline">contact details</Link>.
                </p>
                <p>
                    If you only need to identify products or inventory items, a classic barcode is usually the better choice.
                </p>

                <h2>Are Barcodes Free to Use?</h2>
                <p>
                    The barcode image itself can be generated for free using a Barcode Generator. However, for retail products sold internationally, the barcode number may need to be officially registered through organizations such as GS1. This ensures that the barcode is unique and recognized globally.
                </p>
                <p>
                    For internal use, testing, or small projects, free barcode generation is usually sufficient.
                </p>

                <h2>Use Cases for Barcodes</h2>
                <p>Barcodes are used in many industries, including:</p>
                <ul className="list-disc pl-6 space-y-2 mb-8">
                    <li>Retail and e-commerce</li>
                    <li>Inventory and warehouse management</li>
                    <li>Shipping and logistics</li>
                    <li>Libraries and document tracking</li>
                    <li>Event tickets and labeling</li>
                </ul>
                <p>
                    A reliable <strong>Barcode Generator</strong> helps streamline these processes and improves efficiency.
                    For tracking QR codes alongside your barcodes, see our <Link href="/blog/qr-code-tracking-guide-2025" className="text-blue-600 hover:underline">QR code tracking guide</Link>.
                </p>

                <h2>Barcode Generator for Amazon Sellers</h2>
                <p>
                    If you sell on Amazon, you will encounter two types of barcodes: <strong>GTINs</strong> (Global Trade Item Numbers, such as EAN-13 or UPC-A) required by Amazon to list products, and <strong>FNSKU</strong> barcodes that Amazon assigns to your specific seller account for FBA fulfillment.
                </p>
                <p>
                    Our barcode generator can create the <em>image</em> of an EAN-13 or UPC-A barcode if you already have a valid number. However, it cannot issue official GS1-registered numbers. To sell on Amazon with retail barcodes, you need to obtain a legitimate EAN or UPC number from <strong>GS1</strong> (the official barcode standards organization). Purchasing unofficial or recycled barcodes from third-party resellers often leads to listing suppression on Amazon.
                </p>
                <div className="not-prose bg-amber-50 border border-amber-200 rounded-xl p-4 my-4 text-sm text-amber-900">
                    <strong>Important for Amazon sellers:</strong> GS1 is the only authorized source for EAN/UPC numbers recognized by Amazon. Visit <strong>gs1.org</strong> to purchase official barcodes for your products. Use this generator to create barcode images once you have a valid number.
                </div>

                <h2>Understanding Check Digits</h2>
                <p>
                    Most barcodes (like EAN and UPC) include a "Check Digit"—the last number in the sequence. This digit is calculated mathematically from the other numbers to ensure the barcode is scanned correctly. Even if a barcode is slightly damaged or scratched, the scanner uses the check digit to verify the integrity of the data.
                </p>

                <h2>Best Practices for Printing Barcodes</h2>
                <p>
                    To ensure your barcodes scan instantly at the checkout or in the warehouse, follow these printing tips:
                </p>
                <ul className="list-disc pl-6 space-y-2 mb-8">
                    <li><strong>High Contrast:</strong> Always print black bars on a white background. Reverse colors (white bars on black) often fail to scan.</li>
                    <li><strong>Quiet Zone:</strong> Leave enough white space (margins) on the left and right sides of the barcode.</li>
                    <li><strong>Resolution:</strong> For professional labels, use <strong>SVG format</strong> (vector) or high-resolution PNGs (at least 300 DPI) to avoid blurry edges.</li>
                    <li><strong>Size:</strong> Do not scale the barcode too small. Standard EAN-13 codes should be at least 30mm wide for reliable scanning.</li>
                </ul>

                <hr className="my-12 border-slate-200" />

                <div className="not-prose">
                    <FAQSection
                        title="Frequently Asked Questions"
                        items={[
                            {
                                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.',
                            },
                            {
                                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.',
                            },
                            {
                                question: 'Which barcode format should I use?',
                                answer: '<strong>EAN-13</strong> is the standard for retail products in Europe and globally. <strong>UPC-A</strong> is the standard for retail products in USA/Canada. <strong>Code 128</strong> is best for logistics, shipping, and internal tracking as it supports both letters and numbers. Use the format picker above to find the right one for your use case.',
                            },
                            {
                                question: 'Can I download barcodes in vector format (SVG)?',
                                answer: 'Yes — SVG downloads are available. SVG files are vector-based, meaning they can be scaled to any size without losing quality. This is ideal for professional product packaging and labels.',
                            },
                            {
                                question: 'How do I generate a barcode online?',
                                answer: 'Enter your product number or text, select the desired barcode format (such as EAN-13 or Code 128), and the barcode is generated instantly. You can then download it as PNG or SVG.',
                            },
                            {
                                question: 'Are generated barcodes scannable?',
                                answer: 'Yes. We generate standard-compliant barcodes that are readable by any standard optical or laser barcode scanner, including smartphone camera apps.',
                            },
                            {
                                question: 'Can I use these barcodes for Amazon (EAN/UPC)?',
                                answer: 'You can generate the barcode <em>image</em> here if you already have a valid EAN/UPC number. However, you cannot create a globally registered EAN/UPC number here — you must purchase official numbers from GS1 to list products on Amazon or in major retail systems.',
                            },
                            {
                                question: 'What is the difference between a barcode and a QR code?',
                                answer: 'A barcode stores data in one dimension (horizontal bars) and is mainly used for product identification. A QR code stores data in two dimensions (a matrix) and can hold much more information — URLs, contact details, WiFi credentials, and more.',
                            },
                        ]}
                    />
                </div>

                <div className="mt-12 p-6 bg-slate-900 rounded-xl text-white not-prose">
                    <h4 className="text-lg font-bold mb-2">Final Thoughts</h4>
                    <p className="text-slate-300 m-0">
                        A Barcode Generator is a simple yet powerful tool that helps businesses save time, reduce errors, and improve operational efficiency. By choosing the right barcode format and using a reliable generator, you can create professional barcodes that work across different systems and industries.
                    </p>
                </div>

            </div>
        </section>
    );
}
