import React from 'react';
import type { Metadata } from 'next';
import GoogleReviewGenerator from './GoogleReviewGenerator';
import { Star, MapPin, Search, Share2 } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { GrowthLinksSection } from '@/components/marketing/GrowthLinksSection';
import { generateSoftwareAppSchema } from '@/lib/schema-utils';

export const metadata: Metadata = {
    title: {
        absolute: 'Google Review QR Code Generator — Free | QR Master',
    },
    description: 'Create a QR code for your Google Reviews in seconds. Customers scan once and land directly on your review form. Free, no signup required.',
    keywords: ['qr code for google reviews', 'qr code generator for google reviews', 'google review qr code', 'google maps review qr code', 'get more google reviews'],
    alternates: {
        canonical: 'https://www.qrmaster.net/tools/google-review-qr-code',
    },
    openGraph: {
        title: 'Google Review QR Code Generator — Free | QR Master',
        description: 'Create a QR code that takes customers directly to your Google review form. More reviews, less friction.',
        type: 'website',
        url: 'https://www.qrmaster.net/tools/google-review-qr-code',
    },
    twitter: {
        card: 'summary_large_image',
        title: 'Google Review QR Code Generator — Free',
        description: 'Create a QR code that takes customers directly to your Google review form.',
    },
    robots: {
        index: true,
        follow: true,
    },
};

const jsonLd = {
    '@context': 'https://schema.org',
    '@graph': [
        generateSoftwareAppSchema(
            'Google Review QR Code Generator',
            'Generate a QR code that links directly to your Google review form. Customers scan once and can leave a review immediately.',
            '/og-image.png'
        ),
        {
            '@type': 'HowTo',
            name: 'How to Create a Google Review QR Code',
            description: 'Generate a QR code that sends customers directly to your Google review form.',
            step: [
                {
                    '@type': 'HowToStep',
                    position: 1,
                    name: 'Find your Google Review link',
                    text: 'Open Google Maps, search for your business, click Share → Copy link. Or use Google Business Profile → Get more reviews.',
                },
                {
                    '@type': 'HowToStep',
                    position: 2,
                    name: 'Paste the link into the generator',
                    text: 'Paste your Google review URL into the field above. The generator accepts g.page, google.com, and maps.app.goo.gl links.',
                },
                {
                    '@type': 'HowToStep',
                    position: 3,
                    name: 'Customize and download',
                    text: 'Choose a color and frame label (e.g. "Leave a Review"), then download as PNG or SVG.',
                },
                {
                    '@type': 'HowToStep',
                    position: 4,
                    name: 'Display the QR code',
                    text: 'Print the code on receipts, table cards, packaging, or your window. Customers scan once to review.',
                },
            ],
            totalTime: 'PT60S',
        },
        {
            '@type': 'FAQPage',
            mainEntity: [
                {
                    '@type': 'Question',
                    name: 'How do I find my Google Review link?',
                    acceptedAnswer: {
                        '@type': 'Answer',
                        text: 'Open Google Maps → search for your business → click Share → Copy link. Alternatively, go to your Google Business Profile dashboard → click "Get more reviews" — this gives you a direct review shortlink.',
                    },
                },
                {
                    '@type': 'Question',
                    name: 'Does this Google Review QR code expire?',
                    acceptedAnswer: {
                        '@type': 'Answer',
                        text: 'No. This is a static QR code that directly encodes your Google review URL. It will work as long as your Google Business Profile is active.',
                    },
                },
                {
                    '@type': 'Question',
                    name: 'Can I track how many people scanned the QR code?',
                    acceptedAnswer: {
                        '@type': 'Answer',
                        text: 'Not with a static QR code. If you need scan analytics (device, location, time), create a dynamic QR code with tracking through QR Master.',
                    },
                },
                {
                    '@type': 'Question',
                    name: 'What happens when a customer scans the QR code?',
                    acceptedAnswer: {
                        '@type': 'Answer',
                        text: 'They are taken directly to your Google review form. If they are logged into a Google account on their phone, they can leave a review immediately with no extra steps.',
                    },
                },
                {
                    '@type': 'Question',
                    name: 'Where should I display the Google Review QR code?',
                    acceptedAnswer: {
                        '@type': 'Answer',
                        text: 'Best placements: receipts, table tent cards (restaurants), checkout counters, packaging inserts, and your shop window. The moment after a positive experience is the best time to ask for a review.',
                    },
                },
            ],
        },
        {
            '@type': 'BreadcrumbList',
            itemListElement: [
                { '@type': 'ListItem', position: 1, name: 'Home', item: 'https://www.qrmaster.net' },
                { '@type': 'ListItem', position: 2, name: 'QR Code Tools', item: 'https://www.qrmaster.net/tools' },
                { '@type': 'ListItem', position: 3, name: 'Google Review QR Code Generator', item: 'https://www.qrmaster.net/tools/google-review-qr-code' },
            ],
        },
    ],
};

