<script>
    import { onMount } from 'svelte';
    import { fly, fade } from 'svelte/transition';
    import { 
        ArrowRight,
        CircleCheckBig,
        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-mockup2.png'; 
    import bankingInterfaceMockup from '$lib/assets/banking-interface-mockup2.png'; 
    import cubesPlus from '$lib/assets/cubes-plus.svg'; 

    let mounted = false;
    let visibleElements = {};

    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 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 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} class="text-green-400"/>
                    </div>
                    <div class="pdv-feature-card__content">
                        <h3>{feature.title}</h3>
                        <p>{feature.description}</p>
                    </div>
                </div>
            {/each}
        </div>
    </div>
</section>

<!-- Seção 1: Pagamentos -->
<section class="pdv-section pdv-pagamentos">
    <div class="pdv-section__container">
        <div class="pdv-section__content fade-up">
            <h2>Pagamentos Instantâneos</h2>
            <p>
                Com o PDV da Bass Pago, você recebe tudo via Pix direto na sua conta, mesmo quando várias pessoas estão vendendo ao mesmo tempo, sem perder o controle financeiro.
            </p>
            
            <ul class="pdv-feature-list">
                <li>
                    <CircleCheckBig size={16} class="check-icon" style="color: #1800FF;"  />
                    Múltiplos vendedores simultâneos
                </li>
                <li>
                    <CircleCheckBig size={16} class="check-icon" style="color: #1800FF;" />
                    Links de pagamento personalizados
                </li>
                <li>
                    <CircleCheckBig size={16} class="check-icon" style="color: #1800FF;" />
                    Pagamentos seguros e instantâneos
                </li>
                <li>
                    <CircleCheckBig size={16} class="check-icon" style="color: #1800FF;" />
                    Notificações em tempo real
                </li>
                <li>
                    <CircleCheckBig size={16} class="check-icon" style="color: #1800FF;" />
                    Relatórios personalizados
                </li>
            </ul>
        </div>
        
        <div class="pdv-section__image fade-up">
            <img src={iphonePixMockup} alt="Pagamentos PDV" />
        </div>
    </div>
</section>

<!-- Seção 2: Gestão -->
<section class="pdv-section pdv-gestao">
    <div class="pdv-section__container reverse">
        <div class="pdv-section__image fade-up">
            <img src={bankingInterfaceMockup} alt="Gestão PDV" />
        </div>
        
        <div class="pdv-section__content fade-up">
            <h2>Gestão Inteligente</h2>
            <p>
                Controle completo do seu negócio com relatórios e analytics avançados. Monitore performance, gerencie vendedores e tome decisões baseadas em dados.
            </p>
            
            <ul class="pdv-feature-list">
                <li>
                    <CircleCheckBig size={16} class="check-icon" style="color: #1800FF;" />
                    Dashboard em tempo real
                </li>
                <li>
                    <CircleCheckBig size={16} class="check-icon" style="color: #1800FF;" />
                    Extratos inteligentes por operador
                </li>
                <li>
                    <CircleCheckBig size={16} class="check-icon" style="color: #1800FF;" />
                    Relatórios de vendas detalhados
                </li>
                <li>
                    <CircleCheckBig size={16} class="check-icon" style="color: #1800FF;" />
                    Gestão de equipe de vendas
                </li>
                <li>
                    <CircleCheckBig size={16} class="check-icon" style="color: #1800FF;" />
                    Análise de performance avançada
                </li>
            </ul>
        </div>
    </div>
</section>

<!-- Seção 3: Integração -->
<section class="pdv-section pdv-integracao">
    <div class="pdv-integracao__container">
        <div class="pdv-integracao__background">
            <div class="pdv-integracao__content fade-up">
                <h2>Mais agilidade para vender, mais controle para crescer</h2>
                <p>
                    Baixe nosso app e acompanhe vendas e pagamentos de qualquer lugar, <br >com total controle e segurança.
                </p>
                
                <div class="pdv-integracao__apps">
                    <a href="https://apps.apple.com/br/app/bass-pago/id6758310271" class="app-button">
                        <img src={appleStore} alt="App Store" />
                    </a>
                    <a href="https://play.google.com/store/apps/details?id=finance.onz.bass.pago" class="app-button">
                        <img src={googlePlay} alt="Google Play" />
                    </a>
                </div>
            </div>
        </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);
}

.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: 120px 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;
}

/* Seções de Funcionalidades - MELHORADAS */
.pdv-section {
    padding: 120px 20px;
    overflow: hidden;
}

.pdv-pagamentos {
    background: linear-gradient(135deg, #fff 0%, #fafbff 100%);
}

.pdv-gestao {
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
}

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

.pdv-section__container.reverse {
    flex-direction: row-reverse;
}

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

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

.pdv-section__content 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;
    font-size: 1rem;
}

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

/* ✅ MELHORIAS NA SEÇÃO DE IMAGEM */
.pdv-section__image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 450px;
    padding: 20px;
}

.pdv-section__image img {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 20px;
    object-fit: contain;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
    animation: imageFloat 6s ease-in-out infinite;
}

.pdv-section__image img:hover {
    transform: scale(1.02);
    animation-play-state: paused;
}

.pdv-gestao .pdv-section__container {
    max-width: 1400px; 
    gap: 120px; 
}

.pdv-gestao .pdv-section__image {
    background: radial-gradient(
        ellipse 70% 80% at 50% 50%, 
        rgba(65, 254, 149, 0.08) 0%, 
        transparent 70%
    );
    border-radius: 30px;
    min-height: 700px; 
    padding: 50px; 
    flex: 1.5; 
    overflow: visible; 
}

