import React from 'react';
import type { Metadata } from 'next';
import FacebookGenerator from './FacebookGenerator';
import { Facebook, Shield, Zap, Smartphone, ThumbsUp, Users, Download, Share2 } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';

// SEO Optimized Metadata
export const metadata: Metadata = {
    title: {
        absolute: 'Free Facebook QR Code Generator | Get Likes & Follows | QR Master',
    },
    description: 'Create a QR code for your Facebook Page, Profile, or Group. Facebook QR Code erstellen. Scanners follow you instantly. Free & Easy.',
    keywords: ['facebook qr code', 'fb qr generator', 'facebook page qr', 'follow qr code', 'social media qr code', 'facebook qr code erstellen', 'facebook seite qr code', 'facebook gruppe qr code', 'facebook profil qr code', 'mehr likes qr code'],
    alternates: {
        canonical: 'https://www.qrmaster.net/tools/facebook-qr-code',
    },
    openGraph: {
        title: 'Free Facebook QR Code Generator | QR Master',
        description: 'Generate QR codes to grow your Facebook audience. Instant app redirect.',
        type: 'website',
        url: 'https://www.qrmaster.net/tools/facebook-qr-code',
        images: [{ url: '/og-facebook-generator.png', width: 1200, height: 630 }],
    },
    twitter: {
        card: 'summary_large_image',
        title: 'Free Facebook QR Code Generator',
        description: 'Create QR codes for Facebook. Boost your engagement.',
    },
    robots: {
        index: true,
        follow: true,
    },
};

// JSON-LD Structured Data
const jsonLd = {
    '@context': 'https://schema.org',
    '@graph': [
        generateSoftwareAppSchema(
            'Facebook QR Code Generator',
            'Generate QR codes that direct users to a Facebook page, profile, or post.',
            '/og-facebook-generator.png'
        ),
        {
            '@type': 'HowTo',
            name: 'How to Create a Facebook QR Code',
            description: 'Create a QR code that opens a Facebook page.',
            step: [
                {
                    '@type': 'HowToStep',
                    position: 1,
                    name: 'Get Link',
                    text: 'Copy the URL of your Facebook Page, Profile, or Group.',
                },
                {
                    '@type': 'HowToStep',
                    position: 2,
                    name: 'Paste Link',
                    text: 'Paste the URL into the generator.',
                },
                {
                    '@type': 'HowToStep',
                    position: 3,
                    name: 'Customize',
                    text: 'Choose your brand color and add a call-to-action frame.',
                },
                {
                    '@type': 'HowToStep',
                    position: 4,
                    name: 'Download',
                    text: 'Save the QR code and print it on your marketing materials.',
                },
                {
                    '@type': 'HowToStep',
                    position: 5,
                    name: 'Share',
                    text: 'Distribute it on flyers, business cards, or posters.',
                },
            ],
            totalTime: 'PT30S',
        },
        generateFaqSchema({
            'Does it open the Facebook app?': {
                question: 'Does it open the Facebook app?',
                answer: 'Yes! On most mobile devices, standard Facebook links are automatically detected and opened in the Facebook app if it is installed.',
            },
            'Can I link to a specific post?': {
                question: 'Can I link to a specific post?',
                answer: 'Absolutely. Just paste the direct link to the post (click the timestamp on the post to get the link).',
            },
            'Does it work for Facebook Events?': {
                question: 'Does it work for Facebook Events?',
                answer: 'Yes. Simply copy the full URL of your Facebook Event and paste it into the generator.',
            },
            'Is it free?': {
                question: 'Is it free?',
                answer: 'Yes, this generator is 100% free to use for personal or business purposes.',
            },
            'Can I track scans?': {
                question: 'Can I track scans?',
                answer: 'This static QR code does not include analytics. To track how many people scan your code, you should use our Dynamic QR Code service.',
            },
        }),
    ],
};

