{% extends "base.html" %}

{% block title %}Home · House Report System{% endblock %}

{% block content %}

<!-- HERO SECTION -->
<section class="hero-section position-relative text-white">
  <!-- Background image -->
  <div class="hero-background"
       style="background-image: url('{{ url_for('static', filename='image/home-hero.jpg') }}');">
  </div>

  <!-- Gradient overlay -->
  <div class="hero-overlay"></div>

  <!-- Content -->
  <div class="container hero-content text-center">
    <h1 class="display-4 fw-bold mb-3">
      Welcome to House Report System
    </h1>
    <p class="lead mb-4">
      Submit property inspections, upload photos of defects, and download clear PDF reports for
      homeowners, surveyors, and engineers. Use the <strong>Login</strong> or <strong>Sign Up</strong>
      buttons above to get started.
    </p>

    <div class="d-flex justify-content-center flex-wrap gap-2">
      <a href="{{ url_for('auth.login') }}" class="btn btn-primary btn-lg px-4">
        Login
      </a>
      <a href="{{ url_for('auth.register') }}" class="btn btn-outline-light btn-lg px-4">
        Sign Up
      </a>
    </div>
  </div>
</section>

<!-- CONTACT SECTION -->
<section id="contact" class="contact-section py-5">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-6">
        <div class="card contact-card shadow-sm border-0">
          <div class="card-body text-center p-4 p-md-5">
            <h2 class="h3 mb-3">Contact Us</h2>
            <p class="text-muted mb-4">
              Need help with a report or your account? Get in touch.
            </p>

            <p class="mb-2">
              <strong>Email:</strong>
              <a href="mailto:support@housereportsystem.test" class="text-decoration-none">
                support@housereportsystem.test
              </a>
            </p>
            <p class="mb-4">
              <strong>Phone:</strong> +44 (0)1234 567 890
            </p>

            <!-- Social icons -->
            <div class="d-flex justify-content-center gap-3 social-links">
              <a href="#" class="social-link" aria-label="Facebook">
                <img src="{{ url_for('static', filename='image/facebook.png') }}" alt="Facebook">
              </a>
              <a href="#" class="social-link" aria-label="Instagram">
                <img src="{{ url_for('static', filename='image/instagram.png') }}" alt="Instagram">
              </a>
              <a href="#" class="social-link" aria-label="LinkedIn">
                <img src="{{ url_for('static', filename='image/linkedin.png') }}" alt="LinkedIn">
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

{% endblock %}