export default function GoogleReviewQRCodePage() {
    return (
        <>
            <script
                type="application/ld+json"
                dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
            />
            <ToolBreadcrumb toolName="Google Review QR Code Generator" toolSlug="google-review-qr-code" />

            <div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>

                {/* HERO */}
                <section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden bg-[#1A1265]">
                    <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 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-yellow-400 opacity-75"></span>
                                    <span className="relative inline-flex rounded-full h-2 w-2 bg-yellow-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">
                                Google Review QR Code <br className="hidden lg:block" />
                                <span className="text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-orange-400">Generator — Free</span>
                            </h1>

                            <p className="text-lg md:text-xl text-indigo-100 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
                                Customers scan once and land directly on your Google review form.
                                <strong className="text-white block sm:inline mt-2 sm:mt-0"> More reviews, less friction.</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">
                                    <Star className="w-4 h-4 text-yellow-400" />
                                    Direct to Review Form
                                </div>
                                <div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5">
                                    <MapPin className="w-4 h-4 text-emerald-400" />
                                    Works for Any Business
                                </div>
                            </div>
                        </div>

                        {/* Hero QR Visual */}
                        <div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
                            <div className="absolute w-[500px] h-[500px] bg-yellow-500/20 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-48 h-48 bg-white rounded-xl p-2 shadow-inner mb-6 relative overflow-hidden flex items-center justify-center">
                                    <QRCodeSVG value="https://www.qrmaster.net/tools/google-review-qr-code" size={170} fgColor="#1A73E8" level="Q" />
                                </div>
                                <div className="w-full bg-white/10 rounded-xl p-4 backdrop-blur-sm border border-white/10">
                                    <div className="flex items-center gap-3">
                                        <div className="w-8 h-8 rounded-full bg-yellow-500/20 flex items-center justify-center">
                                            <Star className="w-4 h-4 text-yellow-300" />
                                        </div>
                                        <div className="space-y-1 w-full">
                                            <div className="h-1.5 w-3/4 bg-white/30 rounded-full" />
                                            <div className="h-1.5 w-1/2 bg-white/20 rounded-full" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                {/* GENERATOR */}
                <section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
                    <GoogleReviewGenerator />
                </section>

                {/* HOW TO FIND YOUR REVIEW LINK */}
                <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-4">
                            How to Find Your Google Review Link
                        </h2>
                        <p className="text-slate-600 text-center mb-12 max-w-2xl mx-auto">
                            You need your Google Business review URL before creating the QR code. Here are two ways to get it.
                        </p>

                        <div className="grid md:grid-cols-2 gap-8">
                            <article className="p-6 bg-slate-50 rounded-2xl border border-slate-100">
                                <div className="w-12 h-12 rounded-xl bg-blue-100 flex items-center justify-center mb-4">
                                    <Search className="w-6 h-6 text-blue-600" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-3">Method 1: Google Maps</h3>
                                <ol className="space-y-2 text-sm text-slate-600 list-none">
                                    <li><span className="font-semibold text-slate-800">1.</span> Open Google Maps</li>
                                    <li><span className="font-semibold text-slate-800">2.</span> Search for your business name</li>
                                    <li><span className="font-semibold text-slate-800">3.</span> Click the <strong>Share</strong> button</li>
                                    <li><span className="font-semibold text-slate-800">4.</span> Copy the short link (starts with <code className="bg-white px-1 rounded text-xs">maps.app.goo.gl</code> or <code className="bg-white px-1 rounded text-xs">g.page</code>)</li>
                                    <li><span className="font-semibold text-slate-800">5.</span> Paste into the generator above</li>
                                </ol>
                            </article>

                            <article className="p-6 bg-slate-50 rounded-2xl border border-slate-100">
                                <div className="w-12 h-12 rounded-xl bg-yellow-100 flex items-center justify-center mb-4">
                                    <Share2 className="w-6 h-6 text-yellow-600" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-3">Method 2: Google Business Profile</h3>
                                <ol className="space-y-2 text-sm text-slate-600 list-none">
                                    <li><span className="font-semibold text-slate-800">1.</span> Sign in to <strong>business.google.com</strong></li>
                                    <li><span className="font-semibold text-slate-800">2.</span> Select your business location</li>
                                    <li><span className="font-semibold text-slate-800">3.</span> Click <strong>"Get more reviews"</strong></li>
                                    <li><span className="font-semibold text-slate-800">4.</span> Copy the review shortlink provided</li>
                                    <li><span className="font-semibold text-slate-800">5.</span> Paste into the generator above</li>
                                </ol>
                            </article>
                        </div>
                    </div>
                </section>

                {/* USE CASES */}
                <section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
                    <div className="max-w-5xl mx-auto">
                        <h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
                            Who Uses Google Review QR Codes?
                        </h2>
                        <p className="text-slate-600 text-center mb-12">
                            Any business where the moment of satisfaction happens in person.
                        </p>

                        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
                            {[
                                { icon: '🍽️', title: 'Restaurants & Cafés', text: 'Print on receipts or table cards. Ask after the meal when the experience is fresh.' },
                                { icon: '🏨', title: 'Hotels & Guesthouses', text: 'Place on checkout envelopes or in-room cards. Capture reviews at checkout.' },
                                { icon: '🏥', title: 'Clinics & Salons', text: 'Display at reception. Patients and clients who had a great experience can review in seconds.' },
                                { icon: '🛍️', title: 'Retail & Shops', text: 'Include in packaging or display at checkout. Turn happy shoppers into reviewers.' },
                            ].map((item) => (
                                <article key={item.title} className="p-6 bg-white rounded-2xl border border-slate-100 shadow-sm">
                                    <div className="text-3xl mb-3">{item.icon}</div>
                                    <h3 className="font-bold text-slate-900 mb-2">{item.title}</h3>
                                    <p className="text-sm text-slate-600 leading-relaxed">{item.text}</p>
                                </article>
                            ))}
                        </div>
                    </div>
                </section>

                <GrowthLinksSection
                    eyebrow="Level up your local marketing"
                    title="More QR workflows for local businesses"
                    description="Review QR codes work best alongside dynamic destination management and scan tracking."
                    links={[
                        {
                            href: '/qr-code-for/restaurants',
                            title: 'QR Codes for Restaurants',
                            description: 'Menu, ordering, and review QR workflows built for food service businesses.',
                            ctaLabel: 'Restaurant QR workflows',
                        },
                        {
                            href: '/qr-code-for/hotels',
                            title: 'QR Codes for Hotels',
                            description: 'Check-in, room service, and review QR setups for hospitality.',
                            ctaLabel: 'Hotel QR workflows',
                        },
                        {
                            href: '/dynamic-qr-code-generator',
                            title: 'Dynamic QR Code Generator',
                            description: 'Update your review link or redirect to a different page anytime — no reprint needed.',
                            ctaLabel: 'Create dynamic QR code',
                        },
                        {
                            href: '/qr-code-tracking',
                            title: 'QR Code Tracking',
                            description: 'See exactly how many people scanned your review QR code and from which location.',
                            ctaLabel: 'Track QR code scans',
                        },
                    ]}
                    pageType="commercial"
                    cluster="google-review-qr"
                />

                <RelatedTools />

                {/* FAQ */}
                <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 Google Review QR codes.
                        </p>

                        <div className="space-y-4">
                            {[
                                {
                                    question: 'How do I find my Google Review link?',
                                    answer: 'Open Google Maps → search your business → click Share → Copy link. Or go to Google Business Profile → "Get more reviews" for a direct shortlink.',
                                },
                                {
                                    question: 'Does the Google Review QR code expire?',
                                    answer: 'No. This is a static QR code that encodes your Google review URL directly. It works indefinitely as long as your Google Business Profile is active.',
                                },
                                {
                                    question: 'Can I track how many people scanned it?',
                                    answer: 'Not with a static QR code. For scan analytics (device, location, time), create a dynamic QR code with tracking through QR Master.',
                                },
                                {
                                    question: 'What happens when a customer scans the QR code?',
                                    answer: 'They are taken directly to your Google review form. If they are logged into a Google account, they can leave a star rating and review immediately.',
                                },
                                {
                                    question: 'Where should I put the Google Review QR code?',
                                    answer: 'Best placements: receipts, table cards, checkout counters, packaging inserts, and your shop window. Ask for reviews right after the positive experience.',
                                },
                            ].map((item) => (
                                <details key={item.question} 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">
                                        {item.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">
                                        {item.answer}
                                    </div>
                                </details>
                            ))}
                        </div>
                    </div>
                </section>

            </div>
        </>
    );
}