<script>
    import { onMount } from 'svelte';
    import Header from '$lib/components/Header.svelte';
    import Footer from '$lib/components/Footer.svelte';

    import imagemContato from '$lib/assets/imagem-contato.png';
    import contatoContaDigital from '$lib/assets/contato-conta-digital.png';
    import facebookGreen from '$lib/assets/facebook-green.svg';
    import instagramGreen from '$lib/assets/instagram-green.svg';
    import tiktokGreen from '$lib/assets/tiktok-green.svg';
    import linkedinGreen from '$lib/assets/linkedin-green.svg';
    import youtubeGreen from '$lib/assets/youtube-green.svg';

    const contactCards = [
        {
            title: 'SAC',
            description: 'Dúvidas ou sugestões? Nossos especialistas estão prontos para atender você.',
            schedule: 'De segunda a sexta-feira das 8:30h às 17:45h\n(exceto feriados)',
            contact: 'Chat on-line',
            href: 'mailto:suporte@basspago.com',
            ariaLabel: 'Enviar email para suporte@basspago.com'
        },
        {
            title: 'Ouvidoria',
            description: 'Não teve solução no atendimento? Registre sua reclamação ou denúncia aqui:',
            schedule: 'De segunda a sexta-feira das 8:30h às 17:45h\n(exceto feriados)',
            contact: 'ouvidoria@basspago.com',
           href: 'mailto:ouvidoria@basspago.com',
            ariaLabel: 'Chat Online Bass Pago'
        },
        {
            title: 'Vendas',
            description: 'Quer contratar nossos produtos e serviços? Fale com a gente.',
            schedule: 'De segunda a sexta-feira das 8:30h às 17:45h\n(exceto feriados)',
            contact: 'Chat on-line ou comercial@basspago.com',
            href: 'mailto:comercial@basspago.com',
            ariaLabel: 'Enviar email para comercial@basspago.com'
        }
    ];

    const socialMedia = [
        {
            name: 'Facebook',
            icon: facebookGreen,
            href: 'https://www.facebook.com/basspago/',
            ariaLabel: 'Seguir no Facebook'
        },
        {
            name: 'Instagram',
            icon: instagramGreen,
            href: 'https://www.instagram.com/basspago/',
            ariaLabel: 'Seguir no Instagram'
        },
        {
            name: 'TikTok',
            icon: tiktokGreen,
            href: 'https://www.tiktok.com/@basspago',
            ariaLabel: 'Seguir no TikTok'
        },
        {
            name: 'LinkedIn',
            icon: linkedinGreen,
            href: 'https://www.linkedin.com/company/bass-pago/',
            ariaLabel: 'Seguir no LinkedIn'
        },
        {
            name: 'YouTube',
            icon: youtubeGreen,
            href: 'https://www.youtube.com/@basspago',
            ariaLabel: 'Seguir no YouTube'
        }
    ];

    const faqs = [
        {
            question: 'Há outros canais de suporte seguros além destes?',
            answer: 'Não. Todo o suporte da Bass Pago é feito exclusivamente pelo canais oficiais divuldagados nesta página.'
        },
        {
            question: 'Como a Bass Pago previne fraudes?',
            answer: 'Nossas soluções possuem monitoramento em tempo real, controles antifraude e alertas automáticos, reduzindo riscos de transações suspeitas.'
        },
        {
            question: 'Como identificar tentativas de fraude ou falso atendente?',
            answer: 'Desconfie de contatos que pedem dados confidenciais ou pressionam por decisões rápidas. Verifique sempre pelos canis oficiais antes de agir.'
        },
        {
            question: 'Meus dados estão protegidos?',
            answer: 'Sim. Todos os seus dados são criptografados e armazenados com padrões de segurança de nível bancário, garantindo proteção total contra acessos não autorizados.'
        },
        {
            question: 'Alguém me ligou pedindo minha senha, é normal?',
            answer: 'Não. A Bass Pago nunca solicita senhas, códigos ou dados sensíveis por telefone, e-mail ou WhatsApp. Sempre confirme pelo app oficial ou canais de suporte.'
        },
        {
            question: 'Posso compartilhar minha senha com minha equipe?',
            answer: 'Não. Cada usuário deve ter acesso individual. Compartilhar senhas coloca em risco a segurança de sua conta.'
        }
    ];

    let openFaq = null;

    function toggleFaq(index) {
        openFaq = openFaq === index ? null : index;
    }

    onMount(() => {
        const observer = new IntersectionObserver(
            (entries) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        entry.target.style.opacity = '1';
                        entry.target.style.transform = 'translateY(0)';
                    }
                });
            },
            { threshold: 0.1 }
        );

        const elements = document.querySelectorAll('.fade-up, .fade-right, .fade-left');
        elements.forEach((el) => observer.observe(el));

        return () => observer.disconnect();
    });
</script>

<svelte:head>
    <title>Centro de Suporte - BassPago</title>
    <meta name="description" content="Precisa de ajuda? Nossos canais de atendimento estão disponíveis para responder suas dúvidas, resolver problemas e fornecer informações." />
