import Image from "next/image";

export function StepsSection() {
  const steps = [
    {
      id: "01",
      category: "Organize",
      description: "Put projects, tasks, and files in one place",
    },
    {
      id: "02",
      category: "Align",
      description: "Meet and message with context",
    },
    {
      id: "03",
      category: "Optimize",
      description: "Track time, let AI follow up.",
    },
  ];

  return (
    <section
      id="steps-section"
      className="relative w-full flex flex-col items-center z-20 px-4 mt-[40px] mb-[120px]"
    >
      {/* Top Header Block (Text_1429_10886: w: 1010, h: 132, y: 0) */}
      <div className="relative w-full max-w-[1010px] flex flex-col items-center text-center z-20">
        {/* Glow Aura behind badge (Back_1429_10887: Ellipse 1578 & 1579) */}
        <div className="absolute -top-[50px] left-1/2 -translate-x-1/2 w-[180px] h-[180px] pointer-events-none -z-10">
          <div className="absolute inset-0 bg-[#001ac7] rounded-full blur-[100px] opacity-70" />
          <div className="absolute inset-[20px] bg-[#4e66ff] rounded-full blur-[50px] opacity-80" />
        </div>

        {/* Badge (3_1429_10892: w: 40, h: 40) */}
        <div className="relative w-[40px] h-[40px] mb-[24px] flex items-center justify-center flex-shrink-0">
          <Image
            src="/assets/images/steps_badge.svg"
            alt=""
            width={100}
            height={100}
            unoptimized
            className="w-[100px] h-[100px] max-w-none flex-shrink-0 pointer-events-none select-none"
          />
        </div>

        {/* Text Container (Text_Container_1429_10894: w: 964, h: 68, itemSpacing: 12) */}
        <div className="w-full flex flex-col items-center gap-[12px]">
          {/* Title (Title_1429_10895: 32px, Medium, #ffffff) */}
          <h2 className="text-white text-[32px] leading-[39px] font-medium tracking-tight text-center max-w-[740px]">
            Set up your smart management stack in 3 steps.
          </h2>

          {/* Subtitle (Subtitle_1429_10896: 14px, Regular, #6f829e) */}
          <p className="text-[#6f829e] text-[14px] leading-[17px] font-normal text-center max-w-[964px]">
            Projects, tasks, meetings, chat, files, and time in one connected desktop workspace, where AI reduces overhead and keeps everything in context.
          </p>
        </div>
      </div>

      {/* Steps Container (Steps_Container_1429_10897: w: 1216, h: 145, y: 212) */}
      <div className="w-full max-w-[1216px] mt-[60px] md:mt-[80px] flex flex-col md:flex-row items-center justify-between gap-4 md:gap-0 relative z-20">
        {steps.map((step, idx) => (
          <div key={step.id} className="contents">
            {/* Step Card (w: 389, h: 145, radius: 24, fill: rgba(8,15,26,0.5), stroke: rgba(255,255,255,0.12)) */}
            <div
              id={`step-card-${step.id}`}
              className="relative w-full md:w-[389px] h-[145px] rounded-[24px] bg-[#080f1a]/50 border border-white/[0.12] px-[32px] lg:px-[40px] py-[32px] flex items-center justify-between overflow-hidden backdrop-blur-[20px] shadow-[0_10px_30px_rgba(0,0,0,0.4)]"
            >
              {/* Internal Glow Effects (Ellipse 1071 & 1072) */}
              <div className="absolute -left-[20px] top-[20px] w-[82px] h-[77px] bg-[#004cff] rounded-full blur-[40px] opacity-40 pointer-events-none" />
              <div className="absolute -right-[20px] -bottom-[20px] w-[95px] h-[89px] bg-[#0149f3] rounded-full blur-[50px] opacity-40 pointer-events-none" />

              {/* Star Particle Constellation Overlay (stars) */}
              <div className="absolute inset-0 pointer-events-none opacity-70">
                <Image
                  src="/assets/images/step_card_stars.svg"
                  alt=""
                  fill
                  unoptimized
                  className="object-cover"
                />
              </div>

              {/* Left Column: Number + 3D Grid Perspective Mesh */}
              <div className="relative w-[36px] flex flex-col items-start justify-center flex-shrink-0 z-10">
                <span className="text-[#3d6fe5] text-[20px] leading-[24px] font-medium drop-shadow-[0_0_15px_#4b80ff]">
                  {step.id}
                </span>
                <div className="relative w-[87px] h-[45px] -ml-[30px] mt-[4px] pointer-events-none select-none opacity-80">
                  <Image
                    src="/assets/images/step_card_mesh.svg"
                    alt=""
                    width={87}
                    height={45}
                    unoptimized
                    className="w-full h-full object-contain"
                  />
                </div>
              </div>

              {/* Vertical Gradient Line Divider (Line 7: 1px x 81px) */}
              <div className="w-[1px] h-[81px] bg-gradient-to-b from-[#12141a] via-[#363b4d] to-[#12141a] flex-shrink-0 mx-[16px] z-10" />

              {/* Right Column: Title + Subtitle */}
              <div className="flex flex-col justify-center gap-[6px] flex-1 z-10">
                <span className="text-[#6f829e] text-[14px] leading-[17px] font-medium">
                  {step.category}
                </span>
                <span className="text-[#dae5ff] text-[18px] lg:text-[20px] leading-[24px] font-medium">
                  {step.description}
                </span>
              </div>
            </div>

            {/* Step Connector Chevron Button (Step_Container: w: 40, h: 40) */}
            {idx < steps.length - 1 && (
              <div className="hidden md:flex w-[40px] h-[40px] items-center justify-center flex-shrink-0 z-30 -mx-[20px] pointer-events-none select-none">
                <Image
                  src="/assets/images/step_arrow_btn.svg"
                  alt=""
                  width={100}
                  height={100}
                  unoptimized
                  className="w-[100px] h-[100px] max-w-none flex-shrink-0 pointer-events-none select-none"
                />
              </div>
            )}
          </div>
        ))}
      </div>

      {/* Bottom CTA Button Frame (Frame 2095586189: w: 129, h: 43, y: 437) */}
      <div className="relative mt-[60px] md:mt-[80px] flex items-center justify-center z-20">
        {/* Glow Aura behind button (Back: Ellipse 1578 & 1579) */}
        <div className="absolute -top-[30px] left-1/2 -translate-x-1/2 w-[220px] h-[120px] pointer-events-none -z-10 opacity-70">
          <Image
            src="/assets/images/steps_btn_glow.png"
            alt=""
            fill
            unoptimized
            className="object-contain"
          />
        </div>

        {/* Button (Button_1429_10910: w: 129, h: 44, radius: 12) */}
        <button
          type="button"
          id="steps-get-started-button"
          className="btn-primary-gradient w-[129px] h-[44px] rounded-[12px] px-[20px] py-[12px] flex items-center justify-center text-[16px] leading-[20px] font-normal text-white hover:brightness-110 active:scale-95 transition-all shadow-[0_0_25px_rgba(72,126,255,0.35)] cursor-pointer"
        >
          <span>Get Started</span>
        </button>
      </div>
    </section>
  );
}