<script>
    import { onMount } from 'svelte';
    import { fly, fade } from 'svelte/transition';
    import { 
        ArrowRight, 
        Code, 
        Zap, 
        TestTube, 
        Key,
        ExternalLink
    } from 'lucide-svelte';
    
    import Header from '$lib/components/Header.svelte';
    import Footer from '$lib/components/Footer.svelte';

    import cubesPlus from '$lib/assets/cubes-plus.svg';
    import case1 from '$lib/assets/case-1.webp';
    import case2 from '$lib/assets/case-2.webp';
    import case3 from '$lib/assets/case-3.webp';
    import case4 from '$lib/assets/case-4.webp';
    import case5 from '$lib/assets/case-5.webp';
    import case6 from '$lib/assets/case-6.webp';
    import pixCinza from '$lib/assets/pix-cinza.svg';
    import pagamentosCinza from '$lib/assets/pagamentos-cinza.svg';
    import adquirenciaCinza from '$lib/assets/adquirencia-cinza.svg';
    import cartoesCinza from '$lib/assets/cartoes-cinza.svg';
    import iconSlimBasspago from '$lib/assets/icon-slim-basspago.svg';

    const steps = [
        {
            step: 'Passo 1',
            title: 'Solicite acesso',
            description: 'Fale com nossos especialistas e solicite acesso a nossa apis e credenciais.',
            link: '#embreve',
            linkText: 'Comece aqui →'
        },
        {
            step: 'Passo 2',
            title: 'Integre rápido',
            description: 'Conecte seu negócio às nossas APIs de forma rápida e sem complicações.',
            link: '#embreve',
            linkText: 'Comece a desenvolver →'
        },
        {
            step: 'Passo 3',
            title: 'Go-live',
            description: 'Pronto! Seu negócio já pode processar pagamentos com segurança.',
            link: '#embreve',
            linkText: 'Produção →'
        }
    ];

    const useCases = [
        {
            title: 'Para e-commerce',
            description: 'Impulsione sua loja virtual com pagamentos integrados, checkouts mais rápidos e controle total das transações em tempo real.',
            image: case1
        },
        {
            title: 'Para SaaS',
            description: 'Automatize cobranças, reduza churn e escale seu modelo recorrente com uma infraestrutura de pagamentos feita para produtos digitais.',
            image: case2
        },
        {
            title: 'Para ERP',
            description: 'Integre pagamentos diretamente ao seu sistema de gestão, oferecendo aos seus clientes uma experiência financeira fluida e sem fricções',
            image: case3
        },
        {
            title: 'Para Satartups',
            description: 'Soluções escaláveis que crescem junto com seu negócio. Receba, concilie e monitore transações sem precisar migrar de plataforma.',
            image: case4
        },
        {
            title: 'Para B2B',
            description: 'Solução B2B completa que permite receber pagamentos e criar cobranças recorrentes de forma segura e ágil.',
            image: case5
        },
        {
            title: 'Para Sistemas corporativos',
            description: 'Simplifique faturamento corporativo com pagamentos digitais, monitoramento de recebíveis e controle total de cada transação.',
            image: case6
        }
    ];

    const features = [
        {
            icon: pixCinza,
            label: 'Cobrança'
        },
        {
            icon: pagamentosCinza,
            label: 'Pagamentos'
        },
        {
            icon: adquirenciaCinza,
            label: 'Webhooks'
        },
    ];

    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');
        elements.forEach((el) => observer.observe(el));

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

<svelte:head>
    <title>Desenvolvedores - BassPago</title>
    <meta name="description" content="Construa com Bass Pago. Soluções integradas de pagamento e banking para atender diversos modelos de negócios." />
</svelte:head>

<Header />

