<script>
    import { onMount } from 'svelte';
    import { fly, fade } from 'svelte/transition';
    import { 
        ArrowRight,
        CheckCircle,
        ChevronDown,
        UserPlus,
        Settings,
        Code,
        TrendingUp,
        CreditCard, 
        Wifi,
        Users, 
        BarChart3, 
        Bell,
        Zap,
        Smartphone 
    } from 'lucide-svelte';
    
    import Header from '$lib/components/Header.svelte';
    import Footer from '$lib/components/Footer.svelte';
    import backgroundPDV from '$lib/assets/backgroundPDV.png';

    import appleStore from '$lib/assets/apple-store.svg';
    import googlePlay from '$lib/assets/google-play.svg';
    import phoneCard from '$lib/assets/phone-card.png'; 
    import iphonePixMockup from '$lib/assets/iphone-pix-mockup.png'; 
    import bankingInterfaceMockup from '$lib/assets/banking-interface-mockup.png'; 
    import cubesPlus from '$lib/assets/cubes-plus.svg'; 

    let mounted = false;
    let visibleElements = {};
    let activeFeature = 'pagamentos';

    const pdvFeatures = [
        {
            icon: CreditCard,
            title: 'Pagamento Seguro',
            description: 'Receba com segurança e veja a confirmação na hora.'
        },
        {
            icon: Wifi,
            title: 'Link de pagamento',
            description: 'Gere links de cobrança para envio por WhatsApp.'
        },
        {
            icon: BarChart3,
            title: 'Crie Operadores',
            description: 'Toda a equipe cobra, você controla tudo na palma da mão.'
        },
        {
            icon: Users,
            title: 'Extratos Inteligentes',
            description: 'Visualize extratos por operador, loja ou período.'
        },
        {
            icon: Bell,
            title: 'Notificações',
            description: 'Receba notificações em tempo real (sem precisar de comprovante).'
        },
        {
            icon: Zap,
            title: 'Smart',
            description: 'Aplicativo leve, intuitivo e pronto para o seu dia a dia.'
        }
    ];

    const detailedFeatures = {
        pagamentos: {
            title: 'Sistema de Pagamentos Completo',
            description: 'Aceite todas as formas de pagamento em um terminal moderno e seguro.',
            image: iphonePixMockup, 
            items: [
                'Cartão de crédito e débito',
                'PIX com QR Code dinâmico',
                'Carteiras digitais (Apple Pay, Google Pay)',
                'Dinheiro com controle de troco',
                'Parcelamento automático'
            ]
        },
        gestao: {
            title: 'Gestão Inteligente',
            description: 'Controle completo do seu negócio com relatórios e analytics avançados.',
            image: bankingInterfaceMockup, 
            items: [
                'Dashboard em tempo real',
                'Controle de estoque automático',
                'Relatórios de vendas detalhados',
                'Gestão de funcionários',
                'Análise de performance'
            ]
        },
        integracao: {
            title: 'Integração Simples',
            description: 'Conecte facilmente com seus sistemas existentes através de APIs robustas.',
            items: [
                'APIs RESTful completas',
                'Webhooks em tempo real',
                'SDKs para principais linguagens',
                'Documentação detalhada',
                'Suporte técnico especializado'
            ]
        }
    };

    const implementationSteps = [
        {
            icon: UserPlus,
            title: 'Cadastre-se',
            description: 'Crie sua conta e configure os dados da sua empresa.'
        },
        {
            icon: Settings,
            title: 'Configure seu PDV',
            description: 'Personalize interface, produtos e formas de pagamento.'
        },
        {
            icon: Code,
            title: 'Integre com seu sistema',
            description: 'Use nossas APIs para conectar com seus sistemas existentes.'
        },
        {
            icon: TrendingUp,
            title: 'Comece a vender',
            description: 'Inicie as vendas e monitore performance em tempo real.'
        }
    ];

    const faqs = [
        {
            question: 'O PDV funciona sem internet?',
            answer: 'Sim! Nosso PDV funciona offline e sincroniza automaticamente quando a conexão é restabelecida. Você nunca perde uma venda.',
            open: false
        },
        {
            question: 'Posso integrar com meu sistema atual?',
            answer: 'Sim. Oferecemos APIs completas e SDKs para facilitar a integração com ERPs, sistemas de estoque e outras ferramentas que você já usa.',
            open: false
        },
        {
            question: 'Quais formas de pagamento são aceitas?',
            answer: 'Aceitamos cartões de crédito e débito, PIX, carteiras digitais (Apple Pay, Google Pay), dinheiro e outras formas de pagamento digitais.',
            open: false
        },
        {
            question: 'Como funciona o controle de estoque?',
            answer: 'O sistema atualiza automaticamente o estoque a cada venda, com alertas de produtos em baixa e relatórios detalhados de movimentação.',
            open: false
        },
        {
            question: 'Posso usar em múltiplas lojas?',
            answer: 'Sim! Nossa solução suporta múltiplas lojas com gestão centralizada, permitindo controle total de toda sua rede de pontos de venda.',
            open: false
        },
        {
            question: 'Há limite de transações?',
            answer: 'Não há limite de transações. Nossa infraestrutura escala automaticamente conforme seu negócio cresce.',
            open: false
        }
    ];

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

        const elements = document.querySelectorAll('.fade-up, [data-animate]');
        elements.forEach((el) => observer.observe(el));

        return () => observer.disconnect();
    });

    function setActiveFeature(feature) {
        activeFeature = feature;
    }

    function toggleFaq(index) {
        faqs[index].open = !faqs[index].open;
    }
