{% extends 'base.html' %}
{% block title %}Contact Us — Chiez Stores{% endblock %}
{% block content %}
<div style="background:var(--cream);border-bottom:1px solid var(--light-gray)">
    <div class="container" style="padding:40px 40px 30px">
        <h1 style="font-size:2.5rem">Get In Touch</h1>
        <p style="color:var(--warm-gray);margin-top:10px">We'd love to hear from you. Send us a message!</p>
    </div>
</div>

<div class="container py-5">
<div style="display:grid;grid-template-columns:1fr 1.5fr;gap:60px;align-items:start">
    <div>
        <h3 style="font-weight:300;margin-bottom:24px">Contact Information</h3>
        {% for icon,title,content in "map-marker-alt,Our Office,123 Fashion Street\, Victoria Island\, Lagos, Nigeria|phone,Phone Number,+234 800 000 0000|envelope,Email Address,hello@chiezstores.ng|clock,Working Hours,Mon – Sat: 8:00 AM – 8:00 PM|instagram,Follow Us,@chiezstores"|split:"|" %}
        <div style="display:flex;gap:16px;margin-bottom:28px">
            <div style="width:44px;height:44px;background:var(--cream);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0">
                <i class="fas fa-{{ icon }}" style="color:var(--gold)"></i>
            </div>
            <div>
                <div style="font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--warm-gray);font-weight:600;margin-bottom:4px">{{ title }}</div>
                <div style="font-size:14px;line-height:1.7">{{ content }}</div>
            </div>
        </div>
        {% empty %}
        <div style="display:flex;gap:16px;margin-bottom:28px">
            <div style="width:44px;height:44px;background:var(--cream);border-radius:50%;display:flex;align-items:center;justify-content:center">
                <i class="fas fa-envelope" style="color:var(--gold)"></i>
            </div>
            <div>
                <div style="font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--warm-gray);font-weight:600;margin-bottom:4px">Email</div>
                <div style="font-size:14px">hello@chiezstores.ng</div>
            </div>
        </div>
        {% endempty %}
        {% endfor %}
    </div>

    <div style="background:var(--white);border:1px solid var(--light-gray);border-radius:6px;padding:40px">
        <h3 style="font-weight:300;margin-bottom:28px">Send a Message</h3>
        <form method="POST">
            {% csrf_token %}
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
                <div class="form-group"><label class="form-label">Full Name</label><input type="text" class="form-control" required placeholder="John Doe"></div>
                <div class="form-group"><label class="form-label">Email</label><input type="email" class="form-control" required placeholder="you@example.com"></div>
            </div>
            <div class="form-group"><label class="form-label">Subject</label><input type="text" class="form-control" required placeholder="How can we help?"></div>
            <div class="form-group"><label class="form-label">Message</label><textarea class="form-control" rows="5" required placeholder="Tell us more..."></textarea></div>
            <button type="submit" class="btn btn-primary btn-lg">Send Message <i class="fas fa-paper-plane"></i></button>
        </form>
    </div>
</div>
</div>
{% endblock %}