<!-- Build With Section -->
<section class="build-with fade-in">
    <div class="container">
        <div class="row">
            <div class="content fade-up">
                <h1>Construa com <br />Bass Pago</h1>
                
                <div class="mobile">
                    <div class="image fade-up">
                        <img src={cubesPlus} alt="Cubes" />
                    </div>
                </div>
                
                <p class="lead">Sua empresa pronta para crescer com uma integração descomplicada</p>
                
                <a href="/precos#form-negociacao-basspago" class="link-cta">
                    <span>Abrir conta →</span>
                </a>
            </div>
            
            <div class="desktop">
                <div class="image fade-up">
                    <img src={cubesPlus} alt="Cubes" />
                </div>
            </div>
        </div>
        
        <div class="steps fade-up">
            {#each steps as step, index}
                <div class="step">
                    <small>{step.step}</small>
                    <strong>{step.title}</strong>
                    <p>{step.description}</p>
                    <a href={step.link}>{step.linkText}</a>
                </div>
            {/each}
        </div>
    </div>
    
    <!-- Glow effects -->
    <div class="glow-left"></div>
    <div class="glow-right"></div>
</section>

<!-- Use Cases Section -->
<section id="use-cases" class="fade-in">
    <div class="container">
        <div class="use-cases-header">
            <h2 class="fade-up">Casos de uso</h2>
            <a href="#embreve" class="btn-ver-todos hidden">Ver todos</a>
        </div>

        <div class="use-cases-grid">
            {#each useCases as useCase, index}
                <div 
                    class="use-case-card fade-up" 
                    style="background-image: url('{useCase.image}'); background-size: cover"
                >
                    <h3>{useCase.title}</h3>
                    <p>{useCase.description}</p>
                </div>
            {/each}
        </div>
    </div>
</section>

<!-- Dev Tools Section -->
<section id="dev-tools">
    <div class="container fade-up">
        <div class="dev-content-wrapper">
            <div class="dev-text-box">
                <h2>Ferramentas para desenvolvedores</h2>
                <p>
                    APIs desenhadas para acelerar seu time-to-market,
                    mantendo controle e segurança em cada transação.
                </p>
                <a href="https://devs.basspago.com.br/docs/quick-start/introduction" class="btn-ghost">
                    Referências de API
                </a>
            </div>
            
            <div class="dev-feature-box">
                <h3>Recursos</h3>
                <div class="feature-grid">
                    <div class="icons">
                        {#each features as feature}
                            <div class="bar">
                                <img src={feature.icon} alt={feature.label} />
                            </div>
                        {/each}
                    </div>
                    <div class="labels">
                        {#each features as feature}
                            <div>
                                {feature.label}
                            </div>
                        {/each}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Integration Section -->
<section id="integration-easly">
    <div class="integration-wrapper">
        <div class="integration-text">
            <h2 class="fade-up">
                Sua empresa pronta para crescer com uma integração descomplicada
            </h2>
            
            <p class="fade-up">
                Personalize suas cobranças: restrinja ao mesmo CPF, bloqueie
                CNPJs ou crie regras de recebimento sob medida.
            </p>
            
            <div class="integration-benefits">
                <span class="fade-up">Integração simples</span>
                <span class="fade-up">Documentação clara</span>
                <span class="fade-up">Time to market ágil</span>
            </div>
            
            <div class="integration-buttons fade-up">
                <a href="centro-de-suporte" class="link-cta white">
                    <span>Acesse a documentação →</span>
                </a>
            </div>
        </div>
        
        <div class="integration-graphic fade-up">
            <img src={iconSlimBasspago} alt="Bass Pago Icon" />
        </div>
    </div>
</section>

<Footer />

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

/* Build With Section */
.build-with {
    position: relative;
    height: 100dvh;
    padding: 120px 20px 60px;
    overflow: hidden;
    background: black;
    display: flex;
    justify-content: center;
    align-items: center;
}

.build-with .container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 100px;
}

.build-with .container > .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
}

.build-with .content {
    flex: 1;
}

.build-with .content h1 {
    color: white;
    margin-bottom: 20px;
    width: 80%;
    font-weight: 400;
    font-size: clamp(2rem, 5vw, 3.5rem);
}

.build-with .content p {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 30px;
    max-width: 500px;
}

.build-with .content .link-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: white;
    color: black;
    padding: 12px 24px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    font-weight: 500;
    border: none;
    text-decoration: none;
    transition: all 0.3s ease;
}

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

.build-with .image {
    width: 365px;
    height: 394px;
    flex-shrink: 0;
    min-width: 280px;
    max-width: 100vw;
    overflow: visible;
    display: block;
}

.build-with .image img {
    width: 100%;
    height: auto;
}

.build-with .mobile {
    display: none;
}

.build-with .desktop {
    display: block;
}

.build-with .steps {
    display: flex;
    gap: clamp(16px, 2vw, 34px);
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
}

.build-with .step {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 15px;
    padding: clamp(22px, 4vw, 25px) clamp(16px, 2vw, 25px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    box-sizing: border-box;
    width: 100%;
    min-width: clamp(240px, 23vw, 330px);
    max-width: 370px;
    flex: 1;
    transition: box-shadow .2s;
}

.build-with .step small {
    color: #41FE95;
    font-weight: 500;
    font-size: 14px;
}

.build-with .step strong {
    color: white;
    font-size: 1.1rem;
    font-weight: 500;
}

.build-with .step p {
    color: rgba(255, 255, 255, 0.75);
    font-weight: 400;
    margin: 0;
    line-height: 1.5;
}

.build-with .step a {
    color: #41FE95;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.build-with .step a:hover {
    color: white;
}

/* Glow effects */
.build-with .glow-left,
.build-with .glow-right {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(65, 254, 149, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.build-with .glow-left {
    top: 20%;
    left: -150px;
}

.build-with .glow-right {
    bottom: 20%;
    right: -150px;
}

/* Use Cases Section */
#use-cases {
    width: 100%;
    background: #fff;
    display: flex;
    justify-content: center;
    padding: 80px 0;
}

#use-cases .container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(18px, 4vw, 60px);
    padding: 0 20px;
}

.use-cases-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.use-cases-header h2 {
    text-align: left;
    font-family: 'Space Grotesk', sans-serif;
    color: #111;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 400;
    line-height: 1;
}

.use-cases-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: clamp(16px, 2vw, 24px);
    justify-content: center;
}

.use-case-card {
    background: #f6f7ff;
    border-radius: 15px;
    padding: clamp(22px, 4vw, 30px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    box-sizing: border-box;
    width: 100%;
    min-height: 200px;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.use-case-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1;
}

.use-case-card h3,
.use-case-card p {
    position: relative;
    z-index: 2;
    color: white;
}

.use-case-card h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    margin: 0;
    letter-spacing: -0.02em;
    font-size: 1.1rem;
}

.use-case-card p {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    margin: 0;
    line-height: 1.5;
}

.use-case-card:hover {
    transform: translateY(-5px);
}

/* Dev Tools Section */
#dev-tools {
    background: #000;
    padding: 60px 20px;
}

