---
import { Icon } from "astro-icon/components";
import { Image } from "astro:assets";
import logo from "~/assets/logo-temp.png";
import ContentSection from "~/components/content-section.astro";
---

<ContentSection title="All luxury, no cardboard." id="intro">
  <Image slot="eyebrow" src={logo} alt="Logo" class="size-24" />
  <Fragment slot="lead">
    Try on your online orders at Sejour, a beautiful new analog fitting room in
    Flatiron. We'll handle the boxes, you focus on the fit.
  </Fragment>
  <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
    <a
      href="/learn-more"
      class="flex items-center justify-center gap-3 border-2 border-current px-6 py-4"
    >
      <Icon name="mdi:list-box-outline" class="size-8" />
      <span>Learn more</span>
    </a>
    <a
      href="/book-a-session"
      class="flex items-center justify-center gap-3 border-2 border-current px-6 py-4"
    >
      <Icon name="mdi:arrow-right" class="size-8" />
      <span>Try it out</span>
    </a>
  </div>
</ContentSection>
