import React from 'react';
import type { Metadata } from 'next';
import Link from 'next/link';
import Image from 'next/image';
import { Button } from '@/components/ui/Button';
import { Card } from '@/components/ui/Card';
import SeoJsonLd from '@/components/SeoJsonLd';
import Breadcrumbs, { BreadcrumbItem } from '@/components/Breadcrumbs';
import { breadcrumbSchema } from '@/lib/schema';
import { GrowthLinksSection } from '@/components/marketing/GrowthLinksSection';
import { MarketingPageTracker } from '@/components/marketing/MarketingAnalytics';
import { featuredUseCases } from '@/lib/growth-pages';
import {
    Palette,
    Upload,
    Frame,
    Download,
    CheckCircle2,
    Smartphone,
    FileType,
    Zap,
    Shield,
    Eye
} from 'lucide-react';
import { MiniGenerator } from '@/components/marketing/MiniGenerator';

export const metadata: Metadata = {
    title: 'Custom QR Code Generator with Logo & Colors | QR Master',
    description: 'Create custom QR codes with your logo, brand colors, and unique frames. Free designer with instant preview. Download PNG/SVG. No signup needed to try.',
    keywords: [
        'custom qr code generator',
        'qr code with logo',
        'qr code generator with logo',
        'branded qr code generator',
        'custom qr code design',
        'qr code maker with logo',
        'personalized qr code',
        'design qr code online'
    ],
    alternates: {
        canonical: 'https://www.qrmaster.net/custom-qr-code-generator',
        languages: {
            'x-default': 'https://www.qrmaster.net/custom-qr-code-generator',
            en: 'https://www.qrmaster.net/custom-qr-code-generator',
        },
    },
    openGraph: {
        title: 'Custom QR Code Generator with Logo & Brand Colors',
        description: 'Design unique QR codes with your logo, colors, and frames. Free, high-quality exports.',
        url: 'https://www.qrmaster.net/custom-qr-code-generator',
        type: 'website',
        images: [{
            url: '/images/og/og-custom-qr-generator.png',
            width: 1200,
            height: 630
        }]
    },
    twitter: {
        title: 'Custom QR Code Generator with Logo & Brand Colors',
        description: 'Design unique QR codes with your logo, colors, and frames. Free, high-quality exports.',
    },
};

