{{define "title"}}{{end}}
{{define "content"}}
<div class="search-hero">
  <div class="hero-logo">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <circle cx="11" cy="11" r="8"/>
      <path d="m21 21-4.35-4.35"/>
    </svg>
  </div>
  <p class="hero-tagline">Search the web privately, without tracking or censorship.</p>
  <div class="search-box">
    <form method="GET" action="/search" role="search" id="search-form">
      <input type="text" name="q" id="q" placeholder="Search the web…" autocomplete="off" autofocus>
      <button type="submit" class="search-box-submit" aria-label="Search">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="11" cy="11" r="8"/>
          <path d="m21 21-4.35-4.35"/>
        </svg>
      </button>
    </form>
  </div>

  <!-- Category Tiles -->
  <div class="category-tiles">
    <a href="/search" class="category-tile">
      <span class="category-tile-icon">🌐</span>
      <span>All</span>
    </a>
    <a href="/search?category=images" class="category-tile">
      <span class="category-tile-icon">🖼️</span>
      <span>Images</span>
    </a>
    <a href="/search?category=news" class="category-tile">
      <span class="category-tile-icon">📰</span>
      <span>News</span>
    </a>
    <a href="/search?category=videos" class="category-tile">
      <span class="category-tile-icon">🎬</span>
      <span>Videos</span>
    </a>
    <a href="/search?category=maps" class="category-tile">
      <span class="category-tile-icon">🗺️</span>
      <span>Maps</span>
    </a>
    <a href="/search?category=shopping" class="category-tile disabled" title="Coming soon">
      <span class="category-tile-icon">🛒</span>
      <span>Shopping</span>
    </a>
    <a href="/search?category=music" class="category-tile disabled" title="Coming soon">
      <span class="category-tile-icon">🎵</span>
      <span>Music</span>
    </a>
    <a href="/search?category=weather" class="category-tile disabled" title="Coming soon">
      <span class="category-tile-icon">🌤️</span>
      <span>Weather</span>
    </a>
  </div>
</div>
<div id="results"></div>
{{end}}