{% extends "base.html" %}
{% block content %}
<section class="max-w-3xl mx-auto">
  <!-- Header -->
  <div class="card glass p-6 mb-8">
    <h1 class="text-2xl font-bold">Get a Quick Project Estimate</h1>
    <p class="text-white/70 mt-2">
      Answer a few simple questions—no tech talk required. We’ll review and email you a tailored quote.
    </p>
  </div>

  <!-- Form -->
  <form action="{{ url_for('submit') }}" method="post" class="space-y-6">

    <!-- Your info -->
    <div class="card glass p-6">
      <h2 class="font-semibold text-lg mb-3">About you</h2>
      <div class="grid sm:grid-cols-2 gap-4">
        <div>
          <label for="name">Your name *</label>
          <input id="name" name="name" required class="w-full mt-1" placeholder="Jane Doe">
        </div>
        <div>
          <label for="email">Email *</label>
          <input id="email" name="email" type="email" required class="w-full mt-1" placeholder="you@example.com">
        </div>
        <div>
          <label for="phone">Phone (optional)</label>
          <input id="phone" name="phone" class="w-full mt-1" placeholder="(optional)">
        </div>
        <div>
          <label for="company">Business or organization (optional)</label>
          <input id="company" name="company" class="w-full mt-1" placeholder="(optional)">
        </div>
      </div>
    </div>

    <!-- What do you need -->
    <div class="card glass p-6">
      <h2 class="font-semibold text-lg mb-3">What do you need?</h2>
      <p class="text-white/60 text-sm mb-4">Pick the one that fits best. We’ll handle the details later.</p>
      <div class="grid sm:grid-cols-2 gap-3">
        {% for val, label, hint in [
          ('simple-site', 'A basic website', 'Home, About, Contact'),
          ('pro-site', 'A website with extras', 'Portfolio, blog, more pages'),
          ('online-form', 'An online form', 'Collect info, send to email/Sheet'),
          ('sell-online', 'Sell online', 'Checkout / payments'),
          ('fix-or-improve', 'Fix or improve something', 'Speed, bugs, cleanup'),
          ('it-help', 'IT setup/help', 'Email, domains, backups, networks'),
          ('custom-app', 'A custom tool/app', 'Dashboards, portals, automations'),
          ('not-sure', 'Not sure yet', 'I need guidance')
        ] %}
        <label class="flex items-start gap-3 p-3 rounded border border-white/10 hover:border-white/30 cursor-pointer">
          <input class="mt-1" type="radio" name="need" value="{{ val }}" required>
          <span>
            <span class="font-medium">{{ label }}</span><br>
            <span class="text-white/60 text-sm">{{ hint }}</span>
          </span>
        </label>
        {% endfor %}
      </div>
    </div>

    <!-- Scope -->
    <div class="card glass p-6">
      <h2 class="font-semibold text-lg mb-3">How big is this?</h2>
      <p class="text-white/60 text-sm mb-4">A rough guess is perfect.</p>
      <div class="grid sm:grid-cols-3 gap-3">
        {% for val, label, hint in [
          ('small', 'Small', '~1–3 key pages or a simple task'),
          ('medium', 'Medium', '~4–8 pages or a few features'),
          ('large', 'Large', 'Many pages/features or complex work')
        ] %}
        <label class="flex items-start gap-3 p-3 rounded border border-white/10 hover:border-white/30 cursor-pointer">
          <input class="mt-1" type="radio" name="scope_size" value="{{ val }}" required>
          <span>
            <span class="font-medium">{{ label }}</span><br>
            <span class="text-white/60 text-sm">{{ hint }}</span>
          </span>
        </label>
        {% endfor %}
      </div>
    </div>

    <!-- Timeline -->
    <div class="card glass p-6">
      <h2 class="font-semibold text-lg mb-3">When do you need it?</h2>
      <div class="grid sm:grid-cols-2 md:grid-cols-4 gap-3">
        {% for val, label in [
          ('flexible', 'Flexible'),
          ('soon', 'Soon (2–4 weeks)'),
          ('rush', 'Rush (under 2 weeks)'),
          ('critical', 'Urgent (ASAP)')
        ] %}
        <label class="flex items-center gap-2 p-3 rounded border border-white/10 hover:border-white/30 cursor-pointer">
          <input type="radio" name="timeline" value="{{ val }}" required>
          <span>{{ label }}</span>
        </label>
        {% endfor %}
      </div>
    </div>

    <!-- Helpful extras -->
    <div class="card glass p-6">
      <h2 class="font-semibold text-lg mb-3">Would any of these help?</h2>
      <p class="text-white/60 text-sm mb-4">Optional add-ons to make life easier.</p>
      <div class="grid sm:grid-cols-2 gap-2">
        {% for val, label in [
          ('content', 'Write or improve the words'),
          ('branding', 'Light logo/branding help'),
          ('training', 'Walkthrough & training'),
          ('care', 'Ongoing care & updates')
        ] %}
        <label class="flex items-center gap-2">
          <input type="checkbox" name="extras" value="{{ val }}">
          <span>{{ label }}</span>
        </label>
        {% endfor %}
      </div>
    </div>

    <!-- Budget comfort -->
    <div class="card glass p-6">
      <h2 class="font-semibold text-lg mb-3">Budget comfort zone</h2>
      <p class="text-white/60 text-sm mb-4">This helps us suggest the right approach. Totally fine if you’re unsure.</p>
      <select class="w-full" name="budget_feel">
        <option value="unsure" selected>I’m not sure yet</option>
        <option value="under-2k">Under $2k</option>
        <option value="2k-5k">$2k – $5k</option>
        <option value="5k-10k">$5k – $10k</option>
        <option value="10k-plus">$10k+</option>
      </select>
    </div>

    <!-- Notes -->
    <div class="card glass p-6">
      <h2 class="font-semibold text-lg mb-3">Anything else?</h2>
      <textarea name="description" rows="4" class="w-full" placeholder="Links to examples you like, goals, must-haves, nice-to-haves…"></textarea>
    </div>

    <!-- Submit -->
    <div class="flex items-center justify-between">
      <p class="text-white/50 text-xs">We’ll never share your info. You’ll get a personal email from us with next steps.</p>
      <button class="btn bg-accent font-semibold" type="submit">Get my estimate</button>
    </div>
  </form>
</section>

<script>
  // tiny enhancement: if user picks “sell online”, preselect “medium” scope for them
  const needRadios = document.querySelectorAll('input[name="need"]');
  const scopeRadios = document.querySelectorAll('input[name="scope_size"]');
  needRadios.forEach(r => {
    r.addEventListener('change', () => {
      if (r.value === 'sell-online' && ![...scopeRadios].some(s=>s.checked)) {
        [...scopeRadios].find(s => s.value==='medium').checked = true;
      }
    });
  });
</script>
{% endblock %}