import React from 'react';
import type { Metadata } from 'next';
import PhoneGenerator from './PhoneGenerator';
import { Phone, Shield, Zap, Smartphone, PhoneCall, Download } 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 for "Call QR Code"
export const metadata: Metadata = {
    title: {
        absolute: 'Free Call QR Code Generator | Click-to-Call & Phone QR | QR Master',
    },
    description: 'Create Action-Oriented Call QR Codes. Scanners instantly dial your number. Perfect for "Call Now" buttons on print & flyers. Free & No Signup.',
    keywords: ['call qr code', 'click to call qr code', 'call now qr code', 'phone call qr generator', 'qr code for calling', 'call me qr', 'direct call qr code', 'dialer qr code', 'telefon qr code', 'anruf qr code'],
    alternates: {
        canonical: 'https://www.qrmaster.net/tools/call-qr-code-generator',
    },
    openGraph: {
        title: 'Free Call QR Code Generator | Click-to-Call | QR Master',
        description: 'Generate Click-to-Call QR Codes. One scan to start a phone call instantly. Best for flyers and business cards.',
        type: 'website',
        url: 'https://www.qrmaster.net/tools/call-qr-code-generator',
        images: [{ url: '/og-phone-generator.png', width: 1200, height: 630 }],
    },
    twitter: {
        card: 'summary_large_image',
        title: 'Free Call QR Code Generator | Start Calls with a Scan',
        description: 'Create QR codes for instant calling. Free and reliable.',
    },
    robots: {
        index: true,
        follow: true,
    },
};

// JSON-LD Structured Data
const jsonLd = {
    '@context': 'https://schema.org',
    '@graph': [
        generateSoftwareAppSchema(
            'Call QR Code Generator',
            'Generate QR codes that trigger a phone call when scanned on a mobile device.',
            '/og-phone-generator.png'
        ),
        {
            '@type': 'HowTo',
            name: 'How to Create a Call QR Code',
            description: 'Create a QR code that dials a number automatically.',
            step: [
                {
                    '@type': 'HowToStep',
                    position: 1,
                    name: 'Enter Number',
                    text: 'Type your phone number with country code (e.g., +1 555-0199).',
                },
                {
                    '@type': 'HowToStep',
                    position: 2,
                    name: 'Customize',
                    text: 'Choose a color and add a label like "Call Me".',
                },
                {
                    '@type': 'HowToStep',
                    position: 3,
                    name: 'Download',
                    text: 'Save the "Call Now" QR code and print it on your materials.',
                },
                {
                    '@type': 'HowToStep',
                    position: 4,
                    name: 'Test',
                    text: 'Scan the code with your phone to ensure the number is correct.',
                },
                {
                    '@type': 'HowToStep',
                    position: 5,
                    name: 'Share',
                    text: 'Add to business cards, flyers, or supports desks.',
                },
            ],
            totalTime: 'PT30S',
        },
        generateFaqSchema({
            'Does it call automatically?': {
                question: 'Does it call automatically?',
                answer: 'Scanning the QR code opens the phone dialer with the number pre-filled. The user must tap the call button to initiate the call (security feature of phones).',
            },
            'Does it work internationally?': {
                question: 'Does it work internationally?',
                answer: 'Yes! We recommend entering your number in international format (starting with +) to ensure it works anywhere in the world.',
            },
            'Is my phone number private?': {
                question: 'Is my phone number private?',
                answer: 'Yes. We do not store your number. It is encoded directly into the QR code image.',
            },
            'Can I track calls?': {
                question: 'Can I track calls?',
                answer: 'This static Call QR Code cannot track calls. For tracking scans and analytics, consider using our VCard Plus solution.',
            },
            'Is it free?': {
                question: 'Is it free?',
                answer: 'Yes, completely free. We do not charge for generating or scanning the code.',
            },
        }),
    ],
};

export default function CallQRCodePage() {
    return (
        <>
            <script
                type="application/ld+json"
                dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
            />
            <ToolBreadcrumb toolName="Call QR Code Generator" toolSlug="call-qr-code-generator" />

            <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' }}>
                    <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-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">
                                Create Instant <br className="hidden lg:block" />
                                <span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-cyan-400">&quot;Call Now&quot; QR Codes</span>
                            </h1>

                            <p className="text-lg md:text-xl text-indigo-100 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
                                Create a QR code that opens the phone dialer with your number pre-filled — one scan, no typing.
                                <strong className="text-white block sm:inline mt-2 sm:mt-0"> Works on every smartphone.</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">
                                    <PhoneCall className="w-4 h-4 text-emerald-400" />
                                    One-Tap Call
                                </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 Dial
                                </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-purple-400" />
                                    No Data Saved
                                </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-indigo-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-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" />

                                <div className="w-full bg-white rounded-xl shadow-lg p-4 mb-6 relative overflow-hidden">
                                    <div className="flex items-center gap-3">
                                        <div className="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center animate-pulse">
                                            <Phone className="w-5 h-5 text-green-600" />
                                        </div>
                                        <div>
                                            <div className="h-2 w-24 bg-slate-200 rounded-full mb-1" />
                                            <div className="h-2 w-16 bg-slate-100 rounded-full" />
                                        </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="#0f172a" 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-emerald-100 p-2 rounded-full">
                                        <PhoneCall 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">Calling...</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                {/* GENERATOR SECTION */}
                <section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
                    <PhoneGenerator />
                </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 Call 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-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
                                    <Phone className="w-7 h-7 text-[#1A1265]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">1. Enter Number</h3>
                                <p className="text-slate-600 text-sm">
                                    Type your phone number. Include the country code for international compatibility.
                                </p>
                            </article>

                            <article className="text-center">
                                <div className="w-14 h-14 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
                                    <Smartphone className="w-7 h-7 text-[#1A1265]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">2. Scan</h3>
                                <p className="text-slate-600 text-sm">
                                    Customers scan the QR code with their mobile phone's camera.
                                </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">
                                    <PhoneCall className="w-6 h-6 text-[#1A1265]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">3. Call</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">
                                    Their phone dialer opens automatically with your number.
                                </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">
                                    Save the QR code 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">
                                    <Shield className="w-6 h-6 text-[#1A1265]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">5. Share</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">
                                    Add it to your marketing materials.
                                </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 Call QR codes.
                        </p>

                        <div className="space-y-4">
                            <FaqItem
                                question="Do I need to include the country code?"
                                answer="We highly recommend it. Adding the country code (e.g., +1 for USA/Canada, +44 for UK) ensures any phone from any region can dial your number correctly."
                            />
                            <FaqItem
                                question="Does this work on iPhone and Android?"
                                answer="Yes, Call QR codes are a standard format supported natively by iOS and Android camera apps."
                            />
                            <FaqItem
                                question="Can I change the number later?"
                                answer="No. Static Call QR codes can't be edited. If your phone number changes, you'll need a new QR code. Use a Dynamic QR Code if you anticipate changes."
                            />
                            <FaqItem
                                question="Is there a cost per scan?"
                                answer="No. There are no fees or limits on scanning. It works just like sharing your phone number."
                            />
                            <FaqItem
                                question="Is it free?"
                                answer="Yes, completely free. We do not charge for generating or scanning the code."
                            />
                        </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>
    );
}
