{% extends 'base.html' %}

{% block title %}About Us - Taiya Detergents{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12 text-center mb-5">
        <h1 class="text-taiya-green">About Taiya Detergents</h1>
        <p class="lead">Quality Cleaning Solutions for Kenyan Homes Since 2020</p>
    </div>
</div>

<div class="row mb-5">
    <div class="col-md-6">
        <div class="card h-100">
            <div class="card-body">
                <h3 class="card-title text-taiya-green">Our Story</h3>
                <p class="card-text">
                    Taiya Detergents was founded with a simple mission: to provide Kenyan families 
                    with high-quality, affordable cleaning products that are effective and environmentally 
                    friendly.
                </p>
                <p class="card-text">
                    Starting from a small workshop in Ongata Rongai Nairobi, we've grown to become a trusted name 
                    in household cleaning products across Kenya. Our commitment to quality and customer 
                    satisfaction has been the driving force behind our success.
                </p>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card h-100">
            <div class="card-body">
                <h3 class="card-title text-taiya-green">Our Mission</h3>
                <p class="card-text">
                    To provide every Kenyan home with access to premium cleaning solutions that are:
                </p>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">✅ Highly effective against tough stains</li>
                    <li class="list-group-item">✅ Environmentally friendly</li>
                    <li class="list-group-item">✅ Affordable for all families</li>
                    <li class="list-group-item">✅ Made with quality ingredients</li>
                    <li class="list-group-item">✅ Safe for users and surfaces</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="row mb-5">
    <div class="col-12">
        <div class="card">
            <div class="card-header bg-taiya-green text-white">
                <h3 class="mb-0">Why Choose Taiya Detergents?</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4 text-center mb-3">
                        <i class="fas fa-leaf fa-3x text-taiya-green mb-2"></i>
                        <h5>Eco-Friendly</h5>
                        <p>Our products are biodegradable and environmentally conscious</p>
                    </div>
                    <div class="col-md-4 text-center mb-3">
                        <i class="fas fa-gem fa-3x text-taiya-green mb-2"></i>
                        <h5>Premium Quality</h5>
                        <p>Manufactured to the highest standards for exceptional results</p>
                    </div>
                    <div class="col-md-4 text-center mb-3">
                        <i class="fas fa-heart fa-3x text-taiya-green mb-2"></i>
                        <h5>Family Safe</h5>
                        <p>Gentle on skin but tough on dirt and stains</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header bg-taiya-green text-white">
                <h3 class="mb-0">Our Products</h3>
            </div>
            <div class="card-body">
                <p>We specialize in multipurpose bar soaps that are versatile enough for:</p>
                <div class="row">
                    <div class="col-md-3 col-6 text-center mb-3">
                        <i class="fas fa-tshirt fa-2x text-taiya-green"></i>
                        <p>Laundry</p>
                    </div>
                    <div class="col-md-3 col-6 text-center mb-3">
                        <i class="fas fa-utensils fa-2x text-taiya-green"></i>
                        <p>Dish Washing</p>
                    </div>
                    <div class="col-md-3 col-6 text-center mb-3">
                        <i class="fas fa-bath fa-2x text-taiya-green"></i>
                        <p>General Cleaning</p>
                    </div>
                    <div class="col-md-3 col-6 text-center mb-3">
                        <i class="fas fa-hand-sparkles fa-2x text-taiya-green"></i>
                        <p>Personal Hygiene</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}