{% extends "public/base.html" %}
{% block title %}Start a project — {{ site.name }}{% endblock %}

{% block content %}
<div class="sec"><div class="wrap" style="max-width:760px">
  <div class="sec-head" style="text-align:left">
    <div class="role">Start a project</div>
    <h1 style="font-size:clamp(30px,4.2vw,44px)">Seven short steps</h1>
    <p class="lead" style="margin-top:14px">About five minutes. At the end you'll get a project request number and an invitation to your client portal.</p>
  </div>

  <div class="form-panel">
    {% if sent %}
      <div class="notice">Project request received. Your reference is <b>{{ sent.reference }}</b>. Check your email for a portal invitation.</div>
      <a href="{% url 'home' %}" class="btn btn-block" style="margin-top:16px">Back to the site</a>
    {% else %}
    <div class="progress" id="wiz-bars"></div>
    <div class="wiz-meta"><span id="wiz-step">Step 1 of 7</span><span id="wiz-name">Your details</span></div>

    <form method="post" novalidate id="wiz-form">{% csrf_token %}
      <div class="wiz" data-step="1">
        <div class="two">
          <div class="field"><label for="name">Full name</label>
            <input id="name" name="name" required value="{{ values.name|default:'' }}" placeholder="Your name">
            {% with msg=errors.name %}{% include "partials/error.html" %}{% endwith %}</div>
          <div class="field"><label for="company">Company</label>
            <input id="company" name="company" value="{{ values.company|default:'' }}" placeholder="Optional"></div>
        </div>
        <div class="two">
          <div class="field"><label for="email">Email</label>
            <input id="email" name="email" type="email" required value="{{ values.email|default:'' }}" placeholder="you@company.com">
            {% with msg=errors.email %}{% include "partials/error.html" %}{% endwith %}</div>
          <div class="field"><label for="phone">Phone or WhatsApp</label>
            <input id="phone" name="phone" value="{{ values.phone|default:'' }}" placeholder="+234 …"></div>
        </div>
      </div>

      <div class="wiz hidden" data-step="2">
        <div class="field"><label for="project_type">What are we building?</label>
          <select id="project_type" name="project_type" required>
            <option value="">Choose one</option>
            <option>Business website</option><option>E-commerce store</option>
            <option>Web application or portal</option><option>Payment or fintech platform</option>
            <option>Custom software or API</option><option>Rebuild of an existing site</option>
          </select>
          {% with msg=errors.project_type %}{% include "partials/error.html" %}{% endwith %}</div>
      </div>

      <div class="wiz hidden" data-step="3">
        <div class="field"><label for="description">What should it do?</label>
          <textarea id="description" name="description" placeholder="Describe the business and what customers should be able to do.">{{ values.description|default:'' }}</textarea></div>
        <div class="field"><label>Features you'll need</label>
          <div class="opts">
            <label class="opt"><input type="checkbox" name="features" value="Online payments" hidden> Online payments</label>
            <label class="opt"><input type="checkbox" name="features" value="User accounts" hidden> User accounts</label>
            <label class="opt"><input type="checkbox" name="features" value="Admin dashboard" hidden> Admin dashboard</label>
            <label class="opt"><input type="checkbox" name="features" value="Blog or news" hidden> Blog or news</label>
            <label class="opt"><input type="checkbox" name="features" value="Bookings" hidden> Bookings</label>
            <label class="opt"><input type="checkbox" name="features" value="Product catalogue" hidden> Product catalogue</label>
            <label class="opt"><input type="checkbox" name="features" value="Live chat" hidden> Live chat / WhatsApp</label>
            <label class="opt"><input type="checkbox" name="features" value="API integration" hidden> API integration</label>
          </div>
          <p class="hint">Pick as many as apply.</p></div>
      </div>

      <div class="wiz hidden" data-step="4">
        <div class="field"><label for="budget">Budget range</label>
          <select id="budget" name="budget">
            <option>Under ₦500,000</option><option>₦500,000 – ₦1m</option>
            <option>₦1m – ₦3m</option><option>₦3m+</option><option>Not sure yet</option>
          </select>
          <p class="hint">A range is enough. It tells me what's realistic to build.</p></div>
      </div>

      <div class="wiz hidden" data-step="5">
        <div class="field"><label for="timeline">When do you need it live?</label>
          <select id="timeline" name="timeline">
            <option>As soon as possible</option><option>Within 1 month</option>
            <option>1–3 months</option><option>Flexible</option>
          </select></div>
        <div class="field"><label for="target_date">Is there a fixed date?</label>
          <input id="target_date" name="target_date" type="date"></div>
      </div>

      <div class="wiz hidden" data-step="6">
        <div class="field"><label for="references">Websites you like</label>
          <textarea id="references" name="references" style="min-height:110px" placeholder="Paste one or two links and say what you like about them.">{{ values.references|default:'' }}</textarea></div>
        <div class="field"><label for="branding">Do you have a logo or brand colours?</label>
          <select id="branding" name="branding">
            <option>Yes, I'll send them</option><option>Logo only</option>
            <option>No — I'd like help with this</option>
          </select></div>
      </div>

      <div class="wiz hidden" data-step="7">
        <h3 style="margin-bottom:14px">Check and submit</h3>
        <div id="wiz-summary"></div>
        <p class="hint" style="margin-top:16px">Submitting creates a project request. I review it personally and reply within 24 hours.</p>
      </div>

      <div class="wiz-nav">
        <button type="button" class="btn" id="wiz-back">Back</button>
        <button type="button" class="btn btn-primary" id="wiz-next" style="flex:1">Continue</button>
        <button type="submit" class="btn btn-primary hidden" id="wiz-submit" style="flex:1">Submit request</button>
      </div>
    </form>
    {% endif %}
  </div>
