---
import { Icon } from "astro-icon/components";
import ContentSection from "~/components/content-section.astro";
import type { FeatureItem } from "~/types";

const features: Array<FeatureItem> = [
  {
    title: "Shop",
    description:
      "The fun part! Buy from anywhere you like. And members enjoy expert designer advice and special discounts with top brands.",
    icon: "mdi:store",
  },
  {
    title: "Ship to Sejour",
    description:
      "We'll securely receive your package, unpack it, and keep your items ready for you in your dressing room. Never worry about package theft again.",
    icon: "mdi:truck-check",
  },
  {
    title: "Book a session",
    description:
      "We have four gorgeous, private dressing rooms in our Flatiron showroom. Book a session online to try on your items in person.",
    icon: "mdi:calendar-clock",
  },
  {
    title: "Make yourself at home",
    description:
      "During your session, the space is yours. Test outfits in the huge mirrors with natural lighting, borrow our professional cameras to snap some pictures of your fit, and enjoy some champagne or a freshly baked cookie from the kitchen.",
    icon: "mdi:face-woman-shimmer",
  },
  {
    title: "Go on your merry way",
    description:
      "Everything you tried on is already yours &mdash; just take what you like and leave. Our team will secure, pack, and ship out your unwanted items, same-day, with tracking info.",
    icon: "mdi:reiterate",
  },
  {
    title: "Join the community",
    description:
      "Sejour is bringing back the humanity that online shopping took away. Join a community of fashion lovers, share your style, and get personalized recommendations from our expert stylists.",
    icon: "mdi:dance-ballroom",
  },
];
---

<ContentSection title="How It Works" id="how-it-works">
  <Fragment slot="lead"> Quick blurb here? </Fragment>
  <ul class="grid max-w-6xl grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
    {
      features.map(({ title, description, icon }) => (
        <li class="flex flex-col items-center gap-4 border border-default bg-offset p-6">
          <div class="size-16 rounded-full border-2 border-current p-3 text-primary">
            <Icon name={icon} class="size-full" />
          </div>
          <p class="text-center font-extrabold text-xl ">{title}</p>
          <p class="text-center text-offset text-sm">{description}</p>
        </li>
      ))
    }
  </ul>
</ContentSection>
