import type { Metadata } from "next";
import Link from "next/link";
import { ArrowRight, Building2, CheckCircle2 } from "lucide-react";

import { FAQSection } from "@/components/aeo/FAQSection";
import SeoJsonLd from "@/components/SeoJsonLd";
import { Button } from "@/components/ui/Button";
import { industryPages } from "@/lib/industry-pages";
import { breadcrumbSchema, faqPageSchema } from "@/lib/schema";

type IndustryCategory = {
  id: string;
  title: string;
  description: string;
  slugs: string[];
};

const categories: IndustryCategory[] = [
  {
    id: "food-hospitality",
    title: "Food, Hospitality, and Guest Experience",
    description: "Use QR codes to replace printed menus, simplify guest WiFi, speed up bookings, and keep in-venue information current without reprinting.",
    slugs: [
      "restaurants",
      "cafes",
      "hotels",
      "bars",
      "food-trucks",
      "bakeries",
      "breweries",
      "nightclubs",
      "catering",
      "wineries",
    ],
  },
  {
    id: "health-lifestyle",
    title: "Health, Wellness, and Personal Services",
    description: "Support appointment booking, aftercare, digital treatment menus, and high-intent follow-up flows across health and lifestyle businesses.",
    slugs: [
      "gyms",
      "doctors-dentists",
      "dentists",
      "yoga-studios",
      "spas",
      "beauty-salons",
      "barbershops",
      "nail-salons",
      "tattoo-studios",
      "pharmacies",
      "pet-grooming",
      "veterinarians",
    ],
  },
  {
    id: "retail-commerce",
    title: "Retail, Packaging, and Product Discovery",
    description: "Bridge shelf, packaging, and in-store discovery with QR codes for demos, manuals, size guides, reviews, and product detail pages.",
    slugs: [
      "retail",
      "clothing-stores",
      "car-dealerships",
      "florists",
      "pet-stores",
      "electronics-stores",
      "jewelry-stores",
      "hardware-stores",
      "bookstores",
    ],
  },
  {
    id: "education-culture-public",
    title: "Education, Culture, and Public Spaces",
    description: "Improve access to maps, resources, ticketing, audio guides, and visitor information across campuses, venues, and cultural institutions.",
    slugs: [
      "universities",
      "schools",
      "museums",
      "libraries",
      "theaters",
      "cinemas",
      "churches",
      "art-galleries",
      "stadiums",
      "airports",
    ],
  },
  {
    id: "services-b2b-events",
    title: "Services, Real Estate, and Lead Capture",
    description: "Turn printed materials into measurable lead-gen assets for agencies, property businesses, events, and professional service firms.",
    slugs: [
      "real-estate",
      "events",
      "wedding-planners",
      "photographers",
      "trade-shows",
      "law-firms",
      "accountants",
      "insurance-agencies",
      "travel-agencies",
      "coworking-spaces",
      "property-management",
    ],
  },
];

const hubFaq = [
  {
    question: "Which industries get the most value from dynamic QR codes?",
    answer:
      "Industries that print menus, flyers, labels, in-store signage, or operational materials usually benefit most because they can update destinations without reprinting every asset.",
  },
  {
    question: "Should industry QR code pages focus on tools or workflows?",
    answer:
      "Both matter, but workflow intent usually ranks better. Searchers often want a job-to-be-done answer first, then the right QR code tool to implement it.",
  },
  {
    question: "Are industry-specific QR code pages good for SEO?",
    answer:
      "Yes, when each page targets a real search intent, has unique examples, and connects to a relevant next step such as tracking, dynamic QR management, or the matching QR tool.",
  },
  {
    question: "What makes a QR code industry page convert well?",
    answer:
      "Clear use cases, realistic placement advice, trust-building FAQs, and a CTA that matches the industry workflow outperform generic sign-up prompts.",
  },
];

const highlightedLinks = [
  { href: "/dynamic-qr-code-generator", title: "Dynamic QR Code Generator", description: "Best next step for menus, signage, packaging, and any printed asset that may change later." },
  { href: "/qr-code-tracking", title: "QR Code Tracking", description: "Measure scans from flyers, property signage, retail displays, trade shows, and offline campaigns." },
  { href: "/bulk-qr-code-generator", title: "Bulk QR Code Generator", description: "Best fit for packaging, product lines, multi-location rollouts, and large campaigns." },
  { href: "/tools/wifi-qr-code", title: "WiFi QR Code Tool", description: "Popular for hotels, cafes, coworking spaces, clinics, and guest-facing venues." },
];

export const metadata: Metadata = {
  title: "QR Codes by Industry: Use Cases and Examples",
  description:
    "Explore QR code ideas by industry, including restaurants, hotels, retail, healthcare, events, education, and professional services. Find use cases, examples, and the best QR workflow for your business.",
  alternates: {
    canonical: "https://www.qrmaster.net/qr-code-for",
  },
  openGraph: {
    title: "QR Codes by Industry | QR Master",
    description:
      "Find industry-specific QR code use cases, workflows, and examples for hospitality, retail, healthcare, events, education, and more.",
    url: "https://www.qrmaster.net/qr-code-for",
    type: "website",
    images: ["/og-image.png"],
  },
  twitter: {
    title: "QR Codes by Industry | QR Master",
    description:
      "Industry-specific QR code ideas and workflows for restaurants, hotels, retail, events, healthcare, and more.",
  },
};

function getIndustryBySlug(slug: string) {
  return industryPages.find((industry) => industry.slug === slug);
}

