---
import Card from '@@/components/ui/Card.astro';
import image1 from '@/assets/placeholder.png';
import image2 from '@/assets/placeholder.png';
import image3 from '@/assets/placeholder.png';
import image4 from '@/assets/placeholder.png';
---

<section class="py-24 sm:py-32" data-scheme="shift">
  <div class="container">
    <div class="mb-10 text-center">
      <div
        class="rounded-card mb-4 inline-flex items-center gap-2 px-4 py-2 text-sm"
        data-scheme="shift"
      >
        <span class="bg-accent h-2 w-2 rounded-full"></span>
        Deploy faster
      </div>
      <h2 class="h2 mb-4">
        Everything you need to <span class="sp-emphasis">deploy</span> your app
      </h2>
      <p class="text-fg-sub mx-auto max-w-3xl text-lg md:text-xl">
        Modern workflow, integrations, security, and performance—ready to ship
      </p>
    </div>

    <!-- Two columns; right column shifted down. Ensures equal horizontal/vertical gaps. -->
    <div class="mt-10 grid items-stretch gap-6 sm:mt-16 lg:grid-cols-2">
      <!-- Left column -->
      <div class="flex flex-col gap-6">
        <div class="js-equal-card flex">
          <Card className="shadow-8 h-full w-full flex-1 lg:rounded-2xl">
            <div class="w-full">
              <img
                src={image1.src}
                width={image1.width}
                height={image1.height}
                alt=""
                class="w-full object-cover"
                style="aspect-ratio: 4/3;"
              />
            </div>
            <div class="p-4 md:p-6">
              <h3 class="typography-ui-12-regular color-text-secondary">
                Direct editing
              </h3>
              <p class="text-fg-sub mt-2 max-w-[42rem]">
                Drag-and-drop, rearrange, and do more with elements directly in
                the editor.
              </p>
            </div>
          </Card>
        </div>

        <div class="js-equal-card flex">
          <Card className="shadow-8 h-full w-full flex-1 lg:rounded-2xl">
            <div class="w-full">
              <img
                src={image2.src}
                width={image2.width}
                height={image2.height}
                alt=""
                class="w-full object-cover"
                style="aspect-ratio: 4/3;"
              />
            </div>
            <div class="p-4 md:p-6">
              <h3 class="typography-ui-12-regular color-text-secondary">
                Components
              </h3>
              <p class="text-fg-sub mt-2 max-w-[42rem]">
                Customize reusable components that you can swap-out across
                websites.
              </p>
            </div>
          </Card>
        </div>
      </div>

      <!-- Right column (shifted down more) -->
      <div class="flex flex-col gap-6 lg:mt-24">
        <div class="js-equal-card flex">
          <Card className="shadow-8 h-full w-full flex-1 lg:rounded-2xl">
            <div class="w-full">
              <img
                src={image3.src}
                width={image3.width}
                height={image3.height}
                alt=""
                class="w-full object-cover"
                style="aspect-ratio: 4/3;"
              />
            </div>
            <div class="p-4 md:p-6">
              <h3 class="typography-ui-12-regular color-text-secondary">
                Brand compliance
              </h3>
              <p class="text-fg-sub mt-2 max-w-[42rem]">
                Make your fonts, colors, and styles all speak the same language.
              </p>
            </div>
          </Card>
        </div>

        <div class="js-equal-card flex">
          <Card className="shadow-8 h-full w-full flex-1 lg:rounded-2xl">
            <div class="w-full">
              <img
                src={image4.src}
                width={image4.width}
                height={image4.height}
                alt=""
                class="w-full object-cover"
                style="aspect-ratio: 4/3;"
              />
            </div>
            <div class="p-4 md:p-6">
              <h3 class="typography-ui-12-regular color-text-secondary">
                Layers
              </h3>
              <p class="text-fg-sub mt-2 max-w-[42rem]">
                Select elements with precision and control.
              </p>
            </div>
          </Card>
        </div>
      </div>
    </div>
  </div>
</section>

<script>
  const section =
    document.currentScript && document.currentScript.previousElementSibling;
  const syncHeights = () => {
    const wrappers = document.querySelectorAll(".js-equal-card");
    let max = 0;
    wrappers.forEach((w) => {
      const card = w.querySelector("[data-type]");
      if (card) {
        (card as HTMLElement).style.height = "auto";
        const h = (card as HTMLElement).offsetHeight;
        if (h > max) max = h;
      }
    });
    wrappers.forEach((w) => {
      const card = w.querySelector("[data-type]");
      if (card) (card as HTMLElement).style.height = max + "px";
    });
  };
  window.addEventListener("load", syncHeights, { once: true });
  window.addEventListener("resize", () => {
    window.requestAnimationFrame(syncHeights);
  });
</script>