import React from 'react';
import type { Metadata } from 'next';
import GoogleReviewGenerator from './GoogleReviewGenerator';
import { Star, MapPin, Search, Share2, TrendingUp } 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',
    languages: {
      'x-default': 'https://www.qrmaster.net/tools/google-review-qr-code',
      en: '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',
      datePublished: '2024-01-01',
      dateModified: '2026-04-27',
      author: {
        '@type': 'Person',
        name: 'Timo Knuth',
        url: 'https://www.qrmaster.net/authors/timo',
      },
      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>

        {/* WHY REVIEWS MATTER — STATISTICS */}
        <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
          <div className="max-w-4xl mx-auto">
            <div className="flex items-center gap-2 mb-3">
              <TrendingUp className="w-5 h-5 text-yellow-500" />
              <span className="text-sm font-semibold text-yellow-600 uppercase tracking-wider">
                Research-backed impact
              </span>
            </div>
            <h2 className="text-3xl font-bold text-slate-900 mb-4">
              Why Google Reviews Matter for Your Business
            </h2>
            <p className="text-slate-600 mb-10 max-w-2xl">
              A <strong>Google Review QR code</strong> reduces the friction
              between a satisfied customer and a published review — the single
              biggest barrier to getting more reviews.
            </p>

            <div className="grid md:grid-cols-2 gap-6 mb-8">
              <div className="bg-yellow-50 border border-yellow-100 rounded-2xl p-6">
                <div className="text-4xl font-extrabold text-yellow-600 mb-2">
                  70%
                </div>
                <p className="text-slate-700 text-sm leading-relaxed mb-3">
                  of consumers will leave a review for a business{' '}
                  <strong>if they are asked</strong> — but most businesses never
                  ask, or ask via email where completion rates drop to 1–3%.
                </p>
                <p className="text-xs text-slate-500">
                  Source:{' '}
                  <a
                    href="https://brightlocal.com/research/local-consumer-review-survey/"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="underline hover:text-slate-700"
                  >
                    BrightLocal Local Consumer Review Survey
                  </a>
                </p>
              </div>

              <div className="bg-blue-50 border border-blue-100 rounded-2xl p-6">
                <div className="text-4xl font-extrabold text-blue-600 mb-2">
                  +270%
                </div>
                <p className="text-slate-700 text-sm leading-relaxed mb-3">
                  increase in conversion rates for products and businesses with
                  reviews compared to those without. Capturing reviews at the
                  point of sale — where satisfaction is highest — maximizes this
                  effect.
                </p>
                <p className="text-xs text-slate-500">
                  Source:{' '}
                  <a
                    href="https://spiegel.medill.northwestern.edu/online-reviews/"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="underline hover:text-slate-700"
                  >
                    Spiegel Research Center, Northwestern University
                  </a>
                </p>
              </div>
            </div>

            <p className="text-xs text-slate-400 italic">
              By Timo Knuth, QR Master · Last updated: June 2025 · Based on
              independent academic and industry research
            </p>
          </div>
        </section>

        {/* SEO Content Block */}
        <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white border-t border-slate-100">
          <div className="max-w-4xl mx-auto">
            <h2 className="text-3xl font-bold text-slate-900 mb-8">
              Why Google Review QR Codes Work Better Than Asking Verbally
            </h2>
            <div className="prose prose-slate max-w-none">
              <p className="text-lg text-slate-600 mb-6">Verbally asking for a review creates a promise customers intend to keep but rarely fulfill. The moment they leave your business, the intention fades. A Google Review QR code shortens the gap between the moment of satisfaction and the act of leaving a review to a single scan — while the experience is still fresh and the customer is still engaged.</p>
              <h3 className="text-xl font-bold text-slate-900 mt-8 mb-4">The Best Placement for Google Review QR Codes</h3>
              <p className="text-slate-600 mb-4">Placement is everything. The highest-performing locations are those where customers are already pausing: on printed receipts so they see it while reviewing the bill, on table tent cards at restaurants between ordering and paying, on the front door or exit so it is the last thing they see when leaving satisfied, and on packaging inserts inside product boxes that customers open at home after a purchase. Display the QR code at roughly A5 size with a clear label such as "Happy with your visit? Leave us a Google Review" — customers do not need instructions beyond that. Checkout counters and front desk areas work especially well because staff can gesture toward the code while the customer is already in a positive frame of mind.</p>
              <h3 className="text-xl font-bold text-slate-900 mt-8 mb-4">How Many More Reviews Will You Get?</h3>
              <p className="text-slate-600 mb-4">The BrightLocal research above shows 70% of consumers will leave a review if asked, and asking in person at the point of sale removes the friction that email follow-ups add. The reason is timing: a QR code captures the customer at peak satisfaction, requiring no extra steps beyond scanning and tapping the star rating. Email review requests, by contrast, arrive hours or days later when the emotional high has passed and competing priorities fill the inbox. Even a modest increase in monthly reviews compounds over a year into a stronger local search presence, since Google's ranking algorithm weighs both review count and recency.</p>
              <h3 className="text-xl font-bold text-slate-900 mt-8 mb-4">Responding to Reviews: What to Do After You Collect Them</h3>
              <p className="text-slate-600 mb-4">Collecting reviews is only half the strategy. Responding to every review — positive and negative — signals to Google that your business is active and engaged, which supports local ranking. For positive reviews, a brief personalised thank-you (mentioning a specific detail if possible) reinforces the relationship. For critical reviews, acknowledge the issue, apologise where appropriate, and invite further contact offline. Google surfaces response rate and speed in its quality signals, so even a short reply within 24 hours outperforms silence. To understand which QR code placements are driving the most scans before reviewers land on Google, use <a href="/qr-code-tracking" className="text-blue-600 underline hover:text-blue-800">QR code scan tracking</a> to measure volume by location and time of day.</p>
            </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: '/use-cases/qr-codes-for-review-collection',
              title: 'QR Codes for Review Collection',
              description:
                'Plan receipts, table cards, packaging, and counters as measurable review-request placements.',
              ctaLabel: 'Build review collection workflow',
            },
            {
              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>
    </>
  );
}