import React from 'react';
import type { Metadata } from 'next';
import WiFiGenerator from './WiFiGenerator';
import { Wifi, Shield, Zap, Smartphone, Lock, QrCode, 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 WiFi QR Code Generator | WLAN QR Code | QR Master',
    },
    description: 'Create a WiFi QR code in seconds. Erstelle kostenlos deinen WLAN QR Code ohne Passwort-Eingabe. Guests scan to connect instantly. 100% Secure & Free.',
    keywords: ['wifi qr code', 'qr code generator', 'wifi qr code generator', 'share wifi', 'wifi password qr', 'guest wifi', 'wlan qr code', 'wlan qr code erstellen', 'wifi passwort qr code', 'wlan zugang teilen', 'wifi qr code kostenlos'],
    alternates: {
        canonical: 'https://www.qrmaster.net/tools/wifi-qr-code',
    },
    openGraph: {
        title: 'Free WiFi QR Code Generator | QR Master',
        description: 'Share your WiFi without sharing your password. Guests scan the QR code to connect instantly.',
        type: 'website',
        url: 'https://www.qrmaster.net/tools/wifi-qr-code',
        images: [{ url: '/og-wifi-generator.png', width: 1200, height: 630 }],
    },
    twitter: {
        card: 'summary_large_image',
        title: 'Free WiFi QR Code Generator',
        description: 'Share WiFi instantly with a QR code. No typing passwords.',
    },
    robots: {
        index: true,
        follow: true,
    },
};

// JSON-LD Structured Data
const jsonLd = {
    '@context': 'https://schema.org',
    '@graph': [
        // SoftwareApplication Schema
        generateSoftwareAppSchema(
            'WiFi QR Code Generator',
            'Generate QR codes for WiFi networks. Guests scan to connect without typing passwords.',
            '/og-wifi-generator.png'
        ),
        // HowTo Schema for Featured Snippets
        {
            '@type': 'HowTo',
            name: 'How to Create a WiFi QR Code',
            description: 'Create a QR code that connects devices to your WiFi network automatically.',
            step: [
                {
                    '@type': 'HowToStep',
                    position: 1,
                    name: 'Enter Network Name',
                    text: 'Type your WiFi network name (SSID) in the Network Name field.',
                },
                {
                    '@type': 'HowToStep',
                    position: 2,
                    name: 'Enter Password',
                    text: 'Enter your WiFi password. This is processed locally and never sent to any server.',
                },
                {
                    '@type': 'HowToStep',
                    position: 3,
                    name: 'Select Security Type',
                    text: 'Choose WPA/WPA2 (most common), WEP, or No Password for open networks.',
                },
                {
                    '@type': 'HowToStep',
                    position: 4,
                    name: 'Download QR Code',
                    text: 'Click Download PNG or SVG to save your QR code. Print it or share digitally.',
                },
                {
                    '@type': 'HowToStep',
                    position: 5,
                    name: 'Connect',
                    text: 'Print the code. Guests can scan it to join your network instantly.',
                },
            ],
            totalTime: 'PT1M',
        },
        // FAQPage Schema
        generateFaqSchema({
            'Is it safe to enter my WiFi password?': {
                question: 'Is it safe to enter my WiFi password?',
                answer: 'Yes, completely safe. This tool processes everything in your browser (client-side). Your password never leaves your device and is not sent to any server.',
            },
            'Do WiFi QR codes work on iPhone and Android?': {
                question: 'Do WiFi QR codes work on iPhone and Android?',
                answer: 'Yes. Both iOS (11+) and Android devices can scan WiFi QR codes using their built-in camera app. No additional apps required.',
            },
            'What happens if I change my WiFi password?': {
                question: 'What happens if I change my WiFi password?',
                answer: 'If you change your WiFi password, the old QR code will stop working. You\'ll need to generate a new QR code with the updated credentials.For frequently changing passwords, consider using dynamic QR codes.',
            },
            'Can I customize the QR code design?': {
                question: 'Can I customize the QR code design?',
                answer: 'Yes. You can change the QR code color and add frame labels like "Scan Me" or "WiFi" to make it more recognizable and user-friendly.',
            },
            'Does it work for hidden networks?': {
                question: 'Does it work for hidden networks?',
                answer: 'Yes, just check the "Hidden Network" box if your SSID is hidden. The QR code contains the standard WiFi string configuration.',
            },
        }),
    ],
};

