import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import Image from "next/image";
import Link from "next/link";
import { ToastContainer, Zoom } from "react-toastify";
import ContactUs from "./contact-us/page";
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: "Create Next App",
  description: "Generated by create next app",
};

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

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  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",
    },
  ];

  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased flex flex-col min-h-screen bg-[url('/main-bg.svg')] bg-cover bg-no-repeat`}>
        <header className="flex justify-between items-center pb-4 container px-4 py-4 m-auto">
          <Link
            href="/"
            aria-label="Opp lens home">
            <Image
              src="/main-logo.svg"
              alt="Opp lens logo"
              width={180}
              height={30}
              priority
            />
          </Link>
        </header>

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

        <main className="container px-4 py-4 m-auto flex-grow">{children}</main>

        <footer className="relative h-full bg-[url('/footer-bg.svg')] bg-cover bg-no-repeat mt-96">
          <div className="absolute w-full -top-[420px] md:-top-72">
            <ContactUs />
          </div>
          <div className="container px-4 py-4 m-auto flex flex-col justify-center items-center mt-72 ">
            <div className="flex justify-between flex-col md:flex-row gap-14 w-full md:w-1/2">
              <div>
                <Image
                  src={"/footer-logo.svg"}
                  alt="Opp lens logo"
                  width={180}
                  height={30}
                  priority
                />
                <p className="text-white my-2">
                  Democratizing Tender Access for SMEs.
                </p>
                <p className="text-white my-2">
                  © 2025 Opplens.com by PBL Partners AB. All Rights Reserved.
                </p>
              </div>
              <div>
                {contactInfo.map((contact, index) => (
                  <ContactInfo
                    key={index}
                    icon={contact.icon}
                    contact={contact.contact}
                    href={contact.href}
                    ariaLabel={contact.ariaLabel}
                  />
                ))}
              </div>
            </div>
          </div>
        </footer>
      </body>
    </html>
  );
}
