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: "Activation Function",
      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
            subtitle="how it works"
            title="Neural networks are a fundamental component of Artificial Intelligence (AI) systems"
            titleClassName="max-w-[700px] text-aiero-dark"
          />
          <div className="flex gap-[15px]">
            <button className="flex h-[50px] w-[50px] items-center justify-center rounded-full border border-aiero-card-border text-aiero-dark transition-colors hover:bg-aiero-card-border">
              <ArrowLeft size={20} />
            </button>
            <button className="flex h-[50px] w-[50px] items-center justify-center rounded-full border border-aiero-card-border text-aiero-dark transition-colors hover:bg-aiero-card-border">
              <ArrowRight size={20} />
            </button>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[30px]">
          {steps.map((step, index) => (
            <div key={index} className="flex flex-col border-t border-aiero-card-border pt-[30px]">
              <div className="text-[50px] font-bold text-transparent font-[var(--font-sora)]" style={{ WebkitTextStroke: "1px #3F3F3F" }}>
                {step.number}
              </div>
              <h6 className="mt-[20px] mb-[15px] text-[20px] font-bold text-aiero-dark font-[var(--font-sora)]">
                {step.title}
              </h6>
              <p className="text-[16px] leading-[1.6] text-aiero-text-muted">
                {step.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
