import React from 'react';
import type { Metadata } from 'next';
import ZoomGenerator from './ZoomGenerator';
import { Video, Shield, Zap, Smartphone, Users, Download, Share2 } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import sanitizeHtml from 'sanitize-html';
import { generateSoftwareAppSchema } from '@/lib/schema-utils';

// SEO Optimized Metadata
export const metadata: Metadata = {
    title: {
        absolute: 'Zoom Meeting QR Code Generator - Scan to Join, Free',
    },
    description: 'Turn any Zoom meeting link into a QR code. Attendees scan and join - no typing meeting IDs. Print it for conference rooms, invites and event signage.',
    keywords: ['zoom qr code', 'zoom meeting qr', 'join zoom qr code', 'meeting room qr', 'zoom invitation qr', 'conference qr code', 'zoom qr code erstellen', 'zoom meeting qr code', 'video konferenz qr', 'zoom beitreten qr'],
    alternates: {
        canonical: 'https://www.qrmaster.net/tools/zoom-qr-code',
    },
    openGraph: {
        title: 'Zoom Meeting QR Code Generator - Scan to Join, Free',
        description: 'Attendees scan and join. No typing meeting IDs. Print it for conference rooms and invites.',
        type: 'website',
        url: 'https://www.qrmaster.net/tools/zoom-qr-code',
        images: [{ url: '/og-zoom-generator.png', width: 1200, height: 630 }],
    },
    twitter: {
        card: 'summary_large_image',
        title: 'Zoom Meeting QR Code Generator - Scan to Join, Free',
        description: 'Attendees scan and join. No typing meeting IDs. Print it for conference rooms and invites.',
    },
    robots: {
        index: true,
        follow: true,
    },
};

// Single source of truth for FAQs: rendered on the page AND emitted as
// FAQPage schema. Google requires every marked-up Q&A to be visible to the
// user on the source page, so never add one without the other.
const faqItems = [
    {
        question: 'What happens when someone scans the QR code?',
        answer: 'The Zoom app opens directly with your meeting ID and passcode pre-filled. They just tap "Join" to enter the meeting.',
    },
    {
        question: 'Does it work for recurring meetings?',
        answer: 'Yes! If your recurring meeting uses a fixed Personal Meeting ID (PMI), the QR code will work for all sessions.',
    },
    {
        question: 'What if the meeting ID changes?',
        answer: 'Static QR codes cannot be updated. You\\\'ll need to generate a new code. For changeable meetings, consider our Dynamic QR Codes.',
    },
    {
        question: 'Does it work on all devices?',
        answer: 'Yes. The QR code works on iOS, Android, and can also open Zoom on desktop computers if the Zoom app is installed.',
    },
    {
        question: 'Does it work without the Zoom app installed?',
        answer: 'If \'Open Zoom app directly\' is unchecked, the QR links to join.zoom.us which works in any browser.',
    },
];

// JSON-LD Structured Data
const jsonLd = {
    '@context': 'https://schema.org',
    '@graph': [
        generateSoftwareAppSchema(
            'Zoom QR Code Generator',
            'Generate QR codes that let people join your Zoom meeting with one scan.',
            '/og-zoom-generator.png',
            'BusinessApplication'
        ),
        {
            '@type': 'HowTo',
            name: 'How to Create a Zoom QR Code',
            description: 'Create a QR code for joining Zoom meetings.',
            step: [
                {
                    '@type': 'HowToStep',
                    position: 1,
                    name: 'Enter Meeting ID',
                    text: 'Copy the 10-11 digit meeting ID from your Zoom invitation.',
                },
                {
                    '@type': 'HowToStep',
                    position: 2,
                    name: 'Add Passcode',
                    text: 'If your meeting has a passcode, enter it to include in the QR.',
                },
                {
                    '@type': 'HowToStep',
                    position: 3,
                    name: 'Choose Link Type',
                    text: 'Select whether to open Zoom app directly or use a web link.',
                },
                {
                    '@type': 'HowToStep',
                    position: 4,
                    name: 'Download',
                    text: 'Download your QR code and display it in your meeting room or invitation.',
                },
            ],
            totalTime: 'PT30S',
        },
        {
            '@type': 'FAQPage',
            '@id': 'https://www.qrmaster.net/tools/zoom-qr-code#faq',
            mainEntity: faqItems.map((item) => ({
                '@type': 'Question',
                name: item.question,
                acceptedAnswer: {
                    '@type': 'Answer',
                    text: item.answer.replace(/<[^>]+>/g, ''),
                },
            })),
        },
    ],
};

