<script lang="ts">
  import { Button } from "$lib/components/ui/button";
</script>

<section class="pt-20 pb-32 px-4 sm:px-6 lg:px-8">
  <div class="max-w-4xl mx-auto text-center">
    <!-- Main headline -->
    <h1
      class="text-5xl sm:text-6xl lg:text-7xl font-bold text-gray-900 leading-tight mb-8"
    >
      Open-source Agentic SQL Assistant
    </h1>

    <div
      class="space-y-4 mb-12 text-lg sm:text-xl text-gray-600 max-w-4xl mx-auto leading-relaxed"
    >
      <p>Stop fighting your database.</p>
      <p>
        Let SQLsaber help you gather the right context and answer your
        questions.
      </p>
    </div>

    <!-- Call-to-action buttons -->
    <div
      class="flex flex-col sm:flex-row gap-4 justify-center items-center mb-16"
    >
      <Button
        size="lg"
        class="bg-black text-white hover:bg-gray-800 px-8 py-4 text-lg font-medium"
        href="https://github.com/SarthakJariwala/sqlsaber?tab=readme-ov-file#configuration"
      >
        Get started
      </Button>
      <Button
        variant="outline"
        size="lg"
        class="border-gray-300 text-gray-700 hover:bg-gray-50 px-8 py-4 text-lg font-medium"
        href="https://github.com/SarthakJariwala/sqlsaber"
      >
        View on GitHub
      </Button>
    </div>

    <!-- Quick demo -->
    <script
      src="https://asciinema.org/a/E9xin8aNt7eBOM5t433wfoDBO.js"
      id="asciicast-E9xin8aNt7eBOM5t433wfoDBO"
      async
    ></script>
  </div>
</section>
