import { initParticles } from './particles.js';
import { initHeader } from './header.js';

const SERVICES = [
    {
        id: 'chatbots',
        title: 'Chatbots & Assistentes',
        badge: 'Conversacional',
        description: 'Desenvolvemos interfaces conversacionais inteligentes que entendem contexto, mantêm histórico e oferecem respostas precisas.',
        features: ['Chatbots com RAG e assistentes virtuais', 'Bots para WhatsApp, Telegram e Discord', 'Memória de longo prazo e personalização', 'Multi-idiomas com tradução automática'],
        tags: ['RAG', 'Embeddings', 'Vector DB', 'Fine-tuning'],
        icon: '<path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>'
    },
    {
        id: 'dashboards',
        title: 'Dashboards & Analytics',
        badge: 'BI',
        description: 'Transformamos seus dados em insights acionáveis com dashboards inteligentes, análises preditivas e relatórios automatizados.',
        features: ['Dashboards interativos e análise preditiva', 'Relatórios automatizados com alertas inteligentes', 'Visualizações customizadas e KPIs em tempo real', 'Integração com múltiplas fontes de dados'],
        tags: ['SQL', 'Metabase', 'Power BI'],
        icon: '<rect x="3" y="12" width="4" height="8" rx="1"/><rect x="10" y="8" width="4" height="12" rx="1"/><rect x="17" y="4" width="4" height="16" rx="1"/>'
    },
    {
        id: 'aplicativos',
        title: 'Aplicativos',
        badge: 'Mobile & Web',
        description: 'Desenvolvemos aplicativos mobile e web sob medida, com foco em performance, usabilidade e integração nativa com IA.',
        features: ['Apps nativos e híbridos (iOS & Android)', 'Progressive Web Apps (PWA)', 'Interfaces responsivas e acessíveis', 'Integração com APIs e serviços de IA'],
        tags: ['React Native', 'Flutter', 'PWA', 'TypeScript'],
        icon: '<rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18"/>'
    },
    {
        id: 'integracoes',
        title: 'Integrações & APIs',
        badge: 'Enterprise',
        description: 'Conectamos IA aos seus sistemas existentes (CRM, ERP, e-commerce) através de APIs robustas e integrações enterprise-grade.',
        features: ['APIs RESTful e GraphQL para consumo de IA', 'Integrações com ERPs e plataformas de e-commerce', 'Autenticação segura e rate limiting', 'Documentação completa e SDKs'],
        tags: ['REST API', 'GraphQL', 'Webhooks', 'ETL'],
        icon: '<circle cx="12" cy="12" r="3"/><path d="M12 2v4m0 12v4M2 12h4m12 0h4M4.9 4.9l2.8 2.8m8.4 8.4l2.8 2.8M4.9 19.1l2.8-2.8m8.4-8.4l2.8-2.8"/>'
    }
];

function renderServices() {
    const grid = document.querySelector('.services__grid');
    if (!grid) return;

    SERVICES.forEach((service, i) => {
        const card = document.createElement('article');
        card.className = 'service-card';
        card.setAttribute('data-animate', '');
        card.style.setProperty('--delay', `${i * 100}ms`);

        card.innerHTML = `
            <div class="service-card__header">
                <div class="service-card__icon">
                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">${service.icon}</svg>
                </div>
                <h3 class="service-card__title">${service.title}</h3>
                <span class="service-card__badge">${service.badge}</span>
            </div>
            <p class="service-card__description">${service.description}</p>
            <ul class="service-card__features">
                ${service.features.map(f => `<li>${f}</li>`).join('')}
            </ul>
            <div class="service-card__tags">
                ${service.tags.map(t => `<span class="chip">${t}</span>`).join('')}
            </div>
        `;

        grid.appendChild(card);
    });
}

document.addEventListener('DOMContentLoaded', () => {
    initParticles('particles', 15);
    initHeader();
    renderServices();

    document.getElementById('scrollDown')?.addEventListener('click', () => {
        document.getElementById('servicos')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
    });

    document.getElementById('scrollUp')?.addEventListener('click', () => {
        document.getElementById('hero')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
    });

    window.addEventListener('scroll', () => {
        const scrollDown = document.getElementById('scrollDown');
        const scrollUp = document.getElementById('scrollUp');
        const hero = document.getElementById('hero');

        if (!hero) return;

        const scrollY = window.scrollY;
        const heroHeight = hero.offsetHeight;

        // Scroll Down Visibility (only at the very top)
        if (scrollDown) {
            if (scrollY < 20) {
                scrollDown.style.opacity = '0.8';
                scrollDown.style.pointerEvents = 'auto';
            } else {
                scrollDown.style.opacity = '0';
                scrollDown.style.pointerEvents = 'none';
            }
        }

        // Scroll Up Visibility (now handled by DOM position)
        if (scrollUp) {
            scrollUp.style.opacity = '0.8';
            scrollUp.style.pointerEvents = 'auto';
        }
    }, { passive: true });

    document.querySelectorAll('a[href^="#"]').forEach(link => {
        link.addEventListener('click', (e) => {
            e.preventDefault();
            const target = document.querySelector(link.getAttribute('href'));
            target?.scrollIntoView({ behavior: 'smooth' });
        });
    });

    const animatedElements = document.querySelectorAll('[data-animate]');
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animate-in');
                observer.unobserve(entry.target);
            }
        });
    }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
    animatedElements.forEach(el => observer.observe(el));

    const hamburger = document.getElementById('menuToggle');
    const mobileMenu = document.getElementById('mobileMenu');
    hamburger?.addEventListener('click', () => {
        const isOpen = mobileMenu.classList.toggle('mobile-menu--open');
        hamburger.classList.toggle('hamburger--active', isOpen);
        document.body.style.overflow = isOpen ? 'hidden' : '';
    });

    mobileMenu?.querySelectorAll('a').forEach(link => {
        link.addEventListener('click', () => {
            mobileMenu.classList.remove('mobile-menu--open');
            hamburger.classList.remove('hamburger--active');
            document.body.style.overflow = '';
        });
    });
});