import { motion } from "framer-motion";

export default function DesignStageFlow() {
  const stages = [
    {
      title: "1. Problem Definition",
      desc: "Define need, constraints, drivers, and success criteria",
    },
    {
      title: "2. Concept & Options Analysis",
      desc: "Explore solutions, compare technologies, order-of-magnitude costs",
    },
    {
      title: "3. Feasibility Study",
      desc: "Technical + financial viability, go/no-go decision",
    },
    {
      title: "4. FEED (Front-End Engineering Design)",
      desc: "Define selected option, lock scope, prepare for tendering",
    },
    {
      title: "5. Detailed Design",
      desc: "Full engineering deliverables for construction (IFC)",
    },
    {
      title: "6. Construction & Commissioning",
      desc: "Build, install, test, and commission systems",
    },
    {
      title: "7. Operation & Optimisation",
      desc: "Performance tuning, analytics, continuous improvement",
    },
  ];

  return (
    <div className="min-h-screen bg-white p-10 flex flex-col items-center">
      <motion.h1
        initial={{ opacity: 0, y: -10 }}
        animate={{ opacity: 1, y: 0 }}
        className="text-3xl font-bold mb-10 text-center"
      >
        Engineering Design Lifecycle
      </motion.h1>

      <div className="relative w-full max-w-2xl">
        <div className="absolute left-1/2 top-0 bottom-0 w-1 bg-gray-200 -translate-x-1/2" />

        <div className="flex flex-col gap-10">
          {stages.map((stage, i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, x: i % 2 === 0 ? -30 : 30 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.4 }}
              className={`relative flex ${i % 2 === 0 ? "justify-start" : "justify-end"}`}
            >
              <div className="w-5 h-5 bg-black rounded-full absolute left-1/2 -translate-x-1/2 mt-3" />

              <div className="bg-gray-50 border border-gray-200 rounded-2xl p-5 shadow-sm w-80">
                <h2 className="text-lg font-semibold mb-2">{stage.title}</h2>
                <p className="text-sm text-gray-600">{stage.desc}</p>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </div>
  );
}