import React from 'react';
import type { Metadata } from 'next';
import { Button } from '@/components/ui/Button';
import { Card } from '@/components/ui/Card';
import SeoJsonLd from '@/components/SeoJsonLd';
import Breadcrumbs, { BreadcrumbItem } from '@/components/Breadcrumbs';
import { breadcrumbSchema } from '@/lib/schema';
import { FAQSection } from '@/components/aeo/FAQSection';
import { GrowthLinksSection } from '@/components/marketing/GrowthLinksSection';
import { MarketingPageTracker, TrackedCtaLink } from '@/components/marketing/MarketingAnalytics';
import { competitors } from '@/lib/competitor-data';

const competitor = competitors['qr-code-generator'];

export const metadata: Metadata = {
  title: {
    absolute: 'QR-Code-Generator.com Alternative – No Bait and Switch | QR Master',
  },
  description:
    'Looking for a QR-Code-Generator.com alternative? QR Master gives you 3 truly free dynamic QR codes — no trial that expires mid-campaign, no forced annual contracts. Transparent pricing from €0.',
  keywords:
    'qr-code-generator.com alternative, alternative to qr code generator, qr code generator free expired, dynamic qr code deactivated, qr code bait switch',
  alternates: {
    canonical: 'https://www.qrmaster.net/alternatives/qr-code-generator',
  },
  openGraph: {
    title: 'QR-Code-Generator.com Alternative – No Bait and Switch',
    description:
      'Your dynamic QR code stopped working after two weeks? QR Master offers 3 permanently free dynamic codes, honest pricing, and no hidden trial timers.',
    url: 'https://www.qrmaster.net/alternatives/qr-code-generator',
    type: 'website',
    images: ['/og-image.png'],
  },
  twitter: {
    title: 'QR-Code-Generator.com Alternative – No Bait and Switch',
    description:
      'Your dynamic QR code stopped working after two weeks? QR Master offers 3 permanently free dynamic codes and honest pricing.',
  },
};

const comparisonRows = competitor.features;

const faqItems = [
  {
    question: 'Why did my dynamic QR code from QR-Code-Generator.com stop working?',
    answer:
      'QR-Code-Generator.com offers dynamic QR codes on a free trial basis — typically around 14 days. After the trial ends, the code is deactivated. Your printed materials (flyers, menus, packaging) become dead ends. To reactivate, they require purchasing an annual subscription. QR Master does not do this: the 3 free dynamic codes on our free plan stay active as long as your account exists.',
  },
  {
    question: 'Can I switch from QR-Code-Generator.com without reprinting everything?',
    answer:
      'Dynamic QR codes cannot be migrated directly because the destination URL is encoded into the QR code image itself — each provider uses their own redirect infrastructure. If you are still within the deactivation period, create new dynamic codes in QR Master immediately and update your placements (digital ones) or plan your next reprint run. Static QR codes you created on QR-Code-Generator.com remain permanently valid regardless of your subscription status.',
  },
  {
    question: 'What does QR Master give me for free, permanently?',
    answer:
      'The QR Master free plan includes 3 active dynamic QR codes with basic scan tracking and unlimited static QR codes — no trial period, no credit card required, no expiration. The 3 dynamic codes are always active. If you need more, Pro starts at €9/month for 50 dynamic codes with full analytics.',
  },
  {
    question: 'Is the free plan at QR Master really free, or will it expire like QR-Code-Generator.com?',
    answer:
      'The free tier is permanently free within the defined limits. There is no 14-day clock, no activation fee, no "trial" framing. The 3 dynamic codes on the free plan continue working as long as your account is active. We make money from Pro (€9/month) and Business (€29/month) upgrades — not from deactivating free users after they\'ve already printed materials.',
  },
  {
    question: 'Does QR Master comply with GDPR for scan analytics?',
    answer:
      'Yes. QR Master anonymizes IP addresses using server-side hashing with a salt before any analytics data is stored. No personally identifiable IP addresses are recorded. Scan data includes device type, time, country-level location, and UTM parameters — all without storing raw IPs. This is built into the platform, not a bolt-on option.',
  },
  {
    question: 'What happens to my QR codes if I cancel my QR Master subscription?',
    answer:
      'If you downgrade from a paid plan to Free, your dynamic codes are paused (not deleted) if you exceed the 3-code free limit. You choose which 3 to keep active. Static codes are unaffected and remain permanently valid. If you close your account entirely, dynamic codes stop redirecting — which is why we recommend switching to static QR codes for any permanent materials that you cannot update.',
  },
  {
    question: 'Does QR Master support bulk QR code creation?',
    answer:
      'Yes. The Business plan (€29/month) includes bulk creation via CSV or Excel upload — up to 1,000 unique QR codes per batch. Each code can have a different destination URL, label, and UTM parameters. QR-Code-Generator.com does not offer bulk creation at any tier.',
  },
];

