Agency: Studio

"use client";

import { Avatar } from "../../avatar/avatar";
import { studio } from "./content-studio";
import { ArrowLink, COLUMN, PageHead, Reveal, Section } from "./kit";

/**
 * The studio page's own sections, /studio: what Tessera is, the people with their initials, and
 * how a project runs. The page goes on with the home page's clients and numbers, then a line to
 * the open roles.
 */
export function Studio() {
  return (
    <>
      <div className={`${COLUMN} pt-section-sm`}>
        <PageHead title={studio.title} lead={studio.lead} />
      </div>

      <Section id="people" label={studio.people.label} className="flex flex-col gap-group">
        <Reveal className="flex max-w-2xl flex-col gap-pad-base">
          <p className="font-display text-display-3xl font-medium tracking-display text-balance text-text">{studio.people.title}</p>
          <p className="text-ui-md text-pretty text-text-secondary">{studio.people.body}</p>
        </Reveal>
        <div className="flex flex-col gap-pad-lg">
          <ul className="grid grid-cols-1 gap-x-tiles gap-y-pad-md min-[480px]:grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
            {studio.people.items.map((person, i) => (
              <li key={person.name}>
                <Reveal index={Math.min(i, 4)} className="flex items-center gap-in border-t border-line-subtle pt-in">
                  <Avatar name={person.name} size="xl" />
                  <div className="flex min-w-0 flex-col">
                    <p className="text-ui-md font-medium text-text">{person.name}</p>
                    <p className="text-ui text-text-secondary">{person.role}</p>
                  </div>
                </Reveal>
              </li>
            ))}
          </ul>
          <p className="text-ui text-text-muted">{studio.people.more}</p>
        </div>
      </Section>

      <Section id="approach" label={studio.approach.label} className="grid gap-group lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)] lg:gap-group-lg">
        <Reveal>
          <p className="max-w-md font-display text-display-3xl font-medium tracking-display text-balance text-text">{studio.approach.title}</p>
        </Reveal>
        <ol className="grid gap-x-tiles gap-y-pad-lg sm:grid-cols-2">
          {studio.approach.items.map((item, i) => (
            <li key={item.title}>
              <Reveal index={i} className="flex flex-col gap-1.5 border-t border-line-subtle pt-in">
                <span className="text-ui-sm text-text-muted tabular-nums">{String(i + 1).padStart(2, "0")}</span>
                <h3 className="text-display-xl font-medium text-text">{item.title}</h3>
                <p className="text-ui-md text-pretty text-text-secondary">{item.body}</p>
              </Reveal>
            </li>
          ))}
        </ol>
      </Section>
    </>
  );
}

/** A line under the clients: the studio is hiring, and the way to the roles. */
export function StudioCareers() {
  return (
    <div className={`${COLUMN} pb-group`}>
      <Reveal className="flex flex-wrap items-baseline justify-between gap-in border-t border-line-subtle pt-pad-md">
        <p className="text-display-xl font-medium text-text">
          {studio.careers.title} <span className="text-text-secondary">{studio.careers.body}</span>
        </p>
        <ArrowLink href={studio.careers.link.href}>{studio.careers.link.label}</ArrowLink>
      </Reveal>
    </div>
  );
}