import React from "react";
import { SiteHeader } from "@/components/SiteHeader";
import { SiteFooter } from "@/components/SiteFooter";

const navigationItems = [
    { label: "Home", href: "/" },
    { label: "About", href: "/about" },
    { label: "News", href: "/news" },
    { label: "Support Us", href: "/support" },
    { label: "Contact", href: "/contact" },
];

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";

export const Facebook = (): JSX.Element => {
    return (
        <div className="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
            <main className="w-full">
                <section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
                    <div
                        className="relative w-full sm:rounded-[7px] overflow-hidden bg-cover bg-[50%_35%]"
                        style={{
                            backgroundImage:
                                "url(/320711306_865749364475187_6152104707200224701_n-1d6b6ac8-1920w-1.webp)",
                        }}
                    >
                        <div className="absolute inset-0 bg-black/45" />
                        <SiteHeader
                            navigationItems={navigationItems}
                            theme="dark"
                            className="px-6 sm:px-4"
                            facebookHref={facebookPageUrl}
                        />
                        <div className="relative px-6 sm:px-8 pb-10 pt-6 sm:pb-12 sm:pt-8">
                            <div className="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 className="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-white/90">
                                    Social
                                </p>
                                <div className="mt-3 h-[2px] w-10 bg-white/70" />
                                <h1 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-white text-[34px] sm:text-[44px] leading-[1.15]">
                                    Facebook updates
                                </h1>
                                <p className="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>
                    </div>
                </section>

                <section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0 pb-0">
                    <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
                        <div className="mt-6 w-full max-w-[500px] mx-auto">
                            <iframe
                                title="Highland Group RDA Facebook feed"
                                src={facebookEmbedUrl}
                                width="500"
                                height="900"
                                className="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"
                            />
                        </div>
                        <a
                            className="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 />
            </main>
        </div>
    );
};