const breadcrumbItems: BreadcrumbItem[] = [
  { name: 'Home', url: '/' },
  { name: 'Alternatives', url: '/alternatives' },
  { name: 'QR-Code-Generator.com Alternative', url: '/alternatives/qr-code-generator' },
];

const faqSchema = {
  '@context': 'https://schema.org',
  '@type': 'FAQPage',
  '@id': 'https://www.qrmaster.net/alternatives/qr-code-generator#faq',
  mainEntity: faqItems.map((item) => ({
    '@type': 'Question',
    name: item.question,
    acceptedAnswer: {
      '@type': 'Answer',
      text: item.answer,
    },
  })),
};

const relatedLinks = [
  {
    href: '/dynamic-qr-code-generator',
    title: 'Dynamic QR Code Generator',
    description:
      'Create QR codes you can update after printing. Change destinations without reprinting and review scan context from your dashboard.',
    ctaLabel: 'Create your first dynamic QR code',
  },
  {
    href: '/qr-code-analytics',
    title: 'QR Code Analytics',
    description:
      'See which placements drive scans, which devices your audience uses, and where your codes are being scanned — all in one dashboard.',
    ctaLabel: 'Explore QR code analytics',
  },
  {
    href: '/pricing',
    title: 'Transparent Pricing',
    description:
      'Free forever for 3 dynamic codes. Pro at €9/month. Business at €29/month. No hidden trial timers, no forced annual contracts.',
    ctaLabel: 'See QR Master pricing',
  },
  {
    href: '/alternatives/flowcode',
    title: 'Flowcode Alternative',
    description:
      'Flowcode forces its branding onto your QR codes and sends scanners through an interstitial page. See how QR Master compares.',
    ctaLabel: 'Compare with Flowcode',
  },
];