#dev-tools .container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.dev-content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
    border-radius: 20px;
    padding: 30px;
    background: linear-gradient(244deg, #41FE95 -49.78%, #00F 137.84%);
}

.dev-text-box {
    height: 190px;
    display: flex;
    flex-direction: column;
    color: rgba(255, 255, 255, 0.75);
    margin: 30px;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.dev-text-box h2 {
    font-family: "Space Grotesk", sans-serif;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
}

.dev-text-box p {
    font-family: "Space Grotesk", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
    max-width: 460px;
    color: rgba(255, 255, 255, 0.75);
}

.dev-text-box .btn-ghost {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.15);
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    width: fit-content;
    transition: all 0.3s ease;
}

.dev-text-box .btn-ghost:hover {
    background: rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.dev-feature-box {
    height: 260px;
    width: 360px;
    padding: 30px 40px;
    background: rgba(0, 0, 0, 0.10);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.75);
    font-family: "Space Grotesk", sans-serif;
    margin: 0 30px;
}

.dev-feature-box h3 {
    color: rgba(255, 255, 255, 0.75);
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 30px;
}

.feature-grid {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.feature-grid .icons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.feature-grid .bar {
    width: 29px;
    height: 29px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.68);
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-grid .bar img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.feature-grid .labels {
    font-size: 17px;
    font-weight: 400;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.75);
}

