@extends('layout.front.master')

@section('title', 'Programa de Partners Oficiales — BewPro')
@section('description', 'Vendé sitios web profesionales con tu marca. BewPro pone la infraestructura, vos sumás el acompañamiento.')

@section('content')

{{-- ═══════════════════════════════════════════════════════════════════════
     HERO
     ═══════════════════════════════════════════════════════════════════════ --}}
<section class="bp-hero">
    <div class="bp-hero-circles">
        <span class="bp-circle bp-circle-1"></span>
        <span class="bp-circle bp-circle-2"></span>
        <span class="bp-circle bp-circle-3"></span>
    </div>
    <div class="container container-xl-custom">
        <div class="row align-items-center py-5">
            <div class="col-lg-7">
                <div class="bp-pretitle">
                    <span class="bp-pretitle-dot"></span>
                    <span>Programa de Partners</span>
                </div>
                <h1 class="bp-hero-title">
                    Vendé sitios web profesionales<br>
                    <span class="bp-hero-accent">con tu marca</span>.
                </h1>
                <p class="bp-hero-lead">
                    Sos la cara visible. Nosotros la infraestructura. Comercializá nuestros productos sumando tu acompañamiento, customización y servicios.
                </p>
                <div class="bp-hero-ctas">
                    <a href="{{ route('resellers.apply') }}" class="bp-btn bp-btn-primary">
                        Aplicar al programa <i class="fas fa-arrow-right"></i>
                    </a>
                    <a href="#beneficios" class="bp-btn bp-btn-ghost">Ver beneficios</a>
                </div>
                <div class="bp-hero-stats">
                    <div class="bp-hero-stat">
                        <i class="fas fa-clock"></i>
                        <span>Aplicación de 5 minutos</span>
                    </div>
                    <div class="bp-hero-stat">
                        <i class="fas fa-handshake"></i>
                        <span>Sin compromiso inicial</span>
                    </div>
                    <div class="bp-hero-stat">
                        <i class="fas fa-rocket"></i>
                        <span>Onboarding asistido</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-5 d-none d-lg-block">
                <div class="bp-hero-mockup">
                    <div class="bp-mock-window">
                        <div class="bp-mock-header">
                            <span class="bp-mock-dot bp-mock-dot-red"></span>
                            <span class="bp-mock-dot bp-mock-dot-yellow"></span>
                            <span class="bp-mock-dot bp-mock-dot-green"></span>
                            <span class="bp-mock-url">tu-agencia.com/sitios</span>
                        </div>
                        <div class="bp-mock-body">
                            <div class="bp-mock-sidebar">
                                <div class="bp-mock-line bp-mock-line-active"></div>
                                <div class="bp-mock-line"></div>
                                <div class="bp-mock-line"></div>
                                <div class="bp-mock-line"></div>
                                <div class="bp-mock-line"></div>
                            </div>
                            <div class="bp-mock-content">
                                <div class="bp-mock-h"></div>
                                <div class="bp-mock-grid">
                                    <div class="bp-mock-card"></div>
                                    <div class="bp-mock-card"></div>
                                    <div class="bp-mock-card"></div>
                                    <div class="bp-mock-card"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- ═══════════════════════════════════════════════════════════════════════
     ¿QUÉ TE DAMOS? — 6 beneficios con feature cards
     ═══════════════════════════════════════════════════════════════════════ --}}
