import type { Metadata } from "next";
import Link from "next/link";
import Marquee from "@/components/marquee";
import SiteNav from "@/components/site-nav";
import SiteFooter from "@/components/site-footer";
import { getOpenShopSlugForEventSlugSafe } from "@db/queries/merch";
import { MISSION, ORIGIN, PAST_CHAPTERS, VULAI_MARQUEE } from "@/lib/vulai-content";
import {
  MusicIcon,
  FoodIcon,
  MarketIcon,
  TalesIcon,
  DanceIcon,
  CameraIcon,
  ArrowRightIcon,
} from "@/components/icons";

export const metadata: Metadata = {
  title: "Vulai Festival — VibePass Tickets",
  description:
    "Vulai is Shamz Media's flagship festival of Luhya music, food and dance from Western Kenya. Explore the Ingo Experience and every Vulai chapter.",
};

// The five worlds of the Ingo Experience — moved here from the homepage, where
// they belong to the Vulai festival rather than the general platform.
const WORLDS = [
  { title: "Isukuti & Sound", blurb: "Drum lines and live Luhya music across every stage.", Icon: MusicIcon },
  { title: "Ingokho & Ugali", blurb: "The food village — chicken, ugali and Western Kenya staples.", Icon: FoodIcon },
  { title: "Likhuba Market", blurb: "Makers, crafts and a market lounge for VIP guests.", Icon: MarketIcon },
  { title: "Likhumbe Tales", blurb: "Storytelling, heritage and the roots of the celebration.", Icon: TalesIcon },
  { title: "Ekamuyu Dance", blurb: "Ceremonial dance from the heart of the festival.", Icon: DanceIcon },
];

const GOLD_HOVER =
  "transition-all duration-200 hover:-translate-y-0.5 hover:border-brand-gold hover:shadow-[0_14px_34px_-18px_rgba(231,184,75,0.55)] motion-reduce:hover:translate-y-0";

const CITIES = [
  { city: "Nairobi", date: "Aug 2026" },
  { city: "Kakamega", date: "Dec 2026" },
];

// Looks up the Vulai organizer's shop, so it must render per request -- a
// static build would bake in whichever database it was built against.
export const dynamic = "force-dynamic";

