{% extends "base.html" %}

{% block content %}
<div class="hero-section bg-success text-white py-5 mb-5 rounded">
    <div class="container text-center">
      <!-- <img src="static/images/B4A01B55-4B18-4B52-97BE-727B28E347B4.png" alt="MercyGro Logo" class="mb-4" style="max-height: 100px;"> -->
        <h1 class="display-4">Welcome to MercyGro</h1>
        <p class="lead">Premium Organic Fertilizers for Your Garden</p>
        <a href="{{ url_for('shop') }}" class="btn btn-light btn-lg">Shop Now</a>
    </div>
</div>

<div class="row">
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-body text-center">
                <i class="fas fa-leaf fa-3x text-success mb-3"></i>
                <h5 class="card-title">100% Organic</h5>
                <p class="card-text">Our fertilizers are made from natural ingredients, safe for your family and the environment.</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-body text-center">
                <i class="fas fa-seedling fa-3x text-success mb-3"></i>
                <h5 class="card-title">Proven Results</h5>
                <p class="card-text">Scientifically formulated to promote healthy plant growth and increase yields.</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-body text-center">
                <i class="fas fa-award fa-3x text-success mb-3"></i>
                <h5 class="card-title">Quality Guaranteed</h5>
                <p class="card-text">Trusted by gardeners worldwide. Satisfaction guaranteed or your money back.</p>
            </div>
        </div>
    </div>
</div>

<div class="row mt-5">
    <div class="col-md-6">
        <h3>Why Choose MercyGro?</h3>
        <ul class="list-unstyled">
            <li><i class="fas fa-check text-success me-2"></i>Eco-friendly and sustainable</li>
            <li><i class="fas fa-check text-success me-2"></i>Improves soil health</li>
            <li><i class="fas fa-check text-success me-2"></i>Increases plant resistance</li>
            <li><i class="fas fa-check text-success me-2"></i>Safe for pets and children</li>
        </ul>
    </div>
    <div class="col-md-6">
        <h3>Customer Testimonials</h3>
        <blockquote class="blockquote">
            <p>"MercyGro transformed my garden! My plants have never been healthier."</p>
            <footer class="blockquote-footer">Sarah J., <cite title="Source Title">Happy Customer</cite></footer>
        </blockquote>
    </div>
</div>
{% endblock %}