{% extends "public/base.html" %}
{% load money %}
{% block title %}{{ site.name }} — websites, web apps and payment platforms{% endblock %}

{% block content %}
<div class="hero">
  <div class="wrap hero-grid">
    <div>
      <div class="role">{{ site.tagline }}</div>
      <h1>I build the websites and systems Nigerian businesses run on.</h1>
      <p class="lead">Django backends, payment integrations and custom platforms — designed, built, deployed and maintained by one person who stays reachable after launch.</p>
      <div class="hero-cta">
        <a href="{% url 'start_project' %}" class="btn btn-primary">Start a project</a>
        <a href="{% url 'portfolio' %}" class="btn">See my work</a>
      </div>
    </div>
    {% if websites %}
    <div class="board" aria-label="Websites currently under management">
      <div class="board-top"><i class="dot"></i><b>live · under management</b>
        <span class="count">{{ websites|length }} site{{ websites|length|pluralize }}</span></div>
      {% for w in websites %}
      <div class="row">
        <div><div class="host">{{ w.domain }}</div><div class="meta">{{ w.backend|default:"django"|lower }}</div></div>
        <span class="pill {% if w.ssl_expiry %}ok{% endif %}">SSL</span>
        <span class="up">{{ w.get_status_display }}</span>
      </div>
      {% endfor %}
    </div>
    {% endif %}
  </div>
</div>

{% if featured %}
<div class="sec"><div class="wrap">
  <div class="sec-head"><h2>Selected work</h2>
    <p class="lead">Products I built and still run — plus client websites delivered end to end.</p></div>
  <div class="grid g3">{% for p in featured %}{% include "partials/work_card.html" %}{% endfor %}</div>
  <div style="margin-top:26px"><a href="{% url 'portfolio' %}" class="btn">View all projects</a></div>
</div></div>
{% endif %}

{% if services %}
<div class="sec"><div class="wrap">
  <div class="sec-head"><h2>What I build</h2></div>
  <div class="grid g4">{% for s in services %}
    <div class="card"><h3 style="font-size:17px">{{ s.title }}</h3><p style="margin-top:6px">{{ s.summary }}</p></div>
  {% endfor %}</div>
</div></div>
{% endif %}

<div class="sec"><div class="wrap">
  <div class="sec-head"><h2>Why clients stay</h2></div>
  <div class="grid g3">
    <div class="card"><h3>Built for you, not from a template</h3><p>Every site is written to fit how your business actually works — not bent around a theme you'll outgrow.</p></div>
    <div class="card"><h3>Works on the phone first</h3><p>Most of your customers arrive on mobile data. Pages are built light and tested there before anywhere else.</p></div>
    <div class="card"><h3>Delivered when I said</h3><p>You get a milestone plan on day one and can watch it move in your client portal.</p></div>
    <div class="card"><h3>Payments done properly</h3><p>Webhooks, reconciliation and failed-transaction handling — the parts that break quietly if nobody has done it before.</p></div>
    <div class="card"><h3>Secure hosting and SSL</h3><p>Deployment, certificates, backups and domain renewals tracked so nothing expires without warning.</p></div>
    <div class="card"><h3>Support after launch</h3><p>You keep a direct line for changes, fixes and updates. Launch isn't where I disappear.</p></div>
  </div>
</div></div>

{% if stats %}
<div class="sec"><div class="wrap"><div class="stats">
  {% for s in stats %}<div><b>{{ s.value }}</b><span>{{ s.label }}</span></div>{% endfor %}
</div></div></div>
{% endif %}

{% if testimonials %}
<div class="sec"><div class="wrap">
  <div class="sec-head"><h2>What clients say</h2></div>
  <div class="grid g3">{% for t in testimonials %}
    <div class="quote"><p>{{ t.quote }}</p><footer><b>{{ t.author }}</b>{{ t.role }}</footer></div>
  {% endfor %}</div>
</div></div>
{% endif %}

{% if steps %}
<div class="sec"><div class="wrap">
  <div class="sec-head"><h2>How a project runs</h2>
    <p class="lead">Each stage is visible to you in the client portal.</p></div>
  <ol class="steps">{% for s in steps %}
    <li><h3>{{ s.title }}</h3><p>{{ s.description }}</p></li>
  {% endfor %}</ol>
</div></div>
{% endif %}

<div class="sec"><div class="wrap band">
  <h2>Have a project in mind?</h2>
  <p>Tell me what you need in about five minutes. You'll get a reply and an estimate within 24 hours.</p>
  <a href="{% url 'start_project' %}" class="btn btn-primary">Start your project</a>
</div></div>
{% endblock %}