import { GalleryGrid } from "@/components/GalleryGrid";
import { ParallaxHero } from "@/components/ParallaxHero";
import { VerticalCard } from "@/components/VerticalCard";
import { getRelatedVerticals, getVerticalBySlug } from "@/lib/content";
import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";

export function generateStaticParams() {
  return [
    { slug: "honey-bees" },
    { slug: "personal-training" },
    { slug: "sourdough" },
    { slug: "farm-to-table" },
    { slug: "recreation-apps" },
    { slug: "laser-engraving" },
    { slug: "3d-printing" },
  ];
}

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const vertical = getVerticalBySlug(slug);
  if (!vertical)
    return { title: "Not Found", description: "This offering does not exist." };
  return {
    title: `${vertical.title} | Jenado Unlimited`,
    description: vertical.summary,
  };
}

export default async function VerticalPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const vertical = getVerticalBySlug(slug);

  if (!vertical) notFound();

  const related = getRelatedVerticals(slug);

  return (
    <>
      <ParallaxHero
        image={vertical.image}
        alt={vertical.title}
        size="md"
        priority
        align="start"
        overlayClassName="bg-gradient-to-r from-black/80 via-black/55 to-black/25"
        contentClassName="!items-start !text-left"
      >
        <div className="max-w-2xl">
          <div className="mb-4 flex flex-wrap items-center gap-3 text-[11px] font-medium uppercase tracking-[0.25em] text-white/65">
            <span>{vertical.status.replace("-", " ")}</span>
            {vertical.pillars?.length > 0 && (
              <span>· {vertical.pillars.join(" · ")}</span>
            )}
          </div>
          <h1 className="mb-5 text-4xl font-semibold tracking-[-0.03em] text-white md:text-6xl">
            {vertical.title}
          </h1>
          <p className="max-w-xl text-lg leading-relaxed text-white/80 md:text-xl">
            {vertical.summary}
          </p>
        </div>
      </ParallaxHero>

      <section className="py-16 md:py-20">
        <div className="container-xl max-w-4xl">
          <article>
            <div className="prose prose-lg mb-14 max-w-none">
              <p className="text-lg leading-relaxed md:text-xl">
                {vertical.description}
              </p>
            </div>

            {vertical.gallery && vertical.gallery.length > 0 && (
              <div className="mb-14">
                <div className="mb-6 text-sm uppercase tracking-[2px] text-[var(--color-text-muted)]">
                  Gallery
                </div>
                <GalleryGrid images={vertical.gallery} />
              </div>
            )}

            <Link
              href={`/contact?topic=${vertical.slug}`}
              className="btn-primary inline-block"
            >
              Inquire about {vertical.title}
            </Link>
          </article>

          {related.length > 0 && (
            <div className="mt-20 border-t border-[var(--color-border)] pt-12">
              <div className="mb-8 text-sm uppercase tracking-[2px] text-[var(--color-text-muted)]">
                Related Offerings
              </div>
              <div className="grid grid-cols-1 gap-5 md:grid-cols-3">
                {related.map((rv) => (
                  <VerticalCard key={rv.slug} vertical={rv} />
                ))}
              </div>
            </div>
          )}
        </div>
      </section>
    </>
  );
}
