---
import { aboutConfig } from '../../data/about/config';
---
<!-- CHAPTER 7: LET'S TALK (FOOTER & CONTACT) -->
<section id="talk" class="border-t border-border-light pt-16 md:pt-20 mb-16 scroll-mt-28">
    <!-- Main Footer Area -->
    <div class="space-y-10">
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
            <div>
                <h2 class="font-serif text-3xl md:text-4xl text-ink font-bold tracking-tight" data-i18n="contact-title">
                    Cùng Nhi tạo nên những điều ý nghĩa.
                </h2>
                <p class="text-ink-secondary text-sm sm:text-base mt-2" data-i18n="contact-desc">
                    Hợp tác các lĩnh vực du lịch bền vững, và du lịch cao cấp tại Việt Nam: Nghiên cứu phát triển Du Lịch bền vững, phát triển truyền thông điểm đến; Phát triển chiến lược kinh doanh thu hút khách Cao Cấp...
                </p>
            </div>
            <div class="shrink-0">
                <a href={aboutConfig.whatsappUrl} target="_blank" rel="noopener noreferrer" class="inline-block px-8 py-4 rounded-full border-2 border-terracotta text-terracotta font-serif font-semibold text-lg hover:bg-terracotta hover:text-white transition-all duration-300 shadow-sm whitespace-nowrap" data-i18n="contact-cta">
                    Kết nối ngay •
                </a>
            </div>
        </div>

        <!-- Contact Details Grid (Fully Transparent, No Card Backgrounds, No Bold Text) -->
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 pt-6 border-t border-border-light text-sm text-ink-secondary">
            <a href={`mailto:${aboutConfig.email}`} class="flex items-center space-x-3 group transition-colors">
                <span class="p-2 rounded-full bg-paper-alt text-terracotta group-hover:bg-terracotta group-hover:text-white transition-colors">
                    <svg class="w-5 h-5" 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"></path></svg>
                </span>
                <div>
                    <span class="text-xs tracking-wider block">Email</span>
                    <span class="text-ink group-hover:text-terracotta transition-colors">{aboutConfig.email}</span>
                </div>
            </a>

            <a href={aboutConfig.phoneUrl} class="flex items-center space-x-3 group transition-colors">
                <span class="p-2 rounded-full bg-paper-alt text-terracotta group-hover:bg-terracotta group-hover:text-white transition-colors">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></svg>
                </span>
                <div>
                    <span class="text-xs tracking-wider block">Phone / Zalo</span>
                    <span class="text-ink group-hover:text-terracotta transition-colors">{aboutConfig.phone}</span>
                </div>
            </a>

            <a href={aboutConfig.linkedinUrl} target="_blank" rel="noopener noreferrer" class="flex items-center space-x-3 group transition-colors">
                <span class="p-2 rounded-full bg-paper-alt text-terracotta group-hover:bg-terracotta group-hover:text-white transition-colors">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.28 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.75M6.46 10.9v8.37H9.2v-8.37H6.46M7.83 6.88a1.68 1.68 0 0 0-1.68 1.68 1.68 1.68 0 0 0 1.68 1.68 1.68 1.68 0 0 0 1.68-1.68 1.68 1.68 0 0 0-1.68-1.68Z"/></svg>
                </span>
                <div>
                    <span class="text-xs tracking-wider block">LinkedIn</span>
                    <span class="text-ink group-hover:text-terracotta transition-colors">{aboutConfig.linkedin}</span>
                </div>
            </a>
        </div>

        <!-- Footer Bottom & Copyright (2026) -->
        <div class="pt-8 flex flex-col sm:flex-row items-center justify-between text-xs text-ink-secondary border-t border-border-light gap-4">
            <span data-i18n="footer-copy">© 2026 Nhi Võ. All rights reserved.</span>
            <span class="font-serif italic text-sm text-ink flex items-center space-x-1">
                <span data-i18n="footer-made">Made by Nhi Võ</span>
                <span class="text-terracotta ml-1">♡</span>
            </span>
            <div class="flex items-center space-x-4">
                <a href="https://nhinhivo.substack.com/" target="_blank" rel="noopener noreferrer" class="hover:underline hover:text-terracotta transition-colors" data-i18n="footer-substack">View Substack</a>
                <span class="text-border-light opacity-50">|</span>
                <a href="#story" class="hover:underline hover:text-terracotta transition-colors">Back to top ↑</a>
            </div>
        </div>
    </div>
</section>