import { GalleryGrid } from "@/components/GalleryGrid";
import { ParallaxHero } from "@/components/ParallaxHero";
import { getPageContent } from "@/content/pages";
import { galleryItems } from "@/lib/gallery";
import type { Metadata } from "next";
import Link from "next/link";

const page = getPageContent("gallery");
const themes = page?.sections?.find((s) => s.title === "Themes")?.items || [];

export default function GalleryPage() {
  return (
    <>
      <ParallaxHero
        image={page?.heroImage || "/images/hero-gallery.jpg"}
        alt={
          page?.heroAlt ||
          "Abstract textures of honey, wood grain, engraved metal, and fabric"
        }
        size={page?.heroSize || "md"}
        priority={page?.heroPriority}
        align={page?.heroAlign}
        overlayClassName={
          page?.heroOverlay ||
          "bg-gradient-to-r from-black/75 via-black/50 to-black/30"
        }
        contentClassName={page?.heroContentClass}
      >
        <div className="max-w-2xl">
          <p className="mb-4 text-[11px] font-medium uppercase tracking-[0.3em] text-white/65">
            {page?.heroLabel}
          </p>
          <h1 className="mb-5 text-4xl font-semibold tracking-[-0.03em] text-white md:text-6xl">
            {page?.title}
          </h1>
          <p className="max-w-xl text-lg leading-relaxed text-white/80 md:text-xl">
            {page?.heroDescription}
          </p>
        </div>
      </ParallaxHero>

      <section className="border-b border-[var(--color-border)] py-14 md:py-16">
        <div className="container-xl">
          <div className="mx-auto max-w-3xl">
            <p className="mb-6 text-lg leading-relaxed text-[var(--color-text)]">
              We believe craft is easier to trust when you can see it. This
              gallery gathers frames from across our verticals — not a catalog
              of every SKU, but a sense of the rooms we work in, the textures we
              handle, and the standards we hold.
            </p>
            <p className="text-[var(--color-text-muted)] leading-relaxed">
              Some images are product-forward. Others are atmosphere: light on
              wood, a loaf torn open, metal after the laser cools. Click a frame
              labeled with an offering to jump into that vertical and learn more
              — or simply scroll and take it in.
            </p>
          </div>

          <div className="mt-12 grid grid-cols-1 gap-6 md:grid-cols-3">
            {themes.map((theme) => (
              <div
                key={theme.title}
                className="border border-[var(--color-border)] bg-[var(--color-surface)] p-6"
              >
                <h2 className="mb-2 text-base font-medium tracking-[-0.01em] text-[var(--color-heading)]">
                  {theme.title}
                </h2>
                <p className="text-[14px] leading-relaxed text-[var(--color-text-muted)]">
                  {theme.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="py-16 md:py-24">
        <div className="container-xl">
          <div className="mb-12 flex flex-col gap-4 md:mb-16 md:flex-row md:items-end md:justify-between">
            <div className="max-w-xl">
              <h2 className="mb-2 text-2xl font-semibold tracking-[-0.02em]">
                Selected frames
              </h2>
              <p className="leading-relaxed text-[var(--color-text-muted)]">
                A rotating selection from our work and process. Labels point to
                related offerings when there is a clear path to explore.
              </p>
            </div>
            <p className="text-sm tabular-nums text-[var(--color-text-muted)]">
              {galleryItems.length} images
            </p>
          </div>

          <GalleryGrid images={galleryItems} />

          <div className="mt-16 grid gap-8 border-t border-[var(--color-border)] pt-12 md:grid-cols-2 md:gap-12">
            <div>
              <h2 className="mb-3 text-xl font-semibold tracking-[-0.02em]">
                Want the real thing?
              </h2>
              <p className="mb-6 leading-relaxed text-[var(--color-text-muted)]">
                Images are a starting point. If something here sparks a gift
                idea, a custom engraving, a training conversation, or a simple
                “do you still have honey this week?” — we are easy to reach.
              </p>
              <Link href="/contact" className="btn-primary inline-block">
                Start a conversation
              </Link>
            </div>
            <div>
              <h2 className="mb-3 text-xl font-semibold tracking-[-0.02em]">
                Explore by offering
              </h2>
              <p className="mb-6 leading-relaxed text-[var(--color-text-muted)]">
                Prefer words over pictures first? Our offerings page walks
                through each vertical — status, summary, and a path to inquire.
              </p>
              <Link
                href="/offerings"
                className="text-sm font-medium tracking-wide text-[var(--color-heading)] transition-opacity hover:opacity-70"
              >
                View all offerings →
              </Link>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

export const metadata: Metadata = {
  title: "Gallery | Jenado Unlimited",
  description:
    "A visual gallery of Jenado Unlimited — honey, bread, training, craft, and the textures behind our work.",
};
