import React from 'react';
import type { Metadata } from 'next';
import SeoJsonLd from '@/components/SeoJsonLd';
import { GrowthLinksSection } from '@/components/marketing/GrowthLinksSection';
import { breadcrumbSchema } from '@/lib/schema';
import Breadcrumbs from '@/components/Breadcrumbs';

export const metadata: Metadata = {
    title: 'QR Code Print Size Guide: Minimum Sizes for Every Surface | QR Master',
    description: 'The minimum QR code size for print depends on scan distance. This guide gives you exact dimensions for business cards, flyers, posters, and billboards.',
    keywords: ['minimum qr code size', 'qr code print size', 'qr code size for print', 'how big should a qr code be', 'qr code dimensions'],
    alternates: {
        canonical: 'https://www.qrmaster.net/qr-code-print-size-guide',
    },
    openGraph: {
        title: 'QR Code Print Size Guide | QR Master',
        description: 'Exact QR code dimensions for every print surface — from business cards to billboards.',
        type: 'article',
        url: 'https://www.qrmaster.net/qr-code-print-size-guide',
    },
    robots: {
        index: true,
        follow: true,
    },
};

const breadcrumbs = [
    { name: 'Home', url: '/' },
    { name: 'QR Code Print Size Guide', url: '/qr-code-print-size-guide' },
];

const articleSchema = {
    '@context': 'https://schema.org',
    '@type': 'Article',
    '@id': 'https://www.qrmaster.net/qr-code-print-size-guide#article',
    headline: 'QR Code Print Size Guide: Minimum Sizes for Every Surface',
    description: 'The minimum QR code size for print depends on scan distance. This guide gives you exact dimensions for business cards, flyers, posters, and billboards.',
    author: {
        '@type': 'Organization',
        name: 'QR Master',
        url: 'https://www.qrmaster.net',
    },
    publisher: {
        '@type': 'Organization',
        name: 'QR Master',
        url: 'https://www.qrmaster.net',
    },
    datePublished: '2026-04-07',
    dateModified: '2026-04-07',
    mainEntityOfPage: 'https://www.qrmaster.net/qr-code-print-size-guide',
};

const faqSchema = {
    '@context': 'https://schema.org',
    '@type': 'FAQPage',
    mainEntity: [
        {
            '@type': 'Question',
            name: 'What is the minimum size for a QR code to be scannable?',
            acceptedAnswer: {
                '@type': 'Answer',
                text: 'The minimum recommended size is 2 × 2 cm (0.8 × 0.8 in) for QR codes scanned at very close range (under 10 cm), such as on business cards. For most print materials scanned at arm\'s length (30–40 cm), use at least 3 × 3 cm.',
            },
        },
        {
            '@type': 'Question',
            name: 'What DPI should I use for printing a QR code?',
            acceptedAnswer: {
                '@type': 'Answer',
                text: 'For print, export your QR code at a minimum of 300 DPI. For large-format printing (posters, banners), use the vector SVG format instead of PNG — SVG scales to any size without quality loss.',
            },
        },
        {
            '@type': 'Question',
            name: 'How big should a QR code be on a poster?',
            acceptedAnswer: {
                '@type': 'Answer',
                text: 'For an A2 poster (420 × 594 mm) viewed at 1–2 metres, use a QR code that is at least 8 × 8 cm. Larger is always better — a 10 × 10 cm code scans reliably from 2–3 metres away.',
            },
        },
        {
            '@type': 'Question',
            name: 'How big should a QR code be on a business card?',
            acceptedAnswer: {
                '@type': 'Answer',
                text: 'On a standard business card (85 × 55 mm), a QR code of 2 × 2 cm to 2.5 × 2.5 cm works reliably when held at normal reading distance (15–20 cm).',
            },
        },
        {
            '@type': 'Question',
            name: 'Does adding a logo to a QR code affect scannability?',
            acceptedAnswer: {
                '@type': 'Answer',
                text: 'Only if the logo covers more than about 30% of the QR code area. QR codes have built-in error correction. At "Q" (25%) or "H" (30%) error correction level, a logo is fine. Always test scan after adding a logo.',
            },
        },
    ],
};

const sizeData = [
    { surface: 'Business Card', scanDistance: '15–20 cm', minSize: '2 × 2 cm', recommended: '2.5 × 2.5 cm', dpi: '300 DPI PNG', format: 'PNG or SVG' },
    { surface: 'Flyer / Leaflet', scanDistance: '20–30 cm', minSize: '3 × 3 cm', recommended: '4 × 4 cm', dpi: '300 DPI PNG', format: 'PNG or SVG' },
    { surface: 'A4 Poster', scanDistance: '30–60 cm', minSize: '5 × 5 cm', recommended: '7 × 7 cm', dpi: '300 DPI PNG', format: 'SVG recommended' },
    { surface: 'A2 / A1 Poster', scanDistance: '1–2 m', minSize: '8 × 8 cm', recommended: '10 × 10 cm', dpi: '300 DPI', format: 'SVG required' },
    { surface: 'Window / Banner', scanDistance: '1–3 m', minSize: '10 × 10 cm', recommended: '15 × 15 cm', dpi: 'Vector only', format: 'SVG required' },
    { surface: 'Billboard', scanDistance: '3–10 m', minSize: '20 × 20 cm', recommended: '30 × 30 cm', dpi: 'Vector only', format: 'SVG required' },
];