export default function QRCodeGeneratorAlternativePage() {
  return (
    <>
      <SeoJsonLd data={[faqSchema, breadcrumbSchema(breadcrumbItems)]} />
      <MarketingPageTracker pageType="commercial" cluster="competitor" />
      <div className="min-h-screen" style={{ backgroundColor: '#F8F7F4', color: '#18181B' }}>

        {/* Hero Section */}
        <section className="bg-white border-b" style={{ borderColor: '#E4E0D9' }}>
          <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-10 pb-20">
            <div className="mb-10">
              <Breadcrumbs items={breadcrumbItems} />
            </div>

            <div className="grid items-start gap-16 lg:grid-cols-2">
              {/* Left: Copy */}
              <div className="max-w-xl">
                <div
                  className="inline-block mb-6 text-xs font-semibold uppercase tracking-widest px-3 py-1.5 rounded"
                  style={{ backgroundColor: '#FEF3C7', color: '#92400E', letterSpacing: '0.12em' }}
                >
                  The No-Bait-And-Switch Alternative
                </div>

                <h1 className="text-4xl sm:text-5xl font-extrabold leading-[1.08] tracking-tight mb-6" style={{ color: '#111110' }}>
                  Don&apos;t let a 14-day timer kill your printed campaign.
                </h1>

                <p className="text-lg leading-relaxed mb-8" style={{ color: '#52525B' }}>
                  QR-Code-Generator.com deactivates dynamic QR codes after roughly two weeks — right after you&apos;ve
                  printed the flyers. QR Master gives you 3 free dynamic codes that stay active permanently.
                  No hidden trial, no forced annual contract.
                </p>

                <ul className="space-y-3 mb-10">
                  {[
                    '3 permanently active dynamic QR codes — free forever',
                    'Transparent pricing: Pro at €9/mo, cancel anytime',
                    'GDPR-compliant analytics with hashed IPs, built in',
                    'Bulk creation up to 1,000 codes (Business plan)',
                  ].map((item) => (
                    <li key={item} className="flex items-start gap-3">
                      <span
                        className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-white text-xs font-bold"
                        style={{ backgroundColor: '#16A34A' }}
                      >
                        ✓
                      </span>
                      <span className="text-base font-medium" style={{ color: '#27272A' }}>{item}</span>
                    </li>
                  ))}
                </ul>

                <div className="flex flex-col gap-3 sm:flex-row">
                  <TrackedCtaLink
                    href="/signup"
                    ctaLabel="Start Free — No Credit Card"
                    ctaLocation="hero_primary"
                    pageType="commercial"
                    cluster="competitor"
                  >
                    <Button size="lg" className="w-full h-13 px-8 text-base sm:w-auto">
                      Start Free — No Credit Card
                    </Button>
                  </TrackedCtaLink>
                  <TrackedCtaLink
                    href="/pricing"
                    ctaLabel="Compare Plans"
                    ctaLocation="hero_secondary"
                    pageType="commercial"
                    cluster="competitor"
                  >
                    <Button variant="outline" size="lg" className="w-full h-13 px-8 text-base sm:w-auto">
                      Compare Plans
                    </Button>
                  </TrackedCtaLink>
                </div>
              </div>

              {/* Right: The "14 days" visual */}
              <div className="lg:pt-4">
                {/* Countdown visual */}
                <div
                  className="rounded-2xl border p-8 mb-4"
                  style={{ borderColor: '#FCA5A5', backgroundColor: '#FFF5F5' }}
                >
                  <div className="flex items-center justify-between mb-5">
                    <span className="text-sm font-semibold" style={{ color: '#7F1D1D' }}>
                      QR-Code-Generator.com
                    </span>
                    <span
                      className="text-xs font-bold px-2.5 py-1 rounded-full uppercase tracking-wide"
                      style={{ backgroundColor: '#FEE2E2', color: '#B91C1C' }}
                    >
                      Free trial
                    </span>
                  </div>

                  <div className="flex items-end gap-3 mb-4">
                    <span className="font-extrabold leading-none" style={{ fontSize: '72px', color: '#B91C1C', lineHeight: 1 }}>14</span>
                    <div className="pb-2">
                      <p className="font-bold text-lg" style={{ color: '#7F1D1D' }}>days</p>
                      <p className="text-sm" style={{ color: '#991B1B' }}>then deactivated</p>
                    </div>
                  </div>

                  <div className="w-full rounded-full h-2 mb-3" style={{ backgroundColor: '#FECACA' }}>
                    <div className="h-2 rounded-full" style={{ width: '100%', backgroundColor: '#EF4444' }}></div>
                  </div>
                  <p className="text-sm leading-snug" style={{ color: '#7F1D1D' }}>
                    Trial expired. Your printed QR codes are now dead ends. Pay €300+ upfront or reprint everything.
                  </p>
                </div>

                <div
                  className="rounded-2xl border p-8"
                  style={{ borderColor: '#BBF7D0', backgroundColor: '#F0FDF4' }}
                >
                  <div className="flex items-center justify-between mb-5">
                    <span className="text-sm font-semibold" style={{ color: '#14532D' }}>
                      QR Master
                    </span>
                    <span
                      className="text-xs font-bold px-2.5 py-1 rounded-full uppercase tracking-wide"
                      style={{ backgroundColor: '#DCFCE7', color: '#15803D' }}
                    >
                      Always active
                    </span>
                  </div>

                  <div className="flex items-end gap-3 mb-4">
                    <span className="font-extrabold leading-none" style={{ fontSize: '72px', color: '#16A34A', lineHeight: 1 }}>∞</span>
                    <div className="pb-2">
                      <p className="font-bold text-lg" style={{ color: '#14532D' }}>no expiry</p>
                      <p className="text-sm" style={{ color: '#15803D' }}>3 codes, free forever</p>
                    </div>
                  </div>

                  <div className="w-full rounded-full h-2 mb-3" style={{ backgroundColor: '#BBF7D0' }}>
                    <div className="h-2 rounded-full" style={{ width: '100%', backgroundColor: '#16A34A' }}></div>
                  </div>
                  <p className="text-sm leading-snug" style={{ color: '#14532D' }}>
                    No trial period. No countdown. The 3 free dynamic codes stay active as long as your account exists.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* The Bait and Switch Section */}
        <section className="py-24" style={{ backgroundColor: '#F8F7F4' }}>
          <div className="container mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
            <h2 className="text-3xl sm:text-4xl font-bold tracking-tight mb-4" style={{ color: '#111110' }}>
              The bait-and-switch trap
            </h2>
            <p className="text-lg mb-12" style={{ color: '#71717A' }}>
              What&apos;s actually happening when you create a &quot;free&quot; dynamic code there.
            </p>

            <div className="grid gap-10 md:grid-cols-2">
              <div className="space-y-5 text-base leading-relaxed" style={{ color: '#52525B' }}>
                <p>
                  QR-Code-Generator.com markets dynamic QR codes as free to create. And they are — for about two weeks.
                  After roughly 14 days, those dynamic codes stop redirecting. Anyone who scans them sees a dead page
                  or a prompt to upgrade.
                </p>
                <p>
                  The problem is timing. By the time the trial ends, most users have already printed their materials.
                  The code is already out in the world. At that point, you face a choice: write off everything you
                  printed, or pay for an annual subscription you didn&apos;t know you needed.
                </p>
                <p>
                  Hundreds of reviews on Trustpilot describe feeling &ldquo;trapped&rdquo; because the alternative
                  — replacing all the printed materials — is more expensive. The annual plan costs around
                  €25.99/month billed yearly, over €300 upfront.
                </p>
              </div>

              <div
                className="rounded-2xl border p-8"
                style={{ backgroundColor: '#ffffff', borderColor: '#E4E0D9', borderLeft: '4px solid #D97706' }}
              >
                <p className="text-xs font-bold uppercase tracking-widest mb-4" style={{ color: '#D97706' }}>
                  The QR Master promise
                </p>
                <p className="text-base leading-relaxed mb-4" style={{ color: '#27272A' }}>
                  The 3 dynamic QR codes on the QR Master free plan are active indefinitely. There is no trial period,
                  no countdown, no automatic deactivation.
                </p>
                <p className="text-base leading-relaxed" style={{ color: '#27272A' }}>
                  If you need more than 3, you upgrade to Pro at €9/month — month-to-month with no forced annual
                  commitment. Static codes are unlimited and free forever.
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* Feature Comparison Table */}
        <section className="py-24 bg-white" style={{ borderTop: '1px solid #E4E0D9', borderBottom: '1px solid #E4E0D9' }}>
          <div className="container mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
            <h2 className="text-3xl sm:text-4xl font-bold tracking-tight mb-3" style={{ color: '#111110' }}>
              Side-by-side comparison
            </h2>
            <p className="text-lg mb-12" style={{ color: '#71717A' }}>
              What you actually get at each tier, without reading the fine print.
            </p>

            <div className="overflow-hidden rounded-xl border" style={{ borderColor: '#E4E0D9' }}>
              {/* Header */}
              <div className="grid grid-cols-3" style={{ backgroundColor: '#F8F7F4', borderBottom: '1px solid #E4E0D9' }}>
                <div className="p-5 text-sm font-semibold" style={{ color: '#71717A' }}>Feature</div>
                <div className="p-5 border-l" style={{ borderColor: '#E4E0D9' }}>
                  <p className="text-xs font-semibold uppercase tracking-wider mb-1" style={{ color: '#B91C1C' }}>Competitor</p>
                  <p className="text-sm font-bold" style={{ color: '#27272A' }}>QR-Code-Generator.com</p>
                </div>
                <div className="p-5 border-l" style={{ borderColor: '#E4E0D9', backgroundColor: '#F0FDF4' }}>
                  <p className="text-xs font-semibold uppercase tracking-wider mb-1" style={{ color: '#16A34A' }}>Alternative</p>
                  <p className="text-sm font-bold" style={{ color: '#27272A' }}>QR Master</p>
                </div>
              </div>

              {/* Rows */}
              {comparisonRows.map((row, i) => (
                <div
                  key={row.feature}
                  className="grid grid-cols-3"
                  style={{
                    borderTop: '1px solid #E4E0D9',
                    backgroundColor: i % 2 === 0 ? '#FFFFFF' : '#FAFAF8',
                  }}
                >
                  <div className="p-5">
                    <p className="text-sm font-semibold" style={{ color: '#18181B' }}>{row.feature}</p>
                    {row.note && <p className="mt-1 text-xs leading-snug" style={{ color: '#71717A' }}>{row.note}</p>}
                  </div>
                  <div className="p-5 flex items-center border-l" style={{ borderColor: '#E4E0D9' }}>
                    {typeof row.competitor === 'boolean' ? (
                      <span
                        className="text-sm font-bold"
                        style={{ color: row.competitor ? '#16A34A' : '#A1A1AA' }}
                      >
                        {row.competitor ? '✓' : '✗'}
                      </span>
                    ) : (
                      <span className="text-sm" style={{ color: '#52525B' }}>{row.competitor}</span>
                    )}
                  </div>
                  <div className="p-5 flex items-center border-l" style={{ borderColor: '#E4E0D9', backgroundColor: 'rgba(240,253,244,0.5)' }}>
                    {typeof row.qrMaster === 'boolean' ? (
                      <span
                        className="text-sm font-bold"
                        style={{ color: row.qrMaster ? '#16A34A' : '#A1A1AA' }}
                      >
                        {row.qrMaster ? '✓' : '✗'}
                      </span>
                    ) : (
                      <span className="text-sm font-semibold" style={{ color: '#15803D' }}>{row.qrMaster}</span>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Detailed Comparisons — 3 cards */}
        <section className="py-24" style={{ backgroundColor: '#F8F7F4' }}>
          <div className="container mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
            <h2 className="text-3xl sm:text-4xl font-bold tracking-tight mb-12" style={{ color: '#111110' }}>
              How they compare in practice
            </h2>

            <div className="grid gap-6 md:grid-cols-3">
              {[
                {
                  label: 'Pricing transparency',
                  body: 'QR-Code-Generator.com lists dynamic codes as free — true for the 14-day trial. Reactivation requires an annual plan billed upfront (€100–€300+).',
                  highlight: 'QR Master pricing is explicit: Free for 3 dynamic codes, Pro at €9/month. No fine print about trial periods or forced billing cycles.',
                  accent: '#D97706',
                },
                {
                  label: 'What "free" actually means',
                  body: 'On QR-Code-Generator.com, "free" means free to create, not free to keep active. The redirect stops when you don\'t pay.',
                  highlight: 'On QR Master, the 3 free dynamic codes are active as long as your account exists. There is no timer.',
                  accent: '#16A34A',
                },
                {
                  label: 'Analytics and GDPR',
                  body: 'Basic scan tracking on QR-Code-Generator.com requires a paid plan. US servers require manual DPA review for GDPR.',
                  highlight: 'QR Master hashes IP addresses server-side before storing any data. No raw IP is ever written. Built-in, not a toggle.',
                  accent: '#2563EB',
                },
              ].map((card) => (
                <div
                  key={card.label}
                  className="rounded-xl p-7 bg-white"
                  style={{ border: '1px solid #E4E0D9', borderTop: `3px solid ${card.accent}` }}
                >
                  <h3 className="text-base font-bold mb-3" style={{ color: '#18181B' }}>{card.label}</h3>
                  <p className="text-sm leading-relaxed mb-4" style={{ color: '#71717A' }}>{card.body}</p>
                  <p className="text-sm leading-relaxed font-medium" style={{ color: '#27272A' }}>{card.highlight}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Migration Guide */}
        <section className="py-24 bg-white" style={{ borderTop: '1px solid #E4E0D9' }}>
          <div className="container mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
            <h2 className="text-3xl sm:text-4xl font-bold tracking-tight mb-3" style={{ color: '#111110' }}>
              How to migrate from QR-Code-Generator.com
            </h2>
            <p className="text-lg mb-12" style={{ color: '#71717A' }}>
              Act before printing new materials if possible.
            </p>

            <div className="space-y-0">
              {[
                {
                  title: 'List your active codes',
                  body: "In your QR-Code-Generator.com account, note the destination URL behind each active dynamic code. You'll re-create these.",
                },
                {
                  title: 'Create a free QR Master account',
                  body: 'Sign up at qrmaster.net — no credit card required. The free plan gives you 3 active dynamic QR codes immediately.',
                },
                {
                  title: 'Re-create your dynamic codes',
                  body: 'Create new dynamic codes in QR Master with the same destination URLs. Download the new QR code images (SVG or PNG).',
                },
                {
                  title: 'Update digital placements first',
                  body: 'Replace the QR code image on your website, email signatures, social media, and digital ads — no reprinting needed.',
                },
                {
                  title: 'Plan your reprint cycle',
                  body: 'For printed materials, schedule replacement into your next natural print run. Keep your old account active while you transition.',
                },
              ].map((step, idx) => (
                <div
                  key={idx}
                  className="flex gap-6 py-7"
                  style={{ borderBottom: idx < 4 ? '1px solid #E4E0D9' : 'none' }}
                >
                  <div
                    className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white mt-0.5"
                    style={{ backgroundColor: '#18181B' }}
                  >
                    {idx + 1}
                  </div>
                  <div>
                    <h3 className="text-base font-bold mb-1" style={{ color: '#18181B' }}>{step.title}</h3>
                    <p className="text-sm leading-relaxed" style={{ color: '#52525B' }}>{step.body}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Who Should Switch */}
        <section className="py-24" style={{ backgroundColor: '#F8F7F4' }}>
          <div className="container mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
            <h2 className="mb-12 text-3xl sm:text-4xl font-bold tracking-tight" style={{ color: '#111110' }}>
              Who should switch, and who shouldn&apos;t
            </h2>
            <div className="grid gap-6 md:grid-cols-2">
              <div
                className="rounded-xl p-8 bg-white"
                style={{ border: '1px solid #BBF7D0', borderTop: '3px solid #16A34A' }}
              >
                <p className="text-xs font-bold uppercase tracking-widest mb-5" style={{ color: '#16A34A' }}>
                  Good fit for QR Master
                </p>
                <ul className="space-y-4">
                  {[
                    'Restaurants and cafés that update menus but don\'t want to reprint table cards every time',
                    'Marketing teams running campaigns on flyers, posters, or inserts who need reliable tracking',
                    'EU businesses that need GDPR-compliant scan analytics without manual setup',
                    'Anyone burned by the bait-and-switch and now looking for predictable pricing',
                    'Teams creating large batches of QR codes for product packaging or events',
                  ].map((item, idx) => (
                    <li key={idx} className="flex items-start gap-3">
                      <span className="mt-0.5 shrink-0 font-bold" style={{ color: '#16A34A' }}>✓</span>
                      <span className="text-sm leading-relaxed" style={{ color: '#27272A' }}>{item}</span>
                    </li>
                  ))}
                </ul>
              </div>

              <div
                className="rounded-xl p-8 bg-white"
                style={{ border: '1px solid #E4E0D9', borderTop: '3px solid #A1A1AA' }}
              >
                <p className="text-xs font-bold uppercase tracking-widest mb-5" style={{ color: '#71717A' }}>
                  When staying might make sense
                </p>
                <ul className="space-y-4">
                  {[
                    'You only need static QR codes — both platforms generate these for free, and static codes never expire',
                    'You need one quick QR code for a presentation or digital-only use where deactivation doesn\'t matter',
                    'You\'re already on an active annual plan and aren\'t printing new materials anytime soon',
                  ].map((item, idx) => (
                    <li key={idx} className="flex items-start gap-3">
                      <span className="mt-0.5 shrink-0 text-base" style={{ color: '#A1A1AA' }}>→</span>
                      <span className="text-sm leading-relaxed" style={{ color: '#52525B' }}>{item}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </section>

        {/* FAQ */}
        <div className="bg-white" style={{ borderTop: '1px solid #E4E0D9' }}>
          <div className="container mx-auto max-w-4xl px-4 py-24 sm:px-6 lg:px-8">
            <FAQSection items={faqItems} title="Common questions about switching" />
          </div>
        </div>

        {/* Growth Links */}
        <div style={{ backgroundColor: '#F8F7F4', borderTop: '1px solid #E4E0D9' }}>
          <GrowthLinksSection
            eyebrow="Related pages"
            title="Explore QR Master features"
            description="See the features that make QR Master a reliable alternative to bait-and-switch tools."
            links={relatedLinks}
            pageType="commercial"
            cluster="competitor"
          />
        </div>

        {/* Final CTA */}
        <section className="py-24" style={{ backgroundColor: '#111110' }}>
          <div className="container mx-auto max-w-4xl px-4 text-center sm:px-6 lg:px-8">
            <p
              className="text-xs font-bold uppercase tracking-widest mb-6"
              style={{ color: '#D97706' }}
            >
              No trial timer. No forced annual contract.
            </p>
            <h2 className="mb-5 text-4xl sm:text-5xl font-extrabold leading-tight tracking-tight text-white">
              Try QR Master free.
              <br />
              <span style={{ color: '#4ADE80' }}>Stay free as long as you want.</span>
            </h2>
            <p className="mx-auto mb-10 max-w-xl text-lg" style={{ color: '#A1A1AA' }}>
              3 dynamic QR codes, unlimited static codes, basic scan tracking. Stays free as long as your account exists.
              No credit card, no 14-day clock.
            </p>
            <div className="flex flex-col justify-center gap-4 sm:flex-row">
              <TrackedCtaLink
                href="/signup"
                ctaLabel="Get Started Free"
                ctaLocation="footer_primary"
                pageType="commercial"
                cluster="competitor"
              >
                <Button
                  size="lg"
                  className="w-full h-13 px-8 text-base sm:w-auto font-semibold"
                  style={{ backgroundColor: '#FFFFFF', color: '#111110' }}
                >
                  Get Started Free
                </Button>
              </TrackedCtaLink>
              <TrackedCtaLink
                href="/pricing"
                ctaLabel="See Pricing"
                ctaLocation="footer_secondary"
                pageType="commercial"
                cluster="competitor"
              >
                <Button
                  size="lg"
                  variant="outline"
                  className="w-full h-13 px-8 text-base sm:w-auto font-medium"
                  style={{ borderColor: '#3F3F46', color: '#D4D4D8' }}
                >
                  See Pricing
                </Button>
              </TrackedCtaLink>
            </div>
          </div>
        </section>
      </div>
    </>
  );
}
