import { CTABand } from "@/components/CTABand";
import { Logo } from "@/components/Logo";
import { ParallaxBand } from "@/components/ParallaxBand";
import { ParallaxHero } from "@/components/ParallaxHero";
import { PillarStrip } from "@/components/PillarStrip";
import { VerticalCard } from "@/components/VerticalCard";
import { getPageContent } from "@/content/pages";
import { getAllVerticals, siteConfig } from "@/lib/content";
import Link from "next/link";

export default function HomePage() {
  const verticals = getAllVerticals().slice(0, 6);
  const page = getPageContent("home");
  const tagline =
    siteConfig.tagline ||
    "Craft for mind, body, and soul — local honey, training, sourdough, and more.";

  return (
    <>
      <ParallaxHero
        image={page?.heroImage || "/images/hero-home.jpg"}
        alt={
          page?.heroAlt ||
          "Honey, artisan bread, and candle on a wooden table overlooking a wildflower meadow at golden hour"
        }
        size={page?.heroSize || "full"}
        priority={page?.heroPriority}
        overlayClassName={
          page?.heroOverlay ||
          "bg-gradient-to-b from-black/50 via-black/35 to-black/75"
        }
      >
        <div className="mx-auto max-w-3xl">
          <div className="mb-8 flex justify-center">
            <span className="logo-on-dark">
              <Logo
                size={88}
                withText={false}
                link={false}
                className="text-white"
              />
            </span>
          </div>
          <p className="mb-3 text-[24px] font-medium uppercase tracking-[0.35em] text-white/70">
            Jenado Unlimited
          </p>
          <h1 className="mb-6 text-4xl font-semibold tracking-[-0.03em] text-white md:text-6xl md:leading-[1.05]">
            Mind. Body. Soul.
          </h1>
          <p className="mx-auto mb-10 max-w-xl text-lg leading-relaxed text-white/80 md:text-xl">
            {tagline}
          </p>
          <div className="flex flex-wrap items-center justify-center gap-4">
            <Link href="/offerings" className="btn-hero-primary">
              Explore Offerings
            </Link>
            <Link href="/contact" className="btn-hero-secondary">
              Get in Touch
            </Link>
          </div>
        </div>
      </ParallaxHero>

      <PillarStrip />

      <section className="py-20 md:py-28">
        <div className="container-xl">
          <div className="mx-auto mb-14 max-w-2xl text-center">
            <p className="mb-3 text-[11px] font-medium uppercase tracking-[0.3em] text-[var(--color-text-muted)]">
              What we offer
            </p>
            <h2 className="mb-4 text-3xl font-semibold tracking-[-0.02em] md:text-4xl">
              Crafted with intention
            </h2>
            <p className="text-lg text-[var(--color-text-muted)]">
              From the hive to the gym, the oven to the workshop — explore
              everything Jenado Unlimited has to offer.
            </p>
          </div>
          <div className="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3 lg:gap-6">
            {verticals.map((vertical) => (
              <VerticalCard key={vertical.slug} vertical={vertical} />
            ))}
          </div>
          <div className="mt-12 text-center">
            <Link
              href="/offerings"
              className="inline-flex items-center gap-2 text-sm font-medium tracking-wide text-[var(--color-heading)] transition-opacity hover:opacity-70"
            >
              View all offerings
              <span aria-hidden>→</span>
            </Link>
          </div>
        </div>
      </section>

      <ParallaxBand
        image="/images/hero-gallery.jpg"
        alt="Textured still life of honey, wood grain, metal, and fabric"
      >
        <p className="mb-4 text-[11px] font-medium uppercase tracking-[0.3em] text-white/65">
          The gallery
        </p>
        <h2 className="mx-auto mb-5 max-w-2xl text-3xl font-semibold tracking-[-0.02em] md:text-4xl">
          A closer look at the craft
        </h2>
        <p className="mx-auto mb-10 max-w-lg text-lg text-white/75">
          Honey, bread, training, and handmade work — see the textures behind
          every offering.
        </p>
        <Link href="/gallery" className="btn-hero-primary">
          Open Gallery
        </Link>
      </ParallaxBand>

      <CTABand
        title="Ready to Get Started?"
        description="Whether you are interested in our honey products, fitness training, or artisan sourdough, we would love to hear from you."
        href="/contact"
        buttonLabel="Contact Us"
      />
    </>
  );
}

export function generateMetadata() {
  return {
    title: "Jenado Unlimited — Honey, Training, Sourdough & More",
    description:
      "Home page for Jenado Unlimited. Explore honey bee products, personal training, sourdough bread, farm-to-table dining, recreation apps, laser engraving, and 3D printing.",
  };
}
