import React from 'react';
import type { Metadata } from 'next';
import VCardGenerator from './VCardGenerator';
import { User, Shield, Zap, Smartphone, Contact, Share2, Check, UserPlus, TrendingUp } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { GrowthLinksSection } from '@/components/marketing/GrowthLinksSection';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';

// SEO Optimized Metadata
export const metadata: Metadata = {
    title: {
        absolute: 'vCard QR Code Generator - Save to Contacts in One Tap',
    },
    description: 'Put your contact details on a business card as a QR code. One scan saves you to their phone - no typing, no app. Download print-ready PNG or SVG. No signup.',
    keywords: ['vcard qr code', 'business card qr code', 'contact qr generator', 'digital business card', 'add to contacts qr', 'visitenkarte qr code', 'digitale visitenkarte erstellen', 'kontakt qr code', 'elektronische visitenkarte', 'vcard erstellen kostenlos'],
    alternates: {
        canonical: 'https://www.qrmaster.net/tools/vcard-qr-code',
        languages: {
            'x-default': 'https://www.qrmaster.net/tools/vcard-qr-code',
            en: 'https://www.qrmaster.net/tools/vcard-qr-code',
        },
    },
    openGraph: {
        title: 'vCard QR Code Generator - Save to Contacts in One Tap',
        description: 'One scan saves you to their phone. No typing, no app. Print-ready PNG or SVG.',
        type: 'website',
        url: 'https://www.qrmaster.net/tools/vcard-qr-code',
        images: [{ url: '/og-vcard-generator.png', width: 1200, height: 630 }],
    },
    twitter: {
        card: 'summary_large_image',
        title: 'vCard QR Code Generator - Save to Contacts in One Tap',
        description: 'One scan saves you to their phone. No typing, no app. Print-ready PNG or SVG.',
    },
    robots: {
        index: true,
        follow: true,
    },
};

// JSON-LD Structured Data
const jsonLd = {
    '@context': 'https://schema.org',
    '@graph': [
        generateSoftwareAppSchema(
            'vCard QR Code Generator',
            'Generate vCard (VCF) QR codes for business cards. Scanners can save contact info instantly.',
            '/og-vcard-generator.png'
        ),
        {
            '@type': 'HowTo',
            name: 'How to Create a vCard QR Code',
            datePublished: '2024-01-01',
            dateModified: '2026-07-15',
            author: {
                '@type': 'Person',
                name: 'Timo Knuth',
                url: 'https://www.qrmaster.net/authors/timo',
            },
            description: 'Create a QR code that saves your contact details.',
            step: [
                {
                    '@type': 'HowToStep',
                    position: 1,
                    name: 'Enter Details',
                    text: 'Fill in your Name, Phone, Email, Company, and Address.',
                },
                {
                    '@type': 'HowToStep',
                    position: 2,
                    name: 'Customize',
                    text: 'Select a color that matches your brand and add a frame.',
                },
                {
                    '@type': 'HowToStep',
                    position: 3,
                    name: 'Download',
                    text: 'Download the QR code image and place it on your physical business card.',
                },
            ],
            totalTime: 'PT1M',
        },
        generateFaqSchema({
            'How does a vCard QR code work?': {
                question: 'How does a vCard QR code work?',
                answer: 'A vCard QR code contains your contact information in a standardized format (VCF). When scanned, the phone recognizes it as a contact card and prompts the user to "Save Contact" to their address book.',
            },
            'Is there a limit to how much info I can add?': {
                question: 'Is there a limit to how much info I can add?',
                answer: 'Static QR codes hold data directly in the pattern. The more data you add (long addresses, bio), the denser and harder to scan the QR code becomes. We recommend sticking to essential contact info for static codes.',
            },
            'Can I update my info later?': {
                question: 'Can I update my info later?',
                answer: 'No. This is a static vCard QR code. Once created, the info cannot be changed. If you move jobs or change numbers, you must print a new code. For editable cards, use our Dynamic vCard Plus.',
            },
            'Does it work on iPhone and Android?': {
                question: 'Does it work on iPhone and Android?',
                answer: 'Yes. Both iOS (Camera app) and Android (Camera or Google Lens) natively support vCard QR codes and correctly import the contact data.',
            },
            'Is the vCard QR code generator free?': {
                question: 'Is the vCard QR code generator free?',
                answer: 'Yes. Creating a static vCard QR code with this generator is completely free, with no signup, no watermark, and no expiry. The code is generated in your browser and you can download it immediately.',
            },
            'Can I test the QR code before printing?': {
                question: 'Can I test the QR code before printing?',
                answer: 'Yes - and you should. Scan the generated code with your own phone camera before sending it to print. If the contact card opens with the correct name, phone, and email, the printed version will behave identically.',
            },
        }),
    ],
};

