{% extends 'shop/base.html' %}
{% load static %}
{% block title %}About Us - Nana Tradings{% endblock %}

{% block content %}
<div class="container my-5">
    <!-- Page Header -->
    <div class="text-center mb-5">
        <h1 class="fw-bold display-4 about-title">About Nana Tradings</h1>
        <p class="about-subtext fs-5">Premium Quality | Sustainable Practices | Customer First</p>
    </div>

    <!-- Our Mission Section -->
    <section class="row align-items-center mb-5">
        <div class="col-md-6 text-center">
            <img src="{% static 'images/logo.jpeg' %}" class="img-fluid rounded-4 shadow-lg about-img" alt="About Nana Tradings">
        </div>
        <div class="col-md-6">
            <h2 class="fw-bold about-heading">Our Mission</h2>
            <p class="about-text fs-5">
                At Nana Tradings, we are dedicated to delivering the highest quality dry fruits, ensuring that every bite is a nutrient-packed delight.
                Our mission is to redefine healthy snacking, making it accessible, delicious, and sustainable.
            </p>
            <p class="about-text fs-5">
                With an emphasis on premium sourcing, eco-friendly packaging, and customer-first service, we bring you the best nature has to offer.
            </p>
        </div>
    </section>

    <!-- Our Vision Section -->
    <section class="text-center mb-5">
        <h2 class="fw-bold about-heading">Our Vision</h2>
        <p class="about-text fs-5 mx-auto" style="max-width: 700px;">
            We strive to become a global leader in healthy food solutions by ensuring top-tier quality, customer trust, and sustainability.
            Our goal is to make high-quality, ethically sourced dry fruits available to people worldwide.
        </p>
    </section>

    <!-- Why Choose Us Section -->
    <section class="text-center">
        <h2 class="fw-bold about-heading mb-4">Why Choose Nana Tradings?</h2>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card shadow h-100 text-center feature-card">
                    <div class="card-body">
                        <h5 class="fw-bold text-success"><i class="fas fa-seedling"></i> Premium Quality</h5>
                        <p class="about-text">We source only the finest dry fruits, ensuring freshness, taste, and health benefits.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card shadow h-100 text-center feature-card">
                    <div class="card-body">
                        <h5 class="fw-bold text-success"><i class="fas fa-leaf"></i> Sustainability</h5>
                        <p class="about-text">We support eco-friendly farming and use biodegradable packaging for a greener tomorrow.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card shadow h-100 text-center feature-card">
                    <div class="card-body">
                        <h5 class="fw-bold text-success"><i class="fas fa-smile"></i> Customer Satisfaction</h5>
                        <p class="about-text">We prioritize your experience by ensuring fast delivery, top service, and 100% satisfaction.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Meet Our Team Section -->
    <section class="text-center mt-5">
        <h2 class="fw-bold about-heading mb-4">Meet Our Leadership</h2>
        <div class="row text-center">
            <!-- Team Member 1 -->
            <div class="col-md-4 mb-4">
                <div class="card h-100 border-0 shadow-lg team-card">
                    <img src="{% static 'images/th_2.jpg' %}" class="card-img-top rounded-circle team-img" alt="John Doe - CEO">
                    <div class="card-body">
                        <h5 class="fw-bold">John Doe</h5>
                        <p class="about-subtext">Chief Executive Officer</p>
                        <p class="about-text text-secondary">
                            John brings over 15 years of experience, leading Nana Tradings to global success.
                        </p>
                    </div>
                </div>
            </div>

            <!-- Team Member 2 -->
            <div class="col-md-4 mb-4">
                <div class="card h-100 border-0 shadow-lg team-card">
                    <img src="{% static 'images/111.jpg' %}" class="card-img-top rounded-circle team-img" alt="Jane Smith - Marketing">
                    <div class="card-body">
                        <h5 class="fw-bold">Jane Smith</h5>
                        <p class="about-subtext">Head of Marketing</p>
                        <p class="about-text text-secondary">
                            Jane is a brand innovator, ensuring Nana Tradings remains a leader in the industry.
                        </p>
                    </div>
                </div>
            </div>

            <!-- Team Member 3 -->
            <div class="col-md-4 mb-4">
                <div class="card h-100 border-0 shadow-lg team-card">
                    <img src="{% static 'images/22.jpeg' %}" class="card-img-top rounded-circle team-img" alt="Michael Lee - Operations">
                    <div class="card-body">
                        <h5 class="fw-bold">Michael Lee</h5>
                        <p class="about-subtext">Operations Manager</p>
                        <p class="about-text text-secondary">
                            Michael ensures fast, reliable service, making Nana Tradings efficient & seamless.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<!-- Custom Styling -->
<style>
/* ✅ Page Title & Subtext */
.about-title {
    color: #148818;
}

.about-subtext {
    color: #148818;
}

.dark-mode .about-title {
    color: #00e676;
}

.dark-mode .about-subtext {
    color: #00e676;
}

/* ✅ About Section Text */
.about-heading {
    color: #148818;
}

.about-text {
    color: #333;
}

.dark-mode .about-heading {
    color: #00e676;
}

.dark-mode .about-text {
    color: #ddd;
}

/* ✅ About Image */
.about-img {
    width: 100%;
    max-width: 320px;
    transition: transform 0.3s ease-in-out;
}

.about-img:hover {
    transform: scale(1.05);
}

/* ✅ Feature Cards */
.feature-card {
    border-radius: 12px;
    transition: all 0.3s ease-in-out;
}

.feature-card:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 128, 0, 0.2);
}

.dark-mode .feature-card {
    background: #333;
    color: white;
}

/* ✅ Team Member Cards */
.team-card {
    transition: transform 0.3s ease-in-out;
    border-radius: 12px;
}

.team-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
}

.dark-mode .team-card {
    background: #333;
    color: white;
}

/* ✅ Team Images */
.team-img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border: 4px solid #148818;
    transition: transform 0.3s ease-in-out;
}

.team-img:hover {
    transform: scale(1.1);
}

/* Responsive Adjustments */
@media (max-width: 991px) {
    .about-img {
        max-width: 250px;
    }
}
</style>

{% endblock %}