</script>

<svelte:head>
    <title>PDV - Ponto de Venda Digital - BassPago</title>
    <meta name="description" content="Sistema de PDV completo com pagamentos integrados. Aceite cartões, PIX e carteiras digitais com segurança e praticidade." />
</svelte:head>

<Header />

<!-- Hero Section -->
<section class="pdv-hero">
    <div class="pdv-hero__container">
        <div class="pdv-hero__content fade-up">
            <h1>Sistema de PDV integrado a conta</h1>
            
            <div class="mobile">
                <div class="pdv-hero__visual fade-up">
                    <div class="pdv-visual-bg">
                        <img src={phoneCard} alt="PDV Bass Pago" class="pdv-mockup" />
                    </div>
                </div>
            </div>
            
            <p class="pdv-hero__subtitle">
                Diga adeus às maquininhas. Receba pagamentos de forma rápida e segura, direto pelo aplicativo.
            </p>
            
            <a href="/precos#form-negociacao-basspago" class="cta-btn">
                Começar agora <ArrowRight size={16} class="icon" />
            </a>
        </div>
        
        <div class="pdv-hero__visual fade-up desktop">
            <div class="pdv-visual-bg">
                <img src={phoneCard} alt="PDV Bass Pago" class="pdv-mockup" />
            </div>
        </div>
    </div>
</section>

