<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The Mirror Playbook — Attack Ad Machine</title>
  <meta name="description" content="Satire: every American attack ad is the same ad. Build one, then flip the party and watch nothing change.">
  <link rel="stylesheet" href="style.css">
</head>
<body data-direction="left">
  <header>
    <h1>The Attack Ad Machine</h1>
    <p class="tag">Every attack ad is the same ad. Prove it to yourself.</p>
    <nav>
      <a class="here" href="./">The Machine</a>
      <a href="playbook.html">The Playbook</a>
      <a href="ad.html">The Ad</a>
    </nav>
  </header>

  <main>
    <form id="form" autocomplete="off">
      <fieldset>
        <legend>Direction of outrage</legend>
        <label class="radio"><input type="radio" name="direction" value="left" checked> Attack from the left</label>
        <label class="radio"><input type="radio" name="direction" value="right"> Attack from the right</label>
      </fieldset>

      <fieldset>
        <legend>The opponent</legend>
        <label class="label" for="name">Fictional candidate name</label>
        <input type="text" id="name" value="Jim Smith" maxlength="40">
        <p class="hint">Keep it fictional. Real names break the joke — and the law of parody.</p>
        <label class="label" for="pronoun" style="margin-top:0.8rem">Pronouns</label>
        <select id="pronoun">
          <option value="he" selected>he/him</option>
          <option value="she">she/her</option>
          <option value="they">they/them</option>
        </select>
      </fieldset>

      <fieldset>
        <legend>Your state</legend>
        <select id="state"></select>
      </fieldset>

      <fieldset>
        <legend>Pick up to 3 outrages</legend>
        <div id="issues"></div>
      </fieldset>
    </form>

    <section class="panel">
      <button id="flip" type="button">⇄ Flip the party</button>
      <div id="script" aria-live="polite"></div>
      <div class="buttons">
        <button id="copy" type="button" class="ghost">Copy script</button>
        <button id="play" type="button" class="ghost">▶ Play voiceover</button>
      </div>
    </section>
  </main>

  <footer>Satire. No real candidates. Paid for by People Who Also Own a Thesaurus.</footer>
  <script type="module" src="app.js"></script>
</body>
</html>
