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

/**
 * EngagementModelsSection — the three ways enterprises work with Tenext.
 *
 * This slot held the template's SaaS pricing tiers. Tenext quotes
 * commercial terms per engagement, so no prices are published; each card
 * routes to the contact form instead.
 */
export function EngagementModelsSection() {
  return (
    <SectionContainer paddingY="lg">
      <PageContainer>
        <div className="mb-16 flex flex-col items-center justify-center text-center">
          <SectionHeading
            tag="engagement models"
            title="Ways to work with us"
            titleClassName="text-white max-w-[500px] text-center"
          />
        </div>

        <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
          {engagementModels.map((model) => (
            <div
              key={model.name}
              className="relative flex flex-col overflow-hidden rounded-[25px] border border-tenext-card-border bg-tenext-dark p-10 transition-colors hover:border-tenext-teal"
            >
              <h3
                className="mb-4 text-[24px] font-bold text-white"
                style={{ fontFamily: "var(--font-dm-sans)" }}
              >
                {model.name}
              </h3>
              <p className="mb-8 text-[15px] leading-[1.7] text-tenext-text-muted">
                {model.summary}
              </p>

              <ul className="mb-10 flex flex-col gap-4">
                {model.includes.map((item) => (
                  <li
                    key={item}
                    className="flex items-start gap-3 text-[15px] text-white"
                  >
                    <svg
                      width="18"
                      height="18"
                      viewBox="0 0 24 24"
                      fill="none"
                      className="mt-[3px] shrink-0 text-tenext-teal"
                      aria-hidden
                    >
                      <path
                        d="M20 6L9 17l-5-5"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      />
                    </svg>
                    {item}
                  </li>
                ))}
              </ul>

              <div className="mt-auto">
                <a
                  href="/contacts"
                  className="flex w-full items-center justify-center rounded-[12px] border border-tenext-card-border py-4 text-[16px] font-bold text-white transition-all hover:border-tenext-teal hover:text-tenext-teal"
                  style={{ fontFamily: "var(--font-sora)" }}
                >
                  Talk to an expert
                </a>
              </div>
            </div>
          ))}
        </div>
      </PageContainer>
    </SectionContainer>
  );
}