import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import { headers } from "next/headers";
import Image from "next/image";
import Link from "next/link";
import { Suspense } from "react";
import { ToastContainer, Zoom } from "react-toastify";
import NavigationBar from "../_components/NavigationBar";
import "../globals.css";
const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Opp lens - AI-Powered Tender Management",
  description:
    "Democratizing Tender Access for SMEs with AI-Powered Tender Management.",
  icons: {
    icon: "/fav-icon.svg",
  },
};

function ContactInfo({
  icon,
  contact,
  href,
  ariaLabel,
  contactIconSrc,
}: {
  icon: string;
  contact: string;
  href?: string;
  ariaLabel: string;
  contactIconSrc?: string;
}) {
  return (
    <div className="flex gap-3 my-3 text-black">
      <Image
        src={icon}
        width={24}
        height={24}
        alt=""
        aria-hidden="true"
      />
      {href ? (
        <a
          href={href}
          className="cursor-pointer min-w-fit"
          aria-label={ariaLabel}>
          {contact}
        </a>
      ) : (
        <p className="flex gap-3">
          {!!contactIconSrc && (
            <Image
              src={contactIconSrc}
              width={20}
              height={20}
              alt="flag"
            />
          )}
          {contact}
        </p>
      )}
    </div>
  );
}

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const domain = (await headers()).get("host");

  const contactInfo = [
    {
      icon: "/Message.svg",
      contact: "info@opplens.com",
      href: "mailto:info@opplens.com",
      ariaLabel: "Email us at info@opplens.com",
    },
    {
      icon: "/Phone.svg",
      contact: "(+46) - 761581526",
      href: "tel:+46761581526",
      ariaLabel: "Call us at +46 761581526",
    },
    {
      icon: "/Location.svg",
      contact: "Stockholm, Sweden",
      ariaLabel: "Our location in Stockholm, Sweden",
      contactIconSrc: "/sweden.svg",
    },
  ];

  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased flex flex-col  bg-[url('/header-bg.svg')] bg-top-right bg-no-repeat bg-contain lg:bg-cover`}>
        <header className="flex justify-center pt-4 items-center pb-4 container px-4 py-0 m-auto lg:px-28 lg:justify-between flex-wrap gap-5">
          <section>
            <Link
              href="/"
              aria-label="Opp lens home">
              <Image
                src="/main-logo.svg"
                alt="Opp lens logo"
                width={180}
                height={30}
                priority
              />
            </Link>
          </section>
          <Suspense>
            <NavigationBar host={domain ?? "opplens.com"} />
          </Suspense>
        </header>

        <ToastContainer
          position="top-right"
          autoClose={2500}
          theme={"colored"}
          transition={Zoom}
          hideProgressBar
          newestOnTop
          closeOnClick
          pauseOnFocusLoss
          draggable
          pauseOnHover
        />

        <div className="container px-4 m-auto flex-grow">{children}</div>
        <footer>
          <div className="relative z-10 container px-4 py-4 m-auto flex flex-col justify-center items-center ">
            <div className="flex justify-between flex-col lg:flex-row gap-14 w-full  px-4 lg:px-28">
              <div className="flex flex-col gap-4">
                <Image
                  src={"/footer-logo.svg"}
                  alt="Opp lens logo"
                  width={180}
                  height={30}
                  priority
                />
                <div>
                  <p className="text-black my-2">
                    Democratizing Tender Access for SMEs.
                  </p>
                  <p className="text-black my-2">
                    © 2025 Opplens.com by PBL Partners AB. All Rights Reserved.
                  </p>
                </div>
              </div>
              <div>
                {contactInfo.map((contact, index) => (
                  <ContactInfo
                    key={index}
                    icon={contact.icon}
                    contact={contact.contact}
                    href={contact.href}
                    ariaLabel={contact.ariaLabel}
                    contactIconSrc={contact.contactIconSrc}
                  />
                ))}
              </div>
            </div>
          </div>
        </footer>
      </body>
    </html>
  );
}
