import Link from "next/link";
import "./globals.css";
import LanguageSwitcher from "../components/LanguageSwitcher";
import { FaLinkedin } from "react-icons/fa";
import { MessageCircle } from "lucide-react";
import { prisma } from "@/lib/prisma";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {

  const linkedinUrl = "https://www.linkedin.com/company/teknov-ingenierie/";
  const whatsappUrl = "https://wa.me/33665739824";
  
  return (
    <html lang="fr">
      <body className="flex flex-col min-h-screen">

        {/* HEADER */}
        <header className="border-b border-gray-300 p-4 shrink-0 bg-white">
          <div className="flex items-center justify-between">

            {/* LOGO */}
            <div className="flex items-center">
              <img
                src="/images/logo-teknov.png"
                alt="Teknov Ingenierie"
                className="h-20 w-auto"
              />
            </div>

            {/* MENU */}
            <div className="flex gap-3">
              <Link href="/fr"><button className="nav-btn">Accueil</button></Link>
              <Link href="/fr/services"><button className="nav-btn">Nos services</button></Link>
              <Link href="/fr/about"><button className="nav-btn">À propos</button></Link>
              <Link href="/fr/contact"><button className="nav-btn">Contact</button></Link>
              <Link href="/fr/projects"><button className="nav-btn">Projets</button></Link>
            </div>

          </div>
        </header>

        {/* MAIN */}
        <main className="relative flex-1 overflow-hidden">

          <div
            className="absolute inset-0 bg-cover bg-center blur-md scale-150"
            style={{ backgroundImage: "url('/images/bg.jpg')" }}
          />

          <div className="absolute inset-0 bg-white/5" />

          <div className="relative p-1">
            {children}
          </div>

        </main>

        {/* FOOTER */}
        <footer className="border-t border-gray-300 p-4 shrink-0 bg-white">
          <div className="flex items-center justify-between">

            {/* SOCIAL ICONS */}
            <div className="flex gap-3">

              <a
                href={linkedinUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="p-2 border rounded-full hover:bg-blue-200 transition"
              >
                <FaLinkedin size={20} />
              </a>

              <a
                href={whatsappUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="p-2 border rounded-full hover:bg-green-200 transition"
              >
                <MessageCircle size={20} />
              </a>

            </div>

            {/* LANGUAGE */}
            <LanguageSwitcher />

          </div>
        </footer>

      </body>
    </html>
  );
}