---
import { Image } from "astro:assets";

import product5 from "../images/features-image.avif";

const title: string = "Why Choose ScrewFast?";

const subTitle: string =
  "Transform your ideas into tangible results with ScrewFast tools. Whether you're starting with a sketch on a napkin or diving into a comprehensive construction project, our tools are engineered to help you build with confidence.";

const benefits: string[] = [
  "Robust and reliable tools for long-lasting performance.",
  "Innovative solutions tailored to modern construction needs.",
  "Customer support dedicated to your project's success.",
];

const ListItemMarker: string = `<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mt-0.5 h-6 w-6 text-[#fa5a15] dark:text-[#fb713b]"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>`;
---

<div
  class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
>
  <!-- Grid -->
  <div class="lg:grid lg:grid-cols-12 lg:items-center lg:gap-16">
    <div class="lg:col-span-7">
      <Image class="rounded-xl" src={product5} alt="Mockup of floating boxes" />
    </div>
    <div class="mt-5 sm:mt-10 lg:col-span-5 lg:mt-0">
      <div class="space-y-6 sm:space-y-8">
        <div class="space-y-2 md:space-y-4">
          <h2
            class="text-balance text-3xl font-bold text-neutral-800 dark:text-neutral-200 lg:text-4xl"
          >
            {title}
          </h2>
          <p class="text-pretty text-neutral-600 dark:text-neutral-400">
            {subTitle}
          </p>
        </div>
        <ul class="space-y-2 sm:space-y-4">
          {
            benefits.map((item) => (
              <li class="flex space-x-3">
                <Fragment set:html={ListItemMarker} />

                <span class="text-pretty text-sm font-medium text-neutral-600 dark:text-neutral-400 sm:text-base">
                  {item}
                </span>
              </li>
            ))
          }
        </ul>
      </div>
    </div>
  </div>
</div>