import Link from "next/link";

import { serverCaller } from "@/lib/trpc/server";

import { Marquee } from "@/components/marquee";

import { SteppingCouple } from "@/components/stepping-couple";

import { MobileNav } from "@/components/mobile-nav";

import { Wordmark } from "@/components/wordmark";

export const dynamic = "force-dynamic";

const COUNT = ["6", "·", "COUNT", "·", "8"];

const COMING = [

  "Little Rock",

  "St. Louis",

  "Huntsville",

  "Montgomery",

  "New Orleans",

  "Las Vegas",

];

const YARD = [

  { k: "Stepping groups", d: "The groups that keep each city stepping." },

  { k: "DJs", d: "Who is spinning the set, and where." },

  { k: "Promoters", d: "The people who host the sets and weekenders." },

  { k: "Classes", d: "Lessons and instructors, beginner on up." },

];

function fmt(d: Date | null) {

  if (!d) return "DATE TBD";

  return new Date(d)

    .toLocaleString("en-US", {

      month: "short",

      day: "numeric",

      hour: "numeric",

      minute: "2-digit",

    })

    .toUpperCase();

}

export default async function Home() {

  const caller = serverCaller();

  const cities = await caller.city.listLaunched();

  const byCity = new Map(cities.map((c) => [c.id, c]));

  const lists = await Promise.all(

    cities.map((c) => caller.event.list({ cityId: c.id })),

  );

  const lineup = lists

    .flat()

    .sort(

      (a, b) =>

        (a.startsAt ? +new Date(a.startsAt) : Infinity) -

        (b.startsAt ? +new Date(b.startsAt) : Infinity),

    )

    .slice(0, 6);

  return (

    <div className="relative">

      <header className="fixed top-0 z-50 flex w-full items-center justify-between px-5 py-4 sm:px-8">

        <Link href="/" className="text-lg">

          <Wordmark />

        </Link>

        <nav className="hidden gap-7 sm:flex">

          <a href="#sets" className="kicker hover:text-bone">

            The Sets

          </a>

          <a href="#floor" className="kicker hover:text-bone">

            The Floor

          </a>

          <a href="#road" className="kicker hover:text-bone">

            The Road

          </a>

        </nav>

        <MobileNav />

      </header>

      {}

      <section className="relative flex min-h-[100svh] flex-col justify-center px-5 sm:px-10">

        <div className="pointer-events-none relative order-1 mx-auto mt-24 h-[34vh] w-[84%] max-w-[300px] sm:absolute sm:inset-y-0 sm:right-[2%] sm:order-none sm:mx-0 sm:mt-0 sm:h-auto sm:w-[38%] sm:max-w-none">

          <div

            className="absolute left-1/2 top-1/2 h-[78%] w-[78%] -translate-x-1/2 -translate-y-1/2 rounded-full blur-3xl"

            style={{ background: "radial-gradient(circle, rgba(61,90,254,0.14) 0%, transparent 62%)" }}

          />

          <SteppingCouple className="absolute inset-0 flex items-center justify-center py-[4%]" />

        </div>

        <p className="kicker beat-in b1 order-2 mt-6 sm:absolute sm:left-10 sm:top-24 sm:mt-0">

          The partner dance <span className="text-gold">/</span> Born in Chicago

        </p>

        <div className="relative z-10 order-3 mt-3 select-none sm:mt-0 sm:-ml-[2vw]">

          <h1 className="display" style={{ lineHeight: 0.82, letterSpacing: "-0.04em", fontSize: "clamp(3rem, 13.5vw, 17rem)" }}>

            <span className="block beat-in b1">STEP.</span>

            <span className="block text-gold beat-in b2">GLIDE.</span>

            <span className="serif block italic font-normal beat-in b3">spin.</span>

          </h1>

        </div>

        <div className="beat-in b4 relative z-10 order-4 mt-6 max-w-md sm:mt-8">

          <p className="serif text-2xl leading-snug text-bone sm:text-3xl">

            Chicago Stepping. Your City.

          </p>

          <p className="serif mt-3 text-lg leading-snug text-bone/75 sm:text-xl">

            The sets, the people, and the road between cities, in one place.

          </p>

        </div>

        <div className="beat-in b5 order-5 mt-8 flex flex-wrap items-center gap-x-6 gap-y-2">

          {cities.map((c) => (

            <Link key={c.id} href={`/city/${c.slug}`} className="kicker text-bone hover:text-gold">

              {c.name}

            </Link>

          ))}

        </div>

        <p className="beat-in b5 order-6 mt-4 max-w-2xl text-sm leading-relaxed text-ash">

          <span className="kicker">More cities coming</span>

          <span className="mx-2 text-gold">/</span>

          {COMING.map((name, i) => (

            <span key={name}>

              <span className="whitespace-nowrap">{name}</span>

              {i < COMING.length - 1 && " · "}

            </span>

          ))}

        </p>

      </section>

      <Marquee />

      {}

      <section className="flex flex-wrap items-baseline justify-center gap-6 px-5 py-10 sm:px-8">

        {COUNT.map((g, i) => (

          <span

            key={i}

            className="display text-3xl text-bone/70 sm:text-4xl"

          >

            {g}

          </span>

        ))}

      </section>

      {}

      <section

        id="sets"

        className="border-t border-[var(--line)] px-5 py-16 sm:px-8"

      >

        <div className="flex items-end justify-between">

          <h2 className="display text-5xl sm:text-7xl">The Sets</h2>

          <span className="kicker">01 / Sets</span>

        </div>

        <ul className="mt-10">

          {lineup.length === 0 && (

            <li className="kicker text-ash">No sets posted yet.</li>

          )}

          {lineup.map((e, i) => (

            <li key={e.id}>

              <Link

                href={`/city/${byCity.get(e.cityId)?.slug ?? ""}`}

                className="group flex items-center gap-5 border-b border-[var(--line)] py-6"

              >

                <span className="kicker w-10 text-gold">

                  {String(i + 1).padStart(2, "0")}

                </span>

                <span className="display flex-1 text-2xl text-bone group-hover:text-gold sm:text-4xl">

                  {e.title}

                </span>

                <span className="kicker hidden sm:block">

                  {byCity.get(e.cityId)?.name}

                </span>

                <span className="kicker w-28 text-right text-ash">

                  {fmt(e.startsAt)}

                </span>

              </Link>

            </li>

          ))}

        </ul>

      </section>

      {}

      <section

        id="floor"

        className="border-t border-[var(--line)] px-5 py-16 sm:px-8"

      >

        <div className="flex items-end justify-between">

          <h2 className="display text-5xl sm:text-7xl">The Floor</h2>

          <span className="kicker">02 / Community</span>

        </div>

        <div className="mt-10 grid gap-px sm:grid-cols-2 lg:grid-cols-3">

          {YARD.map((y) => (

            <div key={y.k} className="py-6 pr-6">

              <h3 className="display text-3xl">{y.k}</h3>

              <p className="serif mt-2 text-lg text-bone/70">{y.d}</p>

            </div>

          ))}

        </div>

      </section>

      {}

      <section

        id="road"

        className="border-t border-[var(--line)] px-5 py-16 sm:px-8"

      >

        <div className="flex items-end justify-between">

          <h2 className="display text-5xl sm:text-7xl">The Road</h2>

          <span className="kicker">03 / Cities</span>

        </div>

        <div className="mt-10 grid gap-px sm:grid-cols-2">

          {cities.map((c) => (

            <Link

              key={c.id}

              href={`/city/${c.slug}`}

              className="group flex items-end justify-between border-t border-[var(--line)] py-10"

            >

              <div>

                <span className="kicker text-ash">{c.metroLabel}</span>

                <h3 className="display mt-2 text-5xl group-hover:text-gold sm:text-6xl">

                  {c.name}

                </h3>

              </div>

              <span className="kicker text-gold">Enter →</span>

            </Link>

          ))}

        </div>

      </section>

      <footer className="flex flex-wrap items-center justify-between gap-3 border-t border-[var(--line)] px-5 py-8 sm:px-8">

        <Link href="/" className="text-xl">

          <Wordmark />

        </Link>

        <div className="flex items-center gap-6">

          <Link href="/about" className="kicker text-bone hover:text-gold">

            About

          </Link>

          <span className="kicker text-ash">Chicago Stepping. Your City.</span>

        </div>

      </footer>

    </div>

  );

}