---
import { Image } from "@astrojs/image/components";
import Base from "@layouts/Base.astro";
import { markdownify } from "@lib/utils/textConverter";
import CallToAction from "@partials/CallToAction.astro";
import Testimonial from "@partials/Testimonial.astro";
import { getEntryBySlug } from "astro:content";
import { FaCheck } from "react-icons/fa/index.js";

const homepage = await getEntryBySlug("homepage", "index");
const testimonial = await getEntryBySlug("sections", "testimonial");
const call_to_action = await getEntryBySlug("sections", "call-to-action");
const { banner, features } = homepage.data;
---

<Base>
  <!-- Banner -->
  <section class="section pt-14">
    <div class="container">
      <div class="row justify-center">
        <div class="mb-16 text-center lg:col-7">
          <h1 set:html={markdownify(banner.title)} class="mb-4" />
          <p set:html={markdownify(banner.content)} class="mb-8" />
          {
            banner.button.enable && (
              <a class="btn btn-primary" href={banner.button.link}>
                {banner.button.label}
              </a>
            )
          }
        </div>
        {
          banner.image && (
            <div class="col-12">
              <img
                src={banner.image}
                width="1272"
                height="403"
                alt="banner image"
              />
            </div>
          )
        }
      </div>
    </div>
  </section>
  <!-- /Banner -->

  <!-- Features -->
  {
    features.map(
      (
        feature: {
          button: any;
          image: string;
          bulletpoints: any;
          content: string;
          title: string;
        },
        index: number
      ) => (
        <section class={`section-sm ${index % 2 === 0 && "bg-gradient"}`}>
          <div class="container">
            <div class="row items-center justify-between">
              <div
                class={`mb:md-0 mb-6 md:col-5 ${
                  index % 2 !== 0 && "md:order-2"
                }`}
              >
                <Image
                  src={feature.image}
                  height={480}
                  width={520}
                  fit="contain"
                  background="rgba(0,0,0,0)"
                  alt={feature.title}
                />
              </div>
              <div
                class={`md:col-7 lg:col-6 ${index % 2 !== 0 && "md:order-1"}`}
              >
                <h2 set:html={markdownify(feature.title)} class="mb-4" />
                <p
                  set:html={markdownify(feature.content)}
                  class="mb-8 text-lg"
                />
                <ul>
                  {feature.bulletpoints.map((bullet: string) => (
                    <li class="relative mb-4 pl-6">
                      <FaCheck className={"absolute left-0 top-1.5"} />
                      {markdownify(bullet)}
                    </li>
                  ))}
                </ul>
                {feature.button.enable && (
                  <a class="btn btn-primary mt-5" href={feature.button.link}>
                    {feature.button.label}
                  </a>
                )}
              </div>
            </div>
          </div>
        </section>
      )
    )
  }
  <!-- /Features -->

  <Testimonial testimonial={testimonial} />
  <CallToAction call_to_action={call_to_action} />
</Base>