import type { Metadata, Viewport } from 'next';
import './globals.css';
import AuthShowcase from '@/app/components/AuthShowcase';

export const metadata: Metadata = {
  title: {
    default: 'Live2030 — Share your world, live',
    template: '%s · Live2030',
  },
  description:
    'Live2030 makes live streaming simple for everyday people. Go live in one tap and bring your people closer.',
};

export const viewport: Viewport = {
  themeColor: '#0b0814',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className="auth-container">
        {/* Left side – decorative showcase (hidden on small screens) */}
        <AuthShowcase
          heading="Welcome to Live2030"
          subheading="Stream instantly, connect instantly. No setup, just go live."
        />

        {/* Right side – main content (login / signup / other pages) */}
        <main className="auth-main">
          <section className="auth-section">{children}</section>
        </main>
      </body>
    </html>
  );
}