import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { OutlineLink } from "@/components/outline-button";
import { PageHero } from "@/components/page-hero";
import { rights } from "@/lib/content";
import { cn } from "@/lib/utils";

export const Route = createFileRoute("/rights")({ component: Rights });

function Rights() {
  const [checked, setChecked] = useState<Record<string, boolean>>({});
  const count = rights.filter((r) => checked[r.title]).length;

  return (
    <article>
      <PageHero
        kicker="Talent Bill of Rights"
        name="Rights"
        headline={"We do not sell the person.\nWe employ the craft."}
        lede="Adult artists who choose this house get safety, pay, files, health access, and a path that does not require a private sponsor. Own the stack the talent actually needs — booking, files, counsel, set, optional housing, health referral, and a Foundation that cannot be raided by a promoter."
        image="/images/page-rights.jpg"
      />
      <section id="overview" className="bg-bg px-6 py-20 sm:px-12 lg:px-20">
        <div className="mb-10 flex flex-wrap items-end justify-between gap-4">
          <div>
            <p className="font-display text-kicker uppercase tracking-wide text-muted">
              The stack
            </p>
            <h2 className="mt-2 font-display text-hero font-semibold uppercase">
              Check the house
            </h2>
          </div>
          <p className="font-display text-sm uppercase tracking-wide text-muted">
            {String(count).padStart(2, "0")} / {String(rights.length).padStart(2, "0")} affirmed
          </p>
        </div>
        <ul className="divide-y divide-line border-y border-line">
          {rights.map((item) => {
            const on = Boolean(checked[item.title]);
            return (
              <li key={item.title}>
                <button
                  type="button"
                  onClick={() =>
                    setChecked((prev) => ({ ...prev, [item.title]: !prev[item.title] }))
                  }
                  className="flex w-full items-start gap-5 py-6 text-left"
                >
                  <span
                    className={cn(
                      "mt-1 grid size-5 shrink-0 place-items-center border-2 border-fg",
                      on && "bg-fg",
                    )}
                    aria-hidden
                  >
                    {on ? (
                      <span className="block size-2 bg-bg" />
                    ) : null}
                  </span>
                  <span>
                    <span className="block font-display text-xl font-semibold uppercase tracking-hero">
                      {item.title}
                    </span>
                    <span className="mt-2 block max-w-2xl text-sm leading-body text-muted">
                      {item.body}
                    </span>
                  </span>
                </button>
              </li>
            );
          })}
        </ul>
        <p className="mt-10 max-w-2xl text-sm text-muted">
          New York had to pass a Fashion Workers Act because the old stack did not
          protect models. California’s Talent Agencies Act is already in Labor
          Commissioner fights. This page is the house rule, not a moodboard.
        </p>
        <div className="mt-10 flex flex-wrap gap-3">
          <OutlineLink to="/contact">Ask for the contract</OutlineLink>
          <OutlineLink to="/lillith">Book a Saturday</OutlineLink>
        </div>
      </section>
    </article>
  );
}