import type { Metadata } from "next";
import Link from "next/link";
import Image from "next/image";
import { ArrowRight } from "lucide-react";
import { Container } from "@/components/container";
import { Breadcrumbs } from "@/components/breadcrumbs";
import { CTASection } from "@/components/cta-section";
import { JsonLd } from "@/components/json-ld";
import { industries } from "@/content/industries";
import { site, ogBase, twitterBase } from "@/content/site";

export const metadata: Metadata = {
  title: "AI Agents by Industry — Vertical Solutions",
  description:
    "Deploy industry-specialised voice and WhatsApp AI agents for healthcare, automobile, and real estate. Automate patient booking, service bay calls, and leads.",
  keywords: [
    "ai agents by industry",
    "healthcare voice ai",
    "automotive voice ai",
    "real estate ai caller",
    "vertical ai agents",
    "conversational ai solutions",
  ],
  alternates: { canonical: "/industries" },
  openGraph: {
    ...ogBase,
    title: "AI Agents by Industry — Vertical Solutions",
    description:
      "Deploy industry-specialised voice and WhatsApp AI agents for healthcare, automobile, and real estate.",
    url: "/industries",
  },
  twitter: {
    ...twitterBase,
    title: "AI Agents by Industry — Vertical Solutions",
    description:
      "Deploy industry-specialised voice and WhatsApp AI agents for healthcare, automobile, and real estate.",
  },
};

export default function IndustriesIndexPage() {
  const schema = {
    "@context": "https://schema.org",
    "@type": "CollectionPage",
    name: "AI Agents by Industry",
    url: `${site.url}/industries`,
    description:
      "Explore Quto AI conversational voice and WhatsApp agents tailored for enterprise verticals.",
  };

  const breadcrumbsSchema = {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    itemListElement: [
      { "@type": "ListItem", position: 1, name: "Home", item: site.url },
      { "@type": "ListItem", position: 2, name: "Industries", item: `${site.url}/industries` },
    ],
  };

  return (
    <>
      <JsonLd data={[schema, breadcrumbsSchema]} />

      <div className="relative overflow-hidden page-top-space pb-16 md:pb-20">
        {/* Ambient background glow for hero — starts at top: 0 behind fixed header */}
        <div
          aria-hidden="true"
          className="pointer-events-none absolute inset-x-0 top-0 -z-10 mx-auto h-96 w-full max-w-6xl bg-gradient-to-r from-[#4FDAF1]/20 via-[#F79C09]/15 to-[#E26B0B]/20 blur-3xl"
        />

        <Container className="max-w-6xl">
          {/* Breadcrumbs */}
          <Breadcrumbs items={[{ label: "Industries" }]} className="mb-6" />

          {/* Heading */}
          <div className="max-w-3xl">
            <div className="mb-3 inline-flex items-center gap-2 rounded-full border border-[var(--accent-cyan-text)]/30 bg-[var(--accent-cyan-text)]/10 px-3 py-1 text-xs font-semibold text-[var(--accent-cyan-text)]">
              <span className="size-1.5 rounded-full bg-[var(--accent-cyan-text)] shadow-[0_0_6px_rgba(8,145,178,0.8)]" />
              Vertical AI Solutions
            </div>
            <h1 className="font-display text-4xl font-medium tracking-tight text-foreground sm:text-5xl md:text-6xl">
              <span className="font-extrabold text-gradient-brand">AI Agents</span> by Industry
            </h1>
            <p className="mt-4 text-base text-muted-foreground sm:text-lg leading-relaxed">
              Every vertical speaks a different dialect. Our voice and WhatsApp AI agents are fine-tuned on your domain terminology, your EHR, DMS and CRM APIs, and the compliance standards that matter — so agents perform like seasoned specialists from day one.
            </p>
          </div>

          {/* Industries Grid (§32-38) */}
          <div className="mt-12 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {industries.map((ind) => (
              <Link
                key={ind.slug}
                href={`/industries/${ind.slug}`}
                className="group flex flex-col justify-between rounded-3xl border border-border/80 bg-card p-6 sm:p-7 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-[#4FDAF1]/50 hover:shadow-xl"
              >
                {/* Industry Image sitting directly on clean whitespace */}
                <div className="flex w-full items-center justify-center pt-2 pb-5">
                  <Image
                    src={ind.image}
                    alt={ind.imageAlt}
                    width={486}
                    height={438}
                    loading="lazy"
                    sizes="(max-width: 640px) 90vw, (max-width: 1024px) 45vw, 360px"
                    className="h-auto w-full max-h-[220px] sm:max-h-[240px] object-contain transition-transform duration-300 group-hover:scale-[1.03]"
                  />
                </div>

                {/* Card Content: Title -> Description -> Link */}
                <div className="flex flex-1 flex-col justify-between">
                  <div>
                    <h2 className="font-display text-2xl font-bold tracking-tight text-foreground group-hover:text-[var(--accent-cyan-text)] transition-colors">
                      {ind.name}
                    </h2>
                    <p className="mt-2 text-sm text-muted-foreground leading-relaxed">
                      {ind.tagline}
                    </p>
                  </div>

                  {/* Footer Link */}
                  <div className="mt-6 flex items-center justify-between border-t border-border/50 pt-4 text-xs font-semibold text-foreground group-hover:text-[var(--accent-cyan-text)] transition-colors">
                    <span>Explore {ind.name} agents</span>
                    <ArrowRight className="size-4 text-[var(--accent-cyan-text)] transition-transform group-hover:translate-x-1" />
                  </div>
                </div>
              </Link>
            ))}
          </div>

        </Container>
      </div>

      <CTASection />
    </>
  );
}