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>

        <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>
    </>
  );
}