// app/(public)/layout.tsx
// Public layout shell. Carries the Teleton top-bar lockup placeholder and a slot
// for the persistent bottom CTA (the floating-donate-btn pattern from DESIGN.md).
// The landing agent (A) and purchase-flow agent (B) drop pages into this group.

import * as React from "react";
import Link from "next/link";
import { DemoBanner } from "@/components/flow/DemoBanner";
import { BrandLogo } from "@/components/landing/brand";

export default function PublicLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  return (
    <div className="flex min-h-full flex-col bg-canvas">
      {/* Renders only when NEXT_PUBLIC_DEMO_MODE === "true" (demo/preview env). */}
      <DemoBanner />
      {/* Top-bar lockup placeholder. The landing agent replaces the wordmark
          with the official Teleton logo asset. 80px tall per DESIGN.md top-nav. */}
      <header className="sticky top-0 z-40 h-20 w-full border-b border-hairline bg-canvas">
        <div className="mx-auto flex h-full max-w-[1200px] items-center justify-between px-5">
          <Link
            href="/"
            className="inline-flex items-center rounded-sm focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-steelblue"
            aria-label="Inicio - Rifa Teletón Perú"
          >
            {/* Official Teletón "La Hacemos Todos" lockup (color, on the white
                top bar). Constrained to 48px tall; width auto from aspect ratio. */}
            <BrandLogo variant="light" className="h-12 w-auto" />
          </Link>
          <nav aria-label="Navegación principal">
            <Link
              href="/mis-boletos"
              className="inline-flex items-center rounded-full border border-hairline px-4 py-2 font-body text-body-sm font-semibold text-ink-strong transition-colors hover:border-ink-strong focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-steelblue"
            >
              Mis boletos
            </Link>
          </nav>
        </div>
      </header>

      <main id="contenido" className="flex-1">
        {children}
      </main>

      {/* Persistent bottom CTA slot. The landing/flow agents render the
          floating donate/participate button into this region (it should respect
          prefers-reduced-motion for its slide-in). */}
      <div
        id="persistent-cta-slot"
        className="pointer-events-none fixed inset-x-0 bottom-0 z-50"
      />
    </div>
  );
}