siftlode/frontend/src/components/legal/LegalLayout.tsx

// Shared shell for the public, login-free legal pages (/privacy, /terms). These must be
// reachable unauthenticated — Google's OAuth consent screen links to them and reviewers
// fetch them directly — so they render outside the authenticated App tree (see main.tsx).

export const CONTACT_EMAIL = "b1fr0stmailops@gmail.com";
export const LAST_UPDATED = "June 14, 2026";

export function LegalLink({ href, children }: { href: string; children: React.ReactNode }) {
  return (
    <a href={href} target="_blank" rel="noreferrer" className="text-accent hover:underline">
      {children}
    </a>
  );
}

export default function LegalLayout({
  title,
  children,
}: {
  title: string;
  children: React.ReactNode;
}) {
  return (
    <div className="min-h-screen bg-bg text-fg">
      <div className="mx-auto w-[min(92vw,720px)] py-12">
        <a href="/" className="inline-block text-2xl font-bold tracking-tight mb-8">
          Sift<span className="text-accent">lode</span>
        </a>
        <div className="glass rounded-2xl p-8">
          <h1 className="text-2xl font-semibold">{title}</h1>
          <p className="text-xs text-muted mt-1 mb-6">Last updated: {LAST_UPDATED}</p>
          <div className="space-y-5 text-sm leading-relaxed text-fg/90">{children}</div>
        </div>
        <footer className="mt-6 flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted">
          <a href="/" className="hover:text-fg transition">Home</a>
          <a href="/privacy" className="hover:text-fg transition">Privacy Policy</a>
          <a href="/terms" className="hover:text-fg transition">Terms of Service</a>
          <a href={`mailto:${CONTACT_EMAIL}`} className="hover:text-fg transition">Contact</a>
        </footer>
      </div>
    </div>
  );
}

export function H2({ children }: { children: React.ReactNode }) {
  return <h2 className="text-base font-semibold text-fg pt-2">{children}</h2>;
}