export default function FacebookQRCodePage() {
    return (
        <>
            <script
                type="application/ld+json"
                dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
            />
            <ToolBreadcrumb toolName="Facebook QR Code Generator" toolSlug="facebook-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: '#1877F2' }}>
                    <div className="absolute inset-0 opacity-10">
                        {/* Facebook Pattern */}
                        <svg className="w-full h-full" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
                            <defs>
                                <pattern id="fb_pattern" width="60" height="60" patternUnits="userSpaceOnUse">
                                    <path d="M30 30L35 35M25 35L30 30" stroke="white" strokeWidth="2" strokeOpacity="0.2" />
                                </pattern>
                            </defs>
                            <rect width="100%" height="100%" fill="url(#fb_pattern)" />
                        </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-blue-300 opacity-75"></span>
                                    <span className="relative inline-flex rounded-full h-2 w-2 bg-blue-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">
                                Grow Your Audience with <br className="hidden lg:block" />
                                <span className="text-white drop-shadow-md">Facebook QR Codes</span>
                            </h1>

                            <p className="text-lg md:text-xl text-blue-50 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
                                Make it easy for customers to find and follow you. A single scan opens your Page directly in the Facebook app.
                                <strong className="text-white block sm:inline mt-2 sm:mt-0"> No app switching required.</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">
                                    <ThumbsUp className="w-4 h-4 text-blue-200" />
                                    Get 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-300" />
                                    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-green-300" />
                                    App Friendly
                                </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-blue-500/30 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-6 hover:rotate-3 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 items-center gap-3">
                                    <div className="w-12 h-12 rounded-full bg-gradient-to-tr from-blue-600 to-blue-400 p-0.5">
                                        <div className="w-full h-full bg-white rounded-full flex items-center justify-center">
                                            <Facebook className="w-6 h-6 text-[#1877F2]" fill="#1877F2" />
                                        </div>
                                    </div>
                                    <div>
                                        <div className="h-2.5 w-24 bg-slate-800 rounded-full mb-1.5" />
                                        <div className="h-2 w-16 bg-slate-300 rounded-full" />
                                    </div>
                                    <button className="ml-auto bg-[#1877F2] text-white px-3 py-1 rounded text-xs font-bold">
                                        Like
                                    </button>
                                </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="#1877F2" level="Q" />
                                </div>

                                {/* Floating Badge */}
                                <div className="absolute -bottom-6 -right-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-blue-100 p-2 rounded-full">
                                        <Users className="w-5 h-5 text-blue-600" />
                                    </div>
                                    <div className="text-left">
                                        <div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Followers</div>
                                        <div className="text-sm font-bold text-slate-900">+1 New</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                {/* GENERATOR SECTION */}
                <section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
                    <FacebookGenerator />
                </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 Facebook 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-[#1877F2]/10 flex items-center justify-center mx-auto mb-4">
                                    <Facebook className="w-7 h-7 text-[#1877F2]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">1. Copy Link</h3>
                                <p className="text-slate-600 text-sm">
                                    Go to your Facebook Page or Profile and copy the URL from the browser address bar.
                                </p>
                            </article>

                            <article className="text-center">
                                <div className="w-14 h-14 rounded-2xl bg-[#1877F2]/10 flex items-center justify-center mx-auto mb-4">
                                    <Smartphone className="w-7 h-7 text-[#1877F2]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">2. Scan</h3>
                                <p className="text-slate-600 text-sm">
                                    Your customers scan the code using their phone camera.
                                </p>
                            </article>

                            <article className="text-center">
                                <div className="w-12 h-12 rounded-2xl bg-[#1877F2]/10 flex items-center justify-center mx-auto mb-4">
                                    <ThumbsUp className="w-6 h-6 text-[#1877F2]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">3. Engage</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">
                                    The Facebook app opens directly.
                                </p>
                            </article>

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

                            <article className="text-center">
                                <div className="w-12 h-12 rounded-2xl bg-[#1877F2]/10 flex items-center justify-center mx-auto mb-4">
                                    <Share2 className="w-6 h-6 text-[#1877F2]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">5. Share</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">
                                    Print it and start getting likes.
                                </p>
                            </article>
                        </div>
                    </div>
                </section>

                {/* 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 Facebook QR codes.
                        </p>

                        <div className="space-y-4">
                            <FaqItem
                                question="Will this work for Facebook Groups?"
                                answer="Yes! You can paste the link to your Facebook Group, and the QR code will direcr users to join."
                            />
                            <FaqItem
                                question="What if the user doesn't have the Facebook app?"
                                answer="The link will open in their mobile web browser instead, so they can still see your page and log in."
                            />
                            <FaqItem
                                question="Can I customize the color?"
                                answer="Yes. While Facebook Blue is recommended for recognition, you can choose any color to match your brand."
                            />
                            <FaqItem
                                question="Is the QR code permanent?"
                                answer="Yes. As long as your Facebook URL doesn't change, this QR code will work forever."
                            />
                            <FaqItem
                                question="Does it work for Facebook Events?"
                                answer="Yes. Simply copy the full URL of your Facebook Event and paste it into the generator."
                            />
                        </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>
    );
}
