import { SectionHeading } from "@/components/shared/SectionHeading";
import { ArrowLeft, ArrowRight } from "lucide-react";

export function HowItWorksSection() {
  const steps = [
    {
      number: "01",
      title: "Discover & Diagnose",
      description:
        "We assess your systems, processes, and goals to identify where technology can deliver the highest business value.",
    },
    {
      number: "02",
      title: "Design",
      description:
        "We architect a focused solution that fits your existing landscape, balancing cost, scale, and time to value.",
    },
    {
      number: "03",
      title: "Build & Integrate",
      description:
        "Our engineering teams build, integrate, and test — connecting new capabilities to the systems you already run.",
    },
    {
      number: "04",
      title: "Deploy & Optimize",
      description:
        "We deploy with confidence and keep improving through monitoring, support, and continuous optimization.",
    },
  ];

  return (
    <section className="bg-white px-[20px] py-[60px] md:py-[100px]">
      <div className="mx-auto max-w-[1260px]">
        <div className="flex flex-col md:flex-row md:items-end justify-between gap-[30px] mb-[60px]">
          <SectionHeading
            tag="how it works"
            title="A transparent path from idea to measurable impact"
            titleClassName="max-w-[700px] text-tenext-dark"
          />
          <div className="flex gap-[15px]">
            <button className="flex h-[50px] w-[50px] items-center justify-center rounded-full border border-tenext-card-border text-tenext-dark transition-colors hover:bg-tenext-card-border">
              <ArrowLeft size={20} />
            </button>
            <button className="flex h-[50px] w-[50px] items-center justify-center rounded-full border border-tenext-card-border text-tenext-dark transition-colors hover:bg-tenext-card-border">
              <ArrowRight size={20} />
            </button>
          </div>
        </div>

        <div className="flex flex-col">
          {steps.map((step, index) => (
            <div key={index} className="flex flex-col">
              <div className="flex flex-wrap items-center gap-[15px] rounded-[15px] bg-gradient-to-r from-tenext-blue to-tenext-purple-start px-[25px] py-[14px] text-white">
                <span className="text-[14px] font-bold">{step.number}</span>
                <span className="text-[18px] font-bold font-[var(--font-sora)]">
                  {step.title}
                </span>
              </div>
              <p className="mt-[20px] mb-[25px] max-w-[720px] text-[16px] leading-[1.6] text-tenext-text-muted">
                {step.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}