import { createFileRoute, Link } from "@tanstack/react-router";
import { updates } from "@/lib/content";
import { cn } from "@/lib/utils";

export const Route = createFileRoute("/updates")({ component: Updates });

function Updates() {
  return (
    <article>
      <section className="relative flex min-h-[70dvh] items-end overflow-hidden">
        <img
          src="/images/hero-earth.jpg"
          alt=""
          className="kenburns absolute inset-0 h-full w-full object-cover"
        />
        <div className="hero-scrim absolute inset-0" />
        <div className="relative z-10 px-6 pb-20 pt-32 sm:px-12 lg:px-20">
          <p className="font-display text-kicker uppercase tracking-wide">Mission log</p>
          <h1 className="mt-2 max-w-3xl font-display text-hero font-semibold uppercase leading-tight whitespace-pre-line">
            {"Near-term proof.\nSo the pitch is not costume."}
          </h1>
        </div>
      </section>
      <section id="overview" className="bg-bg px-6 py-16 sm:px-12 lg:px-20">
        <ul className="divide-y divide-line border-y border-line">
          {updates.map((item) => (
            <li key={item.title}>
              <Link
                to={item.href}
                className="grid gap-3 py-8 transition-colors duration-[var(--motion-fast)] hover:text-muted sm:grid-cols-[8rem_1fr_8rem] sm:items-baseline"
              >
                <span className="font-display text-xs uppercase tracking-wide text-muted">
                  {item.date}
                </span>
                <span>
                  <span className="block font-display text-2xl font-semibold uppercase tracking-hero">
                    {item.title}
                  </span>
                  <span className="mt-2 block max-w-xl text-sm text-muted">
                    {item.detail}
                  </span>
                </span>
                <span
                  className={cn(
                    "font-display text-xs uppercase tracking-wide sm:text-right",
                    item.status === "LIVE" ? "text-fg" : "text-muted",
                  )}
                >
                  {item.status}
                </span>
              </Link>
            </li>
          ))}
        </ul>
      </section>
    </article>
  );
}