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

export function HowItWorksSection() {
  const steps = [
    {
      number: "01",
      title: "Neurons and Layers",
      description:
        "A neural network consists of interconnected nodes called neurons. Neurons are organized into layers.",
    },
    {
      number: "02",
      title: "Activation Function",
      description:
        "Each neuron applies an activation function to the weighted sum of its inputs and produces an output",
    },
    {
      number: "03",
      title: "Feedforward Process",
      description:
        "The inputs are multiplied by their respective weights, summed up, and passed through the activation function.",
    },
    {
      number: "04",
      title: "Backpropagation",
      description:
        "The inputs are multiplied by their respective weights, summed up, and passed through the activation function.",
    },
  ];

  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="Neural networks are a fundamental component of Artificial Intelligence (AI) systems"
            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>
  );
}