import React from 'react';
import type { Metadata } from 'next';
import WiFiGenerator from './WiFiGenerator';
import { Wifi, Shield, Zap } from 'lucide-react';

export const metadata: Metadata = {
    title: 'Free WiFi QR Code Generator | Connect Instantly & Securely',
    description: 'Create a free QR code for your WiFi network. Instant connection for guests, 100% client-side security (your password never leaves your browser). No app needed.',
    alternates: {
        canonical: 'https://qrmaster.com/tools/wifi-qr-code',
    },
    openGraph: {
        title: 'Free WiFi QR Code Generator | Connect Instantly',
        description: 'Share your WiFi without sharing your password. Generate a secure QR code in seconds.',
        type: 'website',
    }
};

export default function WiFiQRCodePage() {
    return (
        <div className="min-h-screen bg-slate-50 font-sans">

            {/* HERO SECTION */}
            <section className="relative bg-gradient-to-br from-indigo-600 to-blue-500 pt-32 pb-48 px-4 sm:px-6 lg:px-8 overflow-hidden">
                {/* Background Decorative Elements */}
                <div className="absolute top-0 left-0 w-full h-full overflow-hidden z-0">
                    <div className="absolute top-0 left-1/4 w-96 h-96 bg-white/10 rounded-full blur-3xl -translate-y-1/2"></div>
                    <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-indigo-900/20 rounded-full blur-3xl translate-y-1/2"></div>
                </div>

                <div className="relative z-10 max-w-4xl mx-auto text-center">
                    <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">
                        <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-500"></span>
                        </span>
                        Free Tool
                    </div>

                    <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6 drop-shadow-sm">
                        Secure WiFi QR Code <br className="hidden sm:block" /> Generator
                    </h1>
                    <p className="text-lg md:text-xl text-indigo-100 max-w-2xl mx-auto mb-10 leading-relaxed">
                        Connect guests instantly without typing passwords. <br />
                        <span className="font-semibold text-white">100% Client-side & Private.</span>
                    </p>

                    <div className="flex flex-wrap justify-center gap-4 text-sm font-medium text-white/80">
                        <div className="flex items-center gap-2 bg-white/5 px-4 py-2 rounded-lg backdrop-blur-sm border border-white/5">
                            <Shield className="w-4 h-4 text-emerald-400" />
                            100% Private
                        </div>
                        <div className="flex items-center gap-2 bg-white/5 px-4 py-2 rounded-lg backdrop-blur-sm border border-white/5">
                            <Zap className="w-4 h-4 text-amber-400" />
                            Instant Generation
                        </div>
                        <div className="flex items-center gap-2 bg-white/5 px-4 py-2 rounded-lg backdrop-blur-sm border border-white/5">
                            <Wifi className="w-4 h-4 text-blue-400" />
                            Always Free
                        </div>
                    </div>
                </div>
            </section>

            {/* GENERATOR APP SECTION */}
            <WiFiGenerator />

            {/* FAQ SECTION */}
            <section className="max-w-3xl mx-auto px-4 sm:px-6 py-24">
                <div className="text-center mb-12">
                    <h2 className="text-3xl font-bold text-slate-800">Frequently Asked Questions</h2>
                    <p className="text-slate-500 mt-2">Everything you need to know about WiFi QR codes.</p>
                </div>

                <div className="space-y-4">
                    <FaqItem
                        question="Is it safe to type my password here?"
                        answer="Yes, absolutely. This tool uses 'Client-Side Encryption', meaning your WiFi credentials never leave your browser. They are processed locally on your device to generate the QR code image. We never see, store, or transmit your password."
                    />
                    <FaqItem
                        question="Does this work on both iPhone and Android?"
                        answer="Yes! Most modern smartphones (iOS and Android) have a built-in QR code scanner in their camera app. Guests just need to point their camera at the code and tap the notification to join your network."
                    />
                    <FaqItem
                        question="Do WiFi QR codes expire?"
                        answer="No, static WiFi QR codes never expire. However, if you change your WiFi password or network name (SSID), the old QR code will stop working and you will need to generate a new one."
                    />
                    <FaqItem
                        question="Can I hide my WiFi network?"
                        answer="Yes, key in your hidden network credentials and check the 'Hidden Network' box. The generated QR code will contain the necessary instructions for devices to find and connect to your hidden network."
                    />
                </div>
            </section>

        </div>
    );
}

function FaqItem({ question, answer }: { question: string, answer: string }) {
    return (
        <details className="group bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
            <summary className="flex items-center justify-between p-6 cursor-pointer list-none text-slate-800 font-semibold hover:bg-slate-50 transition-colors">
                {question}
                <span className="transition group-open:rotate-180">
                    <svg fill="none" height="24" shapeRendering="geometricPrecision" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
                </span>
            </summary>
            <div className="text-slate-600 px-6 pb-6 pt-0 leading-relaxed">
                {answer}
            </div>
        </details>
    );
}