---
import CheckoutForm from '@components/CheckoutForm.astro';
import Eyebrow from '@components/dv-Eyebrow.astro';
import { Image } from 'astro:assets';
import IconGithub from '@assets/icons/github-icon.svg';
import IconGitlab from '@assets/icons/gitlab-icon.svg';
---

<section class="pt-[var(--sl-nav-height)] px-4 lg:px-19">
  <div class="max-w-[1440px] mx-auto flex flex-col lg:flex-row gap-x-15 pt-20 lg:pt-40 pb-10 lg:pb-15">

    <!-- How it works -->
    <div class="flex flex-col gap-6">
      <Eyebrow text="Thank You" />
      <h1 class="text-[64px] text-primary m-0">Purchase <span class="text-accent">Complete!</span></h1>
      <p class="text-gray-1">You've purchased Terragrunt Scale Team.</p>

      <h2 class="text-[42px] text-primary m-0">What's Next?</h2>

      <!-- Steps -->
      <div class="grid grid-cols-1 grid-rows-3 xl:grid-cols-3 xl:grid-rows-1 bg-white gap-0 border border-dashed border-gray-3">

        <div class="p-6 border-b-1 xl:border-r xl:border-b-0 border-dashed border-gray-3">
          <h3 class="text-xl font-mono font-medium text-accent my-2">01.</h3>
          <h3 class="text-xl font-medium text-primary my-2">Book onboarding</h3>
          <p class="text-sm mt-4 text-gray-1">Use the calendar to schedule time to meet with a Gruntwork Solutions Architect.</p>
        </div>

        <div class="p-6 border-b-1 xl:border-r xl:border-b-0 border-dashed border-gray-3">
          <h3 class="text-xl font-mono font-medium text-accent my-2">02.</h3>
          <h3 class="text-xl font-medium text-primary my-2">Check your email</h3>
          <p class="text-sm mt-4 text-gray-1">We'll send you an email with instructions to ensure you have everything you need before your onboarding session.</p>
        </div>

        <div class="p-6">
          <h3 class="text-xl font-mono font-medium text-accent my-2">03.</h3>
          <h3 class="text-xl font-medium text-primary my-2">Install & configure</h3>
          <p class="text-sm mt-4 text-gray-1">Meet with your Gruntwork Solutions Architect to access and configure Terragrunt Scale.</p>
        </div>
      </div>
    </div>

    <div class="w-full lg:w-[408px] sticky top-40 shrink-0">
      <!-- Onboarding Calendar -->
      <div
        class="meetings-iframe-container rounded-lg"
        data-src="https://support.gruntwork.io/meetings/gruntworkbrian/onboarding-tg-scale?embed=true"
      ></div>
      <script
        type="text/javascript"
        src="https://static.hsappstatic.net/MeetingsEmbed/ex/MeetingsEmbedCode.js"
        is:inline
      ></script>
    </div>

  </div>
</section>
