---
import ImageMod from "@/components/ImageMod.astro";
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 type { Button, Feature } from "@/types";
import { getEntry } from "astro:content";
import { FaCheck } from "react-icons/fa";

interface Homepage {
  banner: {
    title: string;
    content: string;
    image: string;
    button: Button;
  };
  features: Feature[];
}

const homepage = await getEntry("homepage", "-index");
const testimonial = await getEntry("sections", "testimonial");
const call_to_action = await getEntry("sections", "call-to-action");
const { banner, features }: Homepage = 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">
              <ImageMod
                src={banner.image}
                height={380}
                width={1200}
                alt="banner image"
                format="webp"
              />
            </div>
          )
        }
      </div>
    </div>
  </section>
  <!-- /Banner -->

  <!-- Features -->
  {
    features.map((feature, 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"}`}
            >
              <ImageMod
                src={feature.image}
                height={480}
                width={520}
                alt={feature.title}
                format="webp"
              />
            </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"} />
                    <span set:html={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>