export default async function VulaiPage() {
  // The Vulai organizer's shop, found via the "vulai-festival" event slug.
  const shopSlug = await getOpenShopSlugForEventSlugSafe("vulai-festival");
  return (
    <div className="flex-1 bg-bg">
      {/* Hero */}
      <section className="relative overflow-hidden">
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          src="/vulai/cover.jpg"
          alt=""
          aria-hidden="true"
          className="absolute inset-0 w-full h-full object-cover opacity-40"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-bg via-bg/85 to-bg/50" />
        <div className="relative">
          <SiteNav transparent />
          <div className="max-w-6xl mx-auto px-4 pt-12 pb-20">
            <Link
              href="/#featured"
              className="text-xs font-semibold uppercase tracking-[0.2em] text-muted hover:text-white"
            >
              ← Back to featured events
            </Link>
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img src="/brand/vulai-logo.png" alt="Vulai Festival" className="mt-6 h-20 w-auto" />
            <p className="mt-6 text-xs font-semibold uppercase tracking-[0.3em] text-brand-green-h">
              {MISSION.eyebrow} · Our flagship Luhya culture concept
            </p>
            <h1 className="mt-4 text-4xl sm:text-6xl font-black leading-[0.95] tracking-tight text-white">
              {MISSION.heading}
            </h1>
            <p className="mt-5 max-w-xl text-lg text-ink/80">{MISSION.body}</p>

            <div className="mt-8 flex flex-wrap gap-3">
              {CITIES.map((c) => (
                <div
                  key={c.city}
                  className="rounded-2xl border border-white/20 bg-white/5 px-5 py-3 backdrop-blur"
                >
                  <p className="font-bold text-white">{c.city}</p>
                  <p className="text-sm text-ink/70">{c.date}</p>
                </div>
              ))}
            </div>

            <div className="mt-9 flex flex-wrap items-center gap-4">
              <a
                href="#experience"
                className="rounded-full bg-brand-green px-7 py-3 text-base font-semibold text-white hover:bg-brand-green-h"
              >
                Explore the experience
              </a>
              <Link
                href="/gallery"
                className="inline-flex items-center gap-2 rounded-full border border-white/30 px-7 py-3 text-base font-semibold text-white hover:bg-white/10"
              >
                <CameraIcon className="w-5 h-5" />
                Photo gallery
              </Link>
              {shopSlug && (
                <Link
                  href={`/shop/${shopSlug}`}
                  className="rounded-full border border-white/30 px-7 py-3 text-base font-semibold text-white hover:bg-white/10"
                >
                  Shop merch
                </Link>
              )}
            </div>
          </div>
        </div>
      </section>

      <Marquee words={VULAI_MARQUEE} />

      {/* The Ingo Experience — five worlds (moved from the homepage) */}
      <section id="experience" className="bg-panel border-y border-line scroll-mt-4">
        <div className="max-w-6xl mx-auto px-4 py-20">
          <p className="text-xs font-semibold uppercase tracking-[0.3em] text-brand-green-h">
            The Ingo Experience
          </p>
          <h2 className="mt-3 text-3xl sm:text-4xl font-black tracking-tight text-white">
            Five worlds, one festival
          </h2>
          <div className="mt-10 grid sm:grid-cols-2 lg:grid-cols-5 gap-5">
            {WORLDS.map((w) => (
              <div
                key={w.title}
                className={`rounded-2xl border border-line bg-panel-soft p-5 ${GOLD_HOVER}`}
              >
                <w.Icon className="w-9 h-9" />
                <h3 className="mt-3 font-bold text-brand-green-h">{w.title}</h3>
                <p className="mt-2 text-sm text-muted">{w.blurb}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Origin story */}
      <section className="bg-bg">
        <div className="max-w-6xl mx-auto px-4 py-20">
          <div className="border-l-2 border-brand-green pl-6">
            <p className="text-xs font-semibold uppercase tracking-[0.3em] text-brand-green-h">
              {ORIGIN.eyebrow}
            </p>
            <p className="mt-3 max-w-3xl text-lg text-muted">{ORIGIN.body}</p>
          </div>
        </div>
      </section>

      {/* Past chapters */}
      <section className="bg-panel border-y border-line">
        <div className="max-w-6xl mx-auto px-4 py-20">
          <p className="text-xs font-semibold uppercase tracking-[0.3em] text-brand-green-h">
            Featured chapters
          </p>
          <h2 className="mt-3 text-3xl sm:text-4xl font-black tracking-tight text-white">
            Every Vulai night, every Luhya beat.
          </h2>
          <p className="mt-2 text-muted max-w-2xl">
            Each chapter is its own city, its own crowd, its own stage — but the heartbeat is one.
          </p>

          <div className="mt-10 grid md:grid-cols-3 gap-6">
            {PAST_CHAPTERS.map((c) => (
              <Link
                key={c.title}
                href={`/blog/${c.slug}`}
                className="chapter-card group block rounded-2xl p-px"
              >
                <article className="flex h-full flex-col overflow-hidden rounded-[15px] bg-panel-soft">
                  <div className="aspect-[16/10] overflow-hidden">
                    {/* eslint-disable-next-line @next/next/no-img-element */}
                    <img
                      src={c.image}
                      alt={c.title}
                      className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
                    />
                  </div>
                  <div className="p-6 flex flex-col flex-1">
                    <span className="self-start rounded-full bg-brand-green/20 px-3 py-1 text-xs font-semibold text-brand-green-h transition-colors group-hover:bg-brand-gold/20 group-hover:text-brand-gold-h">
                      {c.category}
                    </span>
                    <h3 className="mt-4 text-lg font-bold text-white transition-colors group-hover:text-brand-gold-h">
                      {c.title}
                    </h3>
                    <p className="mt-1 text-sm text-brand-green-h font-medium">{c.date}</p>
                    <p className="mt-3 text-sm text-muted leading-relaxed flex-1">{c.blurb}</p>
                    <p className="mt-4 text-xs text-muted">
                      <span className="font-semibold text-ink/80">Lineup:</span>{" "}
                      {c.lineup.join(" · ")}
                    </p>
                    <span className="mt-5 inline-flex items-center gap-2 text-sm font-semibold text-brand-gold-h">
                      Read the story
                      <span className="inline-flex h-7 w-7 items-center justify-center rounded-full border border-brand-gold/40 bg-brand-gold/10 transition-all duration-300 group-hover:translate-x-1 group-hover:border-brand-gold group-hover:bg-brand-gold/20">
                        <ArrowRightIcon className="w-4 h-4" />
                      </span>
                    </span>
                  </div>
                </article>
              </Link>
            ))}
          </div>
        </div>
      </section>

      <SiteFooter />
    </div>
  );
}