export default function WiFiQRCodePage() {
    return (
        <>
            {/* JSON-LD Script */}
            <script
                type="application/ld+json"
                dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
            />
            <ToolBreadcrumb toolName="WiFi QR Code Generator" toolSlug="wifi-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: '#1A1265' }}>
                    {/* Background Pattern */}
                    <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">

                        {/* Left: Text Content */}
                        <div className="text-center lg:text-left">
                            {/* Badge */}
                            <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-emerald-400 opacity-75"></span>
                                    <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-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 Safest Way to <br className="hidden lg:block" />
                                <span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-cyan-400">Share Your WiFi</span>
                            </h1>

                            <p className="text-lg md:text-xl text-indigo-100 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
                                Generate a secure QR code in seconds. No more spelling out complicated passwords.
                                <strong className="text-white block sm:inline mt-2 sm:mt-0"> 100% Client-Side & Private.</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">
                                    <Lock className="w-4 h-4 text-emerald-400" />
                                    No Server Uploads
                                </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-400" />
                                    Instant Connect
                                </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">
                                    <Smartphone className="w-4 h-4 text-purple-400" />
                                    iOS & Android
                                </div>
                            </div>
                        </div>

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

                            {/* Floating Glass Card */}
                            <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" />

                                {/* Mock QR */}
                                <div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner mb-6 relative overflow-hidden flex items-center justify-center">
                                    <QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#0f172a" level="Q" />
                                    {/* Scan Line */}
                                    <div className="absolute top-1/2 left-0 w-full h-1 bg-emerald-500 shadow-[0_0_20px_rgba(16,185,129,1)] animate-pulse" />
                                </div>

                                <div className="w-full space-y-3">
                                    <div className="h-2 w-32 bg-white/20 rounded-full mx-auto" />
                                    <div className="h-2 w-20 bg-white/10 rounded-full mx-auto" />
                                </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-emerald-100 p-2 rounded-full">
                                        <Wifi className="w-5 h-5 text-emerald-600" />
                                    </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">Connected</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

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

                {/* HOW IT WORKS - AEO/GEO Content */}
                <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 WiFi QR Codes Work
                        </h2>

                        <div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
                            <article className="text-center">
                                <div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
                                    <Wifi className="w-6 h-6 text-[#1A1265]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">1. Network</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">
                                    Enter your WiFi SSID and password.
                                </p>
                            </article>

                            <article className="text-center">
                                <div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
                                    <Shield className="w-6 h-6 text-[#1A1265]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">2. Security</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">
                                    Select WPA/WPA2 encryption.
                                </p>
                            </article>

                            <article className="text-center">
                                <div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
                                    <Zap className="w-6 h-6 text-[#1A1265]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">3. Style</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">
                                    Customize colors and add a frame.
                                </p>
                            </article>

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

                            <article className="text-center">
                                <div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
                                    <Smartphone className="w-6 h-6 text-[#1A1265]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">5. Connect</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">
                                    Print it out. Guests scan to join!
                                </p>
                            </article>
                        </div>
                    </div>
                </section>

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

                {/* FAQ SECTION - Featured Snippet Optimized */}
                <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">
                            Everything you need to know about WiFi QR codes.
                        </p>

                        <div className="space-y-4">
                            <FaqItem
                                question="Is it safe to enter my WiFi password here?"
                                answer="Yes, completely safe. This tool uses client-side processing, meaning your WiFi password never leaves your device. It's processed locally in your browser to generate the QR code—no data is sent to any server."
                            />
                            <FaqItem
                                question="Do WiFi QR codes work on iPhone and Android?"
                                answer="Yes. iOS 11 and later, as well as all modern Android devices, can scan WiFi QR codes using the built-in camera app. Simply point the camera at the QR code and tap the notification to connect."
                            />
                            <FaqItem
                                question="What happens if I change my WiFi password?"
                                answer="If you change your WiFi password, the old QR code will stop working. You'll need to generate a new QR code with the updated credentials. For frequently changing passwords, consider using dynamic QR codes."
                            />
                            <FaqItem
                                question="Can I customize the QR code design?"
                                answer="Yes. You can change the foreground color of the QR code and add frame labels such as 'Scan Me', 'WiFi', or 'Connect' to make your QR code more recognizable and user-friendly."
                            />
                            <FaqItem
                                question="Does it work for hidden networks?"
                                answer="Yes, just check the 'Hidden Network' box if your SSID is hidden. The QR code contains the standard WiFi string configuration."
                            />
                        </div>
                    </div>
                </section>

            </div>
        </>
    );
}

// FAQ Item Component
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>
    );
}