import type { Metadata } from 'next';
import './globals.css';

const APP_URL = process.env.NEXT_PUBLIC_APP_URL ?? 'https://notetoquote.com';

export const metadata: Metadata = {
  title: 'NoteToQuote — De la note au devis en quelques secondes',
  description: 'Le module Dolibarr qui transforme vos notes de chantier en devis. Installez le module, collez votre clé, et générez des devis en quelques secondes.',
  metadataBase: new URL(APP_URL),
  openGraph: {
    title: 'NoteToQuote — De la note au devis en quelques secondes',
    description: 'Transformez vos notes de chantier en lignes de devis Dolibarr grâce à l’IA. Pour artisans, installateurs et PME du bâtiment.',
    url: APP_URL,
    siteName: 'NoteToQuote',
    images: [{ url: '/og-image.png', width: 1200, height: 630, alt: 'NoteToQuote' }],
    locale: 'fr_FR',
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'NoteToQuote — De la note au devis en quelques secondes',
    description: 'Transformez vos notes de chantier en lignes de devis Dolibarr grâce à l’IA.',
    images: ['/og-image.png'],
  },
};

export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="fr" className="h-full">
      <head>
        <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" />
      </head>
      <body
        className="min-h-full flex flex-col"
        style={{ fontFamily: "'Inter', -apple-system, sans-serif" }}
      >
        {/* Radial glow */}
        <div aria-hidden style={{
          position: 'fixed', inset: 0, zIndex: -1, pointerEvents: 'none',
          background: 'radial-gradient(ellipse 100% 55% at 50% -5%, rgba(124,58,237,.09) 0%, transparent 60%)',
        }} />

        {/* Nav */}
        <nav style={{
          borderBottom: '1px solid #f0eef8',
          background: 'rgba(255,255,255,.92)',
          backdropFilter: 'blur(8px)',
          position: 'sticky', top: 0, zIndex: 50,
        }}>
          <div style={{ maxWidth: 680, margin: '0 auto', padding: '0 24px', height: 56, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <a href="/" style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none' }}>
              <div style={{
                width: 30, height: 30, borderRadius: 8,
                background: 'linear-gradient(135deg, #6d28d9, #8b5cf6)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                boxShadow: '0 2px 8px rgba(109,40,217,.28)',
                flexShrink: 0,
              }}>
                <svg width="18" height="14" viewBox="0 0 24 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1,2 C3.5,0 5,4 7.5,2 C10,0 11.5,4 14,2 C16.5,0 18,3 20,2" stroke="white" strokeWidth="1.8" strokeLinecap="round" opacity="0.45"/>
                  <path d="M1,7 C4,5.5 7,8.5 11,7 C14.5,5.8 17,8 20,7" stroke="white" strokeWidth="1.8" strokeLinecap="round" opacity="0.72"/>
                  <path d="M1,12 L20,12" stroke="white" strokeWidth="1.8" strokeLinecap="round"/>
                </svg>
              </div>
              <span style={{ fontWeight: 700, fontSize: 14, color: '#0f0f0f', letterSpacing: '-0.01em' }}>NoteToQuote</span>
            </a>
            <div style={{ display: 'flex', alignItems: 'center', gap: 24, fontSize: 13 }}>
              <a href="/aide" style={{ color: '#6b7280', textDecoration: 'none', fontWeight: 500 }}>Guide</a>
              <a href="/#plans" style={{ color: '#6b7280', textDecoration: 'none', fontWeight: 500 }}>Tarifs</a>
              <a href="mailto:contact@notetoquote.com" style={{ color: '#6b7280', textDecoration: 'none', fontWeight: 500 }}>Contact</a>
              <a href="/dashboard" style={{
                color: '#7c3aed', textDecoration: 'none', fontWeight: 600,
                background: '#f5f3ff', padding: '5px 14px', borderRadius: 8, fontSize: 12,
              }}>Mon espace →</a>
            </div>
          </div>
        </nav>

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

        {/* Footer */}
        <footer style={{ borderTop: '1px solid #f0eef8', background: '#fafaf9', padding: '24px 0' }}>
          <div style={{ maxWidth: 680, margin: '0 auto', padding: '0 24px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
            <span style={{ fontSize: 12, color: '#9ca3af' }}>© 2026 NoteToQuote</span>
            <div style={{ display: 'flex', gap: 20, fontSize: 12, color: '#9ca3af', alignItems: 'center', flexWrap: 'wrap' }}>
              <a href="mailto:contact@notetoquote.com" style={{ color: '#9ca3af', textDecoration: 'none' }}>contact@notetoquote.com</a>
              <a href="/mentions-legales" style={{ color: '#9ca3af', textDecoration: 'none' }}>Mentions légales</a>
              <a href="/cgv" style={{ color: '#9ca3af', textDecoration: 'none' }}>CGV</a>
              <a href="/confidentialite" style={{ color: '#9ca3af', textDecoration: 'none' }}>Confidentialité</a>
              <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                <svg width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                </svg>
                Paiements sécurisés par Stripe
              </span>
            </div>
          </div>
        </footer>
      </body>
    </html>
  );
}
