import Image from "next/image";

const leftSteps = [
  "Discovery & <br/>Strategy",
  "Product & <br/>Experience Design",
  "Agile Development <br/>(Sprint-Based)",
];

const rightSteps = [
  "Testing, Security & <br/>Performance",
  "Launch & Growth <br/>Enablement",
  "Scale, Optimize & <br/>Evolve",
];

function ConnectorLines() {
  return (
            
    <svg width="439" height="296" viewBox="0 0 439 296" fill="none" xmlns="http://www.w3.org/2000/svg" className="hidden lg:block absolute -inset-[180px] w-[600px] h-[360px] pointer-events-none left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
      <path d="M0.146447 3.32858C-0.0488155 3.52384 -0.0488155 3.84042 0.146447 4.03568L3.32843 7.21766C3.52369 7.41293 3.84027 7.41293 4.03553 7.21766C4.2308 7.0224 4.2308 6.70582 4.03553 6.51056L1.20711 3.68213L4.03553 0.853702C4.2308 0.65844 4.2308 0.341857 4.03553 0.146595C3.84027 -0.0486672 3.52369 -0.0486672 3.32843 0.146595L0.146447 3.32858ZM130.445 152.182C130.721 152.182 130.945 151.958 130.945 151.682C130.945 151.405 130.721 151.182 130.445 151.182V151.682V152.182ZM0.5 3.68213V4.18213C20.9964 4.18213 34.1456 13.3293 43.6642 27.0915C53.2099 40.8928 59.0896 59.3139 64.9963 77.8338C70.8902 96.3138 76.8111 114.893 86.4587 128.841C96.1334 142.829 109.57 152.182 130.445 152.182V151.682V151.182C109.949 151.182 96.7997 142.034 87.2811 128.272C77.7354 114.471 71.8557 96.0498 65.949 77.5299C60.0551 59.05 54.1342 40.4712 44.4866 26.5226C34.812 12.5348 21.3751 3.18213 0.5 3.18213V3.68213Z" fill="white" fillOpacity="0.5"/>
      <path d="M438.854 4.03568C439.05 3.84042 439.05 3.52384 438.854 3.32858L435.672 0.146595C435.477 -0.0486672 435.161 -0.0486672 434.965 0.146595C434.77 0.341857 434.77 0.65844 434.965 0.853702L437.794 3.68213L434.965 6.51056C434.77 6.70582 434.77 7.0224 434.965 7.21766C435.161 7.41293 435.477 7.41293 435.672 7.21766L438.854 4.03568ZM438.501 3.68213V3.18213C417.238 3.18213 403.368 12.5295 393.237 26.5137C383.132 40.4607 376.732 59.0383 370.362 77.5189C363.978 96.0381 357.623 114.46 347.622 128.263C337.649 142.029 324.062 151.182 303.168 151.182V151.682V152.182C324.431 152.182 338.3 142.834 348.432 128.85C358.537 114.903 364.936 96.3254 371.307 77.8448C377.691 59.3256 384.046 40.9033 394.047 27.1004C404.02 13.3347 417.606 4.18213 438.501 4.18213V3.68213Z" fill="white" fillOpacity="0.5"/>
      <path d="M0.146447 291.329C-0.0488155 291.524 -0.0488155 291.84 0.146447 292.036L3.32843 295.218C3.52369 295.413 3.84027 295.413 4.03553 295.218C4.2308 295.022 4.2308 294.706 4.03553 294.511L1.20711 291.682L4.03553 288.854C4.2308 288.658 4.2308 288.342 4.03553 288.147C3.84027 287.951 3.52369 287.951 3.32843 288.147L0.146447 291.329ZM130.445 152.182C130.721 152.182 130.945 151.958 130.945 151.682C130.945 151.405 130.721 151.182 130.445 151.182V151.682V152.182ZM0.5 291.682V292.182C20.7477 292.182 34.0264 283.337 43.78 270.104C53.5068 256.907 59.7402 239.33 65.9439 221.849C72.1611 204.33 78.3487 186.907 87.9703 173.853C97.5651 160.836 110.562 152.182 130.445 152.182V151.682V151.182C110.198 151.182 96.9189 160.027 87.1653 173.26C77.4385 186.457 71.2052 204.034 65.0014 221.515C58.7842 239.034 52.5966 256.457 42.975 269.51C33.3802 282.528 20.383 291.182 0.5 291.182V291.682Z" fill="white" fillOpacity="0.5"/>
      <path d="M438.854 292.036C439.05 291.84 439.05 291.524 438.854 291.329L435.672 288.147C435.477 287.951 435.161 287.951 434.965 288.147C434.77 288.342 434.77 288.658 434.965 288.854L437.794 291.682L434.965 294.511C434.77 294.706 434.77 295.022 434.965 295.218C435.161 295.413 435.477 295.413 435.672 295.218L438.854 292.036ZM438.501 291.682V291.182C418.208 291.182 404.771 282.523 394.722 269.502C384.648 256.446 377.99 239.022 371.302 221.504C364.627 204.022 357.921 186.446 347.738 173.251C337.529 160.022 323.815 151.182 303.168 151.182V151.682V152.182C323.461 152.182 336.898 160.841 346.946 173.862C357.021 186.918 363.679 204.342 370.367 221.86C377.042 239.342 383.748 256.918 393.931 270.113C404.14 283.342 417.854 292.182 438.501 292.182V291.682Z" fill="white" fillOpacity="0.5"/>
      <path d="M0.193322 151.329C-0.00194056 151.524 -0.00194054 151.84 0.193322 152.036L3.3753 155.218C3.57056 155.413 3.88715 155.413 4.08241 155.218C4.27767 155.022 4.27767 154.706 4.08241 154.511L1.25398 151.682L4.08241 148.854C4.27767 148.658 4.27767 148.342 4.08241 148.147C3.88715 147.951 3.57056 147.951 3.3753 148.147L0.193322 151.329ZM133.354 152.182C133.63 152.182 133.854 151.958 133.854 151.682C133.854 151.406 133.63 151.182 133.354 151.182L133.354 151.682L133.354 152.182ZM0.546875 151.682L0.546875 152.182L133.354 152.182L133.354 151.682L133.354 151.182L0.546875 151.182L0.546875 151.682Z" fill="white" fillOpacity="0.5"/>
      <path d="M304.75 151.182C304.474 151.182 304.25 151.406 304.25 151.682C304.25 151.958 304.474 152.182 304.75 152.182L304.75 151.682L304.75 151.182ZM438.808 152.036C439.003 151.84 439.003 151.524 438.808 151.329L435.626 148.147C435.431 147.951 435.114 147.951 434.919 148.147C434.724 148.342 434.724 148.658 434.919 148.854L437.747 151.682L434.919 154.511C434.724 154.706 434.724 155.022 434.919 155.218C435.114 155.413 435.431 155.413 435.626 155.218L438.808 152.036ZM304.75 151.682L304.75 152.182L438.454 152.182L438.454 151.682L438.454 151.182L304.75 151.182L304.75 151.682Z" fill="white" fillOpacity="0.5"/>
    </svg>
  );
}


