import React from 'react';
import type { Metadata } from 'next';
import PayPalGenerator from './PayPalGenerator';
import { CreditCard, Shield, Zap, Smartphone, DollarSign, Download, Share2, Banknote } 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 PayPal QR Code Generator | Accept Payments Instantly | QR Master',
    },
    description: 'Create a QR code for your PayPal.me link. PayPal QR Code erstellen. Receive payments instantly. Support tips, donations, and fixed amounts.',
    keywords: ['paypal qr code', 'paypal.me qr generator', 'payment qr code', 'accept payments qr', 'paypal qr generator', 'tip qr code', 'donation qr code', 'paypal qr code erstellen', 'zahlungs qr code', 'spenden qr code', 'paypal bezahlen qr'],
    alternates: {
        canonical: 'https://www.qrmaster.net/tools/paypal-qr-code',
    },
    openGraph: {
        title: 'Free PayPal QR Code Generator | QR Master',
        description: 'Generate QR codes for PayPal payments. Perfect for tips, donations, and invoices.',
        type: 'website',
        url: 'https://www.qrmaster.net/tools/paypal-qr-code',
        images: [{ url: '/og-paypal-generator.png', width: 1200, height: 630 }],
    },
    twitter: {
        card: 'summary_large_image',
        title: 'Free PayPal QR Code Generator',
        description: 'Create PayPal payment QR codes. Instant and free.',
    },
    robots: {
        index: true,
        follow: true,
    },
};

// JSON-LD Structured Data
const jsonLd = {
    '@context': 'https://schema.org',
    '@graph': [
        generateSoftwareAppSchema(
            'PayPal QR Code Generator',
            'Generate QR codes that link to your PayPal.me page for instant payments.',
            '/og-paypal-generator.png',
            'FinanceApplication'
        ),
        {
            '@type': 'HowTo',
            name: 'How to Create a PayPal QR Code',
            description: 'Create a QR code for receiving PayPal payments.',
            step: [
                {
                    '@type': 'HowToStep',
                    position: 1,
                    name: 'Enter Username',
                    text: 'Type your PayPal.me username (the part after paypal.me/).',
                },
                {
                    '@type': 'HowToStep',
                    position: 2,
                    name: 'Set Amount (Optional)',
                    text: 'Enter a pre-filled amount and currency for fixed payments.',
                },
                {
                    '@type': 'HowToStep',
                    position: 3,
                    name: 'Customize Design',
                    text: 'Choose PayPal brand colors and add a frame like "Pay Now" or "Tip Me".',
                },
                {
                    '@type': 'HowToStep',
                    position: 4,
                    name: 'Download QR Code',
                    text: 'Download your high-quality QR code in PNG or SVG format.',
                },
                {
                    '@type': 'HowToStep',
                    position: 5,
                    name: 'Share',
                    text: 'Print it on invoices, display at your shop, or share digitally.',
                },
            ],
            totalTime: 'PT30S',
        },
        generateFaqSchema({
            'How does the PayPal QR code work?': {
                question: 'How does the PayPal QR code work?',
                answer: 'When scanned, it opens the PayPal app or website with your PayPal.me link. If you set an amount, it will be pre-filled for the payer.',
            },
            'Do I need a PayPal Business account?': {
                question: 'Do I need a PayPal Business account?',
                answer: 'No. Any PayPal account with a PayPal.me link can use this generator. Personal accounts work fine for tips and donations.',
            },
            'Is there a fee for using the QR code?': {
                question: 'Is there a fee for using the QR code?',
                answer: 'This generator is 100% free. PayPal may charge their standard transaction fees when you receive payments.',
            },
            'Can I change the amount later?': {
                question: 'Can I change the amount later?',
                answer: 'No, this is a static QR code. The amount is encoded permanently. For variable amounts, leave the amount field empty.',
            },
            'What currencies are supported?': {
                question: 'What currencies are supported?',
                answer: 'We support EUR, USD, GBP, and CHF. PayPal handles currency conversion automatically.',
            },
        }),
    ],
};

