{% extends "base.html" %}
{% block title %}About Us | {{ site_settings.site_name }}{% endblock %}

{% block content %}


<!-- Team Member Section -->
{% if team_members %}
<section class="pt-8 pb-20 lg:pt-12 lg:pb-24 bg-slate-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">


        <div class="space-y-16 lg:space-y-24">
            {% for member in team_members %}
            <div class="flex flex-col lg:flex-row items-start gap-8 lg:gap-16" data-aos="fade-up">
                <!-- Image Side -->
                <div class="w-full lg:w-1/3">
                    <div class="relative rounded-2xl overflow-hidden shadow-xl group">
                        {% if member.photo %}
                        <img src="{{ member.photo.url }}" alt="{{ member.name }}"
                            class="w-full h-auto object-cover transform group-hover:scale-[1.02] transition-transform duration-700">
                        {% else %}
                        <img src="https://i.pravatar.cc/800?img={{ forloop.counter|add:30 }}" alt="{{ member.name }}"
                            class="w-full h-auto object-cover transform group-hover:scale-[1.02] transition-transform duration-700">
                        {% endif %}
                        <div
                            class="absolute inset-0 bg-indigo-900/10 group-hover:bg-transparent transition-colors duration-500">
                        </div>
                    </div>
                </div>

                <!-- Content Side -->
                <div class="w-full lg:w-2/3 flex flex-col justify-center">
                    <h3 class="text-3xl font-bold text-slate-900 mb-2">{{ member.name }}</h3>
                    <p class="text-lg font-semibold text-indigo-600 mb-6 uppercase tracking-wide">{{ member.role }}</p>

                    <div class="prose prose-slate prose-lg max-w-none text-slate-600">
                        {{ member.bio|safe }}
                    </div>

                    <div class="mt-8 flex flex-col sm:flex-row sm:items-center gap-4 sm:gap-6 flex-wrap">
                        <div class="inline-flex items-center text-slate-600 font-medium flex-wrap">
                            <svg class="w-5 h-5 mr-2 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                            </svg>
                            <span>E:&nbsp;</span>
                            {% if member.email_list %}
                                {% for email in member.email_list %}
                                <a href="https://mail.google.com/mail/?view=cm&fs=1&to={{ email }}" target="_blank" rel="noopener noreferrer" class="hover:text-indigo-600 hover:underline transition-colors cursor-pointer" title="Send email to {{ email }} via Gmail">{{ email }}</a>{% if not forloop.last %}<span class="font-bold text-slate-800">,</span>&nbsp;{% endif %}
                                {% endfor %}
                            {% else %}
                                <a href="https://mail.google.com/mail/?view=cm&fs=1&to=dummy@gmail.com" target="_blank" rel="noopener noreferrer" class="hover:text-indigo-600 hover:underline transition-colors cursor-pointer" title="Send email to dummy@gmail.com via Gmail">dummy@gmail.com</a>
                            {% endif %}
                        </div>

                        {% if member.linkedin_url %}
                        <a href="{{ member.linkedin_url }}" target="_blank" rel="noopener noreferrer"
                            class="inline-flex items-center text-indigo-600 hover:text-indigo-800 font-medium transition-colors">
                            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                <path fill-rule="evenodd"
                                    d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"
                                    clip-rule="evenodd" />
                            </svg>
                            Connect on LinkedIn
                        </a>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}


{% endblock %}