import Image from "next/image";
import SectionTitle from "./SectionTitle";

interface Step {
  title: string;
  icon: string;
  description: string;
}

const steps: Step[] = [
  {
    title: "Create Your Account",
    icon: "/images/account.svg",
    description: "Register in seconds and access your dashboard instantly.",
  },
  {
    title: "Credits",
    icon: "/images/subscribe.svg",
    description: "Buy access securely. Your payment info is always protected.",
  },
  {
    title: "Receive Your Unique Key",
    icon: "/images/key.svg",
    description:
      "After payment, a unique access key is generated automatically.",
  },
  {
    title: "Analyze Images Instantly",
    icon: "/images/analyze-images.svg",
    description:
      "Get real-time AI analysis wherever AI Analyzer is supported.",
  },
];

export default function StepsSection() {
  return (
    <section className="py-8 md:py-12 2xl:py-section">
      <div className="container-k">
        <SectionTitle
          badge="How It Works"
          title={
            'Start Detecting AI Images <span class="text-gradient">in 4 Simple Steps</span>'
          }
          className="!max-w-3xl"
        >
          Create an account, activate your access, and analyze images online.
        </SectionTitle>

        <div className="relative mt-8 grid gap-4 sm:mt-10 sm:grid-cols-2 md:mt-12 lg:mt-15 xl:grid-cols-4 xl:gap-8">
          {steps.map((step, index) => (
            <div key={step.title} className="relative">
              {index !== steps.length - 1 && (
                <div className="absolute left-full top-1/2 z-10 -ms-1 hidden -translate-y-1/2 items-center gap-1 xl:flex">
                  <span className="gradient1 h-2.5 w-2.5 rounded-full" />
                  <span className="h-0.5 w-2.5 rounded-full bg-[#4A73D7]" />
                  <span className="h-0.5 w-1.5 rounded-full bg-[#58ADE7]" />
                </div>
              )}

              <div className="glass-card glass-card-hover group h-full rounded-3xl p-5 transition-all duration-300 sm:p-6">
                <div className="step-icon-circle shadow-icon mb-5 sm:mb-6">
                  <Image
                    src={step.icon}
                    alt={step.title}
                    width={26}
                    height={26}
                    className="h-[26px] w-[26px] object-contain"
                  />
                </div>

                <h3 className="font-body text-lg font-medium leading-7 text-heading sm:text-xl">
                  {step.title}
                </h3>

                <p className="mt-2.5 text-base leading-[140%] text-text sm:text-lg lg:text-xl">
                  {step.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}