export default function QRCodePrintSizeGuidePage() {
    return (
        <>
            <SeoJsonLd data={[articleSchema, faqSchema, breadcrumbSchema(breadcrumbs)]} />

            <div className="min-h-screen bg-white">

                {/* HERO */}
                <section className="pt-20 pb-12 bg-gradient-to-br from-slate-900 to-slate-700 text-white">
                    <div className="container mx-auto px-4 max-w-4xl">
                        <Breadcrumbs items={breadcrumbs} className="[&_ol]:text-white/70 [&_span.font-semibold]:text-white [&_a]:text-white/70 [&_span]:text-white/70" />
                        <div className="mt-6 inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/80 text-sm font-medium mb-6 border border-white/10">
                            Print Guide
                        </div>
                        <h1 className="text-4xl lg:text-5xl font-black mb-6 leading-tight">
                            QR Code Print Size Guide
                        </h1>
                        <p className="text-xl text-slate-300 max-w-2xl leading-relaxed mb-4">
                            The right QR code size depends on one thing: how far away will the scanner be?
                            This guide gives you exact minimum dimensions for every print surface.
                        </p>
                        <div className="bg-white/10 border border-white/20 rounded-xl p-4 mt-6 max-w-xl">
                            <p className="text-sm font-semibold text-white mb-1">Quick Rule of Thumb</p>
                            <p className="text-slate-300 text-sm">
                                QR code width = scan distance ÷ 10. Example: scanning from 30 cm → minimum 3 cm wide.
                            </p>
                        </div>
                    </div>
                </section>

                {/* SIZE TABLE */}
                <section className="py-16 px-4 sm:px-6 lg:px-8">
                    <div className="max-w-5xl mx-auto">
                        <h2 className="text-2xl font-bold text-slate-900 mb-8">
                            Recommended Size by Print Surface and Scan Distance
                        </h2>

                        <div className="overflow-x-auto rounded-2xl border border-slate-200 shadow-sm">
                            <table className="w-full text-sm">
                                <thead>
                                    <tr className="bg-slate-900 text-white">
                                        <th className="px-5 py-4 text-left font-semibold">Surface</th>
                                        <th className="px-5 py-4 text-left font-semibold">Scan Distance</th>
                                        <th className="px-5 py-4 text-left font-semibold">Minimum Size</th>
                                        <th className="px-5 py-4 text-left font-semibold">Recommended</th>
                                        <th className="px-5 py-4 text-left font-semibold">Format</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {sizeData.map((row, i) => (
                                        <tr key={row.surface} className={i % 2 === 0 ? 'bg-white' : 'bg-slate-50'}>
                                            <td className="px-5 py-4 font-semibold text-slate-900">{row.surface}</td>
                                            <td className="px-5 py-4 text-slate-600">{row.scanDistance}</td>
                                            <td className="px-5 py-4 text-red-700 font-semibold">{row.minSize}</td>
                                            <td className="px-5 py-4 text-green-700 font-semibold">{row.recommended}</td>
                                            <td className="px-5 py-4 text-slate-600">{row.format}</td>
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                        </div>
                        <p className="mt-4 text-xs text-slate-500">
                            Sizes are for QR codes with standard black-on-white contrast at error correction level Q or H. Reduce minimum sizes by 20% only in ideal lighting conditions.
                        </p>
                    </div>
                </section>

                {/* DPI & FORMAT GUIDE */}
                <section className="py-16 px-4 sm:px-6 lg:px-8 bg-slate-50 border-y border-slate-200">
                    <div className="max-w-4xl mx-auto">
                        <h2 className="text-2xl font-bold text-slate-900 mb-8">DPI and Format Requirements</h2>

                        <div className="grid md:grid-cols-3 gap-6">
                            <div className="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm">
                                <div className="w-10 h-10 rounded-xl bg-blue-100 flex items-center justify-center mb-4">
                                    <span className="font-bold text-blue-700 text-sm">PNG</span>
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">PNG for Small Print</h3>
                                <p className="text-sm text-slate-600 leading-relaxed">
                                    Use PNG at <strong>300 DPI minimum</strong> for business cards, flyers, and small posters. Export at 10× your target print size in pixels (e.g. 3 cm at 300 DPI = 354 px).
                                </p>
                            </div>

                            <div className="bg-white p-6 rounded-2xl border border-emerald-100 shadow-sm ring-1 ring-emerald-200">
                                <div className="w-10 h-10 rounded-xl bg-emerald-100 flex items-center justify-center mb-4">
                                    <span className="font-bold text-emerald-700 text-sm">SVG</span>
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">SVG for Everything Larger</h3>
                                <p className="text-sm text-slate-600 leading-relaxed">
                                    SVG is a vector format — it scales to any size without quality loss. Use SVG for all A2+ posters, banners, and billboards. QR Master exports SVG directly from the generator.
                                </p>
                            </div>

                            <div className="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm">
                                <div className="w-10 h-10 rounded-xl bg-amber-100 flex items-center justify-center mb-4">
                                    <span className="font-bold text-amber-700 text-sm">ECL</span>
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">Error Correction Level</h3>
                                <p className="text-sm text-slate-600 leading-relaxed">
                                    Use <strong>Level Q</strong> (25% recovery) or <strong>Level H</strong> (30% recovery) for print — especially if you add a logo. Higher error correction means more modules and a slightly larger minimum size.
                                </p>
                            </div>
                        </div>
                    </div>
                </section>

                {/* PRINT CHECKLIST */}
                <section className="py-16 px-4 sm:px-6 lg:px-8">
                    <div className="max-w-3xl mx-auto">
                        <h2 className="text-2xl font-bold text-slate-900 mb-8">Print QR Code Checklist</h2>
                        <ul className="space-y-3">
                            {[
                                'QR code is at least the minimum size for the intended scan distance',
                                'High contrast between QR modules and background (black on white preferred)',
                                'Quiet zone (white border) of at least 4 module widths on all sides',
                                'Exported as SVG for large format, PNG at 300+ DPI for small format',
                                'Scanned from target distance before sending to print',
                                'Error correction set to Q or H if a logo is embedded',
                                'Dynamic QR code used if the destination URL might change',
                            ].map((item) => (
                                <li key={item} className="flex items-start gap-3">
                                    <span className="mt-0.5 w-5 h-5 rounded-full bg-green-100 flex items-center justify-center shrink-0">
                                        <svg className="w-3 h-3 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
                                            <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                                        </svg>
                                    </span>
                                    <span className="text-slate-700 text-sm leading-relaxed">{item}</span>
                                </li>
                            ))}
                        </ul>
                    </div>
                </section>

                <GrowthLinksSection
                    eyebrow="Ready to print?"
                    title="Create your print-ready QR code"
                    description="Generate, customize, and download QR codes in SVG or PNG at any size you need."
                    links={[
                        {
                            href: '/reprint-calculator',
                            title: 'Reprint Cost Calculator',
                            description: 'Calculate how much static reprints are costing vs one dynamic QR subscription.',
                            ctaLabel: 'Calculate reprint savings',
                        },
                        {
                            href: '/dynamic-qr-code-generator',
                            title: 'Dynamic QR Code Generator',
                            description: 'Create QR codes you can update after printing. No reprint needed when links change.',
                            ctaLabel: 'Create dynamic QR code',
                        },
                        {
                            href: '/custom-qr-code-generator',
                            title: 'Custom QR Code Generator',
                            description: 'Add your logo, brand colors, and a frame to create print-ready branded QR codes.',
                            ctaLabel: 'Create custom QR code',
                        },
                    ]}
                    pageType="commercial"
                    cluster="print-size-guide"
                />

                {/* FAQ */}
                <section className="py-16 px-4 sm:px-6 lg:px-8 bg-slate-50">
                    <div className="max-w-3xl mx-auto">
                        <h2 className="text-2xl font-bold text-slate-900 text-center mb-10">
                            Frequently Asked Questions
                        </h2>

                        <div className="space-y-4">
                            {[
                                {
                                    question: 'What is the minimum size for a QR code to be scannable?',
                                    answer: 'The absolute minimum is 2 × 2 cm for scanning at very close range (business cards, held 15 cm away). For most materials, use at least 3 × 3 cm. The general rule: minimum width = scan distance ÷ 10.',
                                },
                                {
                                    question: 'What DPI should I use for printing a QR code?',
                                    answer: 'Use 300 DPI minimum for all print. For large format (posters, banners, billboards), always use SVG — it is vector-based and scales to any size without quality loss.',
                                },
                                {
                                    question: 'How big should a QR code be on a poster?',
                                    answer: 'For an A2 poster viewed at 1–2 metres, use at least 8 × 8 cm. For A1 posters viewed from further away, 10 × 10 cm is recommended.',
                                },
                                {
                                    question: 'How big should a QR code be on a business card?',
                                    answer: 'On a standard business card (85 × 55 mm), a 2 × 2 cm to 2.5 × 2.5 cm QR code works reliably when scanned at normal reading distance.',
                                },
                                {
                                    question: 'Does adding a logo affect QR code scannability?',
                                    answer: 'Only if the logo covers more than ~30% of the QR area. Use error correction level Q or H when adding logos. Always test scan before printing at scale.',
                                },
                            ].map((item) => (
                                <details key={item.question} className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
                                    <summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
                                        {item.question}
                                        <span className="transition group-open:rotate-180 text-slate-400">
                                            <svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
                                                <path d="M6 9l6 6 6-6" />
                                            </svg>
                                        </span>
                                    </summary>
                                    <div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
                                        {item.answer}
                                    </div>
                                </details>
                            ))}
                        </div>
                    </div>
                </section>

            </div>
        </>
    );
}
