Agency: Services

"use client";

import { Accordion, AccordionItem } from "../../accordion/accordion";
import { Badge } from "../../badge/badge";
import { services } from "./content";
import { ArrowLink, Reveal, Section } from "./kit";

/**
 * What the studio does: the claim and a line on the left, and the four services as an
 * accordion on the right, the first open, each with what it delivers as badges.
 */
export function Services() {
  return (
    <Section id="services" label={services.label} className="grid gap-group lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)] lg:gap-group-lg">
      <Reveal className="flex flex-col items-start gap-pad-base">
        <p className="max-w-md font-display text-display-3xl font-medium tracking-display text-balance text-text">{services.title}</p>
        <p className="max-w-md text-ui-md text-pretty text-text-secondary">{services.body}</p>
        <ArrowLink href={services.link.href} className="mt-in">
          {services.link.label}
        </ArrowLink>
      </Reveal>
      <Reveal index={1}>
        <Accordion defaultValue={[services.items[0].id]} className="border-y border-line-subtle">
          {services.items.map((s, i) => (
            <AccordionItem
              key={s.id}
              value={s.id}
              title={
                <span className="flex items-baseline gap-pad-base py-1">
                  <span className="w-6 shrink-0 text-ui-sm font-normal text-text-muted tabular-nums">{String(i + 1).padStart(2, "0")}</span>
                  <span className="text-display-xl font-medium">{s.title}</span>
                </span>
              }
            >
              <div className="flex flex-col gap-pad-base pb-pad-md pl-[calc(--spacing(6)+var(--spacing-pad-base))]">
                <p className="max-w-xl text-ui-md text-pretty text-text-secondary">{s.body}</p>
                <ul aria-label={`${s.title} includes`} className="flex flex-wrap gap-1.5">
                  {s.deliverables.map((d) => (
                    <li key={d}>
                      <Badge size="md">{d}</Badge>
                    </li>
                  ))}
                </ul>
              </div>
            </AccordionItem>
          ))}
        </Accordion>
      </Reveal>
    </Section>
  );
}