"use client";

import { motion } from "framer-motion";
import { steps } from "@/constants";

export default function Process() {
  return (
    <section 
      id="process" 
      // Added 'relative' to contain the absolute glow layer
      className="relative scroll-mt-24 py-24 sm:py-28"
      style={{
        backgroundImage:
          "radial-gradient(rgba(11, 31, 69, 0.40) 1.5px, transparent 1.5px)",
        backgroundSize: "28px 28px",
      }}
    >
      {/* Soft glow so content stays readable over the dot grid */}
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 z-0"
        style={{
          background:
            "radial-gradient(ellipse 70% 60% at center, rgba(238, 242, 248, 0.9) 0%, rgba(238, 242, 248, 0.55) 55%, transparent 100%)",
        }}
      />

      {/* Added 'relative z-10' to ensure content sits above the background layers */}
      <div className="container-x relative z-10">
        {/* Header with reveal animation */}
        <motion.div
          className="max-w-2xl"
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-100px" }}
          transition={{ duration: 0.8, ease: [0.25, 0.1, 0.25, 1] }}
        >
          <motion.p
            className="eyebrow"
            initial={{ opacity: 0, x: -20 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.2 }}
          >
            How we work
          </motion.p>
          <h2 className="mt-4 text-3xl font-extrabold leading-tight sm:text-4xl">
            From requirement to runway — a disciplined path.
          </h2>
          <motion.div
            className="heading-rule"
            initial={{ scaleX: 0 }}
            whileInView={{ scaleX: 1 }}
            viewport={{ once: true }}
            transition={{ delay: 0.3, duration: 0.6 }}
          />
          <motion.p
            className="mt-6 text-lg leading-relaxed text-navy-600"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.4 }}
          >
            A clear, repeatable process that de-risks complex deployments and
            keeps every stakeholder aligned from day one.
          </motion.p>
        </motion.div>

        {/* Timeline with animated connector and staggered reveals */}
        <ol className="relative mt-14 grid gap-10 lg:grid-cols-4 lg:gap-6">
          {/* Animated horizontal connector (desktop) */}
          <motion.span
            aria-hidden="true"
            className="absolute left-0 right-0 top-7 hidden h-px bg-navy-100 lg:block"
            initial={{ scaleX: 0 }}
            whileInView={{ scaleX: 1 }}
            viewport={{ once: true }}
            transition={{ delay: 0.5, duration: 0.8 }}
            style={{ originX: 0 }}
          />
          {steps.map((step, i) => (
            <motion.li
              key={step.title}
              className="relative flex flex-col items-center text-center lg:items-start lg:text-left"
              initial={{ opacity: 0, y: 30, scale: 0.9 }}
              whileInView={{
                opacity: 1,
                y: 0,
                scale: 1,
                transition: {
                  duration: 0.6,
                  delay: 0.2 + i * 0.15,
                  ease: [0.25, 0.1, 0.25, 1]
                }
              }}
              viewport={{ once: true, margin: "-50px" }}
              transition={{ duration: 0.3, ease: [0.25, 0.1, 0.25, 1] }}
              whileHover={{ y: -4 }}
            >
              <motion.div
                className="z-10 flex h-14 w-14 items-center justify-center rounded-full bg-gold text-lg font-extrabold text-navy ring-4 ring-white shadow-md"
                whileHover={{
                  scale: 1.1,
                  rotate: [0, -5, 5, -5, 0],
                  transition: {
                    scale: { type: "spring", stiffness: 500, damping: 25, delay: 0 },
                    rotate: { duration: 0.5, delay: 0 }
                  }
                }}
              >
                {String(i + 1).padStart(2, "0")}
              </motion.div>
              <motion.h3
                className="mt-5 text-lg font-bold text-navy"
                whileHover={{ x: 4, color: "#c9a24b" }}
                transition={{ duration: 0.2 }}
              >
                {step.title}
              </motion.h3>
              <motion.p
                className="mt-2 text-sm leading-relaxed text-navy-500"
                initial={{ opacity: 0 }}
                whileInView={{ opacity: 1 }}
                viewport={{ once: true }}
                transition={{ delay: 0.4 + i * 0.15 }}
              >
                {step.desc}
              </motion.p>
            </motion.li>
          ))}
        </ol>
      </div>
    </section>
  );
}