---
import ImageMod from "@/components/ImageMod.astro";
import Base from "@/layouts/Base.astro";
import { getListPage, getSinglePage } from "@/lib/contentParser.astro";
import { supportedLang } from "@/lib/utils/languageParser";
import { markdownify } from "@/lib/utils/textConverter";
import CallToAction from "@/partials/CallToAction.astro";
import Testimonial from "@/partials/Testimonial.astro";
import type { Feature } from "@/types";
import type { ContentEntryMap } from "astro:content";
import { FaCheck } from "react-icons/fa";

export function getStaticPaths() {
  const paths = supportedLang.map((lang) => ({
    params: { lang: lang || undefined },
  }));
  return paths;
}

const { lang } = Astro.params;
const homepage = await getListPage("homepage", lang as keyof ContentEntryMap);
const { banner, features } = homepage[0].data;

const testimonial = await getSinglePage(
  "sections",
  lang as keyof ContentEntryMap,
  "testimonial"
);

const call_to_action = await getSinglePage(
  "sections",
  lang as keyof ContentEntryMap,
  "call-to-action"
);
---

<Base>
  <!-- Banner -->
  <section class="section pt-14">
    <div class="container">
      <div class="row justify-center">
        <div class="lg:col-7 md:col-9 mb-8 text-center">
          <h1
            set:html={markdownify(banner.title)}
            class="mb-4 text-h3 lg:text-h1"
          />
          <p set:html={markdownify(banner.content)} class="mb-8" />
          {
            banner.button.enable && (
              <a
                class="btn btn-primary"
                href={banner.button.link}
                target={
                  banner.button.link.startsWith("http") ? "_blank" : "_self"
                }
                rel="noopener"
              >
                {banner.button.label}
              </a>
            )
          }
        </div>
        {
          banner.image && (
            <div class="col-12">
              <ImageMod
                src={banner.image}
                height={380}
                width={1200}
                alt="banner"
                format="webp"
              />
            </div>
          )
        }
      </div>
    </div>
  </section>
  <!-- /Banner -->

  <!-- Features -->
  {
    features.map((feature: 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[0]} />
  <CallToAction call_to_action={call_to_action[0]} />
</Base>