import { PageContainer } from "@/components/shared/PageContainer";
import { SectionContainer } from "@/components/shared/SectionContainer";
import { SectionHeading } from "@/components/shared/SectionHeading";
import { deliveryPrinciples } from "@/data/site-content";

/**
 * DeliveryPrinciplesSection — masonry grid of the commitments that keep
 * delivery predictable.
 *
 * Shared by: Home and Services.
 *
 * This slot held stock client testimonials in the original build. Tenext
 * does not publish named client quotes, so it presents how the company
 * works instead. If real, attributable testimonials become available,
 * this section is the place to reinstate them.
 */
export function DeliveryPrinciplesSection() {
  return (
    <SectionContainer paddingY="lg" className="bg-tenext-surface-muted">
      <PageContainer>
        <div className="mb-12 max-w-[650px]">
          <SectionHeading
            tag="how we work"
            title="The principles that keep delivery predictable"
            titleClassName="text-tenext-dark"
          />
        </div>

        <div className="columns-1 gap-6 sm:columns-2 lg:columns-4">
          {deliveryPrinciples.map((principle) => (
            <div
              key={principle.id}
              className="mb-6 break-inside-avoid rounded-[20px] bg-white p-8"
            >
              <h5
                className="mb-4 text-[18px] font-bold text-tenext-dark"
                style={{ fontFamily: "var(--font-dm-sans)" }}
              >
                {principle.title}
              </h5>
              <p className="text-[15px] leading-[1.7] text-tenext-text-muted">
                {principle.description}
              </p>
            </div>
          ))}
        </div>
      </PageContainer>
    </SectionContainer>
  );
}