<!-- Features Section -->
<section class="pdv-features-section">
    <div class="pdv-features__container">
        <div class="section-header">
            <h2 class="fade-up">Toda a operação na palma da sua mão</h2>
            <p class="fade-up">
                Gerencie múltiplos usuários e acompanhe cada cobrança com segurança, agilidade e total visibilidade.
            </p>
        </div>
        
        <div class="pdv-features__grid">
            {#each pdvFeatures as feature}
                <div class="pdv-feature-card fade-up">
                    <div class="pdv-feature-card__icon">
                        <svelte:component this={feature.icon} size={24} />
                    </div>
                    <div class="pdv-feature-card__content">
                        <h3>{feature.title}</h3>
                        <p>{feature.description}</p>
                    </div>
                </div>
            {/each}
        </div>
    </div>
</section>

<!-- Detailed Features Section -->
<section class="pdv-detailed-features">
    <div class="pdv-detailed__container">
        <div class="pdv-detailed__header fade-up">
            <h2>Funcionalidades completas para seu negócio</h2>
        </div>
        
        <div class="pdv-detailed__tabs">
            <button 
                class="tab-button {activeFeature === 'pagamentos' ? 'active' : ''}" 
                on:click={() => setActiveFeature('pagamentos')}
            >
                Pagamentos
            </button>
            <button 
                class="tab-button {activeFeature === 'gestao' ? 'active' : ''}" 
                on:click={() => setActiveFeature('gestao')}
            >
                Gestão
            </button>
            <button 
                class="tab-button {activeFeature === 'integracao' ? 'active' : ''}" 
                on:click={() => setActiveFeature('integracao')}
            >
                Integração
            </button>
        </div>
        
        <div class="pdv-detailed__content {activeFeature === 'integracao' ? 'integracao-layout' : ''}">
            <div class="pdv-detailed__text fade-up {activeFeature === 'integracao' ? 'integracao-background' : ''}">
                {#if activeFeature === 'integracao'}
                    <!-- Layout especial para integração -->
                    <div class="integracao-header">
                        <h3>{detailedFeatures[activeFeature].title}</h3>
                        <p>{detailedFeatures[activeFeature].description}</p>
                    </div>
                    
                    <div class="integracao-apps">
                        <a href="https://apps.apple.com/br/app/bass-pago/id6499055719" class="app-button">
                            <img src={appleStore} alt="App Store" />
                        </a>
                        <a href="https://play.google.com/store/apps/details?id=com.basspago.app" class="app-button">
                            <img src={googlePlay} alt="Google Play" />
                        </a>
                    </div>
                {:else}
                    <!-- Layout normal para outras abas -->
                    <h3>{detailedFeatures[activeFeature].title}</h3>
                    <p>{detailedFeatures[activeFeature].description}</p>
                    
                    <ul class="pdv-feature-list">
                        {#each detailedFeatures[activeFeature].items as item}
                            <li>
                                <CheckCircle size={16} class="check-icon" />
                                {item}
                            </li>
                        {/each}
                    </ul>
                {/if}
            </div>
            
            {#if detailedFeatures[activeFeature].image}
                <div class="pdv-detailed__image fade-up">
                    <img src={detailedFeatures[activeFeature].image} alt={detailedFeatures[activeFeature].title} />
                </div>
            {/if}
        </div>
    </div>
</section>

<Footer />

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

/* Hero Section */
.pdv-hero {
    background: #000;
    padding: 120px 20px 80px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdv-hero__container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 80px;
}

.pdv-hero__content {
    flex: 1;
    max-width: 500px;
}

.pdv-hero__content h1 {
    color: white;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 30px;
}

.pdv-hero__subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.25rem;
    line-height: 1.5;
    margin-bottom: 40px;
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: white;
    color: black;
    padding: 14px 28px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.cta-btn:hover {
    background: #41FE95;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(65, 254, 149, 0.3);
}

.cta-btn-white {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: white;
    color: black;
    padding: 14px 28px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.cta-btn-white:hover {
    background: #41FE95;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(65, 254, 149, 0.3);
}

.pdv-hero__visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pdv-visual-bg {
    background: radial-gradient(ellipse 89% 85% at -68% -3%, #41FE95 0%, rgba(65, 254, 149, 0) 100%),
                radial-gradient(ellipse 153% 147% at 191% 148%, #41FE95 0%, rgba(65, 254, 149, 0) 100%),
                rgba(0, 0, 255, 0.01);
    border-radius: 40px;
    padding: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pdv-mockup {
    width: 100%;
    max-width: 400px;
    height: auto;
    object-fit: contain;
}

/* Features Section */
.pdv-features-section {
    background: #fff;
    padding: 80px 20px;
}

.pdv-features__container {
    max-width: 1200px;
    margin: 0 auto;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-header h2 {
    color: #111;
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-weight: 400;
    margin-bottom: 20px;
}

.section-header p {
    color: #666;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

.pdv-features__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.pdv-feature-card {
    background: #f8f9ff;
    border-radius: 20px;
    padding: 30px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pdv-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.pdv-feature-card__icon {
    background: rgba(0, 0, 255, 0.1);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0000ff;
    flex-shrink: 0;
}

.pdv-feature-card__content h3 {
    color: #111;
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 10px;
}

.pdv-feature-card__content p {
    color: #666;
    line-height: 1.5;
    margin: 0;
}

/* Detailed Features Section */
.pdv-detailed-features {
    background: #fff;
    padding: 80px 20px;
}

.pdv-detailed__container {
    max-width: 1200px;
    margin: 0 auto;
}

.pdv-detailed__header {
    text-align: center;
    margin-bottom: 50px;
}

.pdv-detailed__header h2 {
    color: #111;
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-weight: 400;
    margin: 0;
}

.pdv-detailed__tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.tab-button {
    padding: 12px 24px;
    border: 2px solid #ddd;
    background: white;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
    font-weight: 500;
}

.tab-button:hover,
.tab-button.active {
    background: #0000ff;
    color: white;
    border-color: #0000ff;
}

.pdv-detailed__content {
    display: flex;
    align-items: center;
    gap: 60px;
}

.pdv-detailed__text {
    flex: 1;
}

.pdv-detailed__text h3 {
    color: #111;
    font-size: 1.8rem;
    font-weight: 500;
    margin-bottom: 20px;
}

.pdv-detailed__text p {
    color: #666;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

.pdv-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pdv-feature-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    color: #333;
}

.check-icon {
    color: #41FE95;
    flex-shrink: 0;
}

.pdv-detailed__image {
    flex: 1;
    display: flex;
    justify-content: center;
}

.pdv-detailed__image img {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 20px;
}

/* Estilo específico para a aba integração */
.pdv-detailed__text.integracao-background {
    background-image: url('/src/lib/assets/backgroundPDV.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 60px 40px;
    border-radius: 20px;
    position: relative;
    min-height: 750px; /* Reduzi a altura mínima */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Mudei para flex-start */
    text-align: center;
}

/* Overlay para melhorar legibilidade do texto */
.pdv-detailed__text.integracao-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 20px;
    z-index: 1;
}

/* Garantir que o conteúdo fique acima do overlay */
.pdv-detailed__text.integracao-background > * {
    position: relative;
    z-index: 2;
}

/* Header da integração (título e descrição no topo) */
.integracao-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 30px; /* Reduzi o espaçamento */
}

.integracao-header h3 {
    color: white;
    font-size: 2.5rem;
    font-weight: 500;
    margin-bottom: 20px;
    max-width: 600px;
}

.integracao-header p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.3rem;
    line-height: 1.6;
    margin: 0;
    max-width: 700px;
}

/* Botões dos apps mais próximos da descrição */
.integracao-apps {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 0; /* Removi o margin-top: auto */
    padding-top: 20px; /* Reduzi o padding-top */
}

.app-button {
    display: block;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.app-button:hover {
    transform: translateY(-3px);
    opacity: 0.9;
}

.app-button img {
    height: 50px;
    width: auto;
}

/* Ajustar o layout quando for integração para ocupar toda a largura */
.pdv-detailed__content.integracao-layout {
    display: block;
}

.pdv-detailed__content.integracao-layout .pdv-detailed__text.integracao-background {
    width: 100%;
    max-width: none;
}

/* Utility Classes */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.desktop {
    display: block;
}

.mobile {
    display: none;
}

/* Responsive Styles */
@media (max-width: 1024px) {
    .pdv-hero__container {
        flex-direction: column;
        gap: 50px;
    }

    .pdv-detailed__content {
        flex-direction: column;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .desktop {
        display: none;
    }

    .mobile {
        display: block;
    }

    .pdv-hero {
        padding: 100px 20px 60px;
        min-height: auto;
    }

    .pdv-hero__container {
        text-align: center;
    }

    .pdv-features__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .pdv-feature-card {
        flex-direction: column;
        text-align: center;
        padding: 25px;
    }

    .pdv-detailed__tabs {
        flex-direction: column;
        align-items: center;
    }

    .tab-button {
        width: 200px;
    }

    .pdv-detailed__text.integracao-background {
        padding: 40px 20px;
        min-height: 350px; /* Reduzi para mobile */
    }
    
    .integracao-header {
        margin-bottom: 25px; /* Menos espaço no mobile */
    }
    
    .integracao-header h3 {
        font-size: 2rem;
        color: white;
    }
    
    .integracao-header p {
        font-size: 1.1rem;
        color: rgba(255, 255, 255, 0.9);
    }
    
    .integracao-apps {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        padding-top: 15px; /* Menos espaço no mobile */
    }
    
    .app-button img {
        height: 45px;
    }
}

@media (max-width: 480px) {
    .pdv-hero {
        padding: 80px 15px 40px;
    }

    .pdv-feature-card {
        padding: 20px;
    }

    .pdv-visual-bg {
        padding: 20px;
        border-radius: 20px;
    }

    .section-header,
    .pdv-detailed__header {
        margin-bottom: 40px;
    }

    .pdv-detailed__text.integracao-background {
        padding: 30px 15px;
        min-height: 300px; /* Ainda menor para mobile pequeno */
    }
    
    .integracao-header {
        margin-bottom: 20px; /* Ainda menos espaço */
    }
    
    .integracao-header h3 {
        font-size: 1.8rem;
        color: white;
    }
    
    .integracao-header p {
        font-size: 1rem;
        color: rgba(255, 255, 255, 0.9);
    }
    
    .integracao-apps {
        padding-top: 10px; /* Mínimo espaço no mobile pequeno */
    }
    
    .app-button img {
        height: 40px;
    }
}
</style>