---
import BackgroundEffect from '@@/components/ui/BackgroundEffect.astro';
import Button from '@@/components/ui/Button.astro';
import { Icon } from 'astro-icon/components';
import myImage from '@/assets/placeholder.png';
---

<section
  class="hero-section relative flex min-h-screen flex-col items-center justify-center px-6 py-32"
>
  <BackgroundEffect />

  <div class="container">
    <!-- Hero Content - Left Aligned -->
    <div class="mb-16 max-w-4xl text-left">
      <h1
        class="text-fg mb-6 text-balance"
        style="text-box-trim: trim-both; text-box-edge: cap alphabetic;"
      >
        Built to make you <span class="sp-emphasis"
          >extraordinarily productive</span
        >
      </h1>

      <p class="text-fg-sub mb-8 max-w-2xl text-lg">
        Pablo is the best way to create websites with AI. Build stunning sites
        in minutes, not hours. No coding required.
      </p>

      <div class="flex flex-col items-start justify-start gap-4 sm:flex-row">
        <Button size="md">Get Started</Button>
        <Button type="secondary" size="md">
          Watch Demo
          <Icon name="lucide:chevron-right" />
        </Button>
      </div>
    </div>

    <!-- Hero Image -->
    <img
      src={myImage.src}
      alt="Pablo Product Demo"
      class="w-full"
      width={myImage.width}
      height={myImage.height}
    />
  </div>
</section>