import type { Metadata } from "next";
import Link from "next/link";
import "@/components/portal/portal.css";
import "./legal.css";
import { COMPANY } from "./legal-config";

export const metadata: Metadata = {
  title: `${COMPANY} — Legal & SMS`,
  description: `${COMPANY} SMS program opt-in, Privacy Policy and Terms of Service.`,
};

export default function LegalLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <link rel="preconnect" href="https://fonts.googleapis.com" />
      <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
      <link
        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
        rel="stylesheet"
      />
      <div className="legal-root">
        <header className="legal-bar">
          <Link href="/portal/login" aria-label={`${COMPANY} home`}>
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img src="/image/logo.png" alt={`${COMPANY} logo`} />
          </Link>
          <nav>
            <Link href="/sms-opt-in">SMS Alerts</Link>
            <Link href="/privacy">Privacy</Link>
            <Link href="/terms">Terms</Link>
          </nav>
        </header>
        {children}
        <footer className="legal-foot">
          <div>© {new Date().getFullYear()} {COMPANY}. All rights reserved.</div>
          <div style={{ marginTop: 8 }}>
            <Link href="/sms-opt-in">SMS Alerts</Link>
            <Link href="/privacy">Privacy Policy</Link>
            <Link href="/terms">Terms of Service</Link>
          </div>
        </footer>
      </div>
    </>
  );
}