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

const page = getPageContent("about");

export default function AboutPage() {
  const values = page?.sections?.find((s) => s.title === "Values")?.items || [];
  const pillars =
    page?.sections?.find((s) => s.title === "Pillars")?.items || [];

  return (
    <>
      <ParallaxHero
        image={page?.heroImage || "/images/hero-about.jpg"}
        alt={
          page?.heroAlt ||
          "Sunlit workshop kitchen with honey jars, artisan bread, sketchbook, and coffee on a rustic wooden table"
        }
        size={page?.heroSize || "md"}
        priority={page?.heroPriority}
        align={page?.heroAlign}
        overlayClassName={
          page?.heroOverlay ||
          "bg-gradient-to-r from-black/80 via-black/55 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="py-16 md:py-24">
        <div className="container-xl max-w-3xl">
          <div className="space-y-6 text-lg leading-relaxed text-[var(--color-text)]">
            <p>
              We started with a simple observation: the things that make a day
              feel whole rarely fit in one aisle. A good loaf. A honest training
              plan. Honey from nearby hives. A custom piece that marks a moment.
              Tools that help you rest as intentionally as you work.
            </p>
            <p>
              Jenado Unlimited brings those practices under one roof — not as a
              random assortment, but as a deliberate ecosystem built on the
              pillars of{" "}
              <strong className="font-medium text-[var(--color-heading)]">
                Mind
              </strong>
              ,{" "}
              <strong className="font-medium text-[var(--color-heading)]">
                Body
              </strong>
              , and{" "}
              <strong className="font-medium text-[var(--color-heading)]">
                Soul
              </strong>
              . From artisan sourdough and local honey to personal training,
              seasonal food experiences, recreation apps, laser engraving, and
              3D printing, we treat every vertical with the same standard:
              thoughtful process, clear communication, and work we are proud to
              put our name on.
            </p>
            <p className="text-[var(--color-text-muted)]">
              Our mission is straightforward — to offer experiences and products
              that nourish the mind, strengthen the body, and uplift the soul.
              Some offerings are fully active today; others are in soft launch
              or on the horizon. What does not change is the care behind each
              one.
            </p>
          </div>

          <div className="mt-16 border-t border-[var(--color-border)] pt-12">
            <p className="mb-3 text-[11px] font-medium uppercase tracking-[0.3em] text-[var(--color-text-muted)]">
              The pillars
            </p>
            <h2 className="mb-8 text-2xl font-semibold tracking-[-0.02em] md:text-3xl">
              One brand. Three ways in.
            </h2>
            <div className="space-y-8">
              {pillars.map((pillar) => (
                <div
                  key={pillar.label}
                  className="grid gap-2 border-l-2 border-[var(--color-heading)] pl-5 md:grid-cols-[7rem_1fr] md:gap-6 md:border-l-0 md:pl-0"
                >
                  <p className="text-[11px] font-medium uppercase tracking-[0.3em] text-[var(--color-heading)] md:pt-1">
                    {pillar.label}
                  </p>
                  <div>
                    <h3 className="mb-2 text-lg font-medium tracking-[-0.01em] text-[var(--color-heading)]">
                      {pillar.title}
                    </h3>
                    <p className="text-[15px] leading-relaxed text-[var(--color-text-muted)]">
                      {pillar.description}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="mt-16 border-t border-[var(--color-border)] pt-12">
            <p className="mb-3 text-[11px] font-medium uppercase tracking-[0.3em] text-[var(--color-text-muted)]">
              How we work
            </p>
            <h2 className="mb-5 text-2xl font-semibold tracking-[-0.02em]">
              Small by design. Serious about quality.
            </h2>
            <div className="space-y-5 text-[15px] leading-relaxed text-[var(--color-text-muted)] md:text-base">
              <p>
                We are not a faceless marketplace. Inquiries come to real
                people. Custom projects get conversation, not just a checkout
                button. Training is personal, not a one-size program dropped in
                a PDF.
              </p>
              <p>
                That also means capacity is finite. Bread is baked in batches.
                Engraving and printing take time. Training calendars fill.
                Transparency about status — active, soft launch, coming soon —
                is part of respecting your time and ours.
              </p>
              <p>
                If you are exploring a gift, a habit change, a custom piece, or
                simply curious what we are building next, we would rather talk
                early and honestly than overpromise.
              </p>
            </div>
          </div>

          <div className="mt-16 border-t border-[var(--color-border)] pt-12">
            <p className="mb-8 text-[11px] font-medium uppercase tracking-[0.3em] text-[var(--color-text-muted)]">
              Our values
            </p>
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
              {values.map((value) => (
                <div
                  key={value.title}
                  className="border border-[var(--color-border)] bg-[var(--color-surface)] p-6 transition-shadow duration-300 hover:shadow-[0_16px_40px_-24px_rgba(0,0,0,0.35)] dark:hover:shadow-[0_16px_40px_-24px_rgba(0,0,0,0.8)]"
                >
                  <h2 className="mb-2 text-lg font-medium tracking-[-0.01em] text-[var(--color-heading)]">
                    {value.title}
                  </h2>
                  <p className="text-[15px] leading-relaxed text-[var(--color-text-muted)]">
                    {value.description}
                  </p>
                </div>
              ))}
            </div>
          </div>

          <div className="mt-16 flex flex-wrap items-center gap-4 border-t border-[var(--color-border)] pt-12">
            <Link href="/contact" className="btn-primary">
              Get in Touch
            </Link>
            <Link
              href="/offerings"
              className="text-sm font-medium tracking-wide text-[var(--color-heading)] transition-opacity hover:opacity-70"
            >
              Explore offerings →
            </Link>
            <Link
              href="/gallery"
              className="text-sm font-medium tracking-wide text-[var(--color-heading)] transition-opacity hover:opacity-70"
            >
              View gallery →
            </Link>
          </div>
        </div>
      </section>
    </>
  );
}

export const metadata: Metadata = {
  title: "About | Jenado Unlimited",
  description:
    "Learn about Jenado Unlimited — our mission, values, and multi-vertical brand built on mind, body, and soul.",
};
