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

export const metadata: Metadata = {
  title: {
    absolute: 'QR Master Alternatives: Compare QR Code Platforms',
  },
  description:
    'Compare QR Master with QR-Code-Generator.com, Flowcode, Beaconstac / Uniqode, and Bitly. Find the right QR alternative for pricing, branding, analytics, and bulk creation.',
  alternates: {
    canonical: 'https://www.qrmaster.net/alternatives',
  },
  openGraph: {
    title: 'QR Master Alternatives: Compare QR Code Platforms',
    description:
      'Clean comparisons for the most common QR code platform alternatives, from pricing traps to branding limits and enterprise overkill.',
    url: 'https://www.qrmaster.net/alternatives',
    type: 'website',
    images: ['/og-image.png'],
  },
  twitter: {
    title: 'QR Master Alternatives: Compare QR Code Platforms',
    description:
      'Compare QR Master with Flowcode, Bitly, Beaconstac / Uniqode, and QR-Code-Generator.com.',
  },
};

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

const pageSchema = {
  '@context': 'https://schema.org',
  '@type': 'CollectionPage',
  name: 'QR Code Platform Alternatives',
  url: 'https://www.qrmaster.net/alternatives',
  description:
    'Comparison pages for QR Master versus major QR code and adjacent link-management platforms.',
};

const faqItems = [
  {
    question: 'What is the best QR code platform alternative?',
    answer:
      'The best alternative depends on the workflow. QR Master is strongest when you need dynamic QR codes, clean branding, bulk creation, and privacy-friendly analytics without enterprise pricing.',
  },
  {
    question: 'When should I choose QR Master over Bitly?',
    answer:
      'Choose QR Master when QR codes are the primary workflow. Bitly is useful for short links, but its QR code limits and link-first dashboard become restrictive for campaigns with many QR codes.',
  },
  {
    question: 'When should I choose QR Master over Flowcode?',
    answer:
      'Choose QR Master when you want a direct scan experience without third-party branding or branded interstitial pages. QR Master keeps the scan flow focused on your destination.',
  },
  {
    question: 'Is Beaconstac / Uniqode better than QR Master?',
    answer:
      'Beaconstac / Uniqode can make sense for enterprise teams that need a broad QR platform. QR Master is usually a better fit for smaller teams that want dynamic QR codes, analytics, and bulk creation at a simpler price point.',
  },
];

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

const alternativePages = [
  {
    href: '/alternatives/qr-code-generator',
    eyebrow: 'Trial trap',
    title: 'QR-Code-Generator.com Alternative',
    description:
      'For teams burned by 14-day dynamic QR trials and forced annual upgrades after print is already live.',
  },
  {
    href: '/alternatives/flowcode',
    eyebrow: 'Brand control',
    title: 'Flowcode Alternative',
    description:
      'For brands and agencies that need clean QR codes without third-party logos or branded scan interstitials.',
  },
  {
    href: '/alternatives/beaconstac',
    eyebrow: 'SMB fit',
    title: 'Beaconstac / Uniqode Alternative',
    description:
      'For smaller teams that want reliable analytics and bulk QR creation without paying enterprise-platform pricing.',
  },
  {
    href: '/alternatives/bitly',
    eyebrow: 'QR-first workflow',
    title: 'Bitly Alternative',
    description:
      'For campaigns where QR codes are the main workflow, not a side feature hidden inside a link shortener.',
  },
];

const comparisonRows = [
  {
    platform: 'Bitly',
    href: '/alternatives/bitly',
    price: 'Link-first paid plans',
    freePlan: 'Limited QR use',
    dynamicCodes: 'QR feature inside link management',
    analytics: 'Link analytics first',
    gdpr: 'Review DPA for EU use',
    bulk: 'No QR-first bulk workflow',
    branding: 'Bitly-branded link context',
    qrMasterAngle: 'QR-first workflow with 50 dynamic codes on Pro',
  },
  {
    platform: 'Flowcode',
    href: '/alternatives/flowcode',
    price: 'Brand and team tiers',
    freePlan: 'Limited free path',
    dynamicCodes: 'Strong QR design workflow',
    analytics: 'Paid campaign analytics',
    gdpr: 'US vendor; review data terms',
    bulk: 'Best for larger plans',
    branding: 'Design-forward, possible platform branding',
    qrMasterAngle: 'Clean redirects and brand control without a branded scan page',
  },
  {
    platform: 'Beaconstac / Uniqode',
    href: '/alternatives/beaconstac',
    price: 'Enterprise-oriented tiers',
    freePlan: 'Trial or limited evaluation',
    dynamicCodes: 'Advanced enterprise QR platform',
    analytics: 'Advanced paid analytics',
    gdpr: 'DPA and configuration review needed',
    bulk: 'Strong, often enterprise-oriented',
    branding: 'Enterprise controls',
    qrMasterAngle: 'Simpler dynamic QR, analytics, and bulk creation for SMB teams',
  },
  {
    platform: 'QR-Code-Generator.com',
    href: '/alternatives/qr-code-generator',
    price: 'Paid dynamic QR after trial',
    freePlan: 'Static QR path',
    dynamicCodes: 'Dynamic QR behind paid upgrade',
    analytics: 'Paid analytics',
    gdpr: 'Review vendor terms',
    bulk: 'Paid workflow',
    branding: 'Template-driven branding',
    qrMasterAngle: 'Free dynamic codes and transparent paid tiers',
  },
];

