{{define "layout"}}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{block "title" .}}Dealspace{{end}}</title>
  <meta name="description" content="{{block "description" .}}The deal workflow platform that Investment Banks trust.{{end}}">
  {{block "meta" .}}{{end}}
  <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@300;400;500;600;700&display=swap" rel="stylesheet">
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            navy: '#0F1B35',
            'navy-light': '#1a2847',
            slate: '#2B4680',
            gold: '#C9A84C',
            'gold-light': '#d4b85f',
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          }
        }
      }
    }
  </script>
  <link rel="stylesheet" href="/static/site.css">
</head>
<body class="bg-navy font-sans text-white antialiased">

  <!-- Navigation -->
  <nav class="fixed top-0 left-0 right-0 z-50 bg-navy/95 backdrop-blur-sm border-b border-white/10">
    <div class="max-w-7xl mx-auto px-6 py-4">
      <div class="flex items-center justify-between">
        <a href="/" class="flex items-center space-x-2">
          <span class="text-2xl font-bold text-white">Deal<span class="text-gold">space</span></span>
        </a>
        <div class="hidden md:flex items-center space-x-8">
          <a href="/features" class="text-gray-300 hover:text-white transition-colors">Features</a>
          <a href="/security" class="text-gray-300 hover:text-white transition-colors">Security</a>
          <a href="/pricing" class="text-gray-300 hover:text-white transition-colors">Pricing</a>
          <a href="/app/login" class="text-gray-300 hover:text-white transition-colors">Sign In</a>
          <a href="#demo" class="bg-gold hover:bg-gold-light text-navy font-semibold px-5 py-2.5 rounded-lg transition-colors">Request Demo</a>
        </div>
        <button class="md:hidden text-white" aria-label="Toggle mobile menu" onclick="document.getElementById('mobile-menu').classList.toggle('hidden')">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
          </svg>
        </button>
      </div>
      <div id="mobile-menu" class="hidden md:hidden pt-4 pb-2 space-y-3">
        <a href="/features" class="block text-gray-300 hover:text-white">Features</a>
        <a href="/security" class="block text-gray-300 hover:text-white">Security</a>
        <a href="/pricing" class="block text-gray-300 hover:text-white">Pricing</a>
        <a href="/app/login" class="block text-gray-300 hover:text-white">Sign In</a>
        <a href="#demo" class="inline-block bg-gold text-navy font-semibold px-5 py-2.5 rounded-lg mt-2">Request Demo</a>
      </div>
    </div>
  </nav>

  <main>
    {{template "content" .}}
  </main>

  <!-- Footer -->
  <footer class="border-t border-white/10 py-12 px-6">
    <div class="max-w-7xl mx-auto">
      <div class="grid md:grid-cols-4 gap-8 mb-12">
        <div>
          <span class="text-2xl font-bold text-white">Deal<span class="text-gold">space</span></span>
          <p class="text-gray-400 mt-4">The M&A workflow platform that Investment Banks trust.</p>
        </div>
        <div>
          <h4 class="font-semibold mb-4">Product</h4>
          <ul class="space-y-2 text-gray-400">
            <li><a href="/features" class="hover:text-white transition-colors">Features</a></li>
            <li><a href="/security" class="hover:text-white transition-colors">Security</a></li>
            <li><a href="/pricing" class="hover:text-white transition-colors">Pricing</a></li>
          </ul>
        </div>
        <div>
          <h4 class="font-semibold mb-4">Legal</h4>
          <ul class="space-y-2 text-gray-400">
            <li><a href="/privacy" class="hover:text-white transition-colors">Privacy Policy</a></li>
            <li><a href="/terms" class="hover:text-white transition-colors">Terms of Service</a></li>
            <li><a href="/dpa" class="hover:text-white transition-colors">DPA</a></li>
            <li><a href="/soc2" class="hover:text-white transition-colors">SOC 2</a></li>
          </ul>
        </div>
        <div>
          <h4 class="font-semibold mb-4">Contact</h4>
          <ul class="space-y-2 text-gray-400">
            <li><a href="mailto:sales@dealspace.io" class="hover:text-white transition-colors">sales@dealspace.io</a></li>
            <li><a href="mailto:security@dealspace.io" class="hover:text-white transition-colors">security@dealspace.io</a></li>
          </ul>
        </div>
      </div>
      <div class="border-t border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center">
        <p class="text-gray-500 text-sm">&copy; 2026 Muskepo B.V. All rights reserved.</p>
        <p class="text-gray-500 text-sm mt-4 md:mt-0">Amsterdam &middot; New York &middot; London</p>
      </div>
    </div>
  </footer>

  <link rel="stylesheet" href="/static/chat.css">
  <script src="/static/chat.js"></script>
  {{block "scripts" .}}{{end}}
</body>
</html>
{{end}}
