---
import Base from "../layouts/Base.astro";
import SiteHeader from "../components/SiteHeader.astro";
import SiteFooter from "../components/SiteFooter.astro";
import { navigationItems } from "../lib/navigation";

const facebookPageUrl = "https://www.facebook.com/profile.php?id=100064729054822";
const facebookEmbedUrl =
  "https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D100064729054822&tabs=timeline&width=500&height=900&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true";
---

<Base
  title="Facebook"
  path="/facebook"
  description="Follow Highland Group RDA on Facebook for the latest updates and events."
>
  <div class="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
    <main class="w-full">
      <section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
        <div
          class="relative w-full sm:rounded-[7px] overflow-hidden bg-cover bg-[50%_35%]"
          style="background-image: url(/320711306_865749364475187_6152104707200224701_n-1d6b6ac8-1920w-1.webp);"
        >
          <div class="absolute inset-0 bg-black/45"></div>
          <SiteHeader
            navigationItems={navigationItems}
            theme="dark"
            className="px-6 sm:px-4"
            facebookHref={facebookPageUrl}
          />
          <div class="relative px-6 sm:px-8 pb-32 pt-6 sm:pb-24 sm:pt-8">
            <div class="max-w-none sm:max-w-[760px] rounded-[7px] bg-black/45 px-5 py-5 sm:px-6 sm:py-6 backdrop-blur-sm">
              <p class="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-white/90">
                Social
              </p>
              <div class="mt-3 h-[2px] w-10 bg-white/70"></div>
              <h1 class="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-white text-[34px] sm:text-[44px] leading-[1.15]">
                Facebook updates
              </h1>
              <p class="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-white text-base sm:text-lg leading-[1.6] max-w-[720px]">
                Follow our latest news, events, and photos on Facebook.
              </p>
            </div>
          </div>
          <a
            class="absolute bottom-4 left-4 sm:bottom-6 sm:left-6 w-[190px] sm:w-[240px] h-[48px] sm:h-[50px]"
            href="https://www.justgiving.com/charity/highlandgrouprda"
            target="_blank"
            rel="noreferrer"
          >
            <img class="w-full h-full object-contain" alt="Donate via JustGiving" src="/Button.webp" />
          </a>
        </div>
      </section>

      <section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pb-0">
        <div class="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
          <div class="mt-6 w-full max-w-[500px] mx-auto">
            <iframe
              title="Highland Group RDA Facebook feed"
              src={facebookEmbedUrl}
              width="500"
              height="900"
              class="w-full h-[700px] sm:h-[900px] border-0 rounded-[7px] bg-white"
              allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
              loading="lazy"
            ></iframe>
          </div>
          <a
            class="mt-6 inline-flex [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg underline"
            href={facebookPageUrl}
            target="_blank"
            rel="noreferrer"
          >
            Visit our Facebook page
          </a>
        </div>
      </section>
      <SiteFooter fullBleedOnMobile />
    </main>
  </div>
</Base>