export default function IndustryOverviewPage() {
  const itemListSchema = {
    "@context": "https://schema.org",
    "@type": "CollectionPage",
    name: "QR Codes by Industry",
    url: "https://www.qrmaster.net/qr-code-for",
    mainEntity: {
      "@type": "ItemList",
      itemListElement: industryPages.map((industry, index) => ({
        "@type": "ListItem",
        position: index + 1,
        url: `https://www.qrmaster.net/qr-code-for/${industry.slug}`,
        name: industry.title,
      })),
    },
  };

  return (
    <>
      <SeoJsonLd
        data={[
          itemListSchema,
          breadcrumbSchema([
            { name: "Home", url: "/" },
            { name: "QR Codes by Industry", url: "/qr-code-for" },
          ]),
          faqPageSchema(hubFaq),
        ]}
      />

      <div className="min-h-screen bg-white text-slate-900 font-sans">
        <section className="relative overflow-hidden border-b border-slate-100 bg-slate-50/70 pt-24 pb-20 lg:pt-32 lg:pb-24">
          <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(to_right,#cbd5e1_1px,transparent_1px),linear-gradient(to_bottom,#cbd5e1_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_85%_75%_at_50%_0%,#000_70%,transparent_110%)] opacity-25" />
          <div className="pointer-events-none absolute top-0 right-0 h-[28rem] w-[28rem] rounded-full bg-blue-200/40 blur-[110px]" />

          <div className="relative z-10 container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div className="mx-auto max-w-4xl text-center">
              <div className="mb-6 inline-flex items-center gap-2 rounded-full bg-blue-100 px-3 py-1.5 text-sm font-semibold text-blue-700">
                <Building2 className="h-4 w-4" />
                Industry Solutions
              </div>
              <h1 className="text-4xl font-extrabold tracking-tight text-slate-900 md:text-6xl">
                QR Codes by Industry
              </h1>
              <p className="mx-auto mt-6 max-w-3xl text-lg leading-relaxed text-slate-600 md:text-xl">
                Explore industry-specific QR code strategies for hospitality, retail, healthcare, events, education, and professional services. Each page is built around real workflows like menu updates, review collection, guest WiFi, bookings, packaging, and offline campaign tracking.
              </p>

              <div className="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
                <Link href="/dynamic-qr-code-generator">
                  <Button size="lg" className="rounded-full bg-blue-600 px-8 py-6 text-base font-bold text-white hover:bg-blue-700">
                    Create a Dynamic QR Code
                  </Button>
                </Link>
                <Link href="/qr-code-tracking">
                  <Button variant="outline" size="lg" className="rounded-full px-8 py-6 text-base font-bold">
                    See QR Tracking Features
                  </Button>
                </Link>
              </div>
            </div>

          </div>
        </section>

        <section className="border-b border-slate-100 bg-white py-8">
          <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div className="flex flex-wrap gap-3">
              {categories.map((category) => (
                <a
                  key={category.id}
                  href={`#${category.id}`}
                  className="rounded-full border border-slate-200 bg-slate-50 px-4 py-2 text-sm font-semibold text-slate-700 transition-colors hover:border-blue-200 hover:bg-blue-50 hover:text-blue-700"
                >
                  {category.title}
                </a>
              ))}
            </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="grid gap-6 lg:grid-cols-4">
              {highlightedLinks.map((item) => (
                <Link
                  key={item.href}
                  href={item.href}
                  className="group rounded-3xl border border-slate-200 bg-white p-6 shadow-sm transition-all hover:-translate-y-1 hover:border-blue-200 hover:shadow-lg"
                >
                  <h2 className="text-lg font-bold text-slate-900 group-hover:text-blue-600">{item.title}</h2>
                  <p className="mt-3 text-sm leading-relaxed text-slate-600">{item.description}</p>
                  <div className="mt-4 inline-flex items-center text-sm font-semibold text-blue-600">
                    Explore <ArrowRight className="ml-2 h-4 w-4" />
                  </div>
                </Link>
              ))}
            </div>
          </div>
        </section>

        {categories.map((category) => {
          const entries = category.slugs
            .map(getIndustryBySlug)
            .filter((industry): industry is NonNullable<typeof industry> => Boolean(industry));

          return (
            <section
              key={category.id}
              id={category.id}
              className="border-t border-slate-100 py-20 scroll-mt-28"
            >
              <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="text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl">
                    {category.title}
                  </h2>
                  <p className="mt-4 text-lg leading-relaxed text-slate-600">
                    {category.description}
                  </p>
                </div>

                <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
                  {entries.map((industry) => (
                    <Link
                      key={industry.slug}
                      href={`/qr-code-for/${industry.slug}`}
                      className="group flex flex-col rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-blue-200 hover:shadow-xl"
                    >
                      <h3 className="text-2xl font-bold text-slate-900 transition-colors group-hover:text-blue-600">
                        {industry.name}
                      </h3>
                      <p className="mt-3 flex-grow text-slate-600">
                        {industry.metaDescription}
                      </p>
                      <ul className="mt-6 space-y-2">
                        {industry.useCases.slice(0, 2).map((useCase) => (
                          <li key={useCase} className="flex items-start gap-2 text-sm text-slate-500">
                            <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-blue-600" />
                            <span>{useCase}</span>
                          </li>
                        ))}
                      </ul>
                      <div className="mt-8 flex items-center text-blue-600 font-semibold transition-transform group-hover:translate-x-1">
                        Explore Solutions <ArrowRight className="ml-2 h-5 w-5" />
                      </div>
                    </Link>
                  ))}
                </div>
              </div>
            </section>
          );
        })}

        <section className="border-t border-slate-100 bg-slate-50 py-20">
          <div className="container mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
            <div className="mb-10 text-center">
              <h2 className="text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl">
                Frequently Asked Questions
              </h2>
            </div>
            <div className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm sm:p-10">
              <FAQSection items={hubFaq} title="" />
            </div>
          </div>
        </section>
      </div>
    </>
  );
}