</svelte:head>

<Header />

<!-- Contact Section -->
<section class="contact-section">
    <!-- Contact Hero Section -->
    <div class="contact-hero">
        <div class="contact-hero__content">
            <h1 class="contact-hero__title fade-up">Precisa de ajuda?</h1>
            <div class="mobile">
                <div class="contact-hero__background fade-up">
                    <img src={imagemContato} alt="centro-de-suporte" />
                </div>
            </div>
            <p class="contact-hero__subtitle fade-up">
                Nossos canais de atendimento estão disponíveis para responder
                suas dúvidas, resolver problemas e fornecer informações.
            </p>
            <div class="desktop">
                <div class="contact-hero__background fade-up">
                    <img src={imagemContato} alt="centro-de-suporte" />
                </div>
            </div>
        </div>
    </div>

    <!-- Contact Cards Section -->
    <div class="contact-cards">
        <!-- First Row - SAC, Ouvidoria, Venda -->
        <div class="contact-cards__row">
            {#each contactCards as card}
                <div class="contact-card fade-right">
                    <div class="contact-card__content">
                        <p class="contact-card__title">{card.title}</p>
                        <p class="contact-card__description">{card.description}</p>
                        <p class="contact-card__schedule">{card.schedule}</p>
                        <a 
                            href={card.href} 
                            class="contact-card__contact" 
                            tabindex="0"
                            aria-label={card.ariaLabel}
                        >
                            {card.contact}
                        </a>
                    </div>
                </div>
            {/each}
        </div>

        <!-- Second Row - Social Media -->
        <div class="contact-cards__row">
            <div class="contact-card contact-card--social fade-up">
                <div class="contact-card__content">
                    <p class="contact-card__title">Redes sociais</p>
                    <p class="contact-card__description">
                        Siga nossas redes sociais oficiais<br />e fique por dentro de todas as novidades.
                    </p>
                    <div class="contact-card__social-icons">
                        {#each socialMedia as social}
                            <a 
                                href={social.href} 
                                class="contact-card__social-icon" 
                                tabindex="0"
                                aria-label={social.ariaLabel}
                                
                                rel="noopener noreferrer"
                            >
                                <img src={social.icon} alt={social.name} width="20" height="20" />
                            </a>
                        {/each}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- FAQ Section -->
<section class="faq-section">
    <div class="faq-container">
        <h2 class="faq-title fade-up">Perguntas frequentes</h2>
        <div class="faq-list">
            {#each faqs as faq, i}
                <div class="faq-item fade-up" style="animation-delay: {i * 0.1}s;">
                    <button class="faq-question" on:click={() => toggleFaq(i)} aria-expanded={openFaq === i}>
                        {faq.question}
                        <span class="faq-icon" class:open={openFaq === i}>+</span>
                    </button>
                    {#if openFaq === i}
                        <div class="faq-answer">
                            <p>{faq.answer}</p>
                        </div>
                    {/if}
                </div>
            {/each}
        </div>
    </div>
</section>

<Footer />

<style>
/* =========================
   CONTACT PAGE STYLES
   ========================= */

:root {
    --color-dark: #000;
    --color-white: #fff;
    --color-black: #000;
    --color-primary: #41FE95;
    --color-text-light: rgba(255, 255, 255, 0.6);
    --font-family-space-grotesk: 'Space Grotesk', sans-serif;
    --border-radius-lg: 24px;
    --border-radius-md: 15px;
    --p-minus: 16px;
}

/* Contact Section - Main Container */
.contact-section {
    padding: 60px 20px 60px;
    background-color: var(--color-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 45px;
}

/* Contact Hero Section */
.contact-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1116px;
    margin: 0 auto;
    padding-top: 100px;
}

/* Contact Hero Content */
.contact-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    width: 100%;
    height: 100%;
}

/* Contact Hero Title */
.contact-hero__title {
    font-family: var(--font-family-space-grotesk);
    font-weight: 400;
    line-height: 1;
    color: var(--color-white);
    text-align: center;
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.5rem);
}

/* Contact Hero Subtitle */
.contact-hero__subtitle {
    font-family: var(--font-family-space-grotesk);
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-text-light);
    text-align: center;
    max-width: 712px;
    margin: 0;
    font-size: 1.1rem;
}

/* Contact Hero Background */
.contact-hero__background {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: var(--border-radius-lg);
}

.contact-hero__background img {
    width: 100%;
    max-width: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: var(--border-radius-lg);
}

.mobile {
    display: none;
}

.desktop {
    display: block;
}

/* Contact Cards Container */
.contact-cards {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    max-width: 1116px;
    margin: 0 auto;
}

/* Contact Cards Row */
.contact-cards__row {
    display: flex;
    gap: 15px;
    width: 100%;
}

/* Contact Card */
.contact-card {
    background-color: rgba(255, 255, 255, 0.04);
    border-radius: var(--border-radius-md);
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    flex: 1;
    min-height: 222px;
}

/* Contact Card Content */
.contact-card__content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    justify-content: center;
}

