import React from 'react';
import type { Metadata } from 'next';
import WhatsappGenerator from './WhatsAppGenerator';
import { MessageCircle, Shield, Zap, Smartphone, Send, Phone, Download, Check } 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 WhatsApp QR Code Generator | Start Chats Instantly | QR Master',
    },
    description: 'Create a QR code that opens a WhatsApp chat. WhatsApp QR Code erstellen mit Nachricht. Perfect for support & sales.',
    keywords: ['whatsapp qr code', 'wa.me generator', 'whatsapp chat qr', 'whatsapp link generator', 'contact qr code', 'whatsapp qr code erstellen', 'wa.me link erstellen', 'whatsapp chat starten', 'whatsapp kontakt qr code', 'whatsapp nachricht qr code'],
    alternates: {
        canonical: 'https://www.qrmaster.net/tools/whatsapp-qr-code',
    },
    openGraph: {
        title: 'Free WhatsApp QR Code Generator | QR Master',
        description: 'Generate QR codes to start WhatsApp chats. Add a pre-filled message.',
        type: 'website',
        url: 'https://www.qrmaster.net/tools/whatsapp-qr-code',
        images: [{ url: '/og-whatsapp-generator.png', width: 1200, height: 630 }],
    },
    twitter: {
        card: 'summary_large_image',
        title: 'Free WhatsApp QR Code Generator',
        description: 'Create QR codes for WhatsApp. Chat instantly.',
    },
    robots: {
        index: true,
        follow: true,
    },
};

// JSON-LD Structured Data
const jsonLd = {
    '@context': 'https://schema.org',
    '@graph': [
        generateSoftwareAppSchema(
            'WhatsApp QR Code Generator',
            'Generate QR codes that start a WhatsApp conversation with a specific number.',
            '/og-whatsapp-generator.png'
        ),
        {
            '@type': 'HowTo',
            name: 'How to Create a WhatsApp QR Code',
            description: 'Create a QR code that opens a WhatsApp chat.',
            step: [
                {
                    '@type': 'HowToStep',
                    position: 1,
                    name: 'Enter Number',
                    text: 'Type your WhatsApp phone number with country code (e.g. 1555...).',
                },
                {
                    '@type': 'HowToStep',
                    position: 2,
                    name: 'Customize',
                    text: 'Add a pre-written message and choose your brand color.',
                },
                {
                    '@type': 'HowToStep',
                    position: 3,
                    name: 'Download',
                    text: 'Save the QR code.',
                },
                {
                    '@type': 'HowToStep',
                    position: 4,
                    name: 'Test',
                    text: 'Scan the code to ensure it opens the correct chat.',
                },
                {
                    '@type': 'HowToStep',
                    position: 5,
                    name: 'Share',
                    text: 'Add it to your website, business cards, or support materials.',
                },
            ],
            totalTime: 'PT45S',
        },
        generateFaqSchema({
            'Do users need to save my number first?': {
                question: 'Do users need to save my number first?',
                answer: 'No! That is the best part. Scanning the code opens the chat immediately without them needing to save you as a contact first.',
            },
            'Can I use this for WhatsApp Business?': {
                question: 'Can I use this for WhatsApp Business?',
                answer: 'Yes, it works perfectly for both personal and business accounts.',
            },
            'What is the Pre-filled Message?': {
                question: 'What is the Pre-filled Message?',
                answer: 'It is text that automatically appears in the user\'s typing field when they scan the code (e.g., "Hello, I want to order pizza"). They just have to hit send.',
            },
            'Is it free?': {
                question: 'Is it free?',
                answer: 'Yes, this generator is completely free.',
            },
            'Can I track scans?': {
                question: 'Can I track scans?',
                answer: 'This is a static QR code, so tracking is not included. Use our Dynamic QR Code generator for analytics.',
            },
        }),
    ],
};

