{% extends "public/base.html" %}
{% block title %}{{ profile.name if profile }} | {{ profile.institution if profile and profile.institution else
'Portfolio' }}{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="min-h-[60vh] flex flex-col justify-center mb-16">
    <div class="grid md:grid-cols-2 gap-12 items-center">
        <div>
            <div id="hero-subtitle" class="text-[10px] text-cyan mb-4 tracking-[0.3em] uppercase min-h-[15px]"></div>
            <h1 class="text-4xl md:text-5xl font-bold mb-2 leading-tight">
                <span id="hero-name" class="text-white min-h-[48px] block"></span>
            </h1>
            <h2 class="text-xl md:text-2xl font-medium mb-6 text-white/50 min-h-[32px]">
                <span id="hero-native" class="block"></span>
            </h2>
            <p class="text-white/60 text-sm leading-relaxed mb-8">
                {{ profile.bio[:200] if profile and profile.bio }}...
            </p>
            <div class="flex flex-wrap gap-4">
                <a href="/about"
                    class="bg-cyan text-black px-6 py-3 text-xs font-bold uppercase tracking-wider hover:bg-white transition-colors">
                    About Me
                </a>
                <a href="/research"
                    class="border border-white/30 px-6 py-3 text-xs font-bold uppercase tracking-wider hover:border-cyan hover:text-cyan transition-colors">
                    Publications
                </a>
            </div>
        </div>
        <div class="terminal-box p-8 border-cyan">
            <div class="text-[10px] text-cyan mb-6 tracking-widest uppercase">Quick_Stats</div>
            <div class="grid grid-cols-3 gap-6 text-center">
                <div>
                    <div class="text-3xl font-bold text-white">{{ profile.stat1_value if profile and profile.stat1_value
                        else '0+' }}</div>
                    <div class="text-white/40 text-xs mt-1">{{ profile.stat1_label if profile and profile.stat1_label
                        else 'Stat 1' }}</div>
                </div>
                <div>
                    <div class="text-3xl font-bold text-pink">{{ profile.stat2_value if profile and profile.stat2_value
                        else '0+' }}</div>
                    <div class="text-white/40 text-xs mt-1">{{ profile.stat2_label if profile and profile.stat2_label
                        else 'Stat 2' }}</div>
                </div>
                <div>
                    <div class="text-3xl font-bold text-amber">{{ profile.stat3_value if profile and profile.stat3_value
                        else '0+' }}</div>
                    <div class="text-white/40 text-xs mt-1">{{ profile.stat3_label if profile and profile.stat3_label
                        else 'Stat 3' }}</div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Research Areas -->
{% if not profile or profile.show_research_areas %}
{% if research_areas %}
<section class="mb-16">
    <div class="flex items-center gap-4 mb-8">
        <div class="h-px flex-1 bg-gradient-to-r from-transparent to-cyan/50"></div>
        <h2 class="text-xl font-bold text-white tracking-tighter uppercase">{{ profile.label_research_areas if profile
            and profile.label_research_areas else 'Research Areas' }}</h2>
    </div>
    <div class="flex flex-wrap gap-3">
        {% for area in research_areas %}
        <span class="skill-tag text-{{ area.color }}">{{ area.name }}</span>
        {% endfor %}
    </div>
</section>
{% endif %}
{% endif %}

<!-- Quick Links -->
<section class="mb-16">
    <div class="flex items-center gap-4 mb-8">
        <div class="h-px flex-1 bg-gradient-to-r from-transparent to-white/30"></div>
        <h2 class="text-xl font-bold text-white tracking-tighter uppercase">Quick_Links</h2>
    </div>
    <div class="grid md:grid-cols-3 gap-6">
        <a href="/research" class="terminal-box p-6 hover:border-cyan transition-all group">
            <div class="text-3xl mb-4">📚</div>
            <h3 class="text-white font-bold mb-2 group-hover:text-cyan transition-colors">{{ profile.link1_title if
                profile and profile.link1_title else 'Research' }}</h3>
            <p class="text-white/40 text-xs">{{ profile.link1_description if profile and profile.link1_description else
                'Lorem ipsum dolor sit amet.' }}</p>
        </a>
        <a href="/projects" class="terminal-box p-6 hover:border-pink transition-all group">
            <div class="text-3xl mb-4">💼</div>
            <h3 class="text-white font-bold mb-2 group-hover:text-pink transition-colors">{{ profile.link2_title if
                profile and profile.link2_title else 'Projects' }}</h3>
            <p class="text-white/40 text-xs">{{ profile.link2_description if profile and profile.link2_description else
                'Lorem ipsum dolor sit amet.' }}</p>
        </a>
        <a href="/students" class="terminal-box p-6 hover:border-amber transition-all group">
            <div class="text-3xl mb-4">🎓</div>
            <h3 class="text-white font-bold mb-2 group-hover:text-amber transition-colors">{{ profile.link3_title if
                profile and profile.link3_title else 'Students' }}</h3>
            <p class="text-white/40 text-xs">{{ profile.link3_description if profile and profile.link3_description else
                'Lorem ipsum dolor sit amet.' }}</p>
        </a>
    </div>
</section>

<!-- Contact Info -->
{% if not profile or profile.show_contact_info %}
<section class="mb-16">
    <div class="terminal-box p-8 border-pink">
        <div class="text-[10px] text-pink mb-6 tracking-widest uppercase">{{ profile.label_contact_info if profile and
            profile.label_contact_info }}</div>
        <div class="grid md:grid-cols-2 gap-6 text-sm">
            {% if profile and profile.email %}
            <div>
                <div class="text-white/40 text-xs mb-1">Email</div>
                <div class="text-white">{{ profile.email }}</div>
            </div>
            {% endif %}
            {% if profile and profile.phone %}
            <div>
                <div class="text-white/40 text-xs mb-1">Phone</div>
                <div class="text-white">{{ profile.phone }}</div>
            </div>
            {% endif %}
            {% if profile and profile.address %}
            <div class="md:col-span-2">
                <div class="text-white/40 text-xs mb-1">Address</div>
                <div class="text-white">{{ profile.address }}</div>
            </div>
            {% endif %}
        </div>
    </div>
</section>
{% endif %}
</div>
</section>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const nameElement = document.getElementById('hero-name');
        const nativeElement = document.getElementById('hero-native');
        const subtitleElement = document.getElementById('hero-subtitle');

        if (nameElement && subtitleElement) {
            const nameText = "{{ profile.name if profile }}";
            const nativeText = "{{ profile.native_name if profile and profile.native_name }}";
            const subtitleText = "{{ profile.hero_subtitle if profile and profile.hero_subtitle else '' }}";

            nameElement.classList.add('typing-cursor');

            function typeSubtitle(index = 0) {
                if (index < subtitleText.length) {
                    subtitleElement.textContent += subtitleText.charAt(index);
                    setTimeout(() => typeSubtitle(index + 1), 30);
                } else {
                    subtitleElement.classList.remove('typing-cursor');
                }
            }

            function typeNative(index = 0) {
                if (index < nativeText.length) {
                    nativeElement.textContent += nativeText.charAt(index);
                    setTimeout(() => typeNative(index + 1), 60);
                } else {
                    nativeElement.classList.remove('typing-cursor');
                    subtitleElement.classList.add('typing-cursor');
                    typeSubtitle();
                }
            }

            function typeName(index = 0) {
                if (index < nameText.length) {
                    nameElement.textContent += nameText.charAt(index);
                    setTimeout(() => typeName(index + 1), 80);
                } else {
                    nameElement.classList.remove('typing-cursor');
                    nativeElement.classList.add('typing-cursor');
                    typeNative();
                }
            }

            // Start after a small delay
            setTimeout(() => typeName(), 500);
        }
    });
</script>
{% endblock %}