export default function ZoomQRCodePage() {
    return (
        <>
            <script
                type="application/ld+json"
                dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
            />
            <ToolBreadcrumb toolName="Zoom QR Code Generator" toolSlug="zoom-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: '#2D8CFF' }}>
                    <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-white opacity-75"></span>
                                    <span className="relative inline-flex rounded-full h-2 w-2 bg-white"></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">
                                Join Meetings with <br className="hidden lg:block" />
                                <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-200 to-cyan-100">Zoom QR Codes</span>
                            </h1>

                            <p className="text-lg md:text-xl text-blue-100 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
                                Create QR codes for your Zoom meetings. Attendees scan to join instantly.
                                <strong className="text-white block sm:inline mt-2 sm:mt-0"> Perfect for conference rooms.</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">
                                    <Video className="w-4 h-4 text-white" />
                                    Direct Join
                                </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">
                                    <Zap className="w-4 h-4 text-amber-300" />
                                    Instant Open
                                </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">
                                    <Users className="w-4 h-4 text-emerald-300" />
                                    Any Device
                                </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-400/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-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" />

                                {/* Meeting Card Mock */}
                                <div className="w-full bg-white rounded-xl shadow-lg p-4 mb-6 relative overflow-hidden">
                                    <div className="flex items-center gap-3 mb-3">
                                        <div className="w-10 h-10 bg-[#2D8CFF] rounded-full flex items-center justify-center">
                                            <Video className="w-5 h-5 text-white" />
                                        </div>
                                        <div>
                                            <div className="font-bold text-slate-900 text-sm">Team Standup</div>
                                            <div className="text-xs text-slate-600">ID: 123 456 7890</div>
                                        </div>
                                    </div>
                                    <div className="flex gap-2">
                                        <div className="bg-green-100 text-green-700 text-xs px-2 py-1 rounded-full">Live</div>
                                        <div className="bg-slate-100 text-slate-600 text-xs px-2 py-1 rounded-full">12 attending</div>
                                    </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="#2D8CFF" 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-[#2D8CFF]" />
                                    </div>
                                    <div className="text-left">
                                        <div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Status</div>
                                        <div className="text-sm font-bold text-slate-900">Ready to Join</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

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

                        <div className="grid md:grid-cols-4 gap-8">
                            <article className="text-center">
                                <div className="w-12 h-12 rounded-2xl bg-[#2D8CFF]/10 flex items-center justify-center mx-auto mb-4">
                                    <Video className="w-6 h-6 text-[#2D8CFF]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">1. Meeting ID</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">Enter your Zoom meeting ID.</p>
                            </article>

                            <article className="text-center">
                                <div className="w-12 h-12 rounded-2xl bg-[#2D8CFF]/10 flex items-center justify-center mx-auto mb-4">
                                    <Shield className="w-6 h-6 text-[#2D8CFF]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">2. Passcode</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">Add passcode if required.</p>
                            </article>

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

                            <article className="text-center">
                                <div className="w-12 h-12 rounded-2xl bg-[#2D8CFF]/10 flex items-center justify-center mx-auto mb-4">
                                    <Share2 className="w-6 h-6 text-[#2D8CFF]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">4. Display</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">Put in meeting rooms or invites.</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 Zoom QR codes.
                        </p>

                        <div className="space-y-4">
                            {faqItems.map((item) => (
                                <FaqItem
                                    key={item.question}
                                    question={item.question}
                                    answer={item.answer}
                                />
                            ))}
                        </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 [&_a]:text-indigo-600 [&_a]:underline"
                dangerouslySetInnerHTML={{
                    __html: sanitizeHtml(answer, {
                        allowedTags: ['p', 'strong', 'em', 'ul', 'ol', 'li', 'a', 'br', 'code'],
                        allowedAttributes: { a: ['href'] },
                    }),
                }}
            />
        </details>
    );
}