.pdv-gestao .pdv-section__image img {
    max-width: 700px; 
    width: 130%; 
    filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.3));
    transform: scale(1.2); 
}

.pdv-gestao .pdv-section__content {
    flex: 0.8; 
    max-width: 450px; 
}

.pdv-pagamentos .pdv-section__image {
    background: radial-gradient(
        ellipse 70% 80% at 50% 50%, 
        rgba(0, 0, 255, 0.06) 0%, 
        transparent 70%
    );
    border-radius: 30px;
}

.pdv-pagamentos .pdv-section__image img {
    filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.2));
    max-width: 450px;
}

@keyframes imageFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.pdv-gestao .pdv-section__image img {
    animation: imageFloatLarge 8s ease-in-out infinite;
}

@keyframes imageFloatLarge {
    0%, 100% {
        transform: scale(1.2) translateY(0px);
    }
    50% {
        transform: scale(1.2) translateY(-15px);
    }
}

.pdv-gestao .pdv-section__image img:hover {
    transform: scale(1.25) !important; 
    animation-play-state: paused;
}

.pdv-integracao {
    padding: 0;
}

.pdv-integracao__container {
    width: 100%;
}

.pdv-integracao__background {
    background-image: url('/src/lib/assets/backgroundPDV.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 800px;
    position: relative;
    display: flex;
    align-items: flex-start;   
    justify-content: center;
    padding: 160px 20px 120px; 
}

.pdv-integracao__background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.pdv-integracao__content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    margin-top: -130px;
}

.pdv-integracao__content h2 {
    color: white;
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-weight: 400;
    margin-bottom: 20px;
}

.pdv-integracao__content p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 40px;
}

.pdv-integracao__apps {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.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;
}

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

.desktop {
    display: block;
}

.mobile {
    display: none;
}

/* Responsive Styles - AJUSTADOS PARA IMAGEM MAIOR */
@media (max-width: 1400px) {
    .pdv-gestao .pdv-section__container {
        max-width: 1200px;
        gap: 100px;
    }

    .pdv-gestao .pdv-section__image img {
        max-width: 750px;
        width: 120%;
        transform: scale(1.15);
    }
}

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

    .pdv-section__container,
    .pdv-section__container.reverse {
        flex-direction: column;
        gap: 50px;
        text-align: center;
    }

    .pdv-section__content {
        max-width: 100%;
    }

    .pdv-section__image {
        min-height: 350px;
    }

    .pdv-section__image img {
        max-width: 450px;
    }

    /* ✅ GESTÃO EM TABLET */
    .pdv-gestao .pdv-section__container {
        max-width: 100%;
        gap: 60px;
    }

    .pdv-gestao .pdv-section__image {
        min-height: 500px;
        padding: 30px;
        flex: 1;
    }

    .pdv-gestao .pdv-section__image img {
        max-width: 600px;
        width: 110%;
        transform: scale(1.1);
    }

    .pdv-gestao .pdv-section__content {
        flex: 1;
        max-width: 100%;
    }
}

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

    .mobile {
        display: block;
    }

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

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

    .pdv-features-section,
    .pdv-section {
        padding: 80px 20px;
    }

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

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

    /* ✅ MOBILE - IMAGEM GESTÃO AINDA GRANDE */
    .pdv-section__image {
        min-height: 280px;
        padding: 10px;
    }

    .pdv-section__image img {
        max-width: 350px;
        border-radius: 15px;
        animation: none;
    }

    .pdv-gestao .pdv-section__image {
        background: none;
        padding: 0;
        min-height: 350px; /* ✅ Maior que outras em mobile */
    }

    .pdv-gestao .pdv-section__image img {
        max-width: 450px !important; /* ✅ Maior que padrão mobile */
        width: 100%;
        transform: scale(1) !important;
        animation: none;
    }

    .pdv-pagamentos .pdv-section__image {
        background: none;
        padding: 0;
    }

    .pdv-integracao__background {
        min-height: 500px;
        padding: 80px 20px;
    }

    .pdv-integracao__content {
        margin-top: -80px;
    }

    .pdv-integracao__apps {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
}

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

    .pdv-features-section,
    .pdv-section {
        padding: 60px 15px;
    }

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

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

    /* ✅ MOBILE PEQUENO */
    .pdv-section__image {
        min-height: 220px;
        padding: 5px;
    }

    .pdv-section__image img {
        max-width: 300px;
        border-radius: 12px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    }

    /* ✅ GESTÃO EM MOBILE PEQUENO - AINDA MAIOR */
    .pdv-gestao .pdv-section__image {
        min-height: 300px;
    }

    .pdv-gestao .pdv-section__image img {
        max-width: 380px !important; /* ✅ Maior que padrão */
    }

    .pdv-integracao__background {
        min-height: 400px;
        padding: 60px 15px;
    }

    .pdv-integracao__content {
        margin-top: -60px;
    }

    .app-button img {
        height: 45px;
    }
}

/* ✅ MELHORIAS ADICIONAIS DE PERFORMANCE */
@media (prefers-reduced-motion: reduce) {
    .pdv-section__image img {
        animation: none;
    }
    
    .pdv-gestao .pdv-section__image img {
        animation: none;
    }
    
    .fade-up {
        transition: none;
    }
}

/* ✅ HIGH CONTRAST SUPPORT */
@media (prefers-contrast: high) {
    .pdv-section__image img {
        box-shadow: 0 0 0 2px #000;
    }
    
    .check-icon {
        color: #00ff00;
    }
}
</style>