import { createFileRoute } from "@tanstack/react-router";
import { ChapterNext } from "@/components/chapter-next";
import { OutlineLink } from "@/components/outline-button";
import { StatsRow } from "@/components/stats-row";
import { coreValues, courses, universityTracks } from "@/lib/content";

export const Route = createFileRoute("/university")({ component: University });

function University() {
  return (
    <article>
      <section className="relative flex min-h-dvh items-end overflow-hidden">
        <img
          src="/images/page-university.jpg"
          alt=""
          className="kenburns absolute inset-0 h-full w-full object-cover"
          fetchPriority="high"
        />
        <div className="hero-scrim absolute inset-0" />
        <div className="relative z-10 max-w-3xl px-6 pb-28 pt-32 sm:px-12 lg:px-20 lg:pb-36">
          <p className="font-display text-kicker uppercase tracking-wide">
            Perlas University
          </p>
          <h1 className="mt-2 font-display text-hero font-semibold uppercase leading-tight">
            We train world builders. Entrepreneurs. Restore craft.
          </h1>
          <p className="mt-5 max-w-xl text-body text-fg/90">
            Strengthen the body. Strengthen the mind. Strengthen the tools.
            Restore craft. Teach energy. Teach ships as space analog. Public
            days teach space, sports, and simple machines. War is not a
            children’s sport. Fashion is not a children’s job.
          </p>
        </div>
      </section>
      <StatsRow
        id="overview"
        stats={[
          { value: "6", label: "Masteries" },
          { value: "16", label: "Courses" },
          { value: "BUILDERS", label: "Not spectators" },
          { value: "L.A.", label: "Place" },
        ]}
      />
      <section className="bg-bg px-6 py-20 sm:px-12 lg:px-20">
        <p className="font-display text-kicker uppercase tracking-wide text-muted">
          Core values
        </p>
        <div className="mt-10 grid gap-10 sm:grid-cols-2">
          {coreValues.map((v) => (
            <div key={v.name} className="border-t border-line pt-6">
              <h2 className="font-display text-2xl font-semibold uppercase">{v.name}</h2>
              <p className="mt-3 text-sm leading-body text-muted">{v.body}</p>
            </div>
          ))}
        </div>
      </section>
      <section className="bg-bg px-6 pb-20 sm:px-12 lg:px-20">
        <p className="font-display text-kicker uppercase tracking-wide text-muted">
          Masteries
        </p>
        <div className="mt-10 grid gap-px bg-line sm:grid-cols-2">
          {universityTracks.map((track) => (
            <div key={track.name} className="bg-bg px-6 py-10">
              <p className="font-display text-xs uppercase tracking-wide text-muted">
                Mastery
              </p>
              <h2 className="mt-2 font-display text-3xl font-semibold uppercase">
                {track.name}
              </h2>
              <p className="mt-4 max-w-md text-sm text-muted">{track.body}</p>
            </div>
          ))}
        </div>
      </section>
      <section className="bg-bg px-6 pb-20 sm:px-12 lg:px-20">
        <p className="font-display text-kicker uppercase tracking-wide text-muted">
          Course list
        </p>
        <h2 className="mt-2 max-w-3xl font-display text-hero font-semibold uppercase">
          Simple names. Hard work.
        </h2>
        <div className="mt-10 overflow-x-auto">
          <table className="w-full min-w-[640px] border-y border-line text-left">
            <thead>
              <tr className="border-b border-line">
                <th className="py-4 pr-6 font-display text-xs font-medium uppercase tracking-wide text-muted">
                  Code
                </th>
                <th className="py-4 pr-6 font-display text-xs font-medium uppercase tracking-wide text-muted">
                  Course
                </th>
                <th className="py-4 font-display text-xs font-medium uppercase tracking-wide text-muted">
                  In plain words
                </th>
              </tr>
            </thead>
            <tbody>
              {courses.map((row) => (
                <tr key={row.code} className="border-b border-line align-top">
                  <td className="py-5 pr-6 font-display text-sm uppercase tracking-wide">
                    {row.code}
                  </td>
                  <td className="py-5 pr-6 font-display text-sm font-semibold uppercase tracking-wide">
                    {row.name}
                  </td>
                  <td className="py-5 text-sm text-muted">{row.body}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div className="mt-10 flex flex-wrap gap-3">
          <OutlineLink to="/mind">Mind</OutlineLink>
          <OutlineLink to="/build">Build</OutlineLink>
          <OutlineLink to="/contact">Inquire</OutlineLink>
        </div>
      </section>
      <ChapterNext current="/build" />
    </article>
  );
}