import type { Metadata, Viewport } from 'next';
import './globals.css';
import { Providers } from './providers';

export const metadata: Metadata = {
  title: 'Vaultfire — Know Your Agent',
  description:
    'Register and manage AI agents on-chain. The trust layer for the agent economy.',
  openGraph: {
    title: 'Vaultfire — Know Your Agent',
    description:
      'Register an agent. Stake a bond. Prove who you are in the agent economy.',
    url: 'https://vaultfire-mini.vercel.app',
    siteName: 'Vaultfire',
    type: 'website',
  },
  other: {
    // Base App / Farcaster frame metadata — makes this a real mini-app surface
    'fc:frame': 'vNext',
    'fc:frame:image':
      'https://vaultfire-mini.vercel.app/base-listing/hero-3x2.png',
    'fc:frame:button:1': 'Register agent',
    'fc:frame:post_url':
      'https://vaultfire-mini.vercel.app/register',
  },
};

export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,
  userScalable: false,
  themeColor: '#0a0a0b',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className="min-h-screen">
        <Providers>
          <div className="mx-auto max-w-md px-5 pt-6 pb-24">{children}</div>
        </Providers>
      </body>
    </html>
  );
}
