import React from 'react';
import type { Metadata } from 'next';
import GeolocationGenerator from './GeolocationGenerator';
import { MapPin, Shield, Zap, Smartphone, Navigation, Map, Download, Share2 } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import sanitizeHtml from 'sanitize-html';
import { generateSoftwareAppSchema } from '@/lib/schema-utils';

// SEO Optimized Metadata
export const metadata: Metadata = {
    title: {
        absolute: 'Location QR Code Generator - Maps & Directions, Free',
    },
    description: 'Turn an address or GPS coordinates into a QR code. One scan opens directions in Google Maps or Apple Maps. For signage, flyers and event wayfinding. No signup.',
    keywords: ['location qr code', 'maps qr code', 'google maps qr generator', 'geolocation qr', 'coordinates qr code', 'standort qr code', 'google maps qr code erstellen', 'koordinaten qr code', 'wegbeschreibung qr code', 'maps qr code generator'],
    alternates: {
        canonical: 'https://www.qrmaster.net/tools/geolocation-qr-code',
    },
    openGraph: {
        title: 'Location QR Code Generator - Maps & Directions, Free',
        description: 'One scan opens directions in Google Maps or Apple Maps. For signage and wayfinding.',
        type: 'website',
        url: 'https://www.qrmaster.net/tools/geolocation-qr-code',
        images: [{ url: '/og-geolocation-generator.png', width: 1200, height: 630 }],
    },
    twitter: {
        card: 'summary_large_image',
        title: 'Location QR Code Generator - Maps & Directions, Free',
        description: 'One scan opens directions in Google Maps or Apple Maps. For signage and wayfinding.',
    },
    robots: {
        index: true,
        follow: true,
    },
};

// Single source of truth for FAQs: rendered on the page AND emitted as
// FAQPage schema. Google requires every marked-up Q&A to be visible to the
// user on the source page, so never add one without the other.
const faqItems = [
    {
        question: 'Which map app does it open?',
        answer: 'Our generator creates a universal Google Maps link. On most devices, this will open the Google Maps app if installed, or the browser version if not. It is the most compatible method.',
    },
    {
        question: 'How do I find my Latitude and Longitude?',
        answer: 'On Google Maps desktop: Right-click any spot on the map. The first item in the menu is the coordinates. Click to copy them.',
    },
    {
        question: 'Does it work offline?',
        answer: 'The QR code itself can be scanned offline, but the user will likely need an internet connection to load the map and get directions.',
    },
    {
        question: 'Can I use an address instead?',
        answer: 'For precise results, we use coordinates. However, you can use our URL Generator and paste a link to your Google Maps address search result if you prefer.',
    },
    {
        question: 'Is it free?',
        answer: 'Yes, generating this location QR code is completely free and requires no signup.',
    },
    {
        question: 'Why not just use an address?',
        answer: 'Addresses can be ambiguous or cover large areas (like a park or stadium). Coordinates point to an exact geographic spot, ensuring visitors find the specific meeting point or parking entrance.',
    },
    {
        question: 'Does it work on Apple Maps?',
        answer: 'Yes. While the underlying link is a Google Maps link, iOS devices usually handle these gracefully, either opening them in the Google Maps app (if installed) or the browser, where Apple Maps can often intercept directions.',
    },
    {
        question: 'Can I track who scanned it?',
        answer: 'Not with this static tool. If you need scan analytics (e.g., how many people scanned your storefront QR), you should use our Dynamic QR Code service.',
    },
];

