import type { ReactNode } from 'react'
import { AppFooter } from '@/components/layout/AppFooter'
import { LogoMark } from '@/components/ui/LogoMark'
import { ThemeToggle } from '@/components/ui/ThemeToggle'
import '@/styles/auth.css'

/**
 * Общая двухколоночная разметка экранов auth (бренд-панель + форма),
 * см. design/mockups/auth.html. Переключатель темы — плавающей плашкой в
 * правом верхнем углу (см. design/mockups/dark/login.html): у экрана нет
 * общего топбара, панель бренда и форма — раздельные колонки.
 */
export function AuthLayout({ children }: { children: ReactNode }) {
  return (
    <div className="layout">
      <ThemeToggle className="theme-toggle--floating" />

      <aside className="brand-panel">
        <div className="brand-mark">
          <LogoMark /> VidConf
        </div>
        <div className="brand-copy">
          <p className="eyebrow">[ SELF-HOSTED ВИДЕОКОНФЕРЕНЦИИ ]</p>
          <h1 className="brand-headline">
            Ваши встречи.
            <br />
            Ваша инфраструктура.
          </h1>
          <p className="brand-sub">
            Видео, записи и AI-саммари обрабатываются на ваших серверах - данные не уходят за пределы вашей
            инфраструктуры. Гости подключаются по ссылке или номеру, без регистрации.
          </p>
          <div className="brand-stats">
            <div className="stat-glass">
              <strong>100%</strong>
              <span>данных - в вашем контуре</span>
            </div>
            <div className="stat-glass">
              <strong>AI-саммари</strong>
              <span>на почту после встречи</span>
            </div>
          </div>
        </div>
      </aside>

      {/* Копирайт с годом и версией инстанса — общий `AppFooter` (он же на всех
          остальных страницах). Строку «© 2026 VidConf · self-hosted» из
          брендовой панели при этом убрали совсем (решение оператора): год в ней
          был захардкожен, а копирайт теперь живёт в футере. */}
      <main className="form-panel">
        {children}
        <AppFooter />
      </main>
    </div>
  )
}