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

{% block title %}Smart Tourist Safety{% endblock %}

{% block content %}
<div class="hero-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <h1 class="display-4">Travel with Confidence</h1>
                <p class="lead">Your safety, our priority. A smart monitoring and incident response system for tourists.</p>
            </div>
            <div class="col-lg-6">
                <div class="registration-form-container p-4 rounded-3">
                    <h2>Create Your Digital ID</h2>
                    <p>Register in seconds to stay protected during your travels.</p>
                    <form method="POST" action="{% url 'index' %}">
                        {% csrf_token %}
                        <div class="mb-3">
                            <label for="name" class="form-label">Full Name</label>
                            <input type="text" class="form-control" id="name" name="name" required>
                        </div>
                        <div class="mb-3">
                            <label for="email" class="form-label">Email Address</label>
                            <input type="email" class="form-control" id="email" name="email" required>
                        </div>
                        <div class="mb-3">
                            <label for="emergency_contact_name" class="form-label">Emergency Contact Name</label>
                            <input type="text" class="form-control" id="emergency_contact_name" name="emergency_contact_name" required>
                        </div>
                        <div class="mb-3">
                            <label for="emergency_contact_phone" class="form-label">Emergency Contact Phone</label>
                            <input type="tel" class="form-control" id="emergency_contact_phone" name="emergency_contact_phone" required>
                        </div>
                        <button type="submit" class="btn btn-primary w-100">Register Now</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container py-5">
    <div class="row text-center">
        <div class="col-md-4">
            <h3>Geo-Fence Alerts</h3>
            <p>Receive notifications when entering or leaving designated zones.</p>
        </div>
        <div class="col-md-4">
            <h3>Instant SOS</h3>
            <p>Send emergency alerts to our response team with a single tap.</p>
        </div>
        <div class="col-md-4">
            <h3>Verified Digital ID</h3>
            <p>Securely share your identity and critical information with responders.</p>
        </div>
    </div>
</div>
{% endblock %}
