{% extends 'base.html' %}
{% block content %}
<section class="hero-grid">
  <article class="card">
    <div class="section-heading">
      <div>
        <p class="section-label">Meal planner</p>
        <h2>Build the week around a few anchor meals</h2>
      </div>
    </div>
    <form id="planner-form" class="stack-form">
      <label>Week start
        <input type="date" id="week-start">
      </label>
      <label>How many dinners?
        <input type="number" id="target-meals" min="3" max="7" value="5">
      </label>
      <label>Anchor ideas
        <textarea id="planner-anchors" rows="5" placeholder="Ground beef potato skillet&#10;Chicken rice bowls&#10;Pasta bake"></textarea>
      </label>
      <button type="submit">Build the week</button>
    </form>
  </article>
  <article class="card">
    <p class="section-label">What this does</p>
    <h2>Waste-aware planning</h2>
    <p class="muted">The planner looks at approved and queued meals, then tries to pair dishes that reuse overlapping ingredients. That means less waste, less random spending, and fewer half-dead veg rattling in the fridge drawer.</p>
  </article>
</section>

<section class="card">
  <div class="section-heading">
    <div>
      <p class="section-label">Plan output</p>
      <h2>Suggested meal week</h2>
    </div>
  </div>
  <div id="plan-output" class="plan-grid muted">Generate a plan to see the meal lineup.</div>
</section>
{% endblock %}