<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>United Supermarkets · Cyber Sale Survey</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-950 text-white min-h-screen">
  <header class="max-w-3xl mx-auto px-4 py-6">
    <a href="/" class="text-slate-300 underline">&larr; Back</a>
    <h1 class="mt-2 text-3xl font-extrabold">Quick Survey</h1>
    <p class="text-slate-300 mt-1">Help us improve <span class="font-semibold">E-Commerce & Digital Coupons</span> at United.</p>
  </header>

  <main class="max-w-3xl mx-auto px-4">
    <form method="post" class="bg-slate-900/60 border border-slate-800 rounded-2xl p-5 grid gap-6">
      <!-- Contact (optional) -->
      <div class="grid sm:grid-cols-2 gap-4">
        <label class="grid gap-1">
          <span class="text-sm text-slate-300">Name (optional)</span>
          <input name="name" class="text-black p-2 rounded" placeholder="Your name" />
        </label>
        <label class="grid gap-1">
          <span class="text-sm text-slate-300">Email (optional for follow-ups)</span>
          <input type="email" name="email" class="text-black p-2 rounded" placeholder="you@example.com" />
        </label>
      </div>
      <label class="inline-flex items-center gap-2 text-sm text-slate-300">
        <input type="checkbox" name="email_consent" value="yes" class="h-4 w-4" />
        I agree United may contact me about e-commerce and coupons.
      </label>

      <hr class="border-slate-800">

      <!-- Shopping frequency -->
      <div class="grid gap-2">
        <div class="text-sm font-semibold">How often do you shop for groceries online with United?</div>
        <div class="grid sm:grid-cols-4 gap-2">
          <label class="flex items-center gap-2"><input type="radio" name="shop_online_freq" value="never" required> Never</label>
          <label class="flex items-center gap-2"><input type="radio" name="shop_online_freq" value="rarely"> Rarely</label>
          <label class="flex items-center gap-2"><input type="radio" name="shop_online_freq" value="monthly"> Monthly</label>
          <label class="flex items-center gap-2"><input type="radio" name="shop_online_freq" value="weekly+"> Weekly+</label>
        </div>
      </div>

      <!-- Fulfillment preference -->
      <div class="grid gap-2">
        <div class="text-sm font-semibold">Preferred way to get your order?</div>
        <div class="grid sm:grid-cols-3 gap-2">
          <label class="flex items-center gap-2"><input type="radio" name="fulfillment_preference" value="pickup" required> Curbside Pickup</label>
          <label class="flex items-center gap-2"><input type="radio" name="fulfillment_preference" value="delivery"> Delivery</label>
          <label class="flex items-center gap-2"><input type="radio" name="fulfillment_preference" value="in-store"> In-store Shopping</label>
        </div>
      </div>

      <!-- Digital coupons -->
      <div class="grid gap-2">
        <div class="text-sm font-semibold">Do you use digital coupons?</div>
        <div class="grid sm:grid-cols-4 gap-2">
          <label class="flex items-center gap-2"><input type="radio" name="digital_coupons_use" value="often" required> Often</label>
          <label class="flex items-center gap-2"><input type="radio" name="digital_coupons_use" value="sometimes"> Sometimes</label>
          <label class="flex items-center gap-2"><input type="radio" name="digital_coupons_use" value="tried"> I’ve tried them</label>
          <label class="flex items-center gap-2"><input type="radio" name="digital_coupons_use" value="never"> Never</label>
        </div>
      </div>

      <!-- Preference: Digital vs Paper -->
      <div class="grid gap-2">
        <div class="text-sm font-semibold">Coupons preference</div>
        <div class="grid sm:grid-cols-4 gap-2">
          <label class="flex items-center gap-2"><input type="radio" name="coupons_preference" value="digital" required> Digital</label>
          <label class="flex items-center gap-2"><input type="radio" name="coupons_preference" value="paper"> Paper</label>
          <label class="flex items-center gap-2"><input type="radio" name="coupons_preference" value="both"> Both</label>
          <label class="flex items-center gap-2"><input type="radio" name="coupons_preference" value="none"> None</label>
        </div>
      </div>

      <!-- What matters most -->
      <div class="grid gap-2">
        <div class="text-sm font-semibold">What matters most when ordering online? <span class="opacity-70">(pick all that apply)</span></div>
        <div class="grid sm:grid-cols-3 gap-2">
          <label class="flex items-center gap-2"><input type="checkbox" name="what_matters" value="price"> Low Prices</label>
          <label class="flex items-center gap-2"><input type="checkbox" name="what_matters" value="fees"> Low Fees</label>
          <label class="flex items-center gap-2"><input type="checkbox" name="what_matters" value="timeslots"> Convenient Time Slots</label>
          <label class="flex items-center gap-2"><input type="checkbox" name="what_matters" value="speed"> Fast Pickup/Delivery</label>
          <label class="flex items-center gap-2"><input type="checkbox" name="what_matters" value="substitutions"> Good Substitutions</label>
          <label class="flex items-center gap-2"><input type="checkbox" name="what_matters" value="coupons"> Easy Digital Coupons</label>
        </div>
      </div>

      <!-- Barriers -->
      <div class="grid gap-2">
        <div class="text-sm font-semibold">What keeps you from ordering online more often? <span class="opacity-70">(pick all that apply)</span></div>
        <div class="grid sm:grid-cols-3 gap-2">
          <label class="flex items-center gap-2"><input type="checkbox" name="barriers" value="fees"> Fees</label>
          <label class="flex items-center gap-2"><input type="checkbox" name="barriers" value="pricing"> Prices</label>
          <label class="flex items-center gap-2"><input type="checkbox" name="barriers" value="substitutions"> Substitutions quality</label>
          <label class="flex items-center gap-2"><input type="checkbox" name="barriers" value="availability"> Item availability</label>
          <label class="flex items-center gap-2"><input type="checkbox" name="barriers" value="timeslots"> Time slot availability</label>
          <label class="flex items-center gap-2"><input type="checkbox" name="barriers" value="app"> App/website usability</label>
        </div>
      </div>

      <!-- Device -->
      <div class="grid gap-2">
        <div class="text-sm font-semibold">What device do you usually use?</div>
        <div class="grid sm:grid-cols-3 gap-2">
          <label class="flex items-center gap-2"><input type="radio" name="device" value="phone" required> Phone</label>
          <label class="flex items-center gap-2"><input type="radio" name="device" value="tablet"> Tablet</label>
          <label class="flex items-center gap-2"><input type="radio" name="device" value="desktop"> Desktop/Laptop</label>
        </div>
      </div>

      <!-- Free text -->
      <div class="grid gap-1">
        <label class="text-sm font-semibold">Anything we could improve for online shopping?</label>
        <textarea name="feedback" rows="3" class="text-black p-2 rounded" placeholder="Tell us what would make United online shopping even better."></textarea>
      </div>

      <!-- Submit -->
      <div class="flex items-center justify-between gap-3">
        <p class="text-xs text-slate-400">Note: This is a quick promo survey; answers help us improve E-Commerce and coupons. </p>
        <button class="bg-emerald-500 hover:bg-emerald-600 px-6 py-3 rounded-lg font-semibold text-black">Start the Game</button>
      </div>
    </form>
  </main>

  <footer class="max-w-3xl mx-auto px-4 py-8 text-center text-slate-400 text-xs">
    © United Supermarkets — Cyber Sale Tailgate
  </footer>
</body>
</html>

