<script lang="ts">
  let query = '';
</script>

<main>
  <h1>Kochwas</h1>
  <form method="GET" action="/search">
    <input
      type="search"
      name="q"
      bind:value={query}
      placeholder="Rezept suchen…"
      autocomplete="off"
      inputmode="search"
    />
    <button type="submit">Suchen</button>
  </form>
  <p class="muted">Phase 1: Foundations — Suche folgt in Phase 3.</p>
</main>

<style>
  main {
    max-width: 640px;
    margin: 4rem auto;
    padding: 0 1rem;
    font-family: system-ui, -apple-system, sans-serif;
  }
  h1 {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 2rem;
  }
  form {
    display: flex;
    gap: 0.5rem;
  }
  input {
    flex: 1;
    padding: 0.75rem 1rem;
    font-size: 1.1rem;
    border: 1px solid #bbb;
    border-radius: 8px;
  }
  button {
    padding: 0.75rem 1.25rem;
    font-size: 1.1rem;
    border-radius: 8px;
    border: 0;
    background: #2b6a3d;
    color: white;
  }
  .muted {
    color: #888;
    font-size: 0.9rem;
    text-align: center;
    margin-top: 2rem;
  }
</style>
