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['bitly'];

export const metadata: Metadata = {
  title: {
    absolute: 'Bitly QR Code Alternative – Purpose-Built for QR Campaigns | QR Master',
  },
  description:
    'Looking for a Bitly alternative for QR codes? Bitly\'s Core plan costs $10/month but only allows 2 QR codes total. QR Master is purpose-built for QR code management — 50 codes at €9/month, bulk creation, GDPR analytics. From €0.',
  keywords:
    'bitly qr code alternative, bitly qr code limit, bitly alternative qr codes, bitly pricing qr codes, bitly 2 qr codes',
  alternates: {
    canonical: 'https://www.qrmaster.net/alternatives/bitly',
  },
  openGraph: {
    title: 'Bitly QR Code Alternative – Purpose-Built for QR Campaigns',
    description:
      'Bitly\'s Core plan costs $10/month but only gives you 2 QR codes. QR Master gives you 50 dynamic QR codes at €9/month — purpose-built for QR workflows, bulk creation, and GDPR analytics.',
    url: 'https://www.qrmaster.net/alternatives/bitly',
    type: 'website',
    images: ['/og-image.png'],
  },
  twitter: {
    title: 'Bitly QR Code Alternative – Purpose-Built for QR Campaigns',
    description:
      'Bitly gives you 2 QR codes for $10/month. QR Master gives you 50 at €9/month — purpose-built for real QR campaigns, not link shortening with QR as an afterthought.',
  },
};

const comparisonRows = competitor.features;

const faqItems = [
  {
    question: 'How many QR codes does Bitly allow per plan?',
    answer:
      'Bitly\'s free plan allows 1 QR code. Their Core plan (~$10/month) markets "unlimited scans" prominently — but the actual limit that matters is the QR code count: 2 total. If you need a third QR code on that plan, you have to upgrade. Higher plans allow more codes, but the pricing jumps quickly relative to what you get. QR Master\'s Pro plan (€9/month) includes 50 dynamic QR codes with full analytics and no scan caps on redirects.',
  },
  {
    question: 'Is Bitly good for QR code management?',
    answer:
      'Bitly works for QR codes in the sense that it can generate them and track clicks. But the product is built around link management and URL shortening — QR codes are a secondary feature. The workflow, the dashboard, and the pricing model are all designed around links, not QR code-specific use cases like restaurant menus, product packaging, event materials, or bulk creation for print campaigns. If QR codes are your primary use case, a purpose-built platform handles the workflow better.',
  },
  {
    question: 'How does Bitly pricing compare to QR Master for QR codes?',
    answer:
      'Bitly\'s free plan allows only 1 QR code. Their Core plan (~$10/month) allows 2 QR codes. Higher plans add more codes but pricing escalates steeply. QR Master\'s free plan includes 3 active dynamic QR codes and unlimited static codes. Pro at €9/month includes 50 dynamic codes with full analytics. Business at €29/month includes 500 codes and bulk creation of up to 1,000 at once. Neither the Pro nor Business plan caps QR code redirects by scan volume.',
  },
  {
    question: 'Does QR Master have link shortening like Bitly?',
    answer:
      'QR Master does not offer a general link shortening service. The platform is focused on QR code creation, dynamic redirect management, and scan analytics. If you need short links for social media or email that are separate from your QR codes, you would still need Bitly or a similar link management tool for that specific use case.',
  },
  {
    question: 'Can I create QR codes in bulk on QR Master in a way Bitly can\'t?',
    answer:
      'Yes. QR Master Business (€29/month) supports CSV and Excel upload for bulk creation of up to 1,000 unique QR codes per batch. Each code in the batch can have a different destination URL, label, campaign name, and UTM parameters. Bitly does not offer bulk QR creation at any plan tier.',
  },
  {
    question: 'Does QR Master comply with GDPR for scan analytics?',
    answer:
      'Yes. QR Master hashes IP addresses server-side before any scan data is stored. No raw IP address is ever written to the database. Analytics capture device type, scan time, country-level location, and UTM parameters — all without storing personally identifiable information. This is built into the infrastructure and applies from the free plan upward. Bitly is a US company with its own analytics approach — EU businesses should review their DPA for GDPR compliance.',
  },
  {
    question: 'What happens to my Bitly QR codes if I cancel?',
    answer:
      'Bitly\'s QR codes use Bitly\'s redirect infrastructure (bit.ly short links). If you cancel your Bitly account, those redirects stop working. Any printed or distributed QR code pointing to a bit.ly URL becomes a dead end. Before canceling, re-create your codes in QR Master and replace all digital placements. Physical printed materials need to be reprinted on the next natural reprint cycle.',
  },
];

