import { ParallaxHero } from "@/components/ParallaxHero";
import { VerticalCard } from "@/components/VerticalCard";
import { getPageContent } from "@/content/pages";
import { getAllVerticals } from "@/lib/content";
import type { Metadata } from "next";
import Link from "next/link";

const page = getPageContent("offerings");
const pillars =
  page?.sections?.find((s) => s.title === "How we organize our work")?.items ||
  [];

export default function OfferingsPage() {
  const verticals = getAllVerticals();

  return (
    <>
      <ParallaxHero
        image={page?.heroImage || "/images/hero-offerings.jpg"}
        alt={
          page?.heroAlt ||
          "Artisan flatlay of honeycomb, dumbbell, sourdough, produce, laser-cut wood, and 3D printed object"
        }
        size={page?.heroSize || "md"}
        priority={page?.heroPriority}
        align={page?.heroAlign}
        overlayClassName={
          page?.heroOverlay ||
          "bg-gradient-to-r from-black/75 via-black/55 to-black/35"
        }
        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-16 md:py-20">
        <div className="container-xl">
          <div className="mx-auto max-w-3xl text-center">
            <p className="mb-4 text-[11px] font-medium uppercase tracking-[0.3em] text-[var(--color-text-muted)]">
              How we organize our work
            </p>
            <h2 className="mb-5 text-2xl font-semibold tracking-[-0.02em] md:text-3xl">
              Built around how people actually live
            </h2>
            <p className="text-lg leading-relaxed text-[var(--color-text-muted)]">
              Jenado Unlimited is not a single product line — it is a collection
              of practices that support a fuller life. Whether you are looking
              for a loaf for the table, a training plan that fits your season,
              or a custom piece from the workshop, every offering starts with
              the same questions: Is it honest? Is it well made? Does it serve
              mind, body, or soul?
            </p>
          </div>

          <div className="mt-14 grid grid-cols-1 gap-6 md:grid-cols-3">
            {pillars.map((pillar) => (
              <div
                key={pillar.key}
                className="border border-[var(--color-border)] bg-[var(--color-surface)] p-6 md:p-8"
              >
                <p className="mb-3 text-[11px] font-medium uppercase tracking-[0.3em] text-[var(--color-heading)]">
                  {pillar.label}
                </p>
                <p className="text-[15px] leading-relaxed text-[var(--color-text-muted)]">
                  {pillar.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="py-16 md:py-24">
        <div className="container-xl">
          <div className="mb-14 flex flex-col gap-6 border-b border-[var(--color-border)] pb-10 md:flex-row md:items-end md:justify-between">
            <div className="max-w-2xl">
              <h2 className="mb-3 text-2xl font-semibold tracking-[-0.02em] md:text-3xl">
                All verticals
              </h2>
              <p className="text-[var(--color-text-muted)] leading-relaxed">
                Browse each offering below. Status labels show what is actively
                available, in soft launch, or coming soon — so you always know
                what is ready for inquiry today.
              </p>
            </div>
            <Link
              href="/contact"
              className="shrink-0 text-sm font-medium tracking-wide text-[var(--color-heading)] transition-opacity hover:opacity-70"
            >
              Not sure where to start? Contact us →
            </Link>
          </div>

          <div className="space-y-4 md:space-y-0">
            {verticals.map((vertical, index) => (
              <VerticalCard
                key={vertical.slug}
                vertical={vertical}
                variant="feature"
                reverse={index % 2 === 1}
              />
            ))}
          </div>

          <div className="mt-20 border border-[var(--color-border)] bg-[var(--color-surface)] p-8 text-center md:p-12">
            <h2 className="mb-3 text-2xl font-semibold tracking-[-0.02em]">
              Looking for something specific?
            </h2>
            <p className="mx-auto mb-8 max-w-xl text-[var(--color-text-muted)] leading-relaxed">
              Many of our verticals can meet in the middle — gift sets of honey
              and bread, custom engraved pieces for events, or training paired
              with practical nutrition habits. Tell us what you have in mind and
              we will help chart a path.
            </p>
            <div className="flex flex-wrap items-center justify-center gap-4">
              <Link href="/contact" className="btn-primary">
                Start a conversation
              </Link>
              <Link
                href="/gallery"
                className="text-sm font-medium tracking-wide text-[var(--color-heading)] transition-opacity hover:opacity-70"
              >
                Browse the gallery →
              </Link>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

export const metadata: Metadata = {
  title: "Offerings",
  description:
    "Explore Jenado Unlimited offerings — honey bees, personal training, sourdough, farm-to-table, recreation apps, laser engraving, and 3D printing.",
};
