
import React from 'react';
import type { Metadata } from 'next';
import en from '@/i18n/en.json';
import Link from 'next/link';
import SeoJsonLd from '@/components/SeoJsonLd';
import { articleSchema } from '@/lib/schema';

export const metadata: Metadata = {
    title: 'QR Code Best Practices: Size, Color & Testing',
    description: 'Ensure your QR codes scan every time. Guide on minimum size, color contrast, error correction, and placement best practices.',
    alternates: {
        canonical: 'https://www.qrmaster.net/guide/qr-code-best-practices',
    },
    openGraph: {
        url: 'https://www.qrmaster.net/guide/qr-code-best-practices',
    },
};

export default function BestPracticesGuidePage() {
    return (
        <div className="pt-20 bg-white">
            <SeoJsonLd data={[
                articleSchema({
                    headline: 'QR Code Design Best Practices: The Ultimate Checklist',
                    description: 'Ensure your QR codes scan perfectly. Tips on size, contrast, and error correction levels.',
                    image: 'https://www.qrmaster.net/og-best-practices.png',
                    datePublished: '2025-10-15',
                    dateModified: '2025-10-15',
                    author: 'QR Master Team',
                    url: 'https://www.qrmaster.net/guide/qr-code-best-practices'
                })
            ]} />
            <article className="max-w-4xl mx-auto px-4 py-20">
                <header className="mb-12 text-center">
                    <span className="text-sm font-semibold text-indigo-600 tracking-wide uppercase">Design Guide</span>
                    <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mt-2 mb-6">
                        7 Rules for Perfect QR Codes
                    </h1>
                    <p className="text-xl text-slate-600">
                        Don't let a bad design kill your campaign. Follow these scanning rules.
                    </p>
                </header>

                <div className="prose prose-lg prose-slate mx-auto">
                    <h3>1. Size Matters</h3>
                    <p>
                        <strong>Minimum size:</strong> 2cm x 2cm (0.8" x 0.8") for dynamic codes.
                        If scanning from a distance (e.g., billboard), the QR code size should be 1/10th of the scanning distance (scan from 10m -&gt; 1m wide code).
                    </p>

                    <h3>2. High Contrast is Key</h3>
                    <p>
                        Always use a <strong>dark foreground</strong> on a <strong>light background</strong>. Most scanners expect this.
                        <br />
                        ✅ Black on White
                        <br />
                        ✅ Dark Blue on White
                        <br />
                        ❌ White on Black (Inverted - some older scanners fail)
                        <br />
                        ❌ Light Grey on White (Low contrast)
                    </p>

                    <h3>3. Leave a Quiet Zone</h3>
                    <p>
                        The "Quiet Zone" is the whitespace border around the QR code. It helps the scanner distinguish the code from the surroundings. Never print right to the edge of the pixels.
                    </p>

                    <h3>4. Error Correction Level</h3>
                    <p>
                        If you add a logo to the center, raise the Error Correction Level to <strong>High (H)</strong> or <strong>Quartile (Q)</strong>. This adds redundant data so the code is readable even if 30% is covered by your logo.
                    </p>

                    <h3>5. Don't Overstuff Static Codes</h3>
                    <p>
                        Static QR codes grow more complex (more dots) as you add data. A URL with 200 characters makes a dense, hard-to-scan code. Use a <strong>URL Shortener</strong> or <strong>Dynamic QR Code</strong> to keep the pattern simple.
                    </p>

                    <h3>6. Call to Action (CTA)</h3>
                    <p>
                        Don't just print a code. Tell users <strong>why</strong> they should scan.
                        <br />
                        <em>"Scan for Menu"</em>
                        <br />
                        <em>"Scan to Win"</em>
                        <br />
                        Frame your QR code with a clear CTA.
                    </p>

                    <h3>7. Test, Test, Test</h3>
                    <p>
                        Print a sample. Scan it with an iPhone. Scan it with an Android. Scan it in low light. Never assume it works until you verify it physically.
                    </p>
                </div>

                <div className="mt-16 text-center">
                    <Link href="/">
                        <button className="bg-indigo-600 text-white px-8 py-3 rounded-full font-bold text-lg hover:bg-indigo-700 transition-colors">
                            Create a Perfect QR Code
                        </button>
                    </Link>
                </div>
            </article>
        </div>
    );
}