<section id="beneficios" class="bp-section">
    <div class="container container-xl-custom">
        <div class="bp-section-header text-center">
            <h2 class="bp-section-title mx-auto">¿Qué te damos?</h2>
            <p class="bp-section-lead">Todo lo que necesitás para escalar tu negocio digital sin contratar más equipo.</p>
        </div>
        <div class="row g-3">
            <div class="col-md-6 col-lg-4">
                <div class="bp-feature-card">
                    <div class="bp-feature-icon"><i class="fas fa-layer-group"></i></div>
                    <h3 class="bp-feature-title">Catálogo completo</h3>
                    <p class="bp-feature-desc">+200 modelos por industria listos para personalizar. Actualizaciones permanentes.</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="bp-feature-card">
                    <div class="bp-feature-icon"><i class="fas fa-server"></i></div>
                    <h3 class="bp-feature-title">Infraestructura completa</h3>
                    <p class="bp-feature-desc">Hosting, dominios, SSL, backups, panel de admin. Sin que tengas que pensarlo.</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="bp-feature-card">
                    <div class="bp-feature-icon"><i class="fas fa-percent"></i></div>
                    <h3 class="bp-feature-title">Margen sobre cada venta</h3>
                    <p class="bp-feature-desc">Vos definís tu precio final. Te quedás con el spread sobre cada cliente.</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="bp-feature-card">
                    <div class="bp-feature-icon"><i class="fas fa-paint-brush"></i></div>
                    <h3 class="bp-feature-title">White-label posible</h3>
                    <p class="bp-feature-desc">Comercializá con tu marca. Tus clientes ven tu logo, tu dominio, tu marca.</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="bp-feature-card">
                    <div class="bp-feature-icon"><i class="fas fa-life-ring"></i></div>
                    <h3 class="bp-feature-title">Soporte técnico</h3>
                    <p class="bp-feature-desc">Vos atendés al cliente. Nosotros resolvemos lo técnico de fondo. Sin pasar la pelota.</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="bp-feature-card">
                    <div class="bp-feature-icon"><i class="fas fa-rocket"></i></div>
                    <h3 class="bp-feature-title">Setup en minutos</h3>
                    <p class="bp-feature-desc">Cada cliente nuevo, online en minutos. Sin esperas de desarrollo. Escalá rápido.</p>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- ═══════════════════════════════════════════════════════════════════════
     ¿QUIÉN APLICA? — 3 perfiles con números
     ═══════════════════════════════════════════════════════════════════════ --}}
<section class="bp-section bp-section-alt">
    <div class="container container-xl-custom">
        <div class="bp-section-header text-center">
            <h2 class="bp-section-title mx-auto">¿Quién aplica?</h2>
            <p class="bp-section-lead">El programa está pensado para profesionales que ya tienen cartera o están armándola.</p>
        </div>
        <div class="row g-4 justify-content-center">
            <div class="col-md-4">
                <div class="bp-step">
                    <span class="bp-step-num">01</span>
                    <h3 class="bp-step-title">Agencias digitales</h3>
                    <p class="bp-step-desc">Sumá una línea de servicios sin contratar más devs. Acelerá entregas.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="bp-step">
                    <span class="bp-step-num">02</span>
                    <h3 class="bp-step-title">Freelancers / desarrolladores</h3>
                    <p class="bp-step-desc">Atendé más clientes en menos tiempo. Vos definís el upsell.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="bp-step">
                    <span class="bp-step-num">03</span>
                    <h3 class="bp-step-title">Consultores de marketing</h3>
                    <p class="bp-step-desc">Sumá web profesional al stack que ya vendés. Acelerá presencia digital de clientes.</p>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- ═══════════════════════════════════════════════════════════════════════
     CTA FINAL
     ═══════════════════════════════════════════════════════════════════════ --}}
<section class="bp-section bp-cta-final">
    <div class="container container-xl-custom text-center">
        <h2 class="bp-cta-title">¿Listo para sumarte?</h2>
        <p class="bp-cta-lead">Aplicación corta. Te respondemos en 48hs hábiles.</p>
        <a href="{{ route('resellers.apply') }}" class="bp-btn bp-btn-primary bp-btn-lg">
            Aplicar al programa <i class="fas fa-arrow-right"></i>
        </a>
        <div class="bp-cta-trust">
            <span><i class="fas fa-clock"></i> 5 minutos</span>
            <span><i class="fas fa-handshake"></i> Sin compromiso</span>
            <span><i class="fas fa-rocket"></i> Onboarding asistido</span>
        </div>
    </div>
</section>

@endsection

@section('css')
@include('partials._bp-platform-styles')
@endsection