{% extends 'base.html' %}
{% block title %}About Us — Chiez Stores{% endblock %}
{% block extra_css %}
<style>
@media(max-width:768px){ .about-grid{ grid-template-columns:1fr !important; gap:32px !important; } }
@media(max-width:600px){
    .about-values-grid{ grid-template-columns:1fr !important; gap:24px !important; }
    .about-stats-grid{ grid-template-columns:1fr 1fr !important; }
    .about-hero-section{ padding:60px 20px !important; }
}
</style>
{% endblock %}
{% block content %}
<div style="background:var(--black);padding:100px 40px;text-align:center">
    <div class="section-tag" style="margin-bottom:16px">Our Story</div>
    <h1 style="color:var(--white);font-size:clamp(2.5rem,5vw,4rem)">About <span style="color:var(--gold)">Chiez Stores</span></h1>
    <p style="color:#888;max-width:500px;margin:20px auto;font-size:15px;line-height:1.9">Fashion that speaks to the modern Nigerian. Affordable, stylish, delivered fast.</p>
</div>

<div class="container py-8">
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-bottom:80px" class="about-grid">
        <div>
            <div class="section-tag">Who We Are</div>
            <h2 style="margin:12px 0 20px">More Than Just Fashion</h2>
            <p style="color:var(--warm-gray);line-height:1.9;margin-bottom:16px">Chiez Stores was founded with a simple belief: every Nigerian deserves access to high-quality, stylish fashion without breaking the bank. We curate the best collections from Men's and Women's wear to shoes, bags, and accessories.</p>
            <p style="color:var(--warm-gray);line-height:1.9;margin-bottom:24px">Our team works tirelessly to source the latest trends and bring them directly to your door, with fast and reliable delivery nationwide.</p>
            <a href="{% url 'store:shop' %}" class="btn btn-primary">Shop Our Collections</a>
        </div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
            <div style="background:var(--cream);padding:30px;border-radius:4px;text-align:center">
                <div style="font-family:var(--font-display);font-size:2rem;font-weight:300;color:var(--black)">10K+</div>
                <div style="font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--warm-gray);margin-top:6px">Happy Customers</div>
            </div>
            <div style="background:var(--cream);padding:30px;border-radius:4px;text-align:center">
                <div style="font-family:var(--font-display);font-size:2rem;font-weight:300;color:var(--black)">500+</div>
                <div style="font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--warm-gray);margin-top:6px">Products</div>
            </div>
            <div style="background:var(--cream);padding:30px;border-radius:4px;text-align:center">
                <div style="font-family:var(--font-display);font-size:2rem;font-weight:300;color:var(--black)">4.8★</div>
                <div style="font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--warm-gray);margin-top:6px">Average Rating</div>
            </div>
            <div style="background:var(--cream);padding:30px;border-radius:4px;text-align:center">
                <div style="font-family:var(--font-display);font-size:2rem;font-weight:300;color:var(--black)">2yrs</div>
                <div style="font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--warm-gray);margin-top:6px">In Business</div>
            </div>
        </div>
    </div>

    <div style="background:var(--black);border-radius:6px;padding:60px;text-align:center">
        <h2 style="color:var(--white);margin-bottom:16px">Our Values</h2>
        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:40px" class="about-values-grid">
            <div>
                <i class="fas fa-gem" style="font-size:28px;color:var(--gold);display:block;margin-bottom:16px"></i>
                <h4 style="color:var(--white);font-family:var(--font-display);font-weight:300;font-size:1.2rem;margin-bottom:10px">Quality First</h4>
                <p style="color:#777;font-size:13px;line-height:1.8">We never compromise on quality. Every product is carefully selected.</p>
            </div>
            <div>
                <i class="fas fa-heart" style="font-size:28px;color:var(--gold);display:block;margin-bottom:16px"></i>
                <h4 style="color:var(--white);font-family:var(--font-display);font-weight:300;font-size:1.2rem;margin-bottom:10px">Customer Love</h4>
                <p style="color:#777;font-size:13px;line-height:1.8">Our customers are at the center of everything we do.</p>
            </div>
            <div>
                <i class="fas fa-truck" style="font-size:28px;color:var(--gold);display:block;margin-bottom:16px"></i>
                <h4 style="color:var(--white);font-family:var(--font-display);font-weight:300;font-size:1.2rem;margin-bottom:10px">Fast & Reliable</h4>
                <p style="color:#777;font-size:13px;line-height:1.8">Nationwide delivery you can count on, every time.</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}