---
// Import the necessary dependencies
import TabNav from "./ui/blocks/TabNav.astro";
import TabContent from "./ui/blocks/TabContent.astro";
import construction from "../images/construction-image.avif";
import tools from "../images/automated-tools.avif";
import dashboard from "../images/dashboard-image.avif";

// Define the variable for the section's heading
const title: string = `Customize <span class="text-yellow-500 dark:text-yellow-400">ScrewFast</span>'s offerings to perfectly suit your hardware and construction needs.`;
---

<section
  class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
>
  <div class="relative p-6 md:p-16">
    <div
      class="relative z-10 lg:grid lg:grid-cols-12 lg:items-center lg:gap-16"
    >
      <!-- Section's heading and tab navigation -->
      <div class="mb-10 lg:order-2 lg:col-span-6 lg:col-start-8 lg:mb-0">
        <h2
          class="text-2xl font-bold text-neutral-800 dark:text-neutral-200 sm:text-3xl"
        >
          <!-- About Fragment: https://docs.astro.build/en/basics/astro-syntax/#fragments -->
          <Fragment set:html={title} />
        </h2>
        <!-- Tab navigation - use the attribute 'first' in the first TabNav for the component to work -->
        <nav class="mt-5 grid gap-4 md:mt-10" aria-label="Tabs" role="tablist">
          <TabNav
            id="tabs-with-card-item-1"
            dataTab="#tabs-with-card-1"
            aria="tabs-with-card-1"
            heading="Cutting-Edge Tools"
            content="Empower your projects with ScrewFast's cutting-edge tools. Experience enhanced efficiency in construction management with our sophisticated automated solutions."
            first={true}
          >
            <svg
              class="mt-2 h-6 w-6 flex-shrink-0 fill-neutral-700 hs-tab-active:fill-[#fa5a15] dark:fill-neutral-300 dark:hs-tab-active:fill-[#fb713b] md:h-7 md:w-7"
              height="48"
              viewBox="0 -960 960 960"
              width="48"
              ><path
                d="M764-80q-6 0-11-2t-10-7L501-331q-5-5-7-10t-2-11q0-6 2-11t7-10l85-85q5-5 10-7t11-2q6 0 11 2t10 7l242 242q5 5 7 10t2 11q0 6-2 11t-7 10l-85 85q-5 5-10 7t-11 2Zm0-72 43-43-200-200-43 43 200 200ZM195-80q-6 0-11.5-2T173-89l-84-84q-5-5-7-10.5T80-195q0-6 2-11t7-10l225-225h85l38-38-175-175h-57L80-779l99-99 125 125v57l175 175 130-130-67-67 56-56H485l-18-18 128-128 18 18v113l56-56 169 169q15 15 23.5 34.5T870-600q0 20-6.5 38.5T845-528l-85-85-56 56-52-52-211 211v84L216-89q-5 5-10 7t-11 2Zm0-72 200-200v-43h-43L152-195l43 43Zm0 0-43-43 22 21 21 22Zm569 0 43-43-43 43Z"
              ></path></svg
            >
          </TabNav>

          <TabNav
            id="tabs-with-card-item-2"
            dataTab="#tabs-with-card-2"
            aria="tabs-with-card-2"
            heading="Intuitive Dashboards"
            content="Navigate with ease using ScrewFast's intuitive dashboards. Set up and oversee your projects seamlessly, with user-friendly interfaces designed for quick and effective workflow management."
          >
            <svg
              class="mt-2 h-6 w-6 flex-shrink-0 fill-neutral-700 hs-tab-active:fill-[#fa5a15] dark:fill-neutral-300 dark:hs-tab-active:fill-[#fb713b] md:h-7 md:w-7"
              height="48"
              viewBox="0 -960 960 960"
              width="48"
              ><path
                d="M510-570v-270h330v270H510ZM120-450v-390h330v390H120Zm390 330v-390h330v390H510Zm-390 0v-270h330v270H120Zm60-390h210v-270H180v270Zm390 330h210v-270H570v270Zm0-450h210v-150H570v150ZM180-180h210v-150H180v150Zm210-330Zm180-120Zm0 180ZM390-330Z"
              ></path></svg
            >
          </TabNav>

          <TabNav
            id="tabs-with-card-item-3"
            dataTab="#tabs-with-card-3"
            aria="tabs-with-card-3"
            heading="Robust Features"
            content="Minimize complexity, maximize productivity. ScrewFast's robust features are engineered to streamline your construction process, delivering results that stand out for their excellence."
          >
            <svg
              class="h-6 w-6 flex-shrink-0 text-neutral-700 hs-tab-active:text-[#fa5a15] dark:text-neutral-300 dark:hs-tab-active:text-[#fb713b] md:h-7 md:w-7"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M8.25 21v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21m0 0h4.5V3.545M12.75 21h7.5V10.75M2.25 21h1.5m18 0h-18M2.25 9l4.5-1.636M18.75 3l-1.5.545m0 6.205 3 1m1.5.5-1.5-.5M6.75 7.364V3h-3v18m3-13.636 10.5-3.819"
              ></path>
            </svg>
          </TabNav>
        </nav>
      </div>

      <!-- Contents for each tab - the 'first' attribute should be used in the first tab for that tab to be initially visible, 'second' changes the styles -->
      <div class="lg:col-span-6">
        <div class="relative">
          <div>
            <TabContent
              id="tabs-with-card-1"
              aria="tabs-with-card-item-1"
              src={tools}
              alt="Yellow and black heavy equipment on brown grass field"
              first={true}
            />
            <TabContent
              id="tabs-with-card-2"
              aria="tabs-with-card-item-2"
              src={dashboard}
              alt="A screenshot or graphic representation of the intuitive dashboard"
              second={true}
            />
            <TabContent
              id="tabs-with-card-3"
              aria="tabs-with-card-item-3"
              src={construction}
              alt="Gray metal building frame near tower crane during daytime"
            />
          </div>
        </div>
      </div>
    </div>

    <div class="absolute inset-0 grid h-full w-full grid-cols-12">
      <!-- Decorative background and sizing -->
      <div
        class="col-span-full h-5/6 w-full rounded-xl bg-neutral-100 dark:bg-white/[.075] sm:h-3/4 lg:col-span-7 lg:col-start-6 lg:h-full"
      >
      </div>
    </div>
  </div>
</section>
<!--Import the necessary Tabs plugin-->
<!--https://preline.co/plugins/html/tabs.html-->
<script is:inline src="/scripts/vendor/preline/tabs/index.js"></script>