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 { genetrix, houseOffers, merit } from "@/lib/content";

export const Route = createFileRoute("/house")({ component: House });

function House() {
  return (
    <article>
      <section className="relative flex min-h-dvh items-end overflow-hidden">
        <img
          src="/images/hero-island.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">
            06  ·  The house
          </p>
          <h1 className="mt-2 font-display text-hero font-semibold uppercase leading-tight">
            A culture center. Write your own charter. Keep the ones you love.
          </h1>
          <p className="mt-5 max-w-xl text-body text-fg/90">
            Restore EDM, old-world clothing, film, and making. Found companies
            that donate up. Builders are lost when a person cannot found their
            own work — or when the ones they love are taken and the rent becomes
            a cage. We do not own the city. We do not write race, height, or
            “good genes” into the door.
          </p>
        </div>
      </section>
      <StatsRow
        id="overview"
        stats={[
          { value: "CULTURE", label: "The engine" },
          { value: "CHARTER", label: "Your own" },
          { value: "AGI", label: "Guide, not owner" },
          { value: "ADULT", label: "Craft only" },
        ]}
      />
      <section className="relative min-h-[80dvh]">
        <img src="/images/page-runway.jpg" alt="" className="absolute inset-0 h-full w-full object-cover" />
        <div className="hero-scrim absolute inset-0" />
        <div className="relative z-10 flex min-h-[80dvh] items-end px-6 py-20 sm:px-12 lg:px-20">
          <div className="max-w-xl">
            <p className="font-display text-kicker uppercase tracking-wide">
              Culture center
            </p>
            <h2 className="mt-2 font-display text-hero font-semibold uppercase leading-tight">
              EDM. Old-world runway. Film. Craft restored.
            </h2>
            <p className="mt-5 text-body text-fg/90">
              A civilization that cannot keep its arts is already falling. We
              run live rooms people pay to enter: electronic music, a
              high-fashion runway of old-world clothing, film days, and making.
              Atmosphere is hospitality labor under contract. Admission is
              adult. Not a racial catalog. Not an escort desk. Not a children’s
              job.
            </p>
          </div>
        </div>
      </section>
      <section className="relative min-h-[80dvh]">
        <img src="/images/page-culture.jpg" alt="" className="absolute inset-0 h-full w-full object-cover" />
        <div className="hero-scrim absolute inset-0" />
        <div className="relative z-10 flex min-h-[80dvh] items-end px-6 py-20 sm:px-12 lg:px-20">
          <div className="max-w-xl">
            <p className="font-display text-kicker uppercase tracking-wide">
              Entertainment hub
            </p>
            <h2 className="mt-2 font-display text-hero font-semibold uppercase leading-tight">
              Movies. Nights. A booked crew. Payroll.
            </h2>
            <p className="mt-5 text-body text-fg/90">
              Los Angeles already knows this work. Production days are down.
              Live presence is what machines cannot cheaply fake. We book the
              day. We pay the crew. We keep the files on the talent’s side.
              That is how a house becomes an engine for the school.
            </p>
          </div>
        </div>
      </section>
      <section className="relative min-h-[80dvh]">
        <img src="/images/page-builders.jpg" alt="" className="absolute inset-0 h-full w-full object-cover" />
        <div className="hero-scrim absolute inset-0" />
        <div className="relative z-10 flex min-h-[80dvh] items-end px-6 py-20 sm:px-12 lg:px-20">
          <div className="max-w-xl">
            <p className="font-display text-kicker uppercase tracking-wide">
              Self-determined
            </p>
            <h2 className="mt-2 font-display text-hero font-semibold uppercase leading-tight">
              Found a company. Teach others to found theirs.
            </h2>
            <p className="mt-5 text-body text-fg/90">
              Greece, Egypt, the river cities, and Rome show what happens when
              skill walks away. We train people to write a charter, start a
              company, lay a road, and scale a room — instead of waiting on a
              few owners. This is not a claim to own Los Angeles. It is a
              school for people who will found their own houses.
            </p>
          </div>
        </div>
      </section>
      <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">
          What the house is for
        </p>
        <h2 className="mt-2 max-w-3xl font-display text-hero font-semibold uppercase">
          A culture center. A charter. A guide. Rooms people pay to enter.
        </h2>
        <div className="mt-12 grid gap-10 lg:grid-cols-2">
          {houseOffers.map((item) => (
            <div key={item.name} className="border-t border-line pt-6">
              <h3 className="font-display text-2xl font-semibold uppercase">{item.name}</h3>
              <p className="mt-3 text-sm leading-body text-muted">{item.body}</p>
            </div>
          ))}
        </div>
      </section>
      <section className="relative min-h-[80dvh]">
        <img src="/images/page-mind.jpg" alt="" className="absolute inset-0 h-full w-full object-cover" />
        <div className="hero-scrim absolute inset-0" />
        <div className="relative z-10 flex min-h-[80dvh] items-end px-6 py-20 sm:px-12 lg:px-20">
          <div className="max-w-xl">
            <p className="font-display text-kicker uppercase tracking-wide">
              The guide
            </p>
            <h2 className="mt-2 font-display text-hero font-semibold uppercase leading-tight">
              Each person may have an AGI tutor. You can refuse it.
            </h2>
            <p className="mt-5 text-body text-fg/90">
              AI now is a machine that does one kind of job. AGI next is a
              machine that can learn many jobs — school, craft, a company. It
              can keep a person on the work when feelings drift. It does not
              own the person. It does not make the last decision. Superintelligence
              after that is a little brother that may keep the hours when flesh
              cannot. Humans still say yes or no.
            </p>
          </div>
        </div>
      </section>
      <section className="relative min-h-[80dvh]">
        <img src="/images/page-ops.jpg" alt="" className="absolute inset-0 h-full w-full object-cover" />
        <div className="hero-scrim absolute inset-0" />
        <div className="relative z-10 flex min-h-[80dvh] items-end px-6 py-20 sm:px-12 lg:px-20">
          <div className="max-w-xl">
            <p className="font-display text-kicker uppercase tracking-wide">
              {genetrix.kicker}
            </p>
            <h2 className="mt-2 font-display text-hero font-semibold uppercase leading-tight">
              {genetrix.title}
            </h2>
            <p className="mt-5 text-body text-fg/90">{genetrix.body}</p>
          </div>
        </div>
      </section>
      <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">
          Campus credit
        </p>
        <h2 className="mt-2 max-w-3xl font-display text-hero font-semibold uppercase">
          Track effort. Do not replace the dollar. Do not sell the person.
        </h2>
        <div className="mt-12 grid gap-10 lg:grid-cols-2">
          {merit.map((item) => (
            <div key={item.title} className="border-t border-line pt-6">
              <h3 className="font-display text-2xl font-semibold uppercase">{item.title}</h3>
              <p className="mt-3 text-sm leading-body text-muted">{item.body}</p>
            </div>
          ))}
        </div>
      </section>
      <section className="relative min-h-[80dvh]">
        <img src="/images/page-campus.jpg" alt="" className="absolute inset-0 h-full w-full object-cover" />
        <div className="hero-scrim absolute inset-0" />
        <div className="relative z-10 flex min-h-[80dvh] items-end px-6 py-20 sm:px-12 lg:px-20">
          <div className="max-w-xl">
            <p className="font-display text-kicker uppercase tracking-wide">
              Hospitality
            </p>
            <h2 className="mt-2 font-display text-hero font-semibold uppercase leading-tight">
              Restaurants. Bars. Hotels. Farms. Lodging. Nights.
            </h2>
            <p className="mt-5 text-body text-fg/90">
              Live rooms still sell when robot hours go cheap. Campus companies
              run food, drink, stay, farms, licensed entertainment, and tropical
              analog lodging — including sites under local law in the
              Philippines — and donate up. That funds the school. Beautiful
              people with a craft skip the wrong job by having a booked day —
              not by pairing for rent, and not by a genetic door. We do not own
              cities.
            </p>
          </div>
        </div>
      </section>
      <section className="relative min-h-[70dvh]">
        <img src="/images/hero-lillith.jpg" alt="" className="absolute inset-0 h-full w-full object-cover" />
        <div className="hero-scrim absolute inset-0" />
        <div className="relative z-10 flex min-h-[70dvh] items-end px-6 py-16 sm:px-12 lg:px-20">
          <div className="max-w-xl">
            <p className="font-display text-kicker uppercase tracking-wide">Seroptics</p>
            <h2 className="mt-2 font-display text-hero font-semibold uppercase leading-tight">
              Image as craft. Old-world clothing. Adult and contracted.
            </h2>
            <p className="mt-5 text-body text-fg/90">
              High fashion and photographic work. A runway of restored making.
              Atmosphere for brands. Files included. No racial filter, no
              breeding thesis, no forced pairing for rent. They work. They keep
              the art. Minors are not in this chapter.
            </p>
            <div className="mt-8 flex flex-wrap gap-3">
              <OutlineLink to="/rights">Bill of Rights</OutlineLink>
              <OutlineLink to="/lillith">Lillith</OutlineLink>
              <OutlineLink to="/island">Island</OutlineLink>
              <OutlineLink to="/human-work">Human Work</OutlineLink>
            </div>
          </div>
        </div>
      </section>
      <ChapterNext current="/house" />
    </article>
  );
}