<!doctype html>
<html lang="en" class="h-full scroll-smooth">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>{% block title %}{{ brand }}{% endblock %}</title>
  <meta name="theme-color" content="#0f172a" />
  <link rel="icon" href="/static/favicon.ico" />
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            bh: {
              bg: "#0b1220", card: "#0f1a2b", ring: "#1f2b40",
              primary: "#0ea5e9", accent: "#34d399", glow: "#22d3ee",
            }
          },
          boxShadow: { glow: "0 0 0 3px rgba(52, 211, 153, .25), 0 0 40px rgba(14,165,233,.15)" }
        }
      }
    }
  </script>
  <style>
    html, body { height: 100%; }
    body { display:flex; flex-direction:column; }
    main { flex:1; }
    .bg-grid {
      background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 0);
      background-size: 22px 22px;
    }
    .mask-fade {
      -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
      mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    }
  </style>
  {% block head %}{% endblock %}
</head>
<body class="min-h-full bg-bh-bg text-white selection:bg-bh-accent/30">

  <!-- Header -->
  <header class="sticky top-0 z-50 backdrop-blur bg-bh-bg/70 border-b border-bh-ring">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
      <!-- Brand -->
      <a href="{{ url_for('home') }}" class="flex items-center gap-3 group">
        <svg width="28" height="28" viewBox="0 0 32 32" class="shrink-0">
          <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="#34d399"/><stop offset="100%" stop-color="#0ea5e9"/></linearGradient></defs>
          <rect x="2" y="2" width="28" height="28" rx="6" fill="url(#g)"/>
          <path d="M10 21V9h4.5a4 4 0 1 1 0 8H10zm4.2-6.5H13.6v3h.6a1.5 1.5 0 0 0 0-3Z" fill="#0b1220"/>
        </svg>
        <span class="font-semibold tracking-wide">BrookHaven <span class="text-bh-accent">by Benny's House</span></span>
      </a>

      <!-- Desktop nav -->
      <nav class="hidden md:flex items-center gap-6 text-sm">
        <a href="{{ url_for('services') }}" class="hover:text-bh-accent">Services</a>
        <a href="{{ url_for('work') }}" class="hover:text-bh-accent">Work</a>
        <a href="{{ url_for('about') }}" class="hover:text-bh-accent">About</a>
        <a href="{{ url_for('contact') }}" class="hover:text-bh-accent">Contact</a>
        <a href="{{ url_for('contact') }}" class="ml-2 inline-flex items-center rounded-lg bg-bh-accent/90 hover:bg-bh-accent text-black px-4 py-2 font-semibold shadow-glow">Start a project</a>
      </nav>

      <!-- Mobile toggle -->
      <button
        id="menuBtn"
        class="md:hidden p-2 rounded hover:bg-white/5 focus:outline-none focus:ring-2 focus:ring-bh-accent/60"
        aria-controls="mobileNav"
        aria-label="Toggle menu"
        aria-expanded="false">
        <!-- hamburger -->
        <svg id="iconOpen" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" class=""><path d="M3 6h16M3 11h16M3 16h16"/></svg>
        <!-- close (hidden by default) -->
        <svg id="iconClose" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" class="hidden"><path d="M4 4l14 14M18 4L4 18"/></svg>
      </button>
    </div>

    <!-- Mobile overlay (hidden by default) -->
    <div id="mobileOverlay" class="hidden md:hidden fixed inset-0 bg-black/40"></div>

    <!-- Mobile panel (hidden by default) -->
    <div
      id="mobileNav"
      class="hidden md:hidden border-t border-bh-ring bg-bh-bg/95 backdrop-blur fixed inset-x-0 top-16 z-50 will-change-transform">
      <nav class="px-4 py-4 grid gap-2 text-sm">
        <a class="py-2 hover:text-bh-accent" href="{{ url_for('services') }}">Services</a>
        <a class="py-2 hover:text-bh-accent" href="{{ url_for('work') }}">Work</a>
        <a class="py-2 hover:text-bh-accent" href="{{ url_for('about') }}">About</a>
        <a class="py-2 hover:text-bh-accent" href="{{ url_for('contact') }}">Contact</a>
        <a class="mt-2 inline-flex items-center justify-center rounded-lg bg-bh-accent/90 hover:bg-bh-accent text-black px-4 py-2 font-semibold" href="{{ url_for('contact') }}">Start a project</a>
      </nav>
    </div>
  </header>

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

  <!-- Footer -->
  <footer class="border-t border-bh-ring">
    <div class="max-w-7xl mx-auto px-6 py-8 text-sm text-white/60 flex flex-col sm:flex-row gap-2 sm:items-center sm:justify-between">
      <div>© <span id="year"></span> BrookHaven Technologies — Benny’s House</div>
      <div class="opacity-80">Canyon · Amarillo · Borger · Remote</div>
    </div>

    <div class="max-w-7xl mx-auto px-6 pb-8 text-sm flex flex-wrap gap-4 items-center justify-between">
      <div class="opacity-80">{{ CONTACT.name }} — {{ CONTACT.title }}</div>
      <div class="flex flex-wrap gap-4">
        <a href="mailto:{{ CONTACT.email }}" class="underline">{{ CONTACT.email }}</a>
        <span class="opacity-60">·</span>
        <a href="tel:{{ CONTACT.phone|replace(' ', '') }}" class="underline">{{ CONTACT.phone }}</a>
        {% if CONTACT.cal %}<span class="opacity-60">·</span><a class="underline" href="{{ CONTACT.cal }}" target="_blank" rel="noopener">Book a call</a>{% endif %}
      </div>
    </div>
  </footer>

  <script>
    // Year
    document.getElementById('year').textContent = new Date().getFullYear();

    // Mobile menu logic (no Alpine)
    const btn = document.getElementById('menuBtn');
    const nav = document.getElementById('mobileNav');
    const overlay = document.getElementById('mobileOverlay');
    const iconOpen = document.getElementById('iconOpen');
    const iconClose = document.getElementById('iconClose');

    let isOpen = false;

    function setOpen(open) {
      isOpen = open;
      [nav, overlay].forEach(el => el.classList.toggle('hidden', !open));
      iconOpen.classList.toggle('hidden', open);
      iconClose.classList.toggle('hidden', !open);
      btn.setAttribute('aria-expanded', String(open));
      // Prevent background scroll when open
      document.documentElement.classList.toggle('overflow-hidden', open);
    }

    btn?.addEventListener('click', () => setOpen(!isOpen));
    overlay?.addEventListener('click', () => setOpen(false));
    window.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && isOpen) setOpen(false);
    });
    // Close menu if resized to desktop
    window.addEventListener('resize', () => {
      if (window.matchMedia('(min-width: 768px)').matches && isOpen) setOpen(false);
    });
  </script>

  {% block scripts %}{% endblock %}
</body>
</html>

