import { BookOpen, CheckCircle, HelpCircle, Layers, Settings, ShoppingCart, Tag, Activity, Factory } from 'lucide-react';
import Link from 'next/link';

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-8 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="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">
                    <img
                        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"
                    />
                    <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="grid md:grid-cols-2 gap-6 not-prose my-8">
                    {/* EAN-13 Card */}
                    <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
                        <div className="flex items-center gap-3 mb-3">
                            <Tag className="w-5 h-5 text-blue-500" />
                            <h4 className="text-lg font-bold text-slate-900 m-0">EAN-13</h4>
                        </div>
                        <div className="text-xs font-mono bg-slate-100 inline-block px-2 py-1 rounded text-slate-500 mb-3">Retail • Europe</div>
                        <div className="mb-3 bg-slate-50 rounded border border-slate-100 p-2 flex justify-center">
                            <img src="/barcode-generator-preview.png" alt="EAN-13 Barcode Sample for International Products" className="h-10 object-contain opacity-75 grayscale" width="200" height="40" />
                        </div>
                        <p className="text-sm text-slate-600 m-0">
                            EAN-13 is widely used in retail, especially in Europe. It is designed for consumer products sold in stores and supermarkets.
                        </p>
                    </div>

                    {/* UPC-A Card */}
                    <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
                        <div className="flex items-center gap-3 mb-3">
                            <ShoppingCart className="w-5 h-5 text-indigo-500" />
                            <h4 className="text-lg font-bold text-slate-900 m-0">UPC-A</h4>
                        </div>
                        <div className="text-xs font-mono bg-slate-100 inline-block px-2 py-1 rounded text-slate-500 mb-3">Retail • USA/Canada</div>
                        <div className="mb-3 bg-slate-50 rounded border border-slate-100 p-2 flex justify-center">
                            <img src="/barcode-generator-preview.png" alt="UPC-A Barcode Example for Retail Products in USA" className="h-10 object-contain opacity-75 grayscale" width="200" height="40" />
                        </div>
                        <p className="text-sm text-slate-600 m-0">
                            UPC-A is similar to EAN-13 but is mainly used in the United States and Canada for retail products.
                        </p>
                    </div>

                    {/* Code 128 Card */}
                    <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
                        <div className="flex items-center gap-3 mb-3">
                            <Settings className="w-5 h-5 text-emerald-500" />
                            <h4 className="text-lg font-bold text-slate-900 m-0">Code 128</h4>
                        </div>
                        <div className="text-xs font-mono bg-slate-100 inline-block px-2 py-1 rounded text-slate-500 mb-3">Logistics • Universal</div>
                        <div className="mb-3 bg-slate-50 rounded border border-slate-100 p-2 flex justify-center">
                            <img src="/barcode-generator-preview.png" alt="Code 128 Barcode for Inventory and Shipping Labels" className="h-10 object-contain opacity-75 grayscale" width="200" height="40" />
                        </div>
                        <p className="text-sm text-slate-600 m-0">
                            Code 128 is a flexible barcode format that supports letters and numbers. It is commonly used in logistics, shipping, and internal tracking systems.
                        </p>
                    </div>

                    {/* Code 39 Card */}
                    <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
                        <div className="flex items-center gap-3 mb-3">
                            <Factory className="w-5 h-5 text-orange-500" />
                            <h4 className="text-lg font-bold text-slate-900 m-0">Code 39</h4>
                        </div>
                        <div className="text-xs font-mono bg-slate-100 inline-block px-2 py-1 rounded text-slate-500 mb-3">Industrial • Military</div>
                        <div className="mb-3 bg-slate-50 rounded border border-slate-100 p-2 flex justify-center">
                            <img src="/barcode-generator-preview.png" alt="Code 39 Barcode for Industrial Use" className="h-10 object-contain opacity-75 grayscale" width="200" height="40" />
                        </div>
                        <p className="text-sm text-slate-600 m-0">
                            The first alphanumeric barcode, Code 39 is still widely used in automotive and defense industries. It supports numbers and uppercase letters.
                        </p>
                    </div>

                    {/* MSI Card */}
                    <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
                        <div className="flex items-center gap-3 mb-3">
                            <Layers className="w-5 h-5 text-purple-500" />
                            <h4 className="text-lg font-bold text-slate-900 m-0">MSI</h4>
                        </div>
                        <div className="text-xs font-mono bg-slate-100 inline-block px-2 py-1 rounded text-slate-500 mb-3">Inventory • Shelves</div>
                        <div className="mb-3 bg-slate-50 rounded border border-slate-100 p-2 flex justify-center">
                            <img src="/barcode-generator-preview.png" alt="MSI Barcode for Inventory Management" className="h-10 object-contain opacity-75 grayscale" width="200" height="40" />
                        </div>
                        <p className="text-sm text-slate-600 m-0">
                            MSI (Modified Plessey) is often used for inventory control in retail environments, such as labeling shelves in supermarkets and warehouses.
                        </p>
                    </div>

                    {/* Pharmacode Card */}
                    <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
                        <div className="flex items-center gap-3 mb-3">
                            <Activity className="w-5 h-5 text-red-500" />
                            <h4 className="text-lg font-bold text-slate-900 m-0">Pharmacode</h4>
                        </div>
                        <div className="text-xs font-mono bg-slate-100 inline-block px-2 py-1 rounded text-slate-500 mb-3">Pharma • Packaging</div>
                        <div className="mb-3 bg-slate-50 rounded border border-slate-100 p-2 flex justify-center">
                            <img src="/barcode-generator-preview.png" alt="Pharmacode for Pharmaceutical Packaging" className="h-10 object-contain opacity-75 grayscale" width="200" height="40" />
                        </div>
                        <p className="text-sm text-slate-600 m-0">
                            Pharmacode is a specialized barcode standard used in the pharmaceutical industry for packaging control to prevent medication errors.
                        </p>
                    </div>


                </div>

                <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 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.
                </p>

                <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="flex items-center gap-3 mb-6 not-prose">
                    <HelpCircle className="w-6 h-6 text-blue-500" />
                    <h2 className="text-2xl font-bold text-slate-900 m-0">Frequently Asked Questions (FAQ)</h2>
                </div>

                <div className="not-prose space-y-8">
                    <div>
                        <h5 className="font-bold text-slate-900 text-lg mb-2">❓ What is a Barcode Generator?</h5>
                        <p className="text-slate-600">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.</p>
                    </div>
                    <div>
                        <h5 className="font-bold text-slate-900 text-lg mb-2">❓ Is this barcode generator free to use?</h5>
                        <p className="text-slate-600">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.</p>
                    </div>
                    <div>
                        <h5 className="font-bold text-slate-900 text-lg mb-2">❓ Which barcode format should I use?</h5>
                        <p className="text-slate-600">
                            <strong>EAN-13:</strong> Standard for retail products in Europe and globally.<br />
                            <strong>UPC-A:</strong> Standard for retail products in USA/Canada.<br />
                            <strong>Code 128:</strong> Best for logistics, shipping, and internal tracking (supports letters & numbers).
                        </p>
                    </div>
                    <div>
                        <h5 className="font-bold text-slate-900 text-lg mb-2">❓ Can I download barcodes in vector format (SVG)?</h5>
                        <p className="text-slate-600">Yes! We offer <strong>SVG downloads</strong>. SVG files are vector-based, meaning they can be scaled to any size without losing quality—perfect for professional product packaging.</p>
                    </div>
                    <div>
                        <h5 className="font-bold text-slate-900 text-lg mb-2">❓ How do I generate a barcode online?</h5>
                        <p className="text-slate-600">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.</p>
                    </div>
                    <div>
                        <h5 className="font-bold text-slate-900 text-lg mb-2">❓ Are generated barcodes scannable?</h5>
                        <p className="text-slate-600">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.</p>
                    </div>
                    <div>
                        <h5 className="font-bold text-slate-900 text-lg mb-2">❓ Can I use these barcodes for Amazon (EAN/UPC)?</h5>
                        <p className="text-slate-600">You can generate the <em>image</em> 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.</p>
                    </div>
                    <div>
                        <h5 className="font-bold text-slate-900 text-lg mb-2">❓ What is the difference between a barcode and a QR code?</h5>
                        <p className="text-slate-600">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.</p>
                    </div>
                </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>
    );
}