{% extends 'gallery/base.html' %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <!-- 关于页面头部 -->
    <div class="text-center mb-12 animate-fade-in">
        <h1 class="text-4xl md:text-5xl font-serif font-bold mb-6">关于画廊</h1>
        <p class="text-gray-400 max-w-3xl mx-auto text-lg">
            Yitao-Ren Gallery 致力于展示现代摄影艺术的独特魅力，<br>
            每一幅作品都是摄影师对世界的独特诠释。
        </p>
    </div>

    <!-- 关于内容 -->
    <div class="max-w-4xl mx-auto">
        {% if about %}
        <!-- 如果有关于页面内容 -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16 animate-slide-up">
            <!-- 图片 -->
            {% if about.image %}
            <div class="relative overflow-hidden rounded-2xl bg-dark-card">
                <img
                    src="{{ about.image.url }}"
                    alt="{{ about.title }}"
                    class="w-full h-auto object-cover rounded-2xl"
                    loading="lazy"
                >
                <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300"></div>
            </div>
            {% else %}
            <div class="relative overflow-hidden rounded-2xl bg-dark-card flex items-center justify-center h-64">
                <div class="text-center">
                    <svg class="w-16 h-16 mx-auto text-gray-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path>
                    </svg>
                    <p class="text-gray-500">画廊图片</p>
                </div>
            </div>
            {% endif %}

            <!-- 内容 -->
            <div class="space-y-6">
                <h2 class="text-3xl font-serif font-bold">{{ about.title }}</h2>
                <div class="prose prose-invert max-w-none">
                    <div class="text-gray-300 leading-relaxed whitespace-pre-line">
                        {{ about.content|linebreaks }}
                    </div>
                </div>
            </div>
        </div>
        {% else %}
        <!-- 默认关于内容 -->
        <div class="bg-dark-card rounded-2xl p-8 md:p-12 mb-16 animate-slide-up">
            <div class="prose prose-invert max-w-none">
                <h2 class="text-3xl font-serif font-bold mb-6">YITAO-REN GALLERY</h2>

                <div class="space-y-6 text-gray-300">
                    <p>
                        成立于2026年，Yitao-Ren Gallery 是一个专注于现代摄影艺术展示的在线平台。
                        我们致力于发现和推广具有独特视角和艺术价值的摄影作品，为艺术家和艺术爱好者
                        搭建一个交流与展示的空间。
                    </p>

                    <p>
                        画廊的名字来源于创始人对于摄影艺术的热爱与追求。"Yitao"代表着艺术的独特道路，
                        "Ren"象征着人文关怀。我们相信，每一幅摄影作品都是摄影师与世界对话的方式，
                        是瞬间与永恒的完美结合。
                    </p>

                    <h3 class="text-xl font-semibold mt-8 mb-4 text-gray-200">我们的使命</h3>
                    <ul class="list-disc pl-6 space-y-2">
                        <li>展示高质量的现代摄影艺术作品</li>
                        <li>支持新兴摄影艺术家的发展</li>
                        <li>促进摄影艺术的交流与传播</li>
                        <li>为艺术爱好者提供优质的观赏体验</li>
                    </ul>

                    <h3 class="text-xl font-semibold mt-8 mb-4 text-gray-200">画廊特色</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="bg-gray-900/50 rounded-lg p-4">
                            <div class="text-blue-400 font-semibold mb-2">专业策展</div>
                            <p class="text-sm text-gray-400">每幅作品都经过精心挑选和策展</p>
                        </div>
                        <div class="bg-gray-900/50 rounded-lg p-4">
                            <div class="text-blue-400 font-semibold mb-2">高清展示</div>
                            <p class="text-sm text-gray-400">提供高质量的作品图片展示</p>
                        </div>
                        <div class="bg-gray-900/50 rounded-lg p-4">
                            <div class="text-blue-400 font-semibold mb-2">艺术家支持</div>
                            <p class="text-sm text-gray-400">为艺术家提供展示和推广平台</p>
                        </div>
                        <div class="bg-gray-900/50 rounded-lg p-4">
                            <div class="text-blue-400 font-semibold mb-2">社区交流</div>
                            <p class="text-sm text-gray-400">促进艺术爱好者之间的交流</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        <!-- 团队介绍 -->
        <div class="mb-16">
            <h2 class="text-3xl font-serif font-bold text-center mb-12">我们的团队</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="text-center">
                    <div class="w-32 h-32 mx-auto mb-4 rounded-full bg-gradient-to-br from-blue-600 to-purple-600 flex items-center justify-center">
                        <span class="text-4xl font-bold text-white">YR</span>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">Yitao Ren</h3>
                    <p class="text-gray-400">创始人 & 策展人</p>
                    <p class="text-sm text-gray-500 mt-3">拥有10年摄影艺术策展经验</p>
                </div>
                <div class="text-center">
                    <div class="w-32 h-32 mx-auto mb-4 rounded-full bg-gradient-to-br from-green-600 to-blue-600 flex items-center justify-center">
                        <span class="text-4xl font-bold text-white">LT</span>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">Li Tao</h3>
                    <p class="text-gray-400">技术总监</p>
                    <p class="text-sm text-gray-500 mt-3">负责画廊平台的技术开发与维护</p>
                </div>
                <div class="text-center">
                    <div class="w-32 h-32 mx-auto mb-4 rounded-full bg-gradient-to-br from-purple-600 to-pink-600 flex items-center justify-center">
                        <span class="text-4xl font-bold text-white">AW</span>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">Art Wang</h3>
                    <p class="text-gray-400">艺术顾问</p>
                    <p class="text-sm text-gray-500 mt-3">资深艺术评论家，摄影艺术专家</p>
                </div>
            </div>
        </div>

        <!-- 联系信息 -->
        <div class="bg-dark-card rounded-2xl p-8 md:p-12">
            <h2 class="text-3xl font-serif font-bold text-center mb-8">联系我们</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div class="space-y-6">
                    <div>
                        <h3 class="text-xl font-semibold mb-3 text-gray-200">画廊地址</h3>
                        <p class="text-gray-400">
                            北京市朝阳区艺术大道123号<br>
                            艺术创意园区A座3层
                        </p>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold mb-3 text-gray-200">开放时间</h3>
                        <p class="text-gray-400">
                            周二至周日：10:00 - 18:00<br>
                            周一闭馆
                        </p>
                    </div>
                </div>
                <div class="space-y-6">
                    <div>
                        <h3 class="text-xl font-semibold mb-3 text-gray-200">联系方式</h3>
                        <p class="text-gray-400">
                            电话：+86 10 1234 5678<br>
                            邮箱：info@yitaoren-gallery.com<br>
                            微信：YitaoRenGallery
                        </p>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold mb-3 text-gray-200">关注我们</h3>
                        <div class="flex space-x-4">
                            <a href="#" class="text-gray-400 hover:text-blue-400 transition-colors">
                                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path>
                                </svg>
                            </a>
                            <a href="#" class="text-gray-400 hover:text-blue-400 transition-colors">
                                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"></path>
                                </svg>
                            </a>
                            <a href="#" class="text-gray-400 hover:text-blue-400 transition-colors">
                                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% block extra_js %}
<script>
    // 平滑滚动到联系信息
    document.querySelectorAll('a[href="#contact"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            const contactSection = document.querySelector('.bg-dark-card');
            if (contactSection) {
                contactSection.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });

    // 团队卡片悬停效果
    document.querySelectorAll('.text-center').forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-8px)';
            this.style.transition = 'transform 0.3s ease';
        });

        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
        });
    });
</script>
{% endblock %}
{% endblock %}