.contact-card__content p {
    font-size: var(--p-minus);
}

/* Contact Card Title */
.contact-card__title {
    font-family: var(--font-family-space-grotesk);
    font-weight: 500;
    line-height: 1;
    color: var(--color-white);
    letter-spacing: -0.16px;
    margin: 0;
    white-space: nowrap;
}

/* Contact Card Description */
.contact-card__description {
    font-family: var(--font-family-space-grotesk);
    font-weight: 400;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: -0.14px;
    margin: 0;
}

/* Contact Card Schedule */
.contact-card__schedule {
    font-family: var(--font-family-space-grotesk);
    font-weight: 400;
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-text-light);
    letter-spacing: -0.14px;
    max-width: 302px;
    margin: 0;
    white-space: pre-line;
}

/* Contact Card Contact Info */
.contact-card__contact {
    font-family: var(--font-family-space-grotesk);
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    color: var(--color-primary);
    letter-spacing: -0.12px;
    margin: 0;
    text-decoration: none;
    transition: opacity 0.3s ease;
    white-space: nowrap;
}

.contact-card__contact:hover {
    opacity: 0.8;
}

/* Social Media Card */
.contact-card--social {
    width: 100%;
    min-height: auto;
    padding: 30px;
}

/* Social Media Icons */
.contact-card__social-icons {
    display: flex;
    gap: 15px;
    align-items: center;
    width: 131px;
    justify-content: space-between;
}

.contact-card__social-icon {
    width: 20px;
    height: 20px;
    transition: opacity 0.3s ease;
    flex-shrink: 0;
}

.contact-card__social-icon:hover {
    opacity: 0.8;
}

/* FAQ Section */
.faq-section {
    background-color: var(--color-dark);
    padding: 80px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.faq-container {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

.faq-title {
    font-family: var(--font-family-space-grotesk);
    font-weight: 400;
    color: var(--color-white);
    text-align: center;
    margin-bottom: 40px;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-item {
    background-color: rgba(255, 255, 255, 0.04);
    border: none;
    border-radius: var(--border-radius-md);
    overflow: hidden;
}

.faq-question {
    width: 100%;
    padding: 20px 25px;
    background: none;
    border: none;
    text-align: left;
    font-family: var(--font-family-space-grotesk);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-white);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
}

.faq-question:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.faq-icon {
    font-size: 20px;
    transition: transform 0.3s ease;
    color: var(--color-primary);
    font-weight: bold;
    flex-shrink: 0;
    margin-left: 10px;
}

.faq-icon.open {
    transform: rotate(45deg);
}

.faq-answer {
    padding: 0 25px 20px;
    overflow: hidden;
    animation: slideDown 0.3s ease-out forwards;
}

.faq-answer p {
    font-family: var(--font-family-space-grotesk);
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}

/* Utility classes */
.xs\:hidden {
    display: none;
}

.lg\:flex {
    display: flex;
}

.lg\:hidden {
    display: none;
}

.full {
    width: 100%;
}

/* Fade animations */
.fade-up, .fade-right, .fade-left {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.fade-right {
    transform: translateX(30px);
}

.fade-left {
    transform: translateX(-30px);
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        max-height: 300px;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (min-width: 1025px) {
    .contact-hero {
        padding-top: 200px;
        max-width: 1116px;
    }

    .contact-cards {
        max-width: 1116px;
    }

    .xs\:hidden {
        display: block;
    }

    .lg\:hidden {
        display: none;
    }

    .mobile {
        display: none;
    }

    .desktop {
        display: block;
    }
}

/* Tablet */
@media (max-width: 1024px) {
    .contact-hero {
        max-width: 100%;
    }

    .contact-cards {
        max-width: 100%;
    }

    .contact-cards__row {
        flex-wrap: wrap;
    }

    .contact-card {
        flex: 1 1 calc(50% - 7.5px);
        min-width: 280px;
    }

    .contact-card--social {
        flex: 1 1 100%;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .contact-hero {
        gap: 30px;
    }

    .contact-hero__title {
        font-size: 32px;
        letter-spacing: -0.32px;
    }

    .contact-hero__subtitle {
        font-size: 18px;
        letter-spacing: -0.18px;
    }

    .contact-cards__row {
        flex-direction: column;
        gap: 10px;
    }

    .contact-card {
        padding: 20px;
        gap: 20px;
        min-height: auto;
    }

    .contact-card__description,
    .contact-card__schedule {
        max-width: 100%;
    }

    .contact-card__social-icons {
        gap: 10px;
    }

    .mobile {
        display: block;
    }

    .desktop {
        display: none;
    }

    .xs\:hidden {
        display: none;
    }

    .lg\:flex {
        display: none;
    }

    .lg\:hidden {
        display: block;
    }

    /* FAQ specific mobile adjustments */
    .faq-question {
        padding: 15px 20px;
        font-size: 15px;
    }
    .faq-answer {
        padding: 0 20px 15px;
    }
    .faq-answer p {
        font-size: 13px;
    }
}
</style>