</div></div>
{% endblock %}

{% block scripts %}
<script>
(function () {
  var form = document.getElementById('wiz-form');
  if (!form) return;
  var STEPS = ['Your details','Project type','Requirements','Budget','Timeline','References','Review'];
  var step = 1;
  var $ = function (s) { return document.querySelector(s); };
  var $$ = function (s) { return [].slice.call(document.querySelectorAll(s)); };

  form.addEventListener('click', function (e) {
    var opt = e.target.closest('.opt');
    if (!opt) return;
    var box = opt.querySelector('input');
    if (!box) return;
    if (e.target !== box) box.checked = !box.checked;
    opt.classList.toggle('on', box.checked);
  });

  function draw() {
    $('#wiz-bars').innerHTML = STEPS.map(function (_, i) {
      return '<i class="' + (i < step ? 'done' : '') + '"></i>'; }).join('');
    $('#wiz-step').textContent = 'Step ' + step + ' of 7';
    $('#wiz-name').textContent = STEPS[step - 1];
    $$('.wiz').forEach(function (w) { w.classList.toggle('hidden', +w.dataset.step !== step); });
    $('#wiz-back').style.visibility = step === 1 ? 'hidden' : 'visible';
    $('#wiz-next').classList.toggle('hidden', step === 7);
    $('#wiz-submit').classList.toggle('hidden', step !== 7);
    if (step === 7) {
      var rows = $$('#wiz-form input:not([type=checkbox]), #wiz-form select, #wiz-form textarea')
        .filter(function (el) { return el.type !== 'hidden' && el.id; })
        .map(function (el) {
          var label = form.querySelector('label[for="' + el.id + '"]');
          return '<div class="row" style="grid-template-columns:150px 1fr">'
            + '<div class="meta">' + (label ? label.textContent : el.name) + '</div>'
            + '<div class="host" style="white-space:pre-wrap">' + (el.value || '\u2014') + '</div></div>';
        });
      var picked = $$('#wiz-form input[type=checkbox]:checked').map(function (b) { return b.value; });
      rows.push('<div class="row" style="grid-template-columns:150px 1fr"><div class="meta">Features</div>'
        + '<div class="host">' + (picked.join(', ') || '\u2014') + '</div></div>');
      $('#wiz-summary').innerHTML = rows.join('');
    }
  }
  $('#wiz-next').onclick = function () {
    var current = document.querySelector('.wiz[data-step="' + step + '"]');
    var invalid = [].slice.call(current.querySelectorAll('input, select, textarea'))
      .filter(function (el) { return el.required && !el.value.trim(); })[0];
    if (invalid) { invalid.focus(); invalid.style.borderColor = 'var(--warn)'; return; }
    if (step < 7) { step++; draw(); window.scrollTo({ top: 0, behavior: 'smooth' }); }
  };
  $('#wiz-back').onclick = function () { if (step > 1) { step--; draw(); } };
  draw();
})();
</script>
{% endblock %}