const breadcrumbItems: BreadcrumbItem[] = [
  { name: 'Home', url: '/' },
  { name: 'Alternatives', url: '/alternatives' },
  { name: 'Bitly Alternative', url: '/alternatives/bitly' },
];

const faqSchema = {
  '@context': 'https://schema.org',
  '@type': 'FAQPage',
  '@id': 'https://www.qrmaster.net/alternatives/bitly#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 built specifically for print campaigns, menus, packaging, and events — with no scan limits and updateable destinations.',
    ctaLabel: 'Create your first QR code',
  },
  {
    href: '/qr-code-analytics',
    title: 'QR Code Analytics',
    description:
      'See scan counts, device types, locations, and UTM attribution for every QR code — with no caps and no upgrades required to see your own data.',
    ctaLabel: 'Explore analytics',
  },
  {
    href: '/bulk-qr-code-generator',
    title: 'Bulk QR Code Generator',
    description:
      'Create up to 1,000 unique QR codes from a CSV or Excel file. Each with its own URL, label, and tracking parameters. No manual creation one-by-one.',
    ctaLabel: 'Explore bulk QR creation',
  },
  {
    href: '/alternatives/qr-code-generator',
    title: 'QR-Code-Generator.com Alternative',
    description:
      'Another popular tool that deactivates dynamic codes after a trial period. See how QR Master compares.',
    ctaLabel: 'Compare with QR-Code-Generator.com',
  },
];

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

        {/* Hero */}
        <section className="border-b bg-white" style={{ borderColor: '#E4E0D9' }}>
          <div className="container mx-auto max-w-7xl px-4 pb-20 pt-10 sm:px-6 lg:px-8">
            <div className="mb-10">
              <Breadcrumbs items={breadcrumbItems} />
            </div>
            <div className="grid items-start gap-16 lg:grid-cols-2">
              <div className="max-w-xl">
                <div
                  className="mb-6 inline-block rounded px-3 py-1.5 text-xs font-semibold uppercase tracking-widest"
                  style={{ backgroundColor: '#FFEDD5', color: '#C2410C', letterSpacing: '0.12em' }}
                >
                  50 QR codes at €9/month vs. 2 at $10
                </div>
                <div className="mb-8 space-y-5">
                  <h1
                    className="text-4xl font-extrabold leading-[1.08] tracking-tight text-gray-900 sm:text-5xl"
                    style={{ color: '#111110' }}
                  >
                    A Bitly Alternative That Actually Lets You Create QR Codes
                  </h1>
                  <p className="text-lg leading-relaxed" style={{ color: '#52525B' }}>
                    Bitly is a link shortener. QR codes are a secondary feature — and their Core plan charges $10/month
                    for just 2 QR codes total. QR Master is built specifically for QR code management: 50 dynamic codes
                    at €9/month, bulk creation, and GDPR-compliant analytics.
                  </p>
                </div>
                <ul className="mb-10 space-y-3">
                  {[
                    '50 dynamic QR codes at €9/month — not 2 codes for $10',
                    'Free plan: 3 dynamic QR codes + unlimited static codes, €0',
                    'Bulk creation from CSV/Excel up to 1,000 codes (Business plan)',
                    'Built for QR-specific workflows: menus, packaging, events, campaigns',
                    'GDPR-compliant analytics with hashed IPs — no configuration needed',
                  ].map((feature) => (
                    <li key={feature} 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-xs font-bold text-white"
                        style={{ backgroundColor: '#16A34A' }}
                      >
                        ✓
                      </span>
                      <span className="text-base font-medium" style={{ color: '#27272A' }}>{feature}</span>
                    </li>
                  ))}
                </ul>
                <div className="flex flex-col gap-3 sm:flex-row">
                  <TrackedCtaLink
                    href="/signup"
                    ctaLabel="Start Free"
                    ctaLocation="hero_primary"
                    pageType="commercial"
                    cluster="competitor"
                  >
                    <Button size="lg" className="h-13 w-full px-8 text-base sm:w-auto">
                      Start Free
                    </Button>
                  </TrackedCtaLink>
                  <TrackedCtaLink
                    href="/pricing"
                    ctaLabel="See Pricing"
                    ctaLocation="hero_secondary"
                    pageType="commercial"
                    cluster="competitor"
                  >
                    <Button variant="outline" size="lg" className="h-13 w-full px-8 text-base sm:w-auto">
                      See Pricing
                    </Button>
                  </TrackedCtaLink>
                </div>
              </div>

              {/* QR code count comparison visual */}
              <div className="lg:pt-4">
                <div className="rounded-2xl border p-8" style={{ borderColor: '#E4E0D9', backgroundColor: '#FFFFFF' }}>
                  <h3 className="mb-6 text-center text-sm font-semibold uppercase tracking-[0.12em]" style={{ color: '#71717A' }}>What $10/month actually gets you</h3>
                  <div className="space-y-5">
                    <div className="rounded-xl border p-5" style={{ borderColor: '#FECACA', backgroundColor: '#FEF2F2' }}>
                      <div className="mb-3 flex items-center justify-between">
                        <span className="font-semibold text-red-800">Bitly Core — ~$10/month</span>
                        <span className="rounded-full bg-red-100 px-3 py-1 text-sm font-bold text-red-700">2 QR codes</span>
                      </div>
                      <div className="flex gap-3">
                        {[1, 2].map((n) => (
                          <div key={n} className="flex h-12 w-12 items-center justify-center rounded-lg border-2 border-red-300 bg-white text-xs font-bold text-red-400">
                            QR {n}
                          </div>
                        ))}
                        {[3, 4, 5].map((n) => (
                          <div key={n} className="flex h-12 w-12 items-center justify-center rounded-lg border-2 border-dashed border-red-200 bg-red-50 text-xs text-red-300">
                            ✗
                          </div>
                        ))}
                      </div>
                      <p className="mt-3 text-xs text-red-600">Marketed as "unlimited scans" — but you only get 2 codes total. Need a third? Upgrade.</p>
                    </div>
                    <div className="rounded-xl border p-5" style={{ borderColor: '#BBF7D0', backgroundColor: '#F0FDF4' }}>
                      <div className="mb-3 flex items-center justify-between">
                        <span className="font-semibold text-purple-800">QR Master Pro — €9/month</span>
                        <span className="rounded-full bg-purple-100 px-3 py-1 text-sm font-bold text-purple-700">50 QR codes</span>
                      </div>
                      <div className="flex flex-wrap gap-2">
                        {Array.from({ length: 10 }).map((_, i) => (
                          <div key={i} className="flex h-8 w-8 items-center justify-center rounded-md bg-purple-200 text-xs font-bold text-purple-700">
                            ✓
                          </div>
                        ))}
                        <div className="flex h-8 items-center rounded-md bg-purple-100 px-2 text-xs text-purple-500">
                          +40 more
                        </div>
                      </div>
                      <p className="mt-3 text-xs text-purple-600">50 dynamic QR codes. Full analytics. Bulk creation available. GDPR-compliant.</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Why Bitly is the Wrong Tool */}
        <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="mb-4 text-3xl font-bold tracking-tight sm:text-4xl" style={{ color: '#111110' }}>
              Why Bitly is the wrong tool for QR code campaigns
            </h2>
            <p className="mb-12 text-lg" style={{ color: '#71717A' }}>
              Link-shortener pricing breaks down fast once QR codes become a real workflow.
            </p>
            <div className="space-y-6 text-lg leading-relaxed" style={{ color: '#52525B' }}>
              <p>
                Bitly is excellent at what it was designed for: shortening URLs for social media posts, email
                campaigns, and marketing links where you need a clean, short address. That core product is solid and
                widely used. The problem starts when QR codes get added as a secondary feature inside a link
                management tool — the pricing model and workflow both reflect the link-first design.
              </p>
              <p>
                The most glaring issue with Bitly for QR codes is the code count cap. Bitly&apos;s Core plan
                (~$10/month) is marketed around &quot;unlimited clicks and scans&quot; — which sounds generous.
                But that plan allows a total of <strong>2 QR codes</strong>. Two. If you need a third QR code —
                for a second product, a second location, or a second campaign — you have to jump to a more expensive
                plan. For teams running any meaningful QR code operation, the code count wall is the first thing
                you hit, not the scan volume.
              </p>
              <p>
                The free plan allows exactly 1 QR code. For comparison, QR Master&apos;s free tier gives you 3
                active dynamic QR codes with basic analytics — and the Pro plan (€9/month) gives you 50. The
                economics of QR codes on Bitly force rapid upgrades the moment you have a campaign with more than
                a trivial number of placements.
              </p>
              <p>
                Beyond the code count, Bitly&apos;s QR workflow is an afterthought. The interface is built around
                link management — creating a short link is the primary action, and QR codes are generated as a
                secondary output from that. There is no bulk QR creation, no QR-specific analytics beyond click
                counts, and no purpose-built tooling for the workflows that QR codes actually live in: restaurant
                menus, product packaging, event programs, multi-location flyer campaigns.
              </p>
            </div>
            <div
              className="mt-10 rounded-2xl border p-8"
              style={{ backgroundColor: '#FFFFFF', borderColor: '#E4E0D9', borderLeft: '4px solid #EA580C' }}
            >
              <h3 className="mb-2 text-lg font-semibold" style={{ color: '#C2410C' }}>When Bitly is still the right choice</h3>
              <p style={{ color: '#27272A' }}>
                If you already use Bitly heavily for link shortening and genuinely need only 1–2 QR codes with no
                expectation of growth — staying on Bitly is reasonable. Consolidating tools has value. The problem
                starts the moment QR codes become a real part of your workflow, you need more than 2 codes, or you
                need bulk creation. At that point the pricing math stops making sense.
              </p>
            </div>
          </div>
        </section>

        {/* Feature Comparison Table */}
        <section className="border-y bg-white py-24" style={{ borderColor: '#E4E0D9' }}>
          <div className="container mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
            <h2 className="mb-3 text-3xl font-bold tracking-tight sm:text-4xl" style={{ color: '#111110' }}>Bitly vs QR Master: feature comparison</h2>
            <p className="mb-12 text-lg" style={{ color: '#71717A' }}>
              What each platform actually delivers for QR code use cases.
            </p>
            <div className="overflow-hidden rounded-xl border" style={{ borderColor: '#E4E0D9' }}>
              <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="border-l p-5" style={{ borderColor: '#E4E0D9' }}>
                  <p className="mb-1 text-xs font-semibold uppercase tracking-wider" style={{ color: '#C2410C' }}>Competitor</p>
                  <p className="text-sm font-bold" style={{ color: '#27272A' }}>Bitly</p>
                </div>
                <div className="border-l p-5" style={{ borderColor: '#E4E0D9', backgroundColor: '#F0FDF4' }}>
                  <p className="mb-1 text-xs font-semibold uppercase tracking-wider" style={{ color: '#16A34A' }}>Alternative</p>
                  <p className="text-sm font-bold" style={{ color: '#27272A' }}>QR Master</p>
                </div>
              </div>
              {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="flex items-center border-l p-5" style={{ borderColor: '#E4E0D9' }}>
                    {typeof row.competitor === 'boolean' ? (
                      <span className={`text-lg font-semibold ${row.competitor ? 'text-green-600' : 'text-red-500'}`}>
                        {row.competitor ? '✓' : '✗'}
                      </span>
                    ) : (
                      <span className="text-sm" style={{ color: '#52525B' }}>{row.competitor}</span>
                    )}
                  </div>
                  <div className="flex items-center border-l p-5" style={{ borderColor: '#E4E0D9', backgroundColor: 'rgba(240,253,244,0.5)' }}>
                    {typeof row.qrMaster === 'boolean' ? (
                      <span className={`text-lg font-semibold ${row.qrMaster ? 'text-green-600' : 'text-red-500'}`}>
                        {row.qrMaster ? '✓' : '✗'}
                      </span>
                    ) : (
                      <span className="text-sm font-semibold" style={{ color: '#15803D' }}>{row.qrMaster}</span>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Detailed Comparisons */}
        <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="mb-12 text-3xl font-bold tracking-tight sm:text-4xl" style={{ color: '#111110' }}>The differences that matter for QR campaigns</h2>
            <div className="space-y-12">
              <div>
                <h3 className="mb-4 text-xl font-bold" style={{ color: '#18181B' }}>Code count limits and pricing at scale</h3>
                <p className="text-lg leading-relaxed" style={{ color: '#52525B' }}>
                  Bitly&apos;s Core plan (~$10/month) advertises &quot;unlimited scans&quot; — which is technically
                  accurate but misleading. The hard limit on that plan is the number of QR codes: 2 total. The free
                  plan gives you 1. For most marketing use cases, running into the code count wall happens before
                  scan volume ever becomes an issue.
                </p>
                <p className="mt-4 text-lg leading-relaxed" style={{ color: '#52525B' }}>
                  QR Master Pro (€9/month) gives you 50 active dynamic QR codes with no scan limits on redirects.
                  Business (€29/month) gives you 500 codes plus bulk creation of up to 1,000 unique codes from a
                  single CSV upload. The pricing model is built around QR code management, not link click volume —
                  which means costs are predictable and don&apos;t scale with campaign success.
                </p>
              </div>

              <div>
                <h3 className="mb-4 text-xl font-bold" style={{ color: '#18181B' }}>QR-specific workflow support</h3>
                <p className="text-lg leading-relaxed" style={{ color: '#52525B' }}>
                  QR Master is designed around QR code workflows — not link management. This means the platform has
                  purpose-built generators for specific QR code types: WiFi QR codes, vCard QR codes, restaurant menu
                  QR codes, PDF QR codes, and more. Each type has a tailored input form and generates the correct QR
                  format for that use case. Bitly generates a URL-based QR code — that&apos;s the only type available.
                </p>
                <p className="mt-4 text-lg leading-relaxed" style={{ color: '#52525B' }}>
                  Bulk creation is another gap. If you are creating QR codes for a product line, an event with
                  multiple sessions, or a direct mail campaign — creating them one at a time is not viable. QR
                  Master&apos;s Business plan generates up to 1,000 unique codes from a single CSV upload. Bitly has
                  no equivalent.
                </p>
              </div>

              <div>
                <h3 className="mb-4 text-xl font-bold" style={{ color: '#18181B' }}>Analytics depth for QR use cases</h3>
                <p className="text-lg leading-relaxed" style={{ color: '#52525B' }}>
                  Bitly tracks clicks — that is its core analytics model. For QR codes, it reports scan counts in
                  the same way it reports link clicks. There is no device-type breakdown specific to mobile QR
                  scanning, no distinction between campaign placements, and no UTM parameter injection designed
                  for QR workflows.
                </p>
                <p className="mt-4 text-lg leading-relaxed" style={{ color: '#52525B' }}>
                  QR Master analytics are built around the QR scan as the unit of measurement. Each scan records
                  device type, operating system, country-level location, time, and UTM parameters. The dashboard is
                  organized around QR codes — not links — so you can see scan patterns per code, per campaign, and
                  over time in a way that makes sense for print and physical media distribution.
                </p>
              </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 font-bold tracking-tight sm:text-4xl" style={{ color: '#111110' }}>Who should switch, and who shouldn&apos;t</h2>
            <div className="grid gap-6 md:grid-cols-2">
              <Card className="rounded-xl border bg-white p-8 shadow-none" style={{ borderColor: '#BBF7D0', borderTopWidth: '3px', borderTopColor: '#16A34A' }}>
                <div className="mb-4 inline-flex items-center rounded-full px-3 py-1 text-sm font-semibold" style={{ backgroundColor: '#DCFCE7', color: '#166534' }}>
                  Good fit for QR Master
                </div>
                <ul className="mt-4 space-y-3">
                  {[
                    'Anyone who hit Bitly\'s code count cap and had to upgrade just to add a third QR code',
                    'Marketing teams needing more than 2 QR codes for under $50/month',
                    'Teams creating QR codes for product packaging, event programs, or retail displays — use cases Bitly has no specific tooling for',
                    'Anyone needing bulk QR creation from CSV or Excel',
                    'EU businesses that need GDPR-compliant tracking without extra configuration',
                  ].map((item) => (
                    <li key={item} className="flex items-start gap-2 text-gray-700">
                      <span className="mt-1 text-green-500">✓</span>
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>
              </Card>

              <Card className="rounded-xl border bg-white p-8 shadow-none" style={{ borderColor: '#E4E0D9', borderTopWidth: '3px', borderTopColor: '#A1A1AA' }}>
                <div className="mb-4 inline-flex items-center rounded-full px-3 py-1 text-sm font-semibold" style={{ backgroundColor: '#F4F4F5', color: '#52525B' }}>
                  When staying on Bitly makes sense
                </div>
                <ul className="mt-4 space-y-3">
                  {[
                    'You use Bitly primarily for link shortening and genuinely need only 1–2 QR codes — the cost of a separate QR tool doesn\'t justify the switch',
                    'You are already on a Bitly enterprise plan and QR codes are a minor part of a broader link management workflow that uses other Bitly features heavily',
                    'Your QR code count stays within Bitly\'s plan limits and you have no bulk creation needs',
                  ].map((item) => (
                    <li key={item} className="flex items-start gap-2 text-gray-700">
                      <span className="mt-1 text-gray-400">→</span>
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>
              </Card>
            </div>
          </div>
        </section>

        {/* Migration */}
        <section className="border-t bg-white py-24" style={{ borderColor: '#E4E0D9' }}>
          <div className="container mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
            <h2 className="mb-3 text-3xl font-bold tracking-tight sm:text-4xl" style={{ color: '#111110' }}>How to migrate from Bitly</h2>
            <div
              className="mb-8 rounded-2xl border p-6"
              style={{ backgroundColor: '#FFFBEB', borderColor: '#FCD34D', borderLeft: '4px solid #F59E0B' }}
            >
              <p className="font-medium" style={{ color: '#B45309' }}>Important: Do not cancel Bitly until your QR codes are replaced.</p>
              <p className="mt-1 text-sm" style={{ color: '#52525B' }}>
                Bitly QR codes use bit.ly redirect URLs. The moment you close your account, all those redirects
                stop. Printed materials with Bitly QR codes become dead ends instantly. Complete your migration
                and replace all materials before canceling.
              </p>
            </div>
            <div className="space-y-0">
              {[
                {
                  step: '1',
                  title: 'Export your Bitly links and note the QR destinations',
                  body: 'From your Bitly dashboard, export your active links. Identify which ones are used as QR code destinations and record the final destination URLs (not the bit.ly short links).',
                },
                {
                  step: '2',
                  title: 'Create a QR Master account',
                  body: 'Free plan gives you 3 dynamic codes immediately. For larger migrations, Business plan (€29/month) includes bulk upload for creating multiple codes at once from a CSV.',
                },
                {
                  step: '3',
                  title: 'Re-create your codes pointing to the same destinations',
                  body: 'Create new dynamic QR codes in QR Master with the same destination URLs your Bitly codes were pointing to. For bulk migration, upload your destination URLs via the Business plan\'s CSV import.',
                },
                {
                  step: '4',
                  title: 'Replace digital placements',
                  body: 'Update QR code images on your website, email templates, presentations, and digital documents. These can be changed without reprinting.',
                },
                {
                  step: '5',
                  title: 'Plan physical material replacement',
                  body: 'For anything printed — flyers, packaging, business cards, menus — plan replacement into your next print run. Keep your Bitly account active until all physical materials are replaced in circulation.',
                },
              ].map((step) => (
                <div key={step.step} className="flex gap-6 py-7" style={{ borderBottom: step.step !== '5' ? '1px solid #E4E0D9' : 'none' }}>
                  <div className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-sm font-bold text-white" style={{ backgroundColor: '#18181B' }}>
                    {step.step}
                  </div>
                  <div>
                    <h3 className="mb-1 text-base font-bold" style={{ color: '#18181B' }}>{step.title}</h3>
                    <p className="text-sm leading-relaxed" style={{ color: '#52525B' }}>{step.body}</p>
                  </div>
                </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 from Bitly to QR Master" />
          </div>
        </div>

        {/* Growth Links */}
        <div style={{ backgroundColor: '#F8F7F4', borderTop: '1px solid #E4E0D9' }}>
        <GrowthLinksSection
          eyebrow="Related pages"
          title="Explore QR Master"
          description="See the features purpose-built for QR code workflows — not link shortening with QR as a side feature."
          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="mb-6 text-xs font-bold uppercase tracking-widest" style={{ color: '#F59E0B' }}>
              Purpose-built for QR workflows.
            </p>
            <h2 className="mb-4 text-4xl font-bold">50 QR codes at €9. Not 2 codes for $10.</h2>
            <p className="mx-auto mb-10 max-w-2xl text-lg" style={{ color: '#A1A1AA' }}>
              Start free with 3 dynamic QR codes. Pro at €9/month for 50 codes with full analytics.
              Purpose-built for QR code workflows — not link shortening with QR as an afterthought.
            </p>
            <div className="flex flex-col justify-center gap-4 sm:flex-row">
              <TrackedCtaLink
                href="/signup"
                ctaLabel="Start Free"
                ctaLocation="footer_primary"
                pageType="commercial"
                cluster="competitor"
              >
                <Button
                  size="lg"
                  className="h-13 w-full px-8 text-base font-semibold sm:w-auto"
                  style={{ backgroundColor: '#FFFFFF', color: '#111110' }}
                >
                  Start Free
                </Button>
              </TrackedCtaLink>
              <TrackedCtaLink
                href="/pricing"
                ctaLabel="See Pricing"
                ctaLocation="footer_secondary"
                pageType="commercial"
                cluster="competitor"
              >
                <Button
                  size="lg"
                  variant="outline"
                  className="h-13 w-full px-8 text-base font-medium sm:w-auto"
                  style={{ borderColor: '#3F3F46', color: '#D4D4D8' }}
                >
                  See Pricing
                </Button>
              </TrackedCtaLink>
            </div>
          </div>
        </section>
      </div>
    </>
  );
}
