{% extends "base.html" %}

{% block title %}Kontak | Albab Store{% endblock %}

{% block content %}

<!-- ============ JUDUL HALAMAN ============ -->
<section class="page-head">
    <div class="container">
        <h1>Hubungi Kami</h1>
        <p>Konsultasikan kebutuhan website Anda — kami balas secepatnya.</p>
    </div>
</section>

<section class="section">
    <div class="container contact-grid">

        <!-- Kiri: info kontak -->
        <div class="contact-info reveal">
            <div class="contact-card">
                <span class="contact-icon">💬</span>
                <div>
                    <h3>WhatsApp</h3>
                    <p>+{{ settings.whatsapp_number }}</p>
                    <a class="btn btn-primary btn-sm"
                       href="{{ whatsapp_link(settings.whatsapp_number, settings.wa_default_text) }}"
                       target="_blank" rel="noopener">Chat Sekarang</a>
                </div>
            </div>
            <div class="contact-card">
                <span class="contact-icon">✉️</span>
                <div>
                    <h3>Email</h3>
                    <p>{{ store_email }}</p>
                </div>
            </div>
            <div class="contact-card">
                <span class="contact-icon">📍</span>
                <div>
                    <h3>Lokasi</h3>
                    <p>Indonesia (layanan online di seluruh negeri)</p>
                </div>
            </div>
            <div class="contact-card">
                <span class="contact-icon">🕐</span>
                <div>
                    <h3>Jam Operasional</h3>
                    <p>Senin–Sabtu, 08.00–17.00 WIB</p>
                </div>
            </div>
        </div>

        <!-- Kanan: form pesan -->
        <div class="contact-form reveal" id="form">
            <h2>Kirim Pesan</h2>
            <p>Isi form di bawah, pesan Anda akan kami terima dan balas.</p>

            <!-- Validasi dilakukan JavaScript (katalog.js/script.js) + Flask -->
            <form method="POST" action="{{ url_for('kontak') }}" id="contactForm" novalidate>
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

                <div class="form-group">
                    <label for="name">Nama <span class="req">*</span></label>
                    <input type="text" id="name" name="name" placeholder="Nama lengkap Anda" required>
                    <small class="form-error" id="error-name"></small>
                </div>

                <div class="form-group">
                    <label for="phone">Nomor WhatsApp <span class="req">*</span></label>
                    <input type="tel" id="phone" name="phone" placeholder="Contoh: 081234567890" required>
                    <small class="form-error" id="error-phone"></small>
                </div>

                <div class="form-group">
                    <label for="email">Email <span class="optional">(opsional)</span></label>
                    <input type="email" id="email" name="email" placeholder="nama@email.com">
                    <small class="form-error" id="error-email"></small>
                </div>

                <div class="form-group">
                    <label for="message">Pesan <span class="req">*</span></label>
                    <textarea id="message" name="message" rows="5"
                              placeholder="Ceritakan website seperti apa yang Anda butuhkan..." required></textarea>
                    <small class="form-error" id="error-message"></small>
                </div>

                <button type="submit" class="btn btn-primary btn-block btn-lg">Kirim Pesan</button>
            </form>
        </div>
    </div>
</section>

<!-- Ajakan bertindak -->
{% include "partials/cta.html" %}

{% endblock %}