import type { ReactNode } from "react";
import Image from "next/image";

function PublicFooter() {
  return (
    <footer className="border-t border-slate-200 bg-white">
      <div className="max-w-4xl mx-auto px-4 py-5 flex flex-col sm:flex-row items-center justify-between gap-3">
        <div className="flex items-center gap-2.5">
          <Image
            src="/meseo-logo.png"
            alt="meSEO"
            width={64}
            height={20}
            className="h-5 w-auto opacity-60"
          />
          <span className="text-xs text-slate-400">
            © {new Date().getFullYear()}
          </span>
        </div>
        <div className="flex items-center gap-5 text-xs text-slate-400">
          <a
            href="https://meseoapp.com/privacy"
            target="_blank"
            rel="noopener noreferrer"
            className="hover:text-slate-600 transition-colors"
          >
            Privacy
          </a>
          <a
            href="https://meseoapp.com/terms"
            target="_blank"
            rel="noopener noreferrer"
            className="hover:text-slate-600 transition-colors"
          >
            Terms
          </a>
          <a
            href="https://meseoapp.com/book-demo"
            target="_blank"
            rel="noopener noreferrer"
            className="hover:text-slate-700 text-slate-600 font-medium transition-colors"
          >
            Book a demo
          </a>
        </div>
      </div>
    </footer>
  );
}

export default function PublicAuditLayout({ children }: { children: ReactNode }) {
  return (
    <div className="min-h-screen bg-slate-50 flex flex-col">
      {/* ── Header ── */}
      <header className="bg-white border-b border-slate-200 shrink-0">
        <div className="max-w-4xl mx-auto px-4 h-16 flex items-center justify-between">
          <a href="/" aria-label="meSEO home">
            <Image
              src="/meseo-logo.png"
              alt="meSEO"
              width={96}
              height={30}
              className="h-7 w-auto"
              priority
            />
          </a>
          <a
            href="https://app.meseoapp.com"
            target="_blank"
            rel="noopener noreferrer"
            className="text-xs font-medium text-slate-500 hover:text-slate-800 transition-colors"
          >
            Sign in →
          </a>
        </div>
      </header>

      {/* ── Page content ── */}
      <main className="flex-1">{children}</main>

      {/* ── Footer ── */}
      <PublicFooter />
    </div>
  );
}
