{% extends "base.html" %}
{% block content %}

<div class="container mt-5 mb-5">
    <h2 class="fw-bold text-center">About House Report System</h2>
    <p class="text-center text-muted">Inspect • Document • Maintain</p>

    <hr>

    <div class="mt-4">
        <h4 class="fw-bold">What We Do</h4>
        <p>
            The House Report System helps homeowners and property inspectors keep 
            accurate records of inspections, maintenance needs, and property condition details. 
            Our goal is to make home documentation simple, organized, and accessible.
        </p>

        <h4 class="fw-bold mt-4">Key Features</h4>
        <ul>
            <li>Upload inspection images (up to 3 per report)</li>
            <li>Attach supporting PDF documents</li>
            <li>Generate professional PDF reports with feedback</li>
            <li>Maintain a complete history of each property</li>
            <li>Easy-to-use dashboard with property overview</li>
        </ul>

        <h4 class="fw-bold mt-4">Why It Matters</h4>
        <p>
            Having well-documented home inspection history improves transparency, 
            boosts property value, and ensures long-term maintenance is never overlooked.
        </p>

        <h4 class="fw-bold mt-4">Our Mission</h4>
        <p>
            To provide homeowners and inspectors with an intuitive digital tool 
            that ensures safe, well-maintained homes supported by clear documentation.
        </p>
    </div>
</div>

{% endblock %}






<section class="py-5">
  <div class="container">
    <h2 class="h4 mb-4 text-center">What We Do</h2>

    <div class="row g-4">
      <!-- Card 1 -->
      <div class="col-12 col-md-6 col-lg-3">
        <div class="card about-card h-100">
          <img src="{{ url_for('static', filename='image/about1.jpg') }}"
               class="card-img-top" alt="Home inspection in progress">
          <div class="card-body">
            <h5 class="card-title">Inspect</h5>
            <p class="card-text small text-muted mb-0">
              Site visits to capture structural and cosmetic issues, from damp and
              mould to roofing, glazing, and finishes.
            </p>
          </div>
        </div>
      </div>

      <!-- Card 2 -->
      <div class="col-12 col-md-6 col-lg-3">
        <div class="card about-card h-100">
          <img src="{{ url_for('static', filename='image/about2.jpg') }}"
               class="card-img-top" alt="Photographing property defects">
          <div class="card-body">
            <h5 class="card-title">Document</h5>
            <p class="card-text small text-muted mb-0">
              High-quality photos and clear written summaries, organised room by
              room so nothing gets missed.
            </p>
          </div>
        </div>
      </div>

      <!-- Card 3 -->
      <div class="col-12 col-md-6 col-lg-3">
        <div class="card about-card h-100">
          <img src="{{ url_for('static', filename='image/about3.jpg') }}"
               class="card-img-top" alt="Engineer reviewing report">
          <div class="card-body">
            <h5 class="card-title">Report</h5>
            <p class="card-text small text-muted mb-0">
              Professional PDF reports you can send directly to engineers,
              housing providers, managing agents, or insurers.
            </p>
          </div>
        </div>
      </div>

      <!-- Card 4 -->
      <div class="col-12 col-md-6 col-lg-3">
        <div class="card about-card h-100">
          <img src="{{ url_for('static', filename='image/about4.jpg') }}"
               class="card-img-top" alt="Team supporting clients">
          <div class="card-body">
            <h5 class="card-title">Support</h5>
            <p class="card-text small text-muted mb-0">
              We help you track issues over time, follow up on repairs, and keep a
              clear history of work completed.
            </p>
          </div>
        </div>
      </div>
    </div>

  </div>
</section>
{% endblock %}