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

{% block content %}
<div class="sec"><div class="wrap hero-grid" style="align-items:start">
  <div>
    <div class="role">Contact</div>
    <h1 style="font-size:clamp(32px,4.6vw,48px)">Tell me about the project</h1>
    <p class="lead" style="margin-top:16px">Fill this in and I'll reply within 24 hours with next steps and a rough figure.</p>
    <div class="card" style="margin-top:28px">
      <h3>Other ways to reach me</h3>
      <p style="margin-top:10px">{{ site.contact_email }}<br>{% if site.whatsapp %}WhatsApp: {{ site.whatsapp }}<br>{% endif %}{{ site.location }}</p>
    </div>
    <div class="card" style="margin-top:16px">
      <h3>Already a client?</h3>
      <p style="margin-top:10px">Log in to your portal to raise a support ticket instead — it's faster and it's tracked.</p>
      <a href="{% url 'login' %}" class="btn btn-sm" style="margin-top:14px">Client login</a>
    </div>
  </div>

  <div class="form-panel">
    {% if sent %}
      <div class="notice">Request received. Your reference is <b>{{ sent.reference }}</b>. I'll reply to {{ sent.email }} within 24 hours.</div>
    {% else %}
    <form method="post" novalidate>{% csrf_token %}
      <div class="two">
        <div class="field"><label for="name">Full name</label>
          <input id="name" name="name" value="{{ values.name|default:'' }}" placeholder="Your name">
          {% with msg=errors.name %}{% include "partials/error.html" %}{% endwith %}</div>
        <div class="field"><label for="email">Email</label>
          <input id="email" name="email" type="email" value="{{ values.email|default:'' }}" placeholder="you@company.com">
          {% with msg=errors.email %}{% include "partials/error.html" %}{% endwith %}</div>
      </div>
      <div class="two">
        <div class="field"><label for="phone">Phone</label>
          <input id="phone" name="phone" value="{{ values.phone|default:'' }}" placeholder="+234 …"></div>
        <div class="field"><label for="company">Company</label>
          <input id="company" name="company" value="{{ values.company|default:'' }}" placeholder="Optional"></div>
      </div>
      <div class="field"><label for="project_type">What do you need?</label>
        <select id="project_type" name="project_type">
          <option>Website</option><option>Web application</option>
          <option>E-commerce store</option><option>Custom software</option>
        </select></div>
      <div class="field"><label for="has_website">Do you have a website already?</label>
        <select id="has_website" name="has_website">
          <option>No, this would be my first</option>
          <option>Yes, and it needs a rebuild</option>
          <option>Yes, and it needs maintenance</option>
        </select></div>
      <div class="field"><label for="description">Describe the project</label>
        <textarea id="description" name="description" placeholder="What the business does, who your customers are, and what the site needs to do.">{{ values.description|default:'' }}</textarea>
        {% with msg=errors.description %}{% include "partials/error.html" %}{% endwith %}</div>
      <div class="two">
        <div class="field"><label for="budget">Budget</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></div>
        <div class="field"><label for="timeline">Timeline</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>
      <button class="btn btn-primary btn-block">Send project request</button>
    </form>
    {% endif %}
  </div>
</div></div>
{% endblock %}