import type { Metadata } from "next";

import Link from "next/link";
import {
  ArrowRight,
  Compass,
  LibraryBig,
  Link2,
  Route,
  Sparkles,
} from "lucide-react";

import Breadcrumbs, { BreadcrumbItem } from "@/components/Breadcrumbs";
import SeoJsonLd from "@/components/SeoJsonLd";
import {
  MarketingPageTracker,
  TrackedCtaLink,
} from "@/components/marketing/MarketingAnalytics";
import { Button } from "@/components/ui/Button";
import { Card } from "@/components/ui/Card";
import {
  commercialPages,
  featuredUseCases,
  supportResources,
  upcomingUseCaseIdeas,
} from "@/lib/growth-pages";
import { breadcrumbSchema } from "@/lib/schema";

export const metadata: Metadata = {
  title: {
    absolute: "QR Code Use Cases for Business | QR Master",
  },
  description:
    "Explore QR code use cases for restaurants, events, business cards, and campaign workflows built around dynamic updates and tracking.",
  alternates: {
    canonical: "https://www.qrmaster.net/use-cases",
    languages: {
      "x-default": "https://www.qrmaster.net/use-cases",
      en: "https://www.qrmaster.net/use-cases",
    },
  },
  openGraph: {
    title: "QR Code Use Cases for Business | QR Master",
    description:
      "Explore QR code use cases for restaurants, events, business cards, and campaign workflows built around dynamic updates and tracking.",
    url: "https://www.qrmaster.net/use-cases",
    type: "website",
    images: ["/og-image.png"],
  },
  twitter: {
    title: "QR Code Use Cases for Business | QR Master",
    description:
      "Explore QR code use cases for restaurants, events, business cards, and campaign workflows built around dynamic updates and tracking.",
  },
};

