import { createFileRoute, Link } from "@tanstack/react-router";
import novella from "@/assets/wm230/novella.json";
import cover from "@/assets/wm230/00_cover.png";

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      { title: "Wednesday Morning, 2:30 — An Illustrated Novella" },
      {
        name: "description",
        content:
          "An illustrated novella about a man who wakes from a twenty-year coma at 2:30 on a Wednesday morning. Twelve chapters, twelve oil-painted illustrations.",
      },
      { property: "og:title", content: "Wednesday Morning, 2:30" },
      {
        property: "og:description",
        content:
          "A quiet, melancholy illustrated novella about waking after twenty years of sleep.",
      },
      { property: "og:image", content: cover },
      { name: "twitter:image", content: cover },
      { name: "twitter:card", content: "summary_large_image" },
    ],
  }),
  component: Index,
});

function Index() {
  return (
    <main className="min-h-screen">
      {/* HERO */}
      <section className="relative w-full overflow-hidden">
        <div className="relative mx-auto grid max-w-6xl grid-cols-1 gap-10 px-6 pb-16 pt-12 md:grid-cols-[1.05fr_1fr] md:gap-16 md:pt-20 lg:gap-24">
          {/* Left: title block */}
          <div className="flex flex-col justify-center">
            <p className="font-ui text-xs uppercase tracking-[0.35em] text-accent">
              An Illustrated Novella
            </p>
            <h1 className="font-display mt-6 text-[clamp(2.8rem,7vw,5.5rem)] font-medium leading-[0.95] tracking-tight text-primary">
              Wednesday<br />
              <span className="italic text-accent">Morning,</span><br />
              2:30
            </h1>
            <p className="font-display mt-8 max-w-md text-lg italic leading-relaxed text-muted-foreground">
              He went to sleep in 2004. He woke at 2:30 in the morning, twenty
              years later, in a room he did not recognize, in a world that had
              quietly continued without him.
            </p>

            <div className="mt-10 flex flex-wrap items-center gap-4">
              <Link
                to="/chapter/$num"
                params={{ num: "1" }}
                className="font-ui inline-flex items-center justify-center rounded-full bg-primary px-7 py-3 text-sm tracking-wide text-primary-foreground transition hover:bg-accent"
              >
                Begin Reading →
              </Link>
              <a
                href="/downloads/wednesday-morning-2-30.pdf"
                className="font-ui inline-flex items-center justify-center rounded-full border border-primary/30 px-7 py-3 text-sm tracking-wide text-primary transition hover:bg-primary/5"
              >
                Download PDF
              </a>
            </div>

            <p className="font-ui mt-8 text-xs uppercase tracking-[0.25em] text-muted-foreground">
              12 Chapters · 12 Oil Paintings · ≈ 30 minutes
            </p>
          </div>

          {/* Right: cover */}
          <div className="relative">
            <div className="absolute -inset-4 rotate-[-1deg] bg-primary/10 blur-2xl" />
            <img
              src={cover}
              alt="Oil painting of a man in a hospital bed at 2:30 in the morning, moonlight through a thin curtain"
              className="relative aspect-[3/4] w-full rotate-[1deg] object-cover shadow-[0_30px_80px_-20px_rgba(20,30,45,0.45)] ring-1 ring-primary/10"
            />
          </div>
        </div>
      </section>

      {/* DIVIDER */}
      <div className="mx-auto my-4 h-px max-w-3xl bg-primary/15" />

      {/* CONTENTS */}
      <section className="mx-auto max-w-3xl px-6 py-20">
        <p className="font-ui text-center text-xs uppercase tracking-[0.4em] text-accent">
          Contents
        </p>
        <h2 className="font-display mt-3 text-center text-4xl italic text-primary">
          Twelve Chapters
        </h2>

        <ol className="mt-14 space-y-2">
          {novella.map((c) => (
            <li key={c.num}>
              <Link
                to="/chapter/$num"
                params={{ num: String(c.num) }}
                className="group flex items-baseline gap-6 border-b border-primary/10 py-4 transition hover:border-accent/40"
              >
                <span className="font-display w-12 shrink-0 text-right text-lg italic text-accent">
                  {c.roman}.
                </span>
                <span className="font-display flex-1 text-xl text-primary transition group-hover:text-accent md:text-2xl">
                  {c.title}
                </span>
                <span className="font-ui text-xs uppercase tracking-widest text-muted-foreground opacity-0 transition group-hover:opacity-100">
                  read →
                </span>
              </Link>
            </li>
          ))}
        </ol>

        <div className="mt-20 text-center">
          <p className="font-display text-2xl italic text-muted-foreground">— fin —</p>
          <p className="font-ui mt-6 text-xs uppercase tracking-[0.3em] text-muted-foreground">
            Wednesday Morning, 2:30 · An Illustrated Novella
          </p>
        </div>
      </section>
    </main>
  );
}