import { Link } from "@tanstack/react-router";
import type { ReactNode } from "react";
import { FIRMA } from "@/lib/site";
import logo from "@/assets/logo-impreuna.png";
import { WhatsAppChat } from "@/components/WhatsAppChat";
import { ContulMeuLink } from "@/components/ContulMeuLink";




const nav = [
  { to: "/", label: "Acasă" },
  { to: "/servicii", label: "Servicii" },
  { to: "/cerere-oferta", label: "Cere ofertă" },
  { to: "/contact", label: "Contact" },
] as const;

export function SiteLayout({ children }: { children: ReactNode }) {
  return (
    <div className="flex min-h-screen flex-col">
      <header className="sticky top-0 z-20 border-b border-primary bg-background/90 backdrop-blur">
        <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
          <Link to="/" className="flex items-center" aria-label={`${FIRMA.nume} — acasă`}>
            <img src={logo} alt={`${FIRMA.nume} — ${FIRMA.slogan}`} width={1330} height={413} className="h-10 w-auto sm:h-11" />
          </Link>

          <div className="flex items-center gap-6">
            <nav className="flex gap-6 text-sm">
              {nav.map((n) => (
                <Link key={n.to} to={n.to} className="text-muted-foreground hover:text-foreground" activeProps={{ className: "text-foreground font-medium" }} activeOptions={{ exact: true }}>
                  {n.label}
                </Link>
              ))}
            </nav>
            <ContulMeuLink />
            <a href={FIRMA.telefonLink} className="hidden rounded-md bg-accent px-4 py-2 text-sm font-medium text-accent-foreground hover:opacity-90 sm:inline-block">
              {FIRMA.telefon}
            </a>
          </div>
        </div>
      </header>

      <main className="flex-1">{children}</main>
      <footer className="bg-primary text-primary-foreground">
        <div className="mx-auto grid max-w-6xl gap-4 px-6 py-10 text-sm md:grid-cols-2">
          <div>
            <p className="font-serif text-lg">{FIRMA.numeLegal}</p>
            <p className="mt-1 opacity-80">{FIRMA.adresa}</p>
            <p className="mt-1 opacity-80">
              Telefon:{" "}
              <a href={FIRMA.telefonLink} className="underline underline-offset-4 hover:opacity-100">
                {FIRMA.telefon}
              </a>
            </p>
            <p className="mt-1 opacity-80">
              Email:{" "}
              <a href={FIRMA.emailLink} className="underline underline-offset-4 hover:opacity-100">
                {FIRMA.email}
              </a>
            </p>
            <p className="mt-1 opacity-70">CUI: {FIRMA.cui}</p>
          </div>
          <p className="opacity-70 md:text-right">© {new Date().getFullYear()} Toate drepturile rezervate.</p>
        </div>
      </footer>

      <WhatsAppChat />
    </div>

  );
}