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';

// SEO Optimized Metadata
export const metadata: Metadata = {
    title: 'Free Facebook QR Code Generator | Get Likes & Follows | QR Master',
    description: 'Create a QR code for your Facebook Page, Profile, or Group. Scanners are redirected to the Facebook app instantly to like and follow. Free & Easy.',
    keywords: ['facebook qr code', 'fb qr generator', 'facebook page qr', 'follow qr code', 'social media qr code'],
    alternates: {
        canonical: 'https://qrmaster.io/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://qrmaster.io/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': [
        {
            '@type': 'SoftwareApplication',
            name: 'Facebook QR Code Generator',
            applicationCategory: 'UtilitiesApplication',
            operatingSystem: 'Web Browser',
            offers: {
                '@type': 'Offer',
                price: '0',
                priceCurrency: 'USD',
            },
            aggregateRating: {
                '@type': 'AggregateRating',
                ratingValue: '4.8',
                ratingCount: '1120',
            },
            description: 'Generate QR codes that direct users to a Facebook page, profile, or post.',
        },
        {
            '@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',
        },
        {
            '@type': 'FAQPage',
            mainEntity: [
                {
                    '@type': 'Question',
                    name: 'Does it open the Facebook app?',
                    acceptedAnswer: {
                        '@type': 'Answer',
                        text: 'Yes! On most mobile devices, standard Facebook links are automatically detected and opened in the Facebook app if it is installed.',
                    },
                },
                {
                    '@type': 'Question',
                    name: 'Can I link to a specific post?',
                    acceptedAnswer: {
                        '@type': 'Answer',
                        text: 'Absolutely. Just paste the direct link to the post (click the timestamp on the post to get the link).',
                    },
                },
                {
                    '@type': 'Question',
                    name: 'Does it work for Facebook Events?',
                    acceptedAnswer: {
                        '@type': 'Answer',
                        text: 'Yes. Simply copy the full URL of your Facebook Event and paste it into the generator.',
                    },
                },
                {
                    '@type': 'Question',
                    name: 'Is it free?',
                    acceptedAnswer: {
                        '@type': 'Answer',
                        text: 'Yes, this generator is 100% free to use for personal or business purposes.',
                    },
                },
                {
                    '@type': 'Question',
                    name: 'Can I track scans?',
                    acceptedAnswer: {
                        '@type': 'Answer',
                        text: '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"> Boost likes instantly.</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>

                {/* 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>
    );
}