.feature-grid .labels div {
    height: 29px;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

/* Integration Section */
#integration-easly {
    width: 100%;
    padding: 120px 90px;
    background-color: #000;
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
}

.integration-wrapper {
    max-width: 1200px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 60px;
}

.integration-text {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 53px;
}

.integration-text h2 {
    line-height: 1.2;
    max-width: 600px;
    color: #fff;
    font-weight: 400;
    margin-bottom: 24px;
    font-size: clamp(2rem, 4vw, 2.75rem);
}

.integration-text p {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.75);
    max-width: 597px;
    margin-bottom: 40px;
    font-size: 1.1rem;
    line-height: 1.6;
}

.integration-benefits {
    display: flex;
    gap: 10px 30px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.integration-benefits span {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.75);
}

.integration-benefits span::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%2341FE95" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20,6 9,17 4,12"></polyline></svg>');
}

.integration-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.integration-buttons .link-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.integration-buttons .link-cta.white {
    background: #fff;
    color: #000;
}

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

.integration-buttons .link-cta:not(.white) {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.integration-buttons .link-cta:not(.white):hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.integration-graphic {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.integration-graphic img {
    width: 100%;
    max-width: 400px;
}

/* Fade animations */
.fade-in {
    opacity: 0;
    animation: fadeIn 1s ease forwards;
}

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

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* Responsive Styles */
@media (max-width: 768px) {
    .build-with {
        height: auto;
        min-height: 100vh;
        padding: clamp(60px, 15vw, 80px) clamp(15px, 5vw, 20px);
    }

    .build-with .container {
        gap: clamp(40px, 10vw, 60px);
    }

    .build-with .container > .row {
        flex-direction: column;
        align-items: center;
        gap: clamp(30px, 8vw, 40px);
        text-align: center;
    }

    .build-with .content {
        order: 2;
    }

    .build-with .content h1 {
        width: 100%;
        text-align: center;
        font-size: clamp(1.75rem, 8vw, 3rem);
        margin-bottom: clamp(15px, 4vw, 20px);
        line-height: 1;
    }

    .build-with .content p {
        text-align: center;
        margin-bottom: clamp(20px, 6vw, 30px);
        max-width: 100%;
    }

    .build-with .mobile {
        display: block;
        order: 1;
        text-align: center;
        max-width: 100%;
        margin-bottom: 20px;
    }

    .build-with .desktop {
        display: none;
    }

    .build-with .steps {
        flex-direction: column;
        align-items: center;
        gap: 14px;
    }

    .build-with .step {
        width: 100%;
        max-width: 99vw;
        min-width: 0;
        padding: 20px;
        border-radius: 14px;
        gap: 14px;
    }

    .use-cases-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .use-case-card {
        max-width: 99vw;
        min-width: 0;
        padding: 20px;
        border-radius: 14px;
        gap: 14px;
    }

    .dev-content-wrapper {
        flex-direction: column;
        gap: 40px;
    }

    .dev-feature-box {
        width: 100%;
        padding: 24px;
        margin: 0;
    }

    .dev-text-box {
        width: 100%;
        margin: 0;
        height: auto;
    }

    .feature-grid {
        flex-direction: column;
        gap: 16px;
    }

    .feature-grid .labels {
        text-align: left;
    }

    #integration-easly {
        padding: 60px 20px;
    }

    .integration-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .integration-graphic {
        order: -1;
        width: 70%;
        max-width: 70%;
        margin-bottom: 20px;
        text-align: center;
    }

    .integration-text {
        width: 100%;
        max-width: 100%;
        gap: 30px;
    }

    .integration-buttons {
        flex-direction: column;
        align-items: center;
    }

    .integration-buttons .link-cta {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 1024px) {
    .integration-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .integration-text {
        max-width: 600px;
    }

    .integration-graphic {
        width: 100%;
        text-align: center;
        align-items: center;
    }
}

/* Utility classes */
.hidden {
    display: none;
}
</style>