<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
  <meta name="theme-color" content="#6f5bd3">
  <meta name="description" content="Thompson Nest family dashboard">
  <link rel="manifest" href="manifest.webmanifest">
  <link rel="apple-touch-icon" href="icons/icon-192.png">
  <link rel="stylesheet" href="app.css">
  <title>Thompson Nest</title>
</head>
<body>
  <div class="app-shell">
    <aside class="sidebar" aria-label="Primary navigation">
      <button class="brand" data-route="home" aria-label="Thompson Nest home">
        <span class="brand-mark">TN</span>
        <span><strong>Thompson Nest</strong><small>Family dashboard</small></span>
      </button>
      <nav class="side-nav">
        <button class="nav-item active" data-route="home"><span>⌂</span>Home</button>
        <button class="nav-item" data-route="kids"><span>☺</span>Kids</button>
        <button class="nav-item" data-route="household"><span>✓</span>Household</button>
        <button class="nav-item" data-route="rewards"><span>★</span>Rewards</button>
        <button class="nav-item" data-route="calendar"><span>□</span>Calendar</button>
        <button class="nav-item" data-route="games"><span>▣</span>Games</button>
      </nav>
      <div class="sidebar-foot">
        <button id="roleToggle" class="role-toggle">Viewing as <strong>Parent</strong></button>
        <small>Phase 2 visual prototype</small>
      </div>
    </aside>

    <main>
      <header class="topbar">
        <div><p class="eyebrow" id="todayLabel"></p><h1 id="pageTitle">Home</h1></div>
        <div class="top-actions">
          <button class="icon-button" id="installButton" hidden title="Install app">↓</button>
          <button class="avatar-button" id="activeAvatar">DT</button>
        </div>
      </header>

      <section id="home" class="page active"></section>
      <section id="kids" class="page"></section>
      <section id="household" class="page"></section>
      <section id="rewards" class="page"></section>
      <section id="calendar" class="page"></section>
      <section id="games" class="page"></section>
    </main>

    <nav class="mobile-nav" aria-label="Mobile navigation">
      <button class="active" data-route="home"><span>⌂</span>Home</button>
      <button data-route="kids"><span>☺</span>Kids</button>
      <button data-route="household"><span>✓</span>Tasks</button>
      <button data-route="rewards"><span>★</span>Rewards</button>
      <button data-route="games"><span>▣</span>Games</button>
    </nav>
  </div>

  <dialog id="taskDialog">
    <form method="dialog" id="taskForm" class="dialog-card">
      <div class="dialog-head"><div><p class="eyebrow">Parent control</p><h2>Add household task</h2></div><button value="cancel" class="close-button" aria-label="Close">×</button></div>
      <label>Task name<input id="taskName" required placeholder="Unload the dishwasher"></label>
      <label>Short guidance<textarea id="taskNote" placeholder="Put away silverware and plastic cups."></textarea></label>
      <div class="form-row">
        <label>Assign to<select id="taskAssignee"><option value="both">Either child</option><option value="riley">Riley</option><option value="miles">Miles</option></select></label>
        <label>Points<select id="taskPoints"><option>10</option><option>15</option><option selected>20</option><option>30</option></select></label>
      </div>
      <button class="primary-button" value="default">Add task</button>
    </form>
  </dialog>

  <div id="toast" class="toast" role="status"></div>
  <script src="app.js"></script>
</body>
</html>
