---
import config from "@/config/config.json";
import Base from "@/layouts/Base.astro";
import { markdownify } from "@/lib/utils/textConverter";
import { getEntryBySlug } from "astro:content";
import { FaAddressCard, FaEnvelope, FaPhoneAlt } from "react-icons/fa";

const entry = await getEntryBySlug("pages", "contact");
const { contact_form_action } = config.params;
const { address, email, phone } = config.contactinfo;
const { title, description, meta_title, image } = entry.data;
---

<Base
  title={title}
  meta_title={meta_title}
  description={description}
  image={image}
>
  <section class="section">
    <div class="container">
      <h1 set:html={markdownify(title)} class="h2 page-heading" />
      <div class="row md:gx-5 gy-5">
        <div class="sm:col-5 md:col-4">
          <p class="mb-8 text-2xl font-bold text-theme-dark">Contact Info</p>
          <ul class="flex flex-col space-y-8">
            <li>
              <div class="flex text-theme-dark items-center text-xl">
                <FaAddressCard className="mr-3 text-primary" />
                <p class="font-semibold">Address</p>
              </div>
              <p set:html={markdownify(address)} class="mt-2 leading-5 pl-8" />
            </li>
            <li>
              <div class="flex text-theme-dark items-center text-xl">
                <FaEnvelope className="mr-3 text-primary" />
                <p class="font-semibold">Email</p>
              </div>
              <p set:html={markdownify(email)} class="mt-2 leading-5 pl-8 content" />
            </li>
            <li>
              <div class="flex text-theme-dark items-center text-xl">
                <FaPhoneAlt className="mr-3 text-primary" />
                <p class="font-semibold">Phone</p>
              </div>
              <p set:html={markdownify(phone)} class="mt-2 leading-5 pl-8" />
            </li>
          </ul>
        </div>
        <div class="sm:col-7 md:col-8">
          <form class="contact-form row gy-2 justify-center" method="POST" action={contact_form_action}>
            <div class="lg:col-6">
              <label class="mb-2 block" for="name">Name <span class="text-red-600">*</span></label>
              <input class="form-input w-full" name="name" type="text" required />
            </div>
            <div class="lg:col-6">
              <label class="mb-2 block" for="email">Email <span class="text-red-600">*</span></label>
              <input class="form-input w-full" name="email" type="email" required />
            </div>
            <div class="col-12">
              <label class="mb-2 block" for="subject">Subject</label>
              <input
                class="form-input w-full"
                name="subject"
                type="text"
              />
            </div>
            <div class="col-12">
              <label class="mb-2 block" for="message">Message <span class="text-red-600">*</span></label>
              <textarea class="form-textarea w-full" rows="4"></textarea>
            </div>
            <div class="col-12">
              <button class="btn btn-primary mt-2">Submit Now</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </section>
</Base>