// JSON-LD Structured Data
const jsonLd = {
    '@context': 'https://schema.org',
    '@graph': [
        generateSoftwareAppSchema(
            'Geolocation QR Code Generator',
            'Generate QR codes that open specific geographic coordinates in map applications.',
            '/og-geolocation-generator.png'
        ),
        {
            '@type': 'HowTo',
            name: 'How to Create a Location QR Code',
            description: 'Create a QR code that points to a specific map location.',
            step: [
                {
                    '@type': 'HowToStep',
                    position: 1,
                    name: 'Get Coordinates',
                    text: 'Find the Latitude and Longitude of your location (e.g., from Google Maps).',
                },
                {
                    '@type': 'HowToStep',
                    position: 2,
                    name: 'Enter Data',
                    text: 'Paste the coordinates into the generator.',
                },
                {
                    '@type': 'HowToStep',
                    position: 3,
                    name: 'Customize',
                    text: 'Choose a color and style for your map QR code.',
                },
                {
                    '@type': 'HowToStep',
                    position: 4,
                    name: 'Download',
                    text: 'Save your QR code as a high-quality image.',
                },
                {
                    '@type': 'HowToStep',
                    position: 5,
                    name: 'Share',
                    text: 'Place it on invitations, signs, or your website.',
                },
            ],
            totalTime: 'PT45S',
        },
        {
            '@type': 'FAQPage',
            '@id': 'https://www.qrmaster.net/tools/geolocation-qr-code#faq',
            mainEntity: faqItems.map((item) => ({
                '@type': 'Question',
                name: item.question,
                acceptedAnswer: {
                    '@type': 'Answer',
                    text: item.answer.replace(/<[^>]+>/g, ''),
                },
            })),
        },
    ],
};

export default function GeolocationQRCodePage() {
    return (
        <>
            <script
                type="application/ld+json"
                dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
            />
            <ToolBreadcrumb toolName="Location QR Code Generator" toolSlug="geolocation-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: '#047857' }}>
                    <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">
                                Share Perfect Locations with <br className="hidden lg:block" />
                                <span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-300 to-teal-300">Map 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">
                                Provide exact directions to your event, store, or secret spot.
                                <strong className="text-white block sm:inline mt-2 sm:mt-0"> Opens directly in Google Maps.</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">
                                    <Navigation className="w-4 h-4 text-emerald-400" />
                                    Exact Directions
                                </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 Load
                                </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-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-white rounded-xl shadow-lg h-32 mb-6 relative overflow-hidden grayscale group-hover:grayscale-0 transition-all duration-500">
                                    <div className="absolute inset-0 opacity-20 bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px]"></div>
                                    <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
                                        <MapPin className="w-8 h-8 text-red-500 drop-shadow-lg animate-bounce" />
                                    </div>
                                    <div className="absolute bottom-2 left-2 right-2 bg-white/90 p-2 rounded text-[10px] text-slate-600 font-mono text-center">
                                        40.7128° N, 74.0060° W
                                    </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="#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">
                                        <Map 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">Map</div>
                                        <div className="text-sm font-bold text-slate-900">Open</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                {/* GENERATOR SECTION */}
                <section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
                    <GeolocationGenerator />
                </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 Geolocation 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">
                                    <MapPin className="w-7 h-7 text-[#1A1265]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">1. Pinpoint</h3>
                                <p className="text-slate-600 text-sm">
                                    Enter exact GPS coordinates. This ensures users go to the precise spot (e.g., a specific building entrance).
                                </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">
                                    Users scan the code. It is encoded with a universal map link.
                                </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">3. Download</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">
                                    Save 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">4. Scan</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">
                                    Users scan the code to load coordinates.
                                </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">
                                    <Share2 className="w-6 h-6 text-[#1A1265]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">5. Go</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">
                                    They get instant directions to your spot.
                                </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 Map QR codes.
                        </p>

                        <div className="space-y-4">
                            {faqItems.map((item) => (
                                <FaqItem
                                    key={item.question}
                                    question={item.question}
                                    answer={item.answer}
                                />
                            ))}
                        </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 [&_a]:text-indigo-600 [&_a]:underline"
                dangerouslySetInnerHTML={{
                    __html: sanitizeHtml(answer, {
                        allowedTags: ['p', 'strong', 'em', 'ul', 'ol', 'li', 'a', 'br', 'code'],
                        allowedAttributes: { a: ['href'] },
                    }),
                }}
            />
        </details>
    );
}