import React from 'react';
import type { Metadata } from 'next';
import InstagramGenerator from './InstagramGenerator';
import { Instagram, Shield, Zap, Smartphone, Camera, Heart, Download, Share2, 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: 'Free Instagram QR Code Generator | Get More Followers | QR Master',
    },
    description: 'Create a free Instagram QR code for your profile. Scanners follow you instantly — no app login required. Customizable & downloadable in seconds.',
    keywords: ['instagram qr code', 'insta qr generator', 'ig nametag generator', 'instagram follow qr', 'social media qr code', 'qr code for instagram', 'instagram profile qr code', 'insta qr code', 'instagram nametag generator'],
    alternates: {
        canonical: 'https://www.qrmaster.net/tools/instagram-qr-code',
        languages: {
            'x-default': 'https://www.qrmaster.net/tools/instagram-qr-code',
            en: 'https://www.qrmaster.net/tools/instagram-qr-code',
        },
    },
    openGraph: {
        title: 'Free Instagram QR Code Generator | QR Master',
        description: 'Generate QR codes to grow your Instagram following. Instant app redirect.',
        type: 'website',
        url: 'https://www.qrmaster.net/tools/instagram-qr-code',
        images: [{ url: '/og-instagram-generator.png', width: 1200, height: 630 }],
    },
    twitter: {
        card: 'summary_large_image',
        title: 'Free Instagram QR Code Generator',
        description: 'Create QR codes for Instagram. Boost your followers.',
    },
    robots: {
        index: true,
        follow: true,
    },
};

// JSON-LD Structured Data
const jsonLd = {
    '@context': 'https://schema.org',
    '@graph': [
        generateSoftwareAppSchema(
            'Instagram QR Code Generator',
            'Generate QR codes that direct users to an Instagram profile or post.',
            '/og-instagram-generator.png'
        ),
        {
            '@type': 'HowTo',
            name: 'How to Create an Instagram QR Code',
            description: 'Create a QR code that opens an Instagram profile.',
            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: 'Enter Username',
                    text: 'Type your Instagram handle (e.g. @yourbrand) or paste your profile link.',
                },
                {
                    '@type': 'HowToStep',
                    position: 2,
                    name: 'Customize',
                    text: 'Choose a gradient color that matches the Instagram vibe or your own brand.',
                },
                {
                    '@type': 'HowToStep',
                    position: 3,
                    name: 'Download',
                    text: 'Save the QR code image.',
                },
                {
                    '@type': 'HowToStep',
                    position: 4,
                    name: 'Test',
                    text: 'Scan the code to ensure it opens the correct profile.',
                },
                {
                    '@type': 'HowToStep',
                    position: 5,
                    name: 'Share',
                    text: 'Put it on your packaging, business cards, or storefront.',
                },
            ],
            totalTime: 'PT30S',
        },
        generateFaqSchema({
            'Is this an Instagram Nametag?': {
                question: 'Is this an Instagram Nametag?',
                answer: 'It works similarly! While Instagram has its own internal "Nametag" or "QR Code" feature, our generator allows you to create a standard QR code that is more customizable and can be tracked with our Dynamic plans.',
            },
            'Does it open the Instagram app?': {
                question: 'Does it open the Instagram app?',
                answer: 'Yes. When scanned on a mobile device with Instagram installed, it will deep-link directly to the profile in the app.',
            },
            'Can I link to a specific photo or reel?': {
                question: 'Can I link to a specific photo or reel?',
                answer: 'Yes! Instead of your username, just paste the full link to the specific post or reel.',
            },
            'Is it free?': {
                question: 'Is it free?',
                answer: 'Yes, generating this QR code is 100% free.',
            },
            'Can I track scans?': {
                question: 'Can I track scans?',
                answer: 'Not with this static tool. If you need scan analytics, consider using our Dynamic QR Code solution.',
            },
        }),
    ],
};

