---
import BackgroundEffect from '@@/components/ui/BackgroundEffect.astro';
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="relative">
  <BackgroundEffect
    gradientType="var(--gradient-top-fade-linear)"
    patternType="none"
    noiseType="none"
  />

  <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>
        Features
      </div>
      <h2 class="h2 mb-4">
        Pablo is your new best friend
      </h2>
      <p
        class="text-fg-sub mx-auto max-w-3xl text-lg md:text-xl"

      >
        Pablo is a platform that allows you to create your site in minutes. No
        coding required – launch your professional site in minutes.
      </p>
    </div>

    <!-- Bento Grid Layout -->
    <div class="flex flex-col gap-5">
      <!-- Top: Integration Banner -->
      <Card size="md" className="min-h-[200px] overflow-hidden">
        <div
          class="flex flex-col gap-6 p-5 md:flex-row md:items-center md:justify-between md:gap-8 md:p-7"
        >
          <div class="flex-shrink-0">
            <h3>
              Seamless Integration
            </h3>
            <p
              class="text-fg-sub mt-2 max-w-[400px]"

            >
              Works with all your favorite tools and platforms out of the box.
            </p>
          </div>
          <div class="w-full p-4 pb-0 md:max-w-[50%] md:flex-shrink">
            <img
              src={image1.src}
              alt="Pablo Logo"
              class="w-full"
              width={image1.width}
              height={image1.height}
            />
          </div>
        </div>
      </Card>

      <!-- Bottom: 3 Feature Cards -->
      <div class="grid gap-5 md:grid-cols-3">
        <Card size="md" className="flex h-full flex-col">
          <div class="w-full p-4 pb-0">
            <img
              src={image2.src}
              alt="Pablo Logo"
              class="w-full"
              width={image2.width}
              height={image2.height}
            />
          </div>
          <div class="flex flex-col gap-2 p-5">
            <h3>
              Real-time Synchronization
            </h3>
            <p class="text-fg-sub">
              Connect your systems to access real-time data ranging from user
              details to active subscriptions and beyond.
            </p>
          </div>
        </Card>

        <Card size="md" className="flex h-full flex-col">
          <div class="w-full p-4 pb-0">
            <img
              src={image3.src}
              alt="Pablo Logo"
              class="w-full"
              width={image3.width}
              height={image3.height}
            />
          </div>
          <div class="flex flex-col gap-2 p-5">
            <h3>Smart Actions</h3>
            <p class="text-fg-sub">
              Configure actions that your system can perform automatically, like
              updating user preferences or processing requests.
            </p>
          </div>
        </Card>

        <Card size="md" className="flex h-full flex-col">
          <div class="w-full p-4 pb-0">
            <img
              src={image4.src}
              alt="Pablo Logo"
              class="w-full"
              width={image4.width}
              height={image4.height}
            />
          </div>
          <div class="flex flex-col gap-2 p-5">
            <h3>
              Advanced Analytics
            </h3>
            <p class="text-fg-sub">
              Gain insights with detailed analytics and reporting to optimize
              performance.
            </p>
          </div>
        </Card>
      </div>
    </div>
  </div>
</section>