export default function PayPalQRCodePage() {
    return (
        <>
            <script
                type="application/ld+json"
                dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
            />
            <ToolBreadcrumb toolName="PayPal QR Code Generator" toolSlug="paypal-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: '#003087' }}>
                    <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-sky-400 opacity-75"></span>
                                    <span className="relative inline-flex rounded-full h-2 w-2 bg-sky-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">
                                Accept Payments with <br className="hidden lg:block" />
                                <span className="text-transparent bg-clip-text bg-gradient-to-r from-sky-300 to-blue-200">PayPal 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">
                                Let customers pay you by scanning. Perfect for tips, donations, and invoices.
                                <strong className="text-white block sm:inline mt-2 sm:mt-0"> Instant payments.</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">
                                    <CreditCard className="w-4 h-4 text-sky-300" />
                                    PayPal.me Links
                                </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" />
                                    Pre-fill Amount
                                </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">
                                    <Shield className="w-4 h-4 text-emerald-300" />
                                    Secure Payments
                                </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-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" />

                                {/* Payment Card Mock */}
                                <div className="w-full bg-gradient-to-br from-[#0070BA] to-[#003087] rounded-xl shadow-lg p-4 mb-6 relative overflow-hidden text-white">
                                    <div className="flex justify-between items-start mb-3">
                                        <Banknote className="w-6 h-6 opacity-80" />
                                        <div className="bg-white/20 px-2 py-1 rounded text-xs">EUR</div>
                                    </div>
                                    <div className="text-2xl font-bold tracking-wider">€25.00</div>
                                    <div className="text-xs opacity-70 mt-1">Payment Request</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="#003087" 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-blue-100 p-2 rounded-full">
                                        <DollarSign className="w-5 h-5 text-[#003087]" />
                                    </div>
                                    <div className="text-left">
                                        <div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">PayPal</div>
                                        <div className="text-sm font-bold text-slate-900">Ready</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                {/* GENERATOR SECTION */}
                <section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
                    <PayPalGenerator />
                </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 PayPal 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-[#003087]/10 flex items-center justify-center mx-auto mb-4">
                                    <CreditCard className="w-6 h-6 text-[#003087]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">1. Username</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">Enter your PayPal.me username.</p>
                            </article>

                            <article className="text-center">
                                <div className="w-12 h-12 rounded-2xl bg-[#003087]/10 flex items-center justify-center mx-auto mb-4">
                                    <DollarSign className="w-6 h-6 text-[#003087]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">2. Amount</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">Optional: Set a fixed payment amount.</p>
                            </article>

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

                            <article className="text-center">
                                <div className="w-12 h-12 rounded-2xl bg-[#003087]/10 flex items-center justify-center mx-auto mb-4">
                                    <Download className="w-6 h-6 text-[#003087]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">4. Download</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">Save as PNG or SVG file.</p>
                            </article>

                            <article className="text-center">
                                <div className="w-12 h-12 rounded-2xl bg-[#003087]/10 flex items-center justify-center mx-auto mb-4">
                                    <Share2 className="w-6 h-6 text-[#003087]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">5. Share</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">Print or share to receive payments.</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 PayPal QR codes.
                        </p>

                        <div className="space-y-4">
                            <FaqItem
                                question="How does the PayPal QR code work?"
                                answer="When scanned, it opens the PayPal app or website with your PayPal.me link. If you set an amount, it will be pre-filled for the payer."
                            />
                            <FaqItem
                                question="Do I need a PayPal Business account?"
                                answer="No. Any PayPal account with a PayPal.me link can use this generator. Personal accounts work fine for tips and donations."
                            />
                            <FaqItem
                                question="Is there a fee for using the QR code?"
                                answer="This generator is 100% free. PayPal may charge their standard transaction fees when you receive payments."
                            />
                            <FaqItem
                                question="Can I change the amount later?"
                                answer="No, this is a static QR code. The amount is encoded permanently. For variable amounts, leave the amount field empty."
                            />
                            <FaqItem
                                question="What if I don't have a PayPal.me link?"
                                answer="You can create one for free in your PayPal account settings. Go to paypal.me to set up your personalized link."
                            />
                        </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>
    );
}

function Sparkles({ className }: { className?: string }) {
    return (
        <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
        </svg>
    );
}