export default function InstagramQRCodePage() {
    return (
        <>
            <script
                type="application/ld+json"
                dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
            />
            <ToolBreadcrumb toolName="Instagram QR Code Generator" toolSlug="instagram-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 bg-gradient-to-br from-[#833AB4] via-[#FD1D1D] to-[#FCA145]">
                    <div className="absolute inset-0 opacity-10">
                        <svg className="w-full h-full" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                            <circle cx="0" cy="0" r="40" fill="white" fillOpacity="0.1" />
                            <circle cx="100" cy="100" r="50" fill="white" fillOpacity="0.1" />
                        </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-pink-300 opacity-75"></span>
                                    <span className="relative inline-flex rounded-full h-2 w-2 bg-pink-300"></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">
                                Instagram QR Code Generator<br className="hidden lg:block" />
                                <span className="text-white drop-shadow-md">— Boost Your Following</span>
                            </h1>

                            <p className="text-lg md:text-xl text-pink-50 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
                                Connect physically to digitally. Let customers scan to follow your Instagram profile instantly.
                                <strong className="text-white block sm:inline mt-2 sm:mt-0"> Grow your brand effortlessly.</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/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
                                    <Heart className="w-4 h-4 text-pink-200" />
                                    More Likes
                                </div>
                                <div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
                                    <Zap className="w-4 h-4 text-yellow-200" />
                                    Instant Follow
                                </div>
                                <div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
                                    <Smartphone className="w-4 h-4 text-white" />
                                    App Deep Link
                                </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-white/10 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />

                            <div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform -rotate-3 hover:rotate-0 transition-all duration-700 group">
                                <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />

                                <div className="w-full bg-white rounded-xl shadow-lg p-4 mb-6 relative overflow-hidden flex flex-col items-center">
                                    <div className="w-16 h-16 rounded-full p-[2px] bg-gradient-to-tr from-[#FCA145] via-[#FD1D1D] to-[#833AB4] mb-2">
                                        <div className="w-full h-full rounded-full bg-white p-1">
                                            <div className="w-full h-full rounded-full bg-slate-200" />
                                        </div>
                                    </div>
                                    <div className="text-sm font-bold text-slate-900">@yourbrand</div>
                                </div>

                                <div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner relative overflow-hidden flex items-center justify-center">
                                    <QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#E1306C" level="Q" />
                                </div>

                                {/* Floating Badge */}
                                <div className="absolute -bottom-6 -left-6 bg-white py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
                                    <div className="bg-gradient-to-tr from-[#FCA145] to-[#E1306C] p-2 rounded-full text-white">
                                        <Camera className="w-5 h-5" />
                                    </div>
                                    <div className="text-left">
                                        <div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Profile</div>
                                        <div className="text-sm font-bold text-slate-900">Following</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                {/* GENERATOR SECTION */}
                <section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
                    <InstagramGenerator />
                </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 Instagram QR Codes Work
                        </h2>

                        <div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
                            <article className="text-center">
                                <div className="w-14 h-14 rounded-2xl bg-[#E1306C]/10 flex items-center justify-center mx-auto mb-4">
                                    <Instagram className="w-7 h-7 text-[#E1306C]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">1. Username</h3>
                                <p className="text-slate-600 text-sm">
                                    Enter your Instagram handle. No need to login or connect your account.
                                </p>
                            </article>

                            <article className="text-center">
                                <div className="w-14 h-14 rounded-2xl bg-[#E1306C]/10 flex items-center justify-center mx-auto mb-4">
                                    <Smartphone className="w-7 h-7 text-[#E1306C]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">2. Print</h3>
                                <p className="text-slate-600 text-sm">
                                    Add the QR code to your packaging, business cards, or table tents.
                                </p>
                            </article>

                            <article className="text-center">
                                <div className="w-12 h-12 rounded-2xl bg-[#E1306C]/10 flex items-center justify-center mx-auto mb-4">
                                    <Download className="w-6 h-6 text-[#E1306C]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">3. Download</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">
                                    Save your custom QR code.
                                </p>
                            </article>

                            <article className="text-center">
                                <div className="w-12 h-12 rounded-2xl bg-[#E1306C]/10 flex items-center justify-center mx-auto mb-4">
                                    <Heart className="w-6 h-6 text-[#E1306C]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">4. Scan</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">
                                    Fans scan to instantly visit your profile.
                                </p>
                            </article>

                            <article className="text-center">
                                <div className="w-12 h-12 rounded-2xl bg-[#E1306C]/10 flex items-center justify-center mx-auto mb-4">
                                    <Share2 className="w-6 h-6 text-[#E1306C]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">5. Grow</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">
                                    Convert offline traffic into followers.
                                </p>
                            </article>
                        </div>
                    </div>
                </section>

                {/* STATS SECTION */}
                <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-[#833AB4]/5 via-[#FD1D1D]/5 to-[#FCA145]/5">
                    <div className="max-w-4xl mx-auto">
                        <div className="text-center mb-10">
                            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#E1306C]/10 text-[#E1306C] text-sm font-semibold mb-4">
                                <TrendingUp className="w-4 h-4" />
                                Why Instagram QR Codes Work
                            </div>
                            <h2 className="text-3xl font-bold text-slate-900 mb-3">The Numbers Behind the Strategy</h2>
                            <p className="text-slate-500 text-sm max-w-xl mx-auto">Independent research on Instagram reach and QR code effectiveness.</p>
                        </div>
                        <div className="grid md:grid-cols-2 gap-6">
                            <div className="bg-white rounded-2xl p-7 shadow-sm border border-slate-100">
                                <div className="text-4xl font-extrabold text-[#E1306C] mb-2">2 Billion</div>
                                <div className="font-semibold text-slate-800 mb-1">Monthly Active Users on Instagram</div>
                                <p className="text-slate-500 text-sm">Instagram has over 2 billion monthly active users globally, making it one of the largest social platforms for brand discovery. A single well-placed QR code taps directly into that audience.</p>
                                <div className="mt-4 text-xs text-slate-400">Source: Meta, Instagram Press (2023)</div>
                            </div>
                            <div className="bg-white rounded-2xl p-7 shadow-sm border border-slate-100">
                                <div className="text-4xl font-extrabold text-[#833AB4] mb-2">83%</div>
                                <div className="font-semibold text-slate-800 mb-1">of Instagram Users Discover New Brands There</div>
                                <p className="text-slate-500 text-sm">83% of Instagram users say they discover new products and brands on the platform. An Instagram QR code on your packaging or storefront converts that discovery moment offline → online.</p>
                                <div className="mt-4 text-xs text-slate-400">Source: Facebook for Business / Instagram Business (2019)</div>
                            </div>
                        </div>
                    </div>
                </section>

                <RelatedTools />

                <GrowthLinksSection
                    eyebrow="Grow Your Social Presence"
                    title="More Tools to Build Your Brand Online"
                    description="Combine your Instagram QR code with other social and marketing tools from QR Master."
                    pageType="use_case"
                    cluster="social-media"
                    useCase="instagram-qr-code"
                    links={[
                        {
                            href: '/tools/whatsapp-qr-code',
                            title: 'WhatsApp QR Code',
                            description: 'Let customers message you instantly — no number sharing required.',
                            ctaLabel: 'Create WhatsApp QR',
                        },
                        {
                            href: '/tools/vcard-qr-code',
                            title: 'Digital Business Card',
                            description: 'Turn your vCard into a scannable QR code with all your contact details.',
                            ctaLabel: 'Create vCard QR',
                        },
                        {
                            href: '/dynamic-qr-code-generator',
                            title: 'Dynamic QR Codes',
                            description: 'Track how many people scan your Instagram QR code — by day, device, and city.',
                            ctaLabel: 'Try Dynamic QR',
                        },
                    ]}
                />

                {/* FAQ SECTION */}
                <section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
                    <div className="max-w-3xl mx-auto">
                        <p className="text-center text-xs text-slate-400 mb-8">
                            By <a href="/authors/timo" className="underline hover:text-slate-600">Timo Knuth</a> · Last updated: June 2025
                        </p>
                        <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 Instagram QR codes.
                        </p>

                        <div className="space-y-4">
                            <FaqItem
                                question="Does this work for private accounts?"
                                answer="Yes, the link will take users to your profile. If your account is private, they will still have to request to follow you."
                            />
                            <FaqItem
                                question="Can I link to a Story?"
                                answer="Yes, but Stories expire after 24 hours (unless saved as a Highlight). Linking to a Highlight or your main Profile is usually better for printed materials."
                            />
                            <FaqItem
                                question="Can I customize the frame?"
                                answer="Yes, we offer several frame options like 'Follow Us' or 'Scan Me' to encourage action."
                            />
                            <FaqItem
                                question="Does it expire?"
                                answer="No. The QR code will work as long as your Instagram username remains the same."
                            />
                            <FaqItem
                                question="Can I track scans?"
                                answer="Not with this static tool. If you need scan analytics, consider using our Dynamic QR Code solution."
                            />
                        </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>
    );
}