export default function OurProcess() {
  return (
    <section className="relative overflow-hidden h-auto 2xl:h-[100vh]">

      {/* DARK SECTION */}
      <div className="relative bg-[#101010] pt-10 pb-10 lg:pt-10 lg:pb-32 lg:bg-[#F3F3F3] text-white h-auto 2xl:h-[100vh]">

        {/* BACKGROUND TEXTURE */}
        <Image
          src="/our-process.webp"
          alt="Process background"
          fill
          className="object-cover hidden lg:block"
        />

        {/* CONTENT */}
        <div className="relative z-10 container mx-auto px-4 text-center h-full">
          <div className="">
            <span className="text-lg font-medium text-white/50 lg:text-[#202020]/50 block mb-2">
              Our Process
            </span>

            <h2 className="text-2xl md:text-2xl font-medium text-white lg:text-[#202020] font-mono mb-4">
              Agile. Transparent. Built to Scale.
            </h2>

            <p className="text-[16px] md:text-lg font-medium text-white/70 lg:text-[#202020]/70 max-w-xl mx-auto">
              We follow an Agile-driven development and growth model designed for gaming platforms,
              where speed, performance, and continuous improvement are critical.
            </p>
          </div>

          {/* FLOW DIAGRAM */}
          <div className="relative mt-[60px] lg:mt-[300px] xl:mt-[300px] 2xl:mt-[300px] max-w-[1020px] mx-auto flex flex-col lg:flex-row items-center justify-center">

            {/* LEFT STEPS */}
            <div className="relative lg:absolute left-0 flex flex-col gap-8 lg:gap-[64px] mb-0 lg:mb-0 w-full lg:w-auto">
              {leftSteps.map((step, i) => (
                <ProcessBox key={i} index={i + 1} text={step} />
              ))}
            </div>

            {/* CENTER HUB */}
            <div className="hidden lg:block relative z-10 w-[160px] h-[160px] rounded-xl flex items-center justify-center">
              <Image
                src="/togwe-keyboard.png"
                alt="Process Core"
                width={200}
                height={200}
                className="w-full h-full"
              />
            </div>

            {/* RIGHT STEPS */}
            <div className="relative lg:absolute right-0 flex flex-col gap-8 lg:gap-[64px] mt-8 lg:mt-0 w-full lg:w-auto">
              {rightSteps.map((step, i) => (
                <ProcessBox key={i} index={i + 4} text={step} />
              ))}
            </div>
            {/* CONNECTOR LINES */}
            <ConnectorLines />
          </div>
        </div>
      </div>
    </section>
  );
}

function ProcessBox({ index, text }: { index: number; text: string }) {
  return (
    <div className="relative px-6 py-4 rounded-xl border border-white/50 max-w-full lg:max-w-[285px]">
      <p
        className="text-lg font-medium text-left process-steps-text"
        dangerouslySetInnerHTML={{
          __html: `${index}. ${text}`,
        }}
      />
    </div>
  );
}