export default function WhatsappQRCodePage() {
    return (
        <>
            <script
                type="application/ld+json"
                dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
            />
            <ToolBreadcrumb toolName="WhatsApp QR Code Generator" toolSlug="whatsapp-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 bg-[#128C7E]">
                    <div className="absolute inset-0 opacity-10">
                        {/* WhatsApp Pattern */}
                        <svg className="w-full h-full" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
                            <defs>
                                <pattern id="wa_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(#wa_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-green-300 opacity-75"></span>
                                    <span className="relative inline-flex rounded-full h-2 w-2 bg-green-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">
                                Start Chats Instantly with <br className="hidden lg:block" />
                                <span className="text-white drop-shadow-md">WhatsApp QR Codes</span>
                            </h1>

                            <p className="text-lg md:text-xl text-green-50 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
                                Let customers message you without saving your number.
                                <strong className="text-white block sm:inline mt-2 sm:mt-0"> Perfect for support, sales, and bookings.</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">
                                    <Send className="w-4 h-4 text-green-200" />
                                    Instant Chat
                                </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">
                                    <MessageCircle className="w-4 h-4 text-white" />
                                    Pre-filled Msg
                                </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">
                                    <Phone className="w-4 h-4 text-white" />
                                    No Save Contact
                                </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-green-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-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" />

                                <div className="w-full bg-[#ECE5DD] rounded-xl shadow-lg h-40 mb-6 relative overflow-hidden flex flex-col justify-end p-4">
                                    {/* Chat Bubble Right */}
                                    <div className="bg-[#DCF8C6] p-2 rounded-lg self-end mb-2 max-w-[80%] text-[10px] text-slate-800 shadow-sm">
                                        Hi! I'd like to book an appointment.
                                        <div className="text-[8px] text-slate-600 text-right mt-0.5">10:42 AM <span className="text-blue-500">✓✓</span></div>
                                    </div>
                                    {/* Chat Bubble Left */}
                                    <div className="bg-white p-2 rounded-lg self-start max-w-[80%] text-[10px] text-slate-800 shadow-sm">
                                        Sure! What time works for you?
                                        <div className="text-[8px] text-slate-600 text-right mt-0.5">10:43 AM</div>
                                    </div>
                                </div>

                                <div className="w-44 h-44 bg-white rounded-xl p-2 shadow-inner relative overflow-hidden flex items-center justify-center">
                                    <QRCodeSVG value="https://www.qrmaster.net" size={160} fgColor="#128C7E" level="Q" />
                                </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-green-100 p-2 rounded-full">
                                        <MessageCircle className="w-5 h-5 text-[#25D366]" />
                                    </div>
                                    <div className="text-left">
                                        <div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">WhatsApp</div>
                                        <div className="text-sm font-bold text-slate-900">Start Chat</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                {/* GENERATOR SECTION */}
                <section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
                    <WhatsappGenerator />
                </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 WhatsApp 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-[#25D366]/10 flex items-center justify-center mx-auto mb-4">
                                    <Phone className="w-7 h-7 text-[#25D366]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">1. Your Number</h3>
                                <p className="text-slate-600 text-sm">
                                    Enter your WhatsApp phone number. Ensure it includes the country code.
                                </p>
                            </article>

                            <article className="text-center">
                                <div className="w-12 h-12 rounded-2xl bg-[#25D366]/10 flex items-center justify-center mx-auto mb-4">
                                    <MessageCircle className="w-6 h-6 text-[#25D366]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">2. Customize</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">
                                    Add a message and choose your color.
                                </p>
                            </article>

                            <article className="text-center">
                                <div className="w-12 h-12 rounded-2xl bg-[#25D366]/10 flex items-center justify-center mx-auto mb-4">
                                    <Download className="w-6 h-6 text-[#25D366]" />
                                </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-[#25D366]/10 flex items-center justify-center mx-auto mb-4">
                                    <Check className="w-6 h-6 text-[#25D366]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">4. Test</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">
                                    Scan to ensure it works.
                                </p>
                            </article>

                            <article className="text-center">
                                <div className="w-12 h-12 rounded-2xl bg-[#25D366]/10 flex items-center justify-center mx-auto mb-4">
                                    <Send className="w-6 h-6 text-[#25D366]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">5. Chat</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">
                                    Start chatting instantly.
                                </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 WhatsApp QR codes.
                        </p>

                        <div className="space-y-4">
                            <FaqItem
                                question="Does it work internationally?"
                                answer="Yes. Since you include the country code, it works for anyone, anywhere in the world."
                            />
                            <FaqItem
                                question="Can I use this on my website?"
                                answer="Yes, you can display the QR code on your contact page so desktop users can easily scan it to chat on their phone."
                            />
                            <FaqItem
                                question="Is my phone number visible?"
                                answer="Yes, the phone number is embedded in the link. It is the same visibility as putting your phone number on a business card."
                            />
                            <FaqItem
                                question="Is it free?"
                                answer="Yes, this generator is completely free."
                            />
                            <FaqItem
                                question="Can I track scans?"
                                answer="This is a static QR code, so tracking is not included. Use our Dynamic QR Code generator for analytics."
                            />
                        </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>
    );
}
