import { SectionContainer } from "@/components/shared/SectionContainer";
import { PageContainer } from "@/components/shared/PageContainer";
import { SectionHeading } from "@/components/shared/SectionHeading";
import { RevealOnView } from "@/components/shared/RevealOnView";
import { Icon } from "@/components/shared/Icon";
import { deliverySteps } from "@/data/about";

/** DeliveryModel — connected timeline: Discover → … → Support. */
export function DeliveryModel() {
  return (
    <SectionContainer paddingY="lg" className="bg-tenext-dark px-[20px]">
      <PageContainer>
        <SectionHeading
          tag="delivery model"
          title="A transparent path from idea to lasting impact"
          description="Every engagement moves through the same disciplined flow, so progress and cost stay visible at each step."
          titleClassName="text-white max-w-[720px]"
          descriptionClassName="max-w-[620px] text-tenext-text-muted"
          className="mb-[60px]"
        />

        <div className="relative grid grid-cols-1 gap-[20px] sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
          {/* Connecting line (desktop) */}
          <div className="pointer-events-none absolute left-0 right-0 top-[36px] hidden h-px bg-gradient-to-r from-tenext-teal/10 via-tenext-teal/40 to-tenext-teal/10 xl:block" />

          {deliverySteps.map((step, index) => (
            <RevealOnView key={step.title} delay={index * 90} className="relative">
              <div className="flex flex-col items-start gap-[16px]">
                <div className="relative z-10 flex h-[72px] w-[72px] items-center justify-center rounded-[20px] border border-white/10 bg-tenext-dark text-tenext-teal">
                  <Icon name={step.icon} className="h-[30px] w-[30px]" />
                  <span className="absolute -right-2 -top-2 flex h-[26px] w-[26px] items-center justify-center rounded-full bg-tenext-teal text-[12px] font-bold text-tenext-dark">
                    {index + 1}
                  </span>
                </div>
                <h3 className="font-[var(--font-sora)] text-[18px] font-bold text-white">
                  {step.title}
                </h3>
                <p className="text-[14px] leading-[1.65] text-tenext-text-muted">
                  {step.description}
                </p>
              </div>
            </RevealOnView>
          ))}
        </div>
      </PageContainer>
    </SectionContainer>
  );
}