{% extends 'base.html' %}
{% load static %}

{% block title %}Pesan Air Tangki{% endblock %}

{% block content %}
<div class="container my-5">
    <div class="row align-items-center">
        <div class="col-lg-6">
            <h1 class="display-4 fw-bold">Pesan Air Tangki Bersih, Cepat & Mudah</h1>
            <p class="lead my-4">Kami menyediakan layanan pengiriman air tangki berkualitas tinggi untuk kebutuhan rumah tangga dan bisnis Anda. Pesan sekarang dan nikmati air bersih tanpa repot.</p>
            
            <form method="post" class="p-4 border rounded-3 bg-light">
                {% csrf_token %}
                <h3 class="mb-4">Formulir Pemesanan</h3>
                {{ form.as_p }}
                <button type="submit" class="btn btn-primary btn-lg w-100">Kirim Pesanan</button>
            </form>
        </div>
        <div class="col-lg-6 text-center">
            <img src="https://via.placeholder.com/500x500.png?text=Air+Tangki" alt="Tangki Air" class="img-fluid rounded-3">
        </div>
    </div>

    <div class="row text-center mt-5 pt-5">
        <div class="col-md-4">
            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
                <i class="bi bi-droplet-fill"></i>
            </div>
            <h4 class="fw-semibold my-3">Kualitas Terjamin</h4>
            <p class="text-muted">Air bersih dan higienis langsung dari sumber terpercaya.</p>
        </div>
        <div class="col-md-4">
            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
                <i class="bi bi-truck"></i>
            </div>
            <h4 class="fw-semibold my-3">Pengiriman Cepat</h4>
            <p class="text-muted">Armada kami siap mengantar pesanan Anda tepat waktu.</p>
        </div>
        <div class="col-md-4">
            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
                <i class="bi bi-headset"></i>
            </div>
            <h4 class="fw-semibold my-3">Layanan Pelanggan</h4>
            <p class="text-muted">Tim kami siap membantu Anda dengan ramah dan responsif.</p>
        </div>
    </div>
</div>
{% endblock %}