export default function AlternativesHubPage() {
  return (
    <>
      <SeoJsonLd data={[pageSchema, faqSchema, breadcrumbSchema(breadcrumbItems)]} />
      <MarketingPageTracker pageType="commercial" cluster="competitor" />
      <div className="min-h-screen" style={{ backgroundColor: '#F8F7F4', color: '#18181B' }}>
        <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="max-w-3xl">
              <div
                className="mb-6 inline-block rounded px-3 py-1.5 text-xs font-semibold uppercase tracking-widest"
                style={{ backgroundColor: '#DCFCE7', color: '#166534', letterSpacing: '0.12em' }}
              >
                QR Master alternatives
              </div>
              <h1
                className="mb-6 text-4xl font-extrabold leading-[1.08] tracking-tight sm:text-5xl"
                style={{ color: '#111110' }}
              >
                Clean comparisons for the QR platforms people actually switch from.
              </h1>
              <p className="mb-8 text-lg leading-relaxed" style={{ color: '#52525B' }}>
                Some tools hide trial limits. Some force their brand into your scan flow. Some are simply priced for
                enterprise teams. These pages break down where each platform fits, where it does not, and when QR
                Master is the better tradeoff.
              </p>

              <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>
          </div>
        </section>

        <section className="py-24" style={{ backgroundColor: '#F8F7F4' }}>
          <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div className="mb-12 max-w-3xl">
              <h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl" style={{ color: '#111110' }}>
                Explore Alternatives
              </h2>
              <p className="text-lg" style={{ color: '#71717A' }}>
                Pick the comparison that matches the problem you are trying to solve.
              </p>
            </div>

            <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-4">
              {alternativePages.map((item) => (
                <Link key={item.href} href={item.href} className="group block">
                  <Card
                    className="h-full rounded-xl border bg-white p-7 shadow-none transition-transform duration-150 group-hover:-translate-y-1"
                    style={{ borderColor: '#E4E0D9' }}
                  >
                    <p
                      className="mb-4 text-xs font-semibold uppercase tracking-widest"
                      style={{ color: '#71717A', letterSpacing: '0.12em' }}
                    >
                      {item.eyebrow}
                    </p>
                    <h3 className="mb-3 text-xl font-bold" style={{ color: '#18181B' }}>
                      {item.title}
                    </h3>
                    <p className="text-sm leading-relaxed" style={{ color: '#52525B' }}>
                      {item.description}
                    </p>
                    <p className="mt-6 text-sm font-semibold" style={{ color: '#166534' }}>
                      Open comparison
                    </p>
                  </Card>
                </Link>
              ))}
            </div>
          </div>
        </section>

        <section className="border-y bg-white py-24" style={{ borderColor: '#E4E0D9' }}>
          <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div className="mb-12 max-w-3xl">
              <h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl" style={{ color: '#111110' }}>
                QR Master vs Bitly, Flowcode, Beaconstac and other QR platforms
              </h2>
              <p className="text-lg" style={{ color: '#71717A' }}>
                Use this table to pick the comparison page that matches your search intent: pricing, branding, bulk
                creation, analytics, or migration risk.
              </p>
            </div>

            <div className="overflow-x-auto rounded-xl border" style={{ borderColor: '#E4E0D9' }}>
              <table className="w-full min-w-[980px] text-sm">
                <thead style={{ backgroundColor: '#F8F7F4' }}>
                  <tr>
                    {[
                      'Platform',
                      'Price',
                      'Free plan',
                      'Dynamic codes',
                      'Analytics',
                      'GDPR / EU fit',
                      'Bulk',
                      'Branding',
                      'Compare',
                    ].map((heading) => (
                      <th
                        key={heading}
                        className="p-4 text-left text-xs font-semibold uppercase tracking-wider"
                        style={{ color: '#71717A' }}
                      >
                        {heading}
                      </th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {comparisonRows.map((row, index) => (
                    <tr
                      key={row.platform}
                      style={{
                        borderTop: '1px solid #E4E0D9',
                        backgroundColor: index % 2 === 0 ? '#FFFFFF' : '#FAFAF8',
                      }}
                    >
                      <td className="p-4 font-semibold" style={{ color: '#18181B' }}>{row.platform}</td>
                      <td className="p-4" style={{ color: '#52525B' }}>{row.price}</td>
                      <td className="p-4" style={{ color: '#52525B' }}>{row.freePlan}</td>
                      <td className="p-4" style={{ color: '#52525B' }}>{row.dynamicCodes}</td>
                      <td className="p-4" style={{ color: '#52525B' }}>{row.analytics}</td>
                      <td className="p-4" style={{ color: '#52525B' }}>{row.gdpr}</td>
                      <td className="p-4" style={{ color: '#52525B' }}>{row.bulk}</td>
                      <td className="p-4" style={{ color: '#52525B' }}>{row.branding}</td>
                      <td className="p-4">
                        <Link href={row.href} className="font-semibold" style={{ color: '#166534' }}>
                          QR Master vs {row.platform}
                        </Link>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </section>

        <section className="py-24" style={{ backgroundColor: '#F8F7F4' }}>
          <div className="container mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
            <FAQSection items={faqItems} title="Common questions about QR platform alternatives" />
          </div>
        </section>
      </div>
    </>
  );
}