export default function CustomQRCodeGeneratorPage() {
    const features = [
        {
            icon: Upload,
            title: 'Logo Integration',
            description: 'Upload your logo or icon. Auto-resize and safe positioning. Transparent backgrounds supported.',
        },
        {
            icon: Palette,
            title: 'Custom Colors & Gradients',
            description: 'Match your brand palette. Solid colors or smooth gradients. Separate eye, pattern, frame colors.',
        },
        {
            icon: Frame,
            title: 'Custom Frames',
            description: '"Scan Me", "Learn More", "Follow Us". 20+ pre-designed frames. Custom text frames.',
        },
        {
            icon: FileType,
            title: 'Multiple Export Formats',
            description: 'PNG (high-res, up to 4000px). SVG (vector, infinitely scalable). PDF (print-ready).',
        },
        {
            icon: Shield,
            title: 'Scan-Safe Design Engine',
            description: 'Automatic error correction (Level H - 30%). Logo placement tested for scannability. Works on all devices.',
        },
        {
            icon: Eye,
            title: 'Instant Preview',
            description: 'See changes in real-time. Test scan with your phone. What you see is what you get.',
        },
    ];

    const designExamples = [
        {
            name: 'E-Commerce',
            description: 'Logo center, gradient purple-blue',
            image: '/images/examples/qr_example_ecommerce_1769163606650.png',
            category: 'Retail',
        },
        {
            name: 'Restaurant Menu',
            description: 'Food icon, warm colors, "Menu" frame',
            image: '/images/examples/qr_example_restaurant_1769163621640.png',
            category: 'Hospitality',
        },
        {
            name: 'Event Ticket',
            description: 'Gradient, geometric pattern, "Scan to Enter"',
            image: '/images/examples/qr_example_event_1769163635077.png',
            category: 'Events',
        },
        {
            name: 'Business Card',
            description: 'Minimalist, corporate blue/gray',
            image: '/images/examples/qr_example_business_1769163647196.png',
            category: 'Professional',
        },
        {
            name: 'Social Media',
            description: 'Instagram-style gradient, "Follow Us"',
            image: '/images/examples/qr_example_social_1769163660794.png',
            category: 'Social',
        },
        {
            name: 'Product Packaging',
            description: 'Premium black & gold, brand logo',
            image: '/images/examples/qr_example_packaging_1769163674382.png',
            category: 'Luxury',
        },
        {
            name: 'Real Estate',
            description: 'House icon, professional blue, "View Listing"',
            image: '/images/examples/qr_example_realestate_1769163689433.png',
            category: 'Real Estate',
        },
        {
            name: 'Non-Profit',
            description: 'Heart icon, warm gradient, "Donate Now"',
            image: '/images/examples/qr_example_nonprofit_1769163705055.png',
            category: 'Charity',
        },
    ];

    const useCases = [
        {
            icon: '📢',
            title: 'Marketing Campaigns',
            description: 'Print ads, flyers, billboards. Match campaign branding. Track by design/location.',
        },
        {
            icon: '💼',
            title: 'Business Cards',
            description: 'vCard QR with your logo. Professional first impression. Easy contact sharing.',
        },
        {
            icon: '📦',
            title: 'Product Packaging',
            description: 'QR codes on labels and boxes. Link to manuals, videos, support. Premium branded look.',
        },
        {
            icon: '🎉',
            title: 'Events & Conferences',
            description: 'Branded event QR codes. Registration, schedules, networking. Consistent event identity.',
        },
    ];

    const comparison = [
        { feature: 'Colors', generic: 'Black & white only', branded: 'Your brand colors' },
        { feature: 'Logo', generic: 'No logo', branded: 'Your logo integrated' },
        { feature: 'Design', generic: 'Generic look', branded: 'Professional design' },
        { feature: 'Brand Recognition', generic: 'Low', branded: 'Instant brand trust' },
        { feature: 'Campaign Tracking', generic: 'Harder to track', branded: 'Campaign-specific branding' },
    ];

    const faqs = [
        {
            question: 'Can I add my company logo to a QR code?',
            answer: 'Yes! Upload your logo (PNG, SVG, JPG) and we\'ll automatically position it safely in the center. The logo is sized to maintain scannability using error correction.',
        },
        {
            question: 'Will my QR code still work with a logo and custom colors?',
            answer: 'Absolutely. Our generator uses advanced error correction (Level H - 30% redundancy) to ensure your QR code remains scannable even with logos and colors.',
        },
        {
            question: 'What file formats can I download?',
            answer: 'High-resolution PNG (up to 4000x4000px), scalable SVG (vector), or print-ready PDF.',
        },
        {
            question: 'Can I use gradients instead of solid colors?',
            answer: 'Yes! Choose from preset gradients or create custom linear/radial gradients.',
        },
        {
            question: 'How do I know if my custom QR code works?',
            answer: 'Use the built-in preview and test scan with your phone camera before downloading.',
        },
        {
            question: 'Is there a limit on logo size?',
            answer: 'Logos up to 5MB. We automatically resize for optimal scanning. Transparent backgrounds (PNG) work best.',
        },
        {
            question: 'Can I customize the QR code frame?',
            answer: 'Yes! Choose from 20+ frames ("Scan Me", "Learn More") or create custom text frames.',
        },
        {
            question: 'Are custom QR codes free?',
            answer: 'Static custom QR codes (URL, text, vCard, WiFi) are completely free forever. Dynamic QR codes (editable, trackable) require a paid plan.',
        },
        {
            question: 'Can I change the corner style?',
            answer: 'Yes! Customize corner dots, eyes, and patterns. Choose square, rounded, or circular styles.',
        },
        {
            question: 'What\'s the difference between static and dynamic custom QR codes?',
            answer: 'Both can be customized with logos/colors. Static = data encoded directly (free, permanent). Dynamic = redirect URL (editable, trackable, requires account).',
        },
    ];

    const softwareSchema = {
        '@context': 'https://schema.org',
        '@type': 'SoftwareApplication',
        '@id': 'https://www.qrmaster.net/custom-qr-code-generator#software',
        name: 'QR Master - Custom QR Code Generator with Logo',
        applicationCategory: 'DesignApplication',
        offers: {
            '@type': 'Offer',
            price: '0',
            priceCurrency: 'EUR',
        },
        featureList: [
            'Upload custom logo',
            'Custom brand colors and gradients',
            '20+ frame designs',
            'High-resolution PNG downloads',
            'Scalable SVG exports',
            'Print-ready PDF output',
            'Real-time preview',
            'Scan-safe design validation',
        ],
    };

    const howToSchema = {
        '@context': 'https://schema.org',
        '@type': 'HowTo',
        '@id': 'https://www.qrmaster.net/custom-qr-code-generator#howto',
        name: 'How to Create a Custom QR Code with Logo',
        datePublished: '2024-01-01',
        dateModified: '2025-06-01',
        author: {
            '@type': 'Person',
            name: 'Timo Knuth',
            url: 'https://www.qrmaster.net/authors/timo',
        },
        step: [
            {
                '@type': 'HowToStep',
                position: 1,
                name: 'Choose QR Code Type',
                text: 'Select URL, vCard, WiFi, or other QR code type.',
            },
            {
                '@type': 'HowToStep',
                position: 2,
                name: 'Upload Your Logo',
                text: 'Upload your company logo (PNG, SVG, JPG). Auto-positioned safely.',
            },
            {
                '@type': 'HowToStep',
                position: 3,
                name: 'Customize Colors & Frame',
                text: 'Choose brand colors, gradients, and frame style.',
            },
            {
                '@type': 'HowToStep',
                position: 4,
                name: 'Download',
                text: 'Download as high-res PNG, SVG, or PDF. Ready to print or share.',
            },
        ],
    };

    const faqSchema = {
        '@context': 'https://schema.org',
        '@type': 'FAQPage',
        '@id': 'https://www.qrmaster.net/custom-qr-code-generator#faq',
        mainEntity: faqs.map((faq) => ({
            '@type': 'Question',
            name: faq.question,
            acceptedAnswer: {
                '@type': 'Answer',
                text: faq.answer,
            },
        })),
    };

    const breadcrumbItems: BreadcrumbItem[] = [
        { name: 'Home', url: '/' },
        { name: 'Custom QR Code Generator', url: '/custom-qr-code-generator' },
    ];

  const relatedUseCaseLinks = [
    {
        href: '/use-cases/flyer-qr-codes',
        title: 'Flyer QR Codes',
        description: 'Use branded print QR codes when campaign assets need both visual fit and measurable routing.',
        ctaLabel: 'Create your flyer QR code',
    },
    {
        href: featuredUseCases[0].href,
        title: featuredUseCases[0].title,
        description: featuredUseCases[0].summary,
        ctaLabel: featuredUseCases[0].ctaLabel,
    },
    {
        href: '/use-cases/real-estate-sign-qr-codes',
        title: 'Real Estate Sign QR Codes',
        description: 'Useful when branded property signage needs a cleaner listing handoff and trackable scan context.',
        ctaLabel: 'Create your real estate QR code',
    },
        {
            href: '/dynamic-qr-code-generator',
            title: 'Dynamic QR Code Generator',
            description: 'Add tracking and updatable destinations to your branded QR codes.',
            ctaLabel: 'Create dynamic QR',
        },
        {
            href: '/tools/vcard-qr-code',
            title: 'vCard QR Code Generator',
            description: 'Turn your brand identity into a scannable digital business card.',
            ctaLabel: 'Create vCard QR',
        },
        {
            href: '/tools/barcode-generator',
            title: 'Free Barcode Generator',
            description: 'Need a 1D barcode for retail or inventory? Create EAN-13, UPC-A, and Code 128 barcodes instantly — no signup required.',
            ctaLabel: 'Create a barcode',
        },
        {
            href: '/use-cases',
            title: 'Explore the use-case hub',
            description: 'Browse QR workflows where design, routing, and measurement need to work together.',
            ctaLabel: 'Explore QR code use cases',
        },
    ];

    return (
        <>
            <SeoJsonLd data={[softwareSchema, howToSchema, faqSchema, breadcrumbSchema(breadcrumbItems)]} />
            <MarketingPageTracker pageType="commercial" cluster="custom-qr" />
            <div className="min-h-screen bg-white">
                {/* Hero Section */}
                <section className="relative overflow-hidden bg-gradient-to-br from-purple-50 via-white to-blue-50 py-20">
                    <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
                        <Breadcrumbs items={breadcrumbItems} />
                        <div className="grid lg:grid-cols-2 gap-12 items-center mt-8">
                            <div className="space-y-8">
                                <div className="inline-flex items-center space-x-2 bg-purple-100 text-purple-800 px-4 py-2 rounded-full text-sm font-semibold">
                                    <span>✨</span>
                                    <span>Free Static QR Codes Forever</span>
                                </div>

                                <h1 className="text-5xl lg:text-6xl font-bold text-gray-900 leading-tight">
                                    Custom QR Code Generator with Logo
                                </h1>

                                <p className="text-xl text-gray-600 leading-relaxed">
                                    Add your logo, choose custom colors, and design unique frames. Professional QR codes in minutes – try it free, no signup required.
                                </p>

                                <div className="space-y-3">
                                    {[
                                        'No signup required to test',
                                        'High-resolution downloads',
                                        'Tested for scannability',
                                    ].map((feature, index) => (
                                        <div key={index} className="flex items-center space-x-3">
                                            <div className="flex-shrink-0 w-5 h-5 bg-green-500 rounded-full flex items-center justify-center">
                                                <CheckCircle2 className="w-3 h-3 text-white" />
                                            </div>
                                            <span className="text-gray-700">{feature}</span>
                                        </div>
                                    ))}
                                </div>

                                <div className="flex flex-col sm:flex-row gap-4">
                                    <Link href="/signup">
                                        <Button size="lg" className="text-lg px-8 py-4 w-full sm:w-auto">
                                            Try Designer Now
                                        </Button>
                                    </Link>
                                    <Link
                                        href="#examples"
                                        className="inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 border border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-gray-500 px-6 py-3 text-lg w-full sm:w-auto"
                                    >
                                        See Examples
                                    </Link>
                                </div>
                            </div>

                            {/* Preview Card */}
                            <div className="relative">
                                <Card className="p-8 shadow-2xl h-full min-h-[500px]">
                                    <MiniGenerator />
                                </Card>
                            </div>
                        </div>
                    </div>
                </section>

                {/* Scan-Safe Technology Section */}
                <section className="py-16 bg-blue-50">
                    <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-5xl">
                        <div className="text-center mb-12">
                            <h2 className="text-4xl font-bold text-gray-900 mb-4">
                                Your Logo Won't Break the QR Code – Here's Why
                            </h2>
                            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
                                QR codes have built-in error correction. Our generator uses the highest level (H = 30% redundancy), which means up to 30% of the code can be covered or damaged and still scan perfectly.
                            </p>
                        </div>

                        <Card className="p-8">
                            <div className="prose max-w-none">
                                <p className="text-gray-700 mb-6">
                                    When you add a logo, we automatically:
                                </p>
                                <ul className="space-y-3 mb-6">
                                    <li className="flex items-start space-x-3">
                                        <CheckCircle2 className="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" />
                                        <span>Calculate safe placement zones</span>
                                    </li>
                                    <li className="flex items-start space-x-3">
                                        <CheckCircle2 className="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" />
                                        <span>Size your logo to stay within error correction limits</span>
                                    </li>
                                    <li className="flex items-start space-x-3">
                                        <CheckCircle2 className="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" />
                                        <span>Test scannability before download</span>
                                    </li>
                                </ul>

                                <div className="bg-gray-50 border border-gray-200 rounded-lg p-6 mt-6">
                                    <p className="text-sm text-gray-600 mb-2 font-semibold">Technical Details:</p>
                                    <p className="text-sm text-gray-700">
                                        Based on DENSO WAVE QR Code specification (ISO/IEC 18004). Error correction levels: L (7%), M (15%), Q (25%), H (30%). We use Level H for maximum reliability with custom designs.
                                    </p>
                                </div>
                            </div>
                        </Card>
                    </div>
                </section>

                {/* Features Grid */}
                <section className="py-20">
                    <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
                        <div className="text-center mb-16">
                            <h2 className="text-4xl font-bold text-gray-900 mb-4">
                                Everything You Need for Branded QR Codes
                            </h2>
                        </div>

                        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                            {features.map((feature, index) => (
                                <Card key={index} className="p-6 hover:shadow-lg transition-shadow">
                                    <feature.icon className="w-10 h-10 text-primary-600 mb-4" />
                                    <h3 className="text-xl font-semibold text-gray-900 mb-2">
                                        {feature.title}
                                    </h3>
                                    <p className="text-gray-600">{feature.description}</p>
                                </Card>
                            ))}
                        </div>
                    </div>
                </section>

                {/* Design Gallery */}
                <section id="examples" className="py-20 bg-gray-50">
                    <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
                        <div className="text-center mb-16">
                            <h2 className="text-4xl font-bold text-gray-900 mb-4">
                                Get Inspired: Custom QR Code Examples
                            </h2>
                            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
                                Real examples of custom QR codes for different industries and use cases
                            </p>
                        </div>

                        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                            {designExamples.map((example, index) => (
                                <Card key={index} className="p-4 hover:shadow-xl transition-shadow group">
                                    <div className="relative aspect-square mb-4 bg-white rounded-lg overflow-hidden">
                                        <Image
                                            src={example.image}
                                            alt={`${example.name} - ${example.description}`}
                                            fill
                                            className="object-contain p-4"
                                        />
                                    </div>
                                    <div className="space-y-2">
                                        <div className="flex items-center justify-between">
                                            <span className="text-xs font-semibold text-primary-600 uppercase">
                                                {example.category}
                                            </span>
                                        </div>
                                        <h3 className="font-bold text-gray-900">{example.name}</h3>
                                        <p className="text-sm text-gray-600">{example.description}</p>
                                        <Link href="/signup">
                                            <Button variant="outline" size="sm" className="w-full mt-3">
                                                Use This Style
                                            </Button>
                                        </Link>
                                    </div>
                                </Card>
                            ))}
                        </div>
                    </div>
                </section>

                {/* How It Works */}
                <section className="py-20">
                    <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-6xl">
                        <div className="text-center mb-16">
                            <h2 className="text-4xl font-bold text-gray-900 mb-4">
                                Create Your Custom QR Code in 4 Steps
                            </h2>
                        </div>

                        <div className="grid md:grid-cols-2 gap-8">
                            {[
                                {
                                    step: 1,
                                    title: 'Choose QR Type & Enter Data',
                                    description: 'URL, vCard, WiFi, Text, Email, SMS. Enter your destination.',
                                },
                                {
                                    step: 2,
                                    title: 'Upload Your Logo',
                                    description: 'Drag & drop PNG/SVG/JPG. Auto-positioned and sized. Or choose from icon library.',
                                },
                                {
                                    step: 3,
                                    title: 'Customize Design',
                                    description: 'Pick brand colors or gradients. Choose frame style ("Scan Me", custom text). Adjust corner shapes.',
                                },
                                {
                                    step: 4,
                                    title: 'Download & Use',
                                    description: 'High-res PNG or vector SVG. Print-ready quality. Scan-tested and verified.',
                                },
                            ].map((step, index) => (
                                <Card key={index} className="p-6">
                                    <div className="flex items-start space-x-4">
                                        <div className="flex-shrink-0 w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center">
                                            <span className="text-xl font-bold text-primary-600">{step.step}</span>
                                        </div>
                                        <div className="flex-1">
                                            <h3 className="text-xl font-bold text-gray-900 mb-2">{step.title}</h3>
                                            <p className="text-gray-600">{step.description}</p>
                                        </div>
                                    </div>
                                </Card>
                            ))}
                        </div>
                    </div>
                </section>

                {/* Comparison Section */}
                <section className="py-20 bg-gray-50">
                    <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-5xl">
                        <div className="text-center mb-16">
                            <h2 className="text-4xl font-bold text-gray-900 mb-4">
                                Why Custom QR Codes Perform Better
                            </h2>
                        </div>

                        <Card className="overflow-hidden">
                            <table className="w-full">
                                <thead className="bg-gray-100">
                                    <tr>
                                        <th className="px-6 py-4 text-left text-gray-900 font-semibold">Feature</th>
                                        <th className="px-6 py-4 text-center text-gray-900 font-semibold">Generic QR Code</th>
                                        <th className="px-6 py-4 text-center text-primary-600 font-semibold">Custom Branded QR Code</th>
                                    </tr>
                                </thead>
                                <tbody className="divide-y divide-gray-200">
                                    {comparison.map((row, index) => (
                                        <tr key={index}>
                                            <td className="px-6 py-4 text-gray-900 font-medium">{row.feature}</td>
                                            <td className="px-6 py-4 text-center text-gray-600">❌ {row.generic}</td>
                                            <td className="px-6 py-4 text-center text-primary-600 font-semibold">✅ {row.branded}</td>
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                        </Card>

                        <div className="mt-8 bg-blue-50 border border-blue-200 rounded-lg p-6">
                            <p className="text-sm text-gray-700">
                                <strong>Note:</strong> Branded QR codes can improve brand recognition and recall, user trust and engagement, and campaign tracking and attribution.
                            </p>
                        </div>
                    </div>
                </section>

                {/* Use Cases */}
                <section className="py-20">
                    <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
                        <div className="text-center mb-16">
                            <h2 className="text-4xl font-bold text-gray-900 mb-4">
                                Perfect For Every Industry
                            </h2>
                        </div>

                        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
                            {useCases.map((useCase, index) => (
                                <Card key={index} className="p-6 text-center hover:shadow-lg transition-shadow">
                                    <div className="text-5xl mb-4">{useCase.icon}</div>
                                    <h3 className="text-xl font-semibold text-gray-900 mb-3">{useCase.title}</h3>
                                    <p className="text-gray-600">{useCase.description}</p>
                                </Card>
                            ))}
                        </div>
                    </div>
                </section>

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

                        <div className="space-y-6">
                            {faqs.map((faq, index) => (
                                <Card key={index} className="p-6">
                                    <h3 className="text-lg font-semibold text-gray-900 mb-3">
                                        {faq.question}
                                    </h3>
                                    <p className="text-gray-600">{faq.answer}</p>
                                </Card>
                            ))}
                        </div>
                    </div>
                </section>

                {/* Trust Section */}
                <section className="py-16">
                    <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-5xl">
                        <div className="text-center">
                            <h2 className="text-3xl font-bold text-gray-900 mb-8">
                                Secure and Reliable
                            </h2>
                            <div className="flex flex-wrap justify-center gap-8">
                                <div className="flex items-center space-x-2 text-gray-700">
                                    <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
                                        <CheckCircle2 className="w-5 h-5 text-green-600" />
                                    </div>
                                    <span>Your data is never stored</span>
                                </div>
                                <div className="flex items-center space-x-2 text-gray-700">
                                    <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
                                        <CheckCircle2 className="w-5 h-5 text-green-600" />
                                    </div>
                                    <span>Works on all modern devices and QR scanners</span>
                                </div>
                                <div className="flex items-center space-x-2 text-gray-700">
                                    <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
                                        <CheckCircle2 className="w-5 h-5 text-green-600" />
                                    </div>
                                    <span>Used by businesses and creators worldwide</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                {/* WHY CUSTOM DESIGN MATTERS — STATISTICS */}
                <section className="py-16 bg-white">
                    <div className="container mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
                        <div className="flex items-center gap-2 mb-3">
                            <svg className="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" /></svg>
                            <span className="text-sm font-semibold text-purple-600 uppercase tracking-wider">Research-backed impact</span>
                        </div>
                        <h2 className="text-3xl font-bold text-gray-900 mb-4">
                            Why Brand Design in QR Codes Increases Engagement
                        </h2>
                        <p className="text-gray-600 mb-10 max-w-2xl">
                            A <strong>custom QR code</strong> with your brand colors and logo doesn't just look better — it signals trust and gets scanned more often.
                        </p>

                        <div className="grid md:grid-cols-2 gap-6 mb-8">
                            <div className="bg-purple-50 border border-purple-100 rounded-2xl p-6">
                                <div className="text-4xl font-extrabold text-purple-600 mb-2">+80%</div>
                                <p className="text-gray-700 text-sm leading-relaxed mb-3">
                                    Color increases brand recognition by up to 80%. A branded QR code using your brand colors is recognized and associated with your business faster than a generic black-and-white grid — increasing scan intent.
                                </p>
                                <p className="text-xs text-gray-500">
                                    Source: <a href="https://www.loyola.edu/academia/marketing/insights/brand-recognition" target="_blank" rel="noopener noreferrer" className="underline hover:text-gray-700">University of Loyola Maryland</a> — Color &amp; Brand Recognition Study
                                </p>
                            </div>

                            <div className="bg-blue-50 border border-blue-100 rounded-2xl p-6">
                                <div className="text-4xl font-extrabold text-blue-600 mb-2">+40%</div>
                                <p className="text-gray-700 text-sm leading-relaxed mb-3">
                                    Adding a recognizable brand element — like a logo — to a functional graphic increases user engagement and trust. Familiar visual cues reduce hesitation and increase the likelihood of scanning.
                                </p>
                                <p className="text-xs text-gray-500">
                                    Source: <a href="https://www.nngroup.com/articles/visual-design-trust/" target="_blank" rel="noopener noreferrer" className="underline hover:text-gray-700">Nielsen Norman Group</a> — Visual Design and Trust Research
                                </p>
                            </div>
                        </div>

                        <p className="text-xs text-gray-400 italic">
                            By Timo Knuth, QR Master · Last updated: June 2025 · Based on independent academic and industry research
                        </p>
                    </div>
                </section>

                <GrowthLinksSection
                    eyebrow="Branded workflows"
                    title="Where custom QR design supports the workflow"
                    description="Custom QR codes work best when they support a real business journey, not when they are only decoration. These are the strongest adjacent workflows."
                    links={relatedUseCaseLinks}
                    pageType="commercial"
                    cluster="custom-qr"
                />

                {/* Final CTA */}
                <section className="py-20 bg-gradient-to-r from-purple-600 to-blue-600 text-white">
                    <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl text-center">
                        <h2 className="text-4xl font-bold mb-6">
                            Start Creating Branded QR Codes Today
                        </h2>
                        <p className="text-xl mb-8 text-purple-100">
                            Free static QR codes with logo, colors, and frames. No signup required to try. Upgrade for tracking and bulk generation.
                        </p>
                        <div className="flex flex-col sm:flex-row gap-4 justify-center">
                            <Link href="/signup">
                                <Button
                                    size="lg"
                                    variant="secondary"
                                    className="text-lg px-8 py-4 w-full sm:w-auto bg-white text-purple-600 hover:bg-gray-100"
                                >
                                    Try Designer Free
                                </Button>
                            </Link>
                            <Link href="/pricing">
                                <Button
                                    size="lg"
                                    variant="outline"
                                    className="text-lg px-8 py-4 w-full sm:w-auto border-white text-white hover:bg-white/10"
                                >
                                    See Pricing for Dynamic Codes
                                </Button>
                            </Link>
                        </div>
                    </div>
                </section>
            </div>
        </>
    );
}
