<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  {% set brand = get_current_firm_branding(request, none) %}
  <title>{{ title or 'Marketplace' }} | {{ brand.firm_name or 'FilingABC' }}</title>
  {% if brand.favicon_url %}<link rel="icon" href="{{ brand.favicon_url }}" />{% endif %}
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="/static/css/theme_tokens.css?v=7t4-marketplace" />
  <style>
    :root {
      --af-color-brand-500: {{ brand.primary_color or '#2563eb' }};
      --af-color-brand-600: {{ brand.primary_color or '#1d4ed8' }};
      --af-color-brand-700: {{ brand.accent_color or '#1e40af' }};
      --af-color-brand-800: {{ brand.accent_color or '#1e3a8a' }};
      --af-color-brand-900: {{ brand.accent_color or '#172554' }};
    }
  </style>
</head>
<body class="min-h-screen bg-slate-50 text-slate-900">
  <header class="sticky top-0 z-30 border-b border-slate-200 bg-white/90 backdrop-blur">
    <div class="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6 lg:px-8">
      <a href="/" class="flex items-center gap-3">
        {% if brand.logo_url %}
        <img src="{{ brand.logo_url }}" alt="{{ brand.firm_name }}" class="h-10 w-10 rounded-2xl object-contain" />
        {% else %}
        <div class="flex h-10 w-10 items-center justify-center rounded-2xl bg-brand-600 text-sm font-bold text-white">FA</div>
        {% endif %}
        <div>
          <div class="text-sm font-bold tracking-wide text-slate-900">{{ brand.firm_name or 'FilingABC' }}</div>
          <div class="text-xs text-slate-500">Marketplace + SaaS</div>
        </div>
      </a>
      <nav class="hidden items-center gap-5 text-sm font-medium text-slate-600 md:flex">
        <a href="/audit-firms" class="hover:text-brand-700">Audit Firms</a>
        <a href="/consultants" class="hover:text-brand-700">Consultants</a>
        <a href="/request-service" class="hover:text-brand-700">Request Service</a>
      </nav>
      <div class="flex items-center gap-2">
        <a href="/login" class="rounded-xl border border-slate-200 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">Login</a>
        <a href="/request-service" class="hidden rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white shadow-soft hover:bg-brand-700 sm:inline-flex">Get Help</a>
      </div>
    </div>
  </header>

  <main>
    {% block public_content %}{% endblock %}
  </main>

  <footer class="border-t border-slate-200 bg-white">
    <div class="mx-auto grid max-w-7xl gap-6 px-4 py-8 text-sm text-slate-500 sm:px-6 md:grid-cols-3 lg:px-8">
      <div>
        <div class="font-semibold text-slate-800">{{ brand.firm_name or 'FilingABC' }}</div>
        <p class="mt-2">A marketplace layer for audit firms, consultants and clients.</p>
      </div>
      <div>
        <div class="font-semibold text-slate-800">Quick Links</div>
        <div class="mt-2 space-y-1"><a href="/audit-firms" class="block hover:text-brand-700">Audit Firms</a><a href="/consultants" class="block hover:text-brand-700">Consultants</a><a href="/request-service" class="block hover:text-brand-700">Request a Service</a></div>
      </div>
      <div>
        <div class="font-semibold text-slate-800">Contact</div>
        <div class="mt-2 space-y-1">{% if brand.contact_email %}<div>{{ brand.contact_email }}</div>{% endif %}{% if brand.contact_mobile %}<div>{{ brand.contact_mobile }}</div>{% endif %}<div>{{ brand.domain_name or request.url.hostname }}</div></div>
      </div>
    </div>
  </footer>
</body>
</html>
