{% extends "base.html" %}

{% block navbar %}{% endblock %}

{% block title %}Governance and Compliance Portal - Home{% endblock %}

{% block content %}
<div class="login-logo-container mb-5">
  <img src="{{ url_for('static', filename='logo.png') }}" class="login-logo">
</div>

<div class="container mt-5">
  <div class="hero-section bg-dark text-white rounded-3 p-5 mb-5 position-relative overflow-hidden">
    <div class="hero-overlay"></div>
    <div class="position-relative">
      <h1 class="display-4 fw-bold mb-4">Governance and Compliance Portal</h1>
      <p class="lead mb-4">Your trusted partner for regulatory frameworks, policy documentation, and compliance assurance.</p>
      <a href="{{ url_for('login') }}" class="btn btn-primary btn-lg px-5">Access Portal</a>
    </div>
  </div>

  <div class="row g-4 mb-5">
    <div class="col-md-4">
      <div class="card h-100 shadow">
        <img src="/static/images/regulatory-compliance.jpg" alt="Regulatory Compliance" style="height: 200px; object-fit: cover;">
        <div class="card-body">
          <h5 class="card-title">Regulatory Frameworks</h5>
          <p class="card-text">Stay compliant with industry regulations and standards. We help you navigate complex compliance requirements effortlessly.</p>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="card h-100 shadow">
        <img src="/static/images/policy-management.jpg" alt="Policy Management" style="height: 200px; object-fit: cover;">
        <div class="card-body">
          <h5 class="card-title">Policy Documentation</h5>
          <p class="card-text">Access comprehensive policy documents, guidelines, and best practices for organizational governance.</p>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="card h-100 shadow">
        <img src="/static/images/audit-training.jpg" alt="Audit Support & Training" style="height: 200px; object-fit: cover;">
        <div class="card-body">
          <h5 class="card-title">Compliance Audits & Training</h5>
          <p class="card-text">Streamlined audit preparation, compliance training programs, and documentation management.</p>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(27,50,68,0.8), rgba(49,100,138,0.8));
}

.hero-section {
  background-image: url('https://images.unsplash.com/photo-1521737711867-e3b97375f902?auto=format&fit=crop&w=1350');
  background-size: cover;
  background-position: center;
}

.bg-governance {
  background-color: #2d4a6e;
}
</style>
{% endblock %}