export default function VCardQRCodePage() {
    return (
        <>
            <script
                type="application/ld+json"
                dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
            />
            <ToolBreadcrumb toolName="vCard QR Code Generator" toolSlug="vcard-qr-code" />

            <div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>

                {/* HERO SECTION */}
                <section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden" style={{ backgroundColor: '#9F1239' }}>
                    <div className="absolute inset-0 opacity-10">
                        <svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
                            <path d="M0 100 C 20 0 50 0 100 100 Z" fill="url(#grad1)" />
                            <defs>
                                <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
                                    <stop offset="0%" style={{ stopColor: 'white', stopOpacity: 1 }} />
                                    <stop offset="100%" style={{ stopColor: 'white', stopOpacity: 0 }} />
                                </linearGradient>
                            </defs>
                        </svg>
                    </div>

                    <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
                        <div className="text-center lg:text-left">
                            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
                                <span className="flex h-2 w-2 relative">
                                    <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-400 opacity-75"></span>
                                    <span className="relative inline-flex rounded-full h-2 w-2 bg-rose-400"></span>
                                </span>
                                Free Tool - No Signup Required
                            </div>

                            <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
                                The Modern Way to <br className="hidden lg:block" />
                                <span className="text-transparent bg-clip-text bg-gradient-to-r from-rose-300 to-pink-300">Share Your Contact</span>
                            </h1>

                            <p className="text-lg md:text-xl text-indigo-100 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
                                Create a scannable Digital Business Card. One scan saves your name, phone, email, and address instantly.
                                <strong className="text-white block sm:inline mt-2 sm:mt-0"> Free & Professional.</strong>
                            </p>

                            <div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
                                <div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
                                    <UserPlus className="w-4 h-4 text-rose-300" />
                                    Instant Save
                                </div>
                                <div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
                                    <Share2 className="w-4 h-4 text-amber-400" />
                                    Easy Share
                                </div>
                                <div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
                                    <Shield className="w-4 h-4 text-purple-400" />
                                    No Data Stored
                                </div>
                            </div>
                        </div>

                        {/* Visual Abstract */}
                        <div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
                            <div className="absolute w-[500px] h-[500px] bg-indigo-500/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />

                            <div className="relative w-96 h-60 bg-white/10 backdrop-blur-2xl border border-white/30 rounded-2xl shadow-2xl p-6 transform rotate-6 hover:rotate-3 transition-all duration-700 group">
                                <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent" />

                                <div className="flex justify-between items-start relative z-10">
                                    <div className="space-y-4">
                                        <div className="w-16 h-16 rounded-full bg-white/20 border-2 border-white/30 flex items-center justify-center">
                                            <Contact className="w-8 h-8 text-white" />
                                        </div>
                                        <div className="space-y-1">
                                            <div className="h-4 w-32 bg-white/90 rounded-sm" />
                                            <div className="h-3 w-20 bg-emerald-400/90 rounded-sm" />
                                        </div>
                                    </div>

                                    <div className="w-24 h-24 bg-white rounded-lg p-1.5 shadow-lg">
                                        <QRCodeSVG value="https://www.qrmaster.net" size={84} fgColor="#1A1265" />
                                    </div>
                                </div>

                                <div className="absolute bottom-6 left-6 space-y-2 z-10">
                                    <div className="h-2 w-48 bg-white/40 rounded-full" />
                                    <div className="h-2 w-40 bg-white/30 rounded-full" />
                                </div>

                                {/* Floating Badge */}
                                <div className="absolute -bottom-4 -left-4 bg-white py-2 px-4 rounded-lg shadow-xl flex items-center gap-2 transform scale-90">
                                    <div className="bg-emerald-100 p-1.5 rounded-full">
                                        <Check className="w-3 h-3 text-emerald-600" />
                                    </div>
                                    <span className="text-xs font-bold text-slate-900">Saved to Contacts</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                {/* GENERATOR SECTION */}
                <section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
                    <VCardGenerator />
                </section>

                {/* HOW IT WORKS */}
                <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
                    <div className="max-w-4xl mx-auto">
                        <h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
                            How vCard QR Codes Work
                        </h2>

                        <div className="grid md:grid-cols-3 gap-8">
                            <article className="text-center">
                                <div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
                                    <Contact className="w-7 h-7 text-[#1A1265]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">1. Enter Details</h3>
                                <p className="text-slate-600 text-sm">
                                    Fill in your professional contact information. Only add what you want to share.
                                </p>
                            </article>

                            <article className="text-center">
                                <div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
                                    <Smartphone className="w-7 h-7 text-[#1A1265]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">2. Scan</h3>
                                <p className="text-slate-600 text-sm">
                                    A potential client or partner scans your card with their phone camera.
                                </p>
                            </article>

                            <article className="text-center">
                                <div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
                                    <UserPlus className="w-7 h-7 text-[#1A1265]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">3. Save</h3>
                                <p className="text-slate-600 text-sm">
                                    They tap "Create New Contact" to save your details instantly. No typing errors.
                                </p>
                            </article>
                        </div>
                    </div>
                </section>

                {/* WHY DIGITAL BUSINESS CARDS - STATISTICS */}
                <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
                    <div className="max-w-4xl mx-auto">
                        <div className="flex items-center gap-2 mb-3">
                            <TrendingUp className="w-5 h-5 text-rose-500" />
                            <span className="text-sm font-semibold text-rose-600 uppercase tracking-wider">Research-backed</span>
                        </div>
                        <h2 className="text-3xl font-bold text-slate-900 mb-4">
                            Why Digital Contact Sharing Outperforms Paper Cards
                        </h2>
                        <p className="text-slate-600 mb-10 max-w-2xl">
                            A <strong>vCard QR code</strong> solves the single biggest problem with traditional business cards: they get discarded before anyone saves your details.
                        </p>

                        <div className="grid md:grid-cols-2 gap-6 mb-8">
                            <div className="bg-rose-50 border border-rose-100 rounded-2xl p-6">
                                <div className="text-4xl font-extrabold text-rose-600 mb-2">88%</div>
                                <p className="text-slate-700 text-sm leading-relaxed mb-3">
                                    of traditional paper business cards are thrown away within a week of being handed out. A vCard QR code on your card saves contact details instantly - no manual typing, no lost connections.
                                </p>
                                <p className="text-xs text-slate-500">
                                    Source: <a href="https://www.adobe.com/express/learn/blog/business-card-statistics" target="_blank" rel="noopener noreferrer" className="underline hover:text-slate-700">Adobe Business Research</a>
                                </p>
                            </div>

                            <div className="bg-orange-50 border border-orange-100 rounded-2xl p-6">
                                <div className="text-4xl font-extrabold text-orange-600 mb-2">1-tap save</div>
                                <p className="text-slate-700 text-sm leading-relaxed mb-3">
                                    Instead of asking someone to manually type your name, phone, and email - a vCard QR code transfers all contact fields (name, phone, email, company, URL) directly into their phone's address book with a single scan.
                                </p>
                                <p className="text-xs text-slate-500">
                                    vCard 3.0 / VCF format - supported natively by iOS and Android
                                </p>
                            </div>
                        </div>

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

                {/* USE CASES */}
                <section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
                    <div className="max-w-4xl mx-auto">
                        <h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
                            Where a vCard QR Code Pays Off
                        </h2>
                        <p className="text-slate-600 text-center mb-10 max-w-2xl mx-auto">
                            A vCard QR code works anywhere someone should save your details in seconds - without typing anything.
                        </p>
                        <div className="grid md:grid-cols-3 gap-6">
                            <article className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                                <h3 className="font-bold text-slate-900 mb-2">Business cards</h3>
                                <p className="text-slate-600 text-sm leading-relaxed">
                                    Print the QR code on the back of your paper card. Instead of your card ending up in a drawer, your contact lands in the address book - name, phone, email, and company in one tap.
                                </p>
                            </article>
                            <article className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                                <h3 className="font-bold text-slate-900 mb-2">Events &amp; trade shows</h3>
                                <p className="text-slate-600 text-sm leading-relaxed">
                                    Put it on your badge, booth signage, or presentation slides. Attendees scan while you talk - no fumbling with cards, and no follow-up emails asking for your details.
                                </p>
                            </article>
                            <article className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                                <h3 className="font-bold text-slate-900 mb-2">Everyday networking</h3>
                                <p className="text-slate-600 text-sm leading-relaxed">
                                    Save it as your phone wallpaper or in your wallet. Any spontaneous meeting becomes a saved contact - perfect for freelancers, sales teams, and consultants.
                                </p>
                            </article>
                        </div>
                        <p className="text-slate-600 text-sm text-center mt-8">
                            Need to update your details after printing, or see how often your card gets scanned? Use a{' '}
                            <a href="/dynamic-qr-code-generator" className="font-semibold text-[#9F1239] hover:underline">dynamic QR code</a>{' '}
                            with{' '}
                            <a href="/qr-code-tracking" className="font-semibold text-[#9F1239] hover:underline">scan tracking</a>.
                        </p>
                    </div>
                </section>

                {/* GROWTH LINKS */}
                <GrowthLinksSection
                    eyebrow="Level up your QR strategy"
                    title="More ways to use QR codes for your brand"
                    description="A vCard QR code is a great start. Add custom design, tracking, and dynamic destinations to get the most out of every print."
                    links={[
                        {
                            href: '/custom-qr-code-generator',
                            title: 'Custom QR Code Generator',
                            description: 'Add your logo, brand colors, and a custom frame to your QR codes.',
                            ctaLabel: 'Custom QR with logo',
                        },
                        {
                            href: '/dynamic-qr-code-generator',
                            title: 'Dynamic QR Code Generator',
                            description: 'Update your contact destination after printing. No new QR code needed.',
                            ctaLabel: 'Dynamic QR with tracking',
                        },
                    ]}
                    pageType="commercial"
                    cluster="vcard-qr"
                />

                {/* RELATED TOOLS */}
                <RelatedTools />

                {/* FAQ SECTION */}
                <section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
                    <div className="max-w-3xl mx-auto">
                        <h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
                            Frequently Asked Questions
                        </h2>
                        <p className="text-slate-600 text-center mb-10">
                            Common questions about vCard QR codes.
                        </p>

                        <div className="space-y-4">
                            <FaqItem
                                question="Can I add a profile picture?"
                                answer="Not on a static vCard QR code. Static codes store data in the pixels, so adding an image would make the code too complex to scan. For profile pictures, social links, and rich media, use our Dynamic vCard Plus solution."
                            />
                            <FaqItem
                                question="How long does the QR code last?"
                                answer="Forever. Static vCard QR codes do not expire because the data is embedded directly in the image."
                            />
                            <FaqItem
                                question="What information is required?"
                                answer="Nothing is strictly required, but we recommend at least a First Name and either a Phone Number or Email so the contact is useful."
                            />
                            <FaqItem
                                question="Is my data safe?"
                                answer="Yes. This tool operates 100% in your browser. We do not store, see, or optimize your contact data. It goes directly from your input to the QR code."
                            />
                            <FaqItem
                                question="Is the vCard QR code generator free?"
                                answer="Yes. Creating a static vCard QR code is completely free - no signup, no watermark, no expiry. Generate, download, and print as many as you need."
                            />
                            <FaqItem
                                question="Can I test the QR code before printing?"
                                answer="Yes - scan the generated code with your own phone camera first. If the contact card opens with the correct details, the printed version will behave identically."
                            />
                        </div>
                    </div>
                </section>

            </div>
        </>
    );
}

function FaqItem({ question, answer }: { question: string; answer: string }) {
    return (
        <details 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">
                {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">
                {answer}
            </div>
        </details>
    );
}