import type { ServiceOffer } from "@/lib/site-content";

/**
 * "O que você recebe" e "Primeiro passo" da oferta. A lista é a mesma do cartão da home (`serviceOffers` em
 * lib/site-content.ts): a página repete o que o cartão prometeu. O primeiro passo é o da oferta, que termina como a frase
 * geral da home (`generalFirstStep`): uma conversa e, depois dela, escopo e proposta por escrito. Só as páginas que
 * explicam uma oferta mostram este bloco.
 */
export function ServiceDeliverables({
  offer,
}: {
  offer: Pick<ServiceOffer, "deliverables" | "firstStep">;
}) {
  return (
    <section className="ds-section" aria-labelledby="o-que-voce-recebe">
      <div className="ds-section-shell">
        <div className="ds-grid-2">
          <article className="ds-card">
            <h2 id="o-que-voce-recebe" className="ds-card-title !mt-0">
              O que você recebe
            </h2>
            <ul className="ds-list space-y-sp-2">
              {offer.deliverables.map((item) => (
                <li key={item}>{item}</li>
              ))}
            </ul>
          </article>

          <article className="ds-card">
            <h2 className="ds-card-title !mt-0">Primeiro passo</h2>
            <p className="ds-copy">{offer.firstStep}</p>
          </article>
        </div>
      </div>
    </section>
  );
}