{% extends 'base_public.html' %}

{% block content %}

<!-- HERO SECTION -->
<div class="row align-items-center py-5">

    <!-- Left Content -->
    <div class="col-md-6">
        <h1 class="fw-bold">❤️ CardiacCare</h1>

        <p class="text-muted fs-5">
            A smart cardiac monitoring platform to track your vitals,
            analyze risk, and manage health records efficiently.
        </p>

        <a href="{% url 'register' %}" class="btn btn-danger btn-lg mt-3">
            Get Started
        </a>

        <p class="mt-3 text-muted">
            Already have an account?
            <a href="{% url 'login' %}">Login</a>
        </p>
    </div>

    <!-- Right Illustration -->
    <div class="col-md-6 text-center">
        <img src="https://cdn-icons-png.flaticon.com/512/2966/2966488.png"
             alt="health"
             class="img-fluid"
             style="max-height: 250px;">
    </div>

</div>

<!-- FEATURES -->
<div class="row text-center mt-5">

    <div class="col-md-4 mb-4">
        <div class="card shadow-sm border-0 h-100 p-4">
            <h5 class="fw-semibold">📊 Track Vitals</h5>
            <p class="text-muted">
                Record blood pressure and heart rate daily.
            </p>
        </div>
    </div>

    <div class="col-md-4 mb-4">
        <div class="card shadow-sm border-0 h-100 p-4">
            <h5 class="fw-semibold">⚠️ Risk Analysis</h5>
            <p class="text-muted">
                Automatic risk calculation using health data.
            </p>
        </div>
    </div>

    <div class="col-md-4 mb-4">
        <div class="card shadow-sm border-0 h-100 p-4">
            <h5 class="fw-semibold">📁 Medical Records</h5>
            <p class="text-muted">
                Upload and manage medical reports securely.
            </p>
        </div>
    </div>

</div>

<!-- EXTRA SECTION -->
<div class="row mt-5 text-center">

    <div class="col-md-12">
        <div class="card border-0 shadow-sm p-4">
            <h4 class="fw-bold">Why Choose CardiacCare?</h4>

            <p class="text-muted">
                Built using Django and Bootstrap, this platform provides
                a simple and efficient way to monitor cardiac health.
            </p>
        </div>
    </div>

</div>

{% endblock %}