export default function UseCasesHubPage() {
  const breadcrumbItems: BreadcrumbItem[] = [
    { name: "Home", url: "/" },
    { name: "Use Cases", url: "/use-cases" },
  ];

  return (
    <>
      <SeoJsonLd data={[breadcrumbSchema(breadcrumbItems)]} />
      <MarketingPageTracker pageType="use_case_hub" cluster="all-use-cases" />

      <div className="min-h-screen bg-white">
        <section className="relative overflow-hidden bg-gradient-to-br from-slate-950 via-blue-950 to-cyan-950 text-white">
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(125,211,252,0.18),transparent_34%),radial-gradient(circle_at_right,rgba(255,255,255,0.06),transparent_28%)]" />
          <div className="relative container mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8">
            <Breadcrumbs
              items={breadcrumbItems}
              className="[&_a]:text-blue-100/80 [&_a:hover]:text-white [&_span]:text-blue-100/80 [&_[aria-current=page]]:text-white"
            />

            <div className="grid gap-12 lg:grid-cols-[minmax(0,1.2fr)_minmax(320px,0.8fr)] lg:items-center">
              <div className="space-y-8">
                <div className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/10 px-4 py-2 text-sm font-semibold text-cyan-100 shadow-lg shadow-cyan-950/30 backdrop-blur">
                  <Sparkles className="h-4 w-4" />
                  <span>Commercial use-case hub</span>
                </div>

                <div className="space-y-5">
                  <h1 className="max-w-4xl text-4xl font-bold tracking-tight text-white md:text-5xl lg:text-6xl">
                    QR code use cases that fit real business workflows
                  </h1>
                  <p className="max-w-3xl text-lg leading-8 text-blue-50/88 md:text-xl">
                    This hub focuses on workflows where dynamic updates and
                    measurement matter. It is not a list of random QR ideas. It
                    is the commercial layer between QR Master's product pages,
                    tools, and editorial content.
                  </p>
                </div>

                <div className="grid gap-3 text-sm text-blue-50/80 sm:grid-cols-2">
                  {[
                    "Use-case pages map back to a clear commercial parent.",
                    "Each workflow is written for practical deployment, not filler traffic.",
                    "Support resources reinforce the wedge around dynamic and trackable QR flows.",
                    "The next cluster expansion will build on measurable routing and internal links.",
                  ].map((line) => (
                    <div
                      key={line}
                      className="flex items-start gap-3 rounded-2xl border border-white/10 bg-white/5 px-4 py-3 backdrop-blur-sm"
                    >
                      <Route className="mt-0.5 h-4 w-4 shrink-0 text-cyan-300" />
                      <span>{line}</span>
                    </div>
                  ))}
                </div>

                <div className="flex flex-col gap-4 sm:flex-row">
                  <TrackedCtaLink
                    href={featuredUseCases[0].href}
                    ctaLabel="Explore restaurant menu QR codes"
                    ctaLocation="hero_primary"
                    pageType="use_case_hub"
                    cluster="all-use-cases"
                  >
                    <Button size="lg" className="w-full bg-white px-8 py-4 text-slate-950 hover:bg-slate-100 sm:w-auto">
                      Explore featured workflows
                    </Button>
                  </TrackedCtaLink>

                  <TrackedCtaLink
                    href="/qr-code-for-marketing-campaigns"
                    ctaLabel="View marketing campaign QR page"
                    ctaLocation="hero_secondary"
                    pageType="use_case_hub"
                    cluster="all-use-cases"
                  >
                    <Button
                      variant="outline"
                      size="lg"
                      className="w-full border-white/30 bg-white/5 px-8 py-4 text-white hover:bg-white/10 sm:w-auto"
                    >
                      See campaign workflows
                    </Button>
                  </TrackedCtaLink>
                </div>
              </div>

              <Card className="border-white/10 bg-white/10 p-8 text-white shadow-2xl shadow-slate-950/30 backdrop-blur">
                <div className="space-y-5">
                  <div className="flex items-center gap-3">
                    <Compass className="h-5 w-5 text-cyan-300" />
                    <h2 className="text-2xl font-bold">How to use this hub</h2>
                  </div>
                  <div className="space-y-4 text-sm leading-6 text-blue-50/82">
                    <p>
                      Start with the workflow problem, not the QR format. If the
                      printed code needs to survive destination changes or you
                      need proof of performance, begin with the use case that
                      matches that job.
                    </p>
                    <p>
                      Each page below links back to the best product parent,
                      forward to related workflows, and sideways to educational
                      resources that help you deploy the QR well.
                    </p>
                  </div>
                </div>
              </Card>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div className="mb-10 max-w-3xl">
              <div className="text-sm font-semibold uppercase tracking-[0.22em] text-blue-700">
                Featured use cases
              </div>
              <h2 className="mt-3 text-3xl font-bold text-slate-900">
                First workflows in the growth rollout
              </h2>
              <p className="mt-4 text-lg leading-8 text-slate-600">
                These are the first routes worth surfacing because they connect
                cleanly to QR Master's strongest product angles and existing
                supporting content.
              </p>
            </div>

            <div className="grid gap-6 lg:grid-cols-3">
              {featuredUseCases.map((page) => (
                <Link key={page.slug} href={page.href} className="group block">
                  <Card className="flex h-full flex-col rounded-3xl border-slate-200 bg-white p-7 shadow-sm transition-all hover:-translate-y-1 hover:shadow-lg">
                    <div className="text-sm font-semibold uppercase tracking-[0.18em] text-blue-700">
                      {page.cluster}
                    </div>
                    <h3 className="mt-4 text-2xl font-bold text-slate-900">
                      {page.title}
                    </h3>
                    <p className="mt-4 flex-1 text-base leading-7 text-slate-600">
                      {page.summary}
                    </p>
                    <div className="mt-6 flex items-center justify-between rounded-2xl bg-slate-50 px-4 py-3 text-sm text-slate-600">
                      <span>Primary parent: {page.parentTitle}</span>
                      <ArrowRight className="h-4 w-4 text-blue-700 transition-transform group-hover:translate-x-1" />
                    </div>
                  </Card>
                </Link>
              ))}
            </div>
          </div>
        </section>

        <section className="bg-slate-50 py-16">
          <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(0,0.95fr)]">
              <Card className="rounded-3xl border-slate-200 bg-white p-8 shadow-sm">
                <div className="flex items-center gap-3">
                  <LibraryBig className="h-5 w-5 text-blue-700" />
                  <h2 className="text-2xl font-bold text-slate-900">
                    Commercial pages that anchor the hub
                  </h2>
                </div>
                <div className="mt-6 grid gap-4 md:grid-cols-2">
                  {commercialPages.map((page) => (
                    <Link
                      key={page.href}
                      href={page.href}
                      className="rounded-2xl border border-slate-200 p-4 transition-colors hover:border-blue-200 hover:bg-blue-50/60"
                    >
                      <div className={`h-1.5 rounded-full bg-gradient-to-r ${page.accent}`} />
                      <div className="mt-4 text-lg font-semibold text-slate-900">
                        {page.title}
                      </div>
                      <p className="mt-2 text-sm leading-6 text-slate-600">
                        {page.description}
                      </p>
                    </Link>
                  ))}
                </div>
              </Card>

              <Card className="rounded-3xl border-slate-200 bg-slate-950 p-8 text-white shadow-xl shadow-slate-200">
                <div className="flex items-center gap-3">
                  <Link2 className="h-5 w-5 text-cyan-300" />
                  <h2 className="text-2xl font-bold">Support resources</h2>
                </div>
                <div className="mt-6 space-y-4">
                  {supportResources.map((resource) => (
                    <Link
                      key={resource.href}
                      href={resource.href}
                      className="block rounded-2xl border border-white/10 bg-white/5 p-4 transition-colors hover:bg-white/10"
                    >
                      <div className="text-lg font-semibold text-white">
                        {resource.title}
                      </div>
                      <p className="mt-2 text-sm leading-6 text-blue-50/78">
                        {resource.description}
                      </p>
                    </Link>
                  ))}
                </div>
              </Card>
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div className="mb-10 max-w-3xl">
              <div className="text-sm font-semibold uppercase tracking-[0.22em] text-blue-700">
                Next cluster candidates
              </div>
              <h2 className="mt-3 text-3xl font-bold text-slate-900">
                What follows after the first use-case wave
              </h2>
              <p className="mt-4 text-lg leading-8 text-slate-600">
                These are not published use-case routes yet. They are the next
                practical cluster expansions once the first hub and CTA layer are
                established.
              </p>
            </div>

            <div className="grid gap-6 md:grid-cols-3">
              {upcomingUseCaseIdeas.map((item) => (
                <Card
                  key={item.title}
                  className="rounded-3xl border-dashed border-slate-300 bg-slate-50 p-7"
                >
                  <div className="text-xl font-semibold text-slate-900">
                    {item.title}
                  </div>
                  <p className="mt-3 text-base leading-7 text-slate-600">
                    {item.description}
                  </p>
                  <div className="mt-5 text-sm font-semibold text-blue-700">
                    Anchored by {item.href.replace("/", "")}
                  </div>
                </Card>
              ))}
            </div>
          </div>
        </section>
      </div>
    </>
  );
}