@extends('front.layout')

@section('pagename')
    - {{ __('Vendedor') }}
@endsection

@section('meta-description', 'Landing page para vendedores con gestión automotriz, publicaciones y cierre de ventas.')
@section('meta-keywords', 'vendedor, automotriz, venta, autos, mercadolibre, crm, publicidad')

@section('content')
    @php
        $partners = [
            ['name' => 'MercadoLibre', 'image' => 'assets/front/images/sponsor-1.png'],
            ['name' => 'Google', 'image' => 'assets/front/images/sponsor-2.png'],
            ['name' => 'Facebook', 'image' => 'assets/front/images/sponsor-3.png'],
            ['name' => 'Instagram', 'image' => 'assets/front/images/sponsor-4.png'],
            ['name' => 'Auto', 'image' => 'assets/front/images/sponsor-1.png'],
            ['name' => 'Cars', 'image' => 'assets/front/images/sponsor-2.png'],
        ];

        $processes = [
            [
                'icon' => 'fal fa-photo-video',
                'title' => 'Réplica automática de anuncios',
                'text' => 'Publica a la vez en tu sitio web yMarketplace.',
            ],
            [
                'icon' => 'fal fa-cog',
                'title' => 'Gestión centralizada',
                'text' => 'Organiza inventario, precios y estado de cada vehículo en una sola herramienta.',
            ],
            [
                'icon' => 'fal fa-comments',
                'title' => 'Leads y contacto',
                'text' => 'Recibe consultas y responde de forma más rápida con información de cada auto.',
            ],
            [
                'icon' => 'fal fa-chart-pie',
                'title' => 'Reportes y ventas',
                'text' => 'Sigue qué autos están funcionando mejor y dónde conviene invertir más.',
            ],
        ];

        $plans = [
            [
                'name' => 'Starter',
                'price' => '$49',
                'description' => 'Para automotores que empiezan a digitalizar sus ventas.',
                'features' => ['Hasta 50 vehículos', '1 canal de publicación', 'Seguimiento básico', 'Soporte por email'],
                'featured' => false,
            ],
            [
                'name' => 'Pro',
                'price' => '$99',
                'description' => 'Ideal para concesionarias con mayor volumen y mayor flujo.',
                'features' => ['Inventario ilimitado', '2 canales de publicación', 'Leads automatizados', 'Reportes avanzados'],
                'featured' => true,
            ],
            [
                'name' => 'Premium',
                'price' => '$189',
                'description' => 'Para operaciones que necesitan más control, soporte y eficiencia.',
                'features' => ['Todo lo de Pro', 'Soporte prioritario', 'Integraciones personalizadas', 'Gestión multiusuario'],
                'featured' => false,
            ],
        ];

        $testimonials = [
            [
                'name' => 'Cristian López',
                'rank' => 'Dueño de agencia',
                'rating' => 5,
                'comment' => 'Ahorro muchísimo tiempo en publicar autos y ahora tengo más consultas organizadas y mejores ventas.',
                'image' => 'assets/front/images/testimonial.png',
            ],
            [
                'name' => 'Mariana Ruiz',
                'rank' => 'Gerente de ventas',
                'rating' => 5,
                'comment' => 'La plataforma nos ayudó a centralizar ventas y automatizar la publicación de anuncios en varias canales.',
                'image' => 'assets/front/images/client/client-1.jpg',
            ],
            [
                'name' => 'Sebastián Costa',
                'rank' => 'Consultor automotriz',
                'rating' => 5,
                'comment' => 'La experiencia para usuarios es muy clara y nos permitió vender más sin duplicar tareas.',
                'image' => 'assets/front/images/client/client-2.jpg',
            ],
        ];
    @endphp

    <section id="home" class="home-banner bg-img bg-cover header-next border-top"
        data-bg-image="{{ asset('assets/front/images/fondo-hero-vendedor.webp') }}">
        <div class="container-fluid">
            <div class="row align-items-center gx-xl-5">
                <div class="col-xl-6">
                    <div class="fluid-left">
                        <div class="content">
                            <h1 class="title" data-aos="fade-up" data-aos-delay="100">
                                {{ __('¿Querés vender tu vehículo?') }}
                            </h1>
                            <h2 class="title" data-aos="fade-up" data-aos-delay="100">
                                {{ __('Recibí ofertas directas de automotoras') }}
                            </h2>
                            <p data-aos="fade-up" data-aos-delay="150">
                                {{ __('Publicá tu vehículo en Carmetric y hacelo llegar a automotoras interesadas en incorporarlo a su inventario.') }}<br>
                                {{ __('Recibí ofertas en hasta 72 horas y elegí la que mejor se adapte a vos.') }}
                            </p>
                            <div class="btn-groups justify-content-center" data-aos="fade-up" data-aos-delay="200">
                                <a href="/seller/register" title="{{ __('Vende tu vehículo') }}" class="btn btn-lg btn-primary">
                                    {{ __('Quiero Vender Mi Vehículo') }}
                                </a>
                                <!--<a href="#demo" title="{{ __('¿Cómo funciona?') }}" class="btn btn-lg btn-outline">
                                    {{ __('¿Cómo funciona?') }}
                                </a> -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-6">
                    <div class="hero-image" data-aos="fade-left" data-aos-delay="200">
                        <img src="{{ asset('assets/front/images/hero-vendedor-particular.webp') }}" alt="hero-img">
                    </div>
                </div>
            </div>
        </div>

        <div class="shape">
            <div class="shape-1">
                <svg data-src="{{ asset('assets/front/svg/shape1.svg') }}" data-unique-ids="disabled" data-cache="disabled"></svg>
            </div>
            <div class="shape-2">
                <svg data-src="{{ asset('assets/front/svg/shape2.svg') }}" data-unique-ids="disabled" data-cache="disabled"></svg>
            </div>
            <div class="shape-3">
                <svg data-src="{{ asset('assets/front/svg/shape3.svg') }}" data-unique-ids="disabled" data-cache="disabled"></svg>
            </div>
            <div class="shape-4">
                <svg data-src="{{ asset('assets/front/svg/shape4.svg') }}" data-unique-ids="disabled" data-cache="disabled"></svg>
            </div>
            <div class="shape-5">
                <svg data-src="{{ asset('assets/front/svg/shape5.svg') }}" data-unique-ids="disabled" data-cache="disabled"></svg>
            </div>
            <div class="shape-6">
                <svg data-src="{{ asset('assets/front/svg/shape6.svg') }}" data-unique-ids="disabled" data-cache="disabled"></svg>
            </div>
            <div class="shape-7">
                <svg data-src="{{ asset('assets/front/svg/shape7.svg') }}" data-unique-ids="disabled" data-cache="disabled"></svg>
            </div>
        </div>
    </section>

    <section class="sponsor pt-120">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section-title title-center mb-50" data-aos="fade-up">
                        <span class="subtitle">{{ __('Te compramos tu vehículo') }}</span>
                        <h3 class="title">{{ __('Publicalo en CarMetric y recibí ofertas de automotoras interesadas en comprar tu auto') }}</h3>
                    </div>
                </div>
                <div class="col-12">
                    <div class="swiper sponsor-slider">
                        <div class="swiper-wrapper">

                                <div class="swiper-slide">
                                    <div class="item-single d-flex justify-content-center">
                                        <div class="sponsor-img">
                                            <img class="lazyload blur-up" src="{{ asset('assets/front/images/auto.webp') }}" alt="automotoras">
                                        </div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="item-single d-flex justify-content-center">
                                        <div class="sponsor-img">
                                            <img class="lazyload blur-up" src="{{ asset('assets/front/images/ofertas.webp') }}" alt="automotoras">
                                        </div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="item-single d-flex justify-content-center">
                                        <div class="sponsor-img">
                                            <img class="lazyload blur-up" src="{{ asset('assets/front/images/venta.webp') }}" alt="automotoras">
                                        </div>
                                    </div>
                                </div>

                        </div>
                        <div class="swiper-pagination position-static mt-30" data-aos="fade-up"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="store-area pt-120 pb-90">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12">
                    <div class="section-title title-inline mb-50" data-aos="fade-up" id="caracteristicas">
                        <h2 class="title">{{ __('¿Cómo funciona?') }}<br>{{ __('Vos publicás. Las automotoras ofertan.') }}<br></h2>
                        <p class="text">
                            {{ __('No necesitás publicar tu vehículo en distintos lugares ni contactar una automotora por una. Con Carmetric, una sola publicación puede llegar a múltiples automotoras registradas, aumentando tus posibilidades de encontrar a un comprador.') }}<br>
                        </p>
                    </div>
                </div>
                <div class="col-12">
                    <div class="row justify-content-center">
                        <div class="col-sm-6 col-lg-4 col-xl-3 mb-30 item seller-card-item" data-aos="fade-up">
                            <div class="card h-100 seller-card">
                                <div class="card-icon">
                                    <i class="fal fa-car-side"></i>
                                </div>
                                <div class="card-content seller-card-content">
                                    <a href="javascript:void(0)">
                                        <h4 class="card-title">{{ __('Publicá tu vehículo') }}</h4>
                                    </a>
                                    <p class="card-text">{{ __('Completá los datos de tu vehículo, agregá fotos y contanos cuánto esperas obtener por él.') }}</p>
                                    <a href="/seller/register" class="btn-text color-primary" title="{{ __('Empezar') }}" target="_self">
                                        {{ __('Empezar') }}
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-lg-4 col-xl-3 mb-30 item seller-card-item" data-aos="fade-up">
                            <div class="card h-100 seller-card">
                                <div class="card-icon">
                                    <i class="fal fa-network-wired"></i>
                                </div>
                                <div class="card-content seller-card-content">
                                    <a href="javascript:void(0)">
                                        <h4 class="card-title">{{ __('Las automotoras reciben tu vehículo') }}</h4>
                                    </a>
                                    <p class="card-text">{{ __('Tu publicación queda disponible en nuestra red de automotoras que buscan nuevos vehículos para incorporar a su inventario.') }}</p>
                                    <a href="/seller/register" class="btn-text color-primary" title="{{ __('Empezar') }}" target="_self">
                                        {{ __('Empezar') }}
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-lg-4 col-xl-3 mb-30 item seller-card-item" data-aos="fade-up">
                            <div class="card h-100 seller-card">
                                <div class="card-icon">
                                    <i class="fal fa-file-contract"></i>
                                </div>
                                <div class="card-content seller-card-content">
                                    <a href="javascript:void(0)">
                                        <h4 class="card-title">{{ __('Recibí ofertas') }}</h4>
                                    </a>
                                    <p class="card-text">{{ __('Nuestra red de automotoras te realizarán una oferta por tu vehículo en un plazo de hasta 72 horas.') }}</p>
                                    <a href="/seller/register" class="btn-text color-primary" title="{{ __('Empezar') }}" target="_self">
                                        {{ __('Empezar') }}
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-lg-4 col-xl-3 mb-30 item seller-card-item" data-aos="fade-up">
                            <div class="card h-100 seller-card">
                                <div class="card-icon">
                                    <i class="fal fa-check-circle"></i>
                                </div>
                                <div class="card-content seller-card-content">
                                    <a href="javascript:void(0)">
                                        <h4 class="card-title">{{ __('Elegí qué hacer') }}</h4>
                                    </a>
                                    <p class="card-text">{{ __('Compará las propuestas recibidas y decidí con quién querés avanzar. Sin intermediarios. Sin publicar una y otra vez.') }}</p>
                                    <a href="/seller/register" class="btn-text color-primary" title="{{ __('Empezar') }}" target="_self">
                                        {{ __('Empezar') }}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
<!--Estilos de las cards anteriores-->
    <style>
        .seller-card-item {
            display: flex;
        }

        .seller-card {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            width: 100%;
        }

        .seller-card .card-icon {
            margin-bottom: 1.25rem;
            align-self: flex-start;
        }

        .seller-card-content {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            flex: 1;
            width: 100%;
        }

        .seller-card-content .card-text {
            margin-bottom: auto;
        }

        .seller-card-content .btn-text {
            margin-top: 1rem;
        }
    </style>

    <section class="user-profile-area pb-120" id="demo">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="section-title title-center mb-50" data-aos="fade-up">
                        <span class="subtitle">{{ __('Testimonios') }}</span>
                        <h2 class="title" style="max-width:90%; margin:0 auto;">{{ __('Personas que ya encontraron una forma más simple de vender su auto') }}</h2>
                    </div>
                </div>
                <div class="col-12">
                    <div class="swiper user-slider" data-aos="fade-up">
                        <div class="swiper-wrapper">
                                <!--Testimonio 1 -->
                                <div class="swiper-slide">
                                    <div class="card text-center">
                                        <div class="icon">
                                            <img class="lazy" src="{{ asset('assets/front/images/marcos-testimonio.webp') }}" alt="Marcos Rodriguez">
                                        </div>
                                        <div class="card-content">
                                            <h4 class="card-title">Marcos R.</h4>
                                            <div class="ratings justify-content-center size-md mb-3">
                                                <div class="rate">
                                                    <div class="rating-icon" style="width:100%"></div>
                                                </div>
                                            </div>
                                            <p class="card-text">{{ __('Pensé que iba a ser complicado vender mi auto, pero fue todo lo contrario. Publiqué los datos y en poco tiempo empecé a recibir ofertas de automotoras. Elegí la que más me convenía y concreté la venta sin tener que estar buscando compradores.') }}</p>
                                            <span class="designation">{{ __('Montevideo') }}</span>
                                        </div>
                                    </div>
                                </div>
                                <!--Testimonio 2 -->
                                <div class="swiper-slide">
                                    <div class="card text-center">
                                        <div class="icon">
                                            <img class="lazy" src="{{ asset('assets/front/images/sofia-testimonio.webp') }}" alt="Sofia Mendez">
                                        </div>
                                        <div class="card-content">
                                            <h4 class="card-title">Sofía M.</h4>
                                            <div class="ratings justify-content-center size-md mb-3">
                                                <div class="rate">
                                                    <div class="rating-icon" style="width:100%"></div>
                                                </div>
                                            </div>
                                            <p class="card-text">{{ __('Lo que más me gustó fue poder recibir propuestas de distintas automotoras desde un solo lugar. Me ahorré tiempo, pude comparar las ofertas y terminé vendiendo mi vehículo rápidamente.') }}</p>
                                            <span class="designation">{{ __('Canelones') }}</span>
                                        </div>
                                    </div>
                                </div>
                                <!--Testimonio 3 -->
                                <div class="swiper-slide">
                                    <div class="card text-center">
                                        <div class="icon">
                                            <img class="lazy" src="{{ asset('assets/front/images/jorge-testimonio.webp') }}" alt="Jorge Pinares">
                                        </div>
                                        <div class="card-content">
                                            <h4 class="card-title">Jorge P.</h4>
                                            <div class="ratings justify-content-center size-md mb-3">
                                                <div class="rate">
                                                    <div class="rating-icon" style="width:100%"></div>
                                                </div>
                                            </div>
                                            <p class="card-text">{{ __('Tenía el auto publicado hacía semanas y no encontraba una buena oportunidad para venderlo. Con CarMetric lo publiqué una vez y las automotoras interesadas empezaron a contactarme. Finalmente acepté una oferta y cerré la venta.') }}</p>
                                            <span class="designation">{{ __('Montevideo') }}</span>
                                        </div>
                                    </div>
                                </div>
                        </div>
                        <div class="swiper-pagination position-static mt-30"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="testimonial-area">
        <div class="container">
            <div class="row align-items-center gx-xl-5">
                <div class="col-lg-6">
                    <div class="content mb-30" data-aos="fade-up">
                        <h2 class="title">{{ __('Vende tu auto de forma más inteligente') }}</h2>
                    </div>
                    <p class="card-text" data-aos="fade-up"><strong>Una publicación. Múltiples oportunidades.</strong><br>
                    En lugar de recorrer automotoras, enviar mensajes o esperar a que aparezca un comprador particular, dejá que las automotoras lleguen hasta vos.
                    </p>
                    <a href="/seller/register" class="btn btn-lg btn-primary" data-aos="fade-up">{{ __('Publicar Vehículo') }}</a>
                </div>
                <div class="col-lg-6">
                    <div class="image mb-30 img-right" data-aos="fade-left">
                        <img src="{{ asset('assets/front/images/vender-auto-carmetric.webp') }}" alt="vender auto">
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Sección ¿Que necesitas para publicar? --> 
    <section class="choose-area pt-120 pb-90">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="choose-content mb-30 pe-lg-5" data-aos="fade-right">
                        <h2 class="title">{{ __('¿Qué necesitás para publicar?') }}</h2>
                        <p class="text">
                            {{ __('Las automotoras buscan constantemente vehículos para renovar y ampliar su inventario. Publicar tu auto en CarMetric te permite conocer qué propuestas podés recibir de compradores profesionales.') }}<br>
                            {{ __('Además, publicar tu vehículo es más sencillo de lo que crees, sin complejidades.') }}
                        </p>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="row justify-content-center">
                        <div class="col-sm-6 item" data-aos="fade-up">
                            <div class="card mb-30">
                                <div class="card-icon">
                                    <i class="fal fa-car-side"></i>
                                </div>
                                <div class="card-content">
                                    <a href="javascript:void(0)">
                                        <h4 class="card-title">Datos del vehículo</h4>
                                    </a>
                                    <p class="card-text">Marca, modelo, año, versión y kilometraje.</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6 item" data-aos="fade-up" data-aos-delay="100">
                            <div class="card mb-30">
                                <div class="card-icon">
                                    <i class="fal fa-camera"></i>
                                </div>
                                <div class="card-content">
                                    <a href="javascript:void(0)">
                                        <h4 class="card-title">Fotografías</h4>
                                    </a>
                                    <p class="card-text">Mostrá el estado real de tu vehículo.</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6 item" data-aos="fade-up" data-aos-delay="200">
                            <div class="card mb-30">
                                <div class="card-icon">
                                    <i class="fal fa-address-book"></i>
                                </div>
                                <div class="card-content">
                                    <a href="javascript:void(0)">
                                        <h4 class="card-title">Información de contacto</h4>
                                    </a>
                                    <p class="card-text">Para que las automotoras puedan comunicarse contigo.</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6 item" data-aos="fade-up" data-aos-delay="300">
                            <div class="card mb-30">
                                <div class="card-icon">
                                    <i class="fal fa-dollar-sign"></i>
                                </div>
                                <div class="card-content">
                                    <a href="javascript:void(0)">
                                        <h4 class="card-title">Recursos</h4>
                                    </a>
                                    <p class="card-text">Indicá cuánto te gustaría obtener por tu vehículo.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="blog-area ptb-90">
        <div class="container">
            <div class="section-title title-inline mb-50" data-aos="fade-up">
                <h2 class="title">{{ __('Un flujo simple para vender tu auto') }}</h2>
            </div>
            <div class="row justify-content-center">
                <div class="col-md-6 col-lg-4">
                    <article class="card mb-30" data-aos="fade-up" data-aos-delay="100">
                        <div class="card-image">
                            <a href="#" class="lazy-container ratio-16-9">
                                <img class="lazyload lazy-image" src="{{ asset('assets/front/images/publica-carmetric.webp') }}" alt="Publicar Auto">
                            </a>
                        </div>
                        <div class="content">
                            <h5 class="card-title">
                                {{ __('Publicá tu vehículo') }}
                            </h5>
                        </div>
                    </article>
                </div>
                <div class="col-md-6 col-lg-4">
                    <article class="card mb-30" data-aos="fade-up" data-aos-delay="100">
                        <div class="card-image">
                            <a href="#" class="lazy-container ratio-16-9">
                                <img class="lazyload lazy-image" src="{{ asset('assets/front/images/recibi-ofertas-carmetric.webp') }}" alt="Recibí ofertas">
                            </a>
                        </div>
                        <div class="content">
                            <h5 class="card-title">
                            {{ __('Recibí ofertas') }}
                            </h5>
                        </div>
                    </article>
                </div>
                <div class="col-md-6 col-lg-4">
                    <article class="card mb-30" data-aos="fade-up" data-aos-delay="100">
                        <div class="card-image">
                            <a href="#" class="lazy-container ratio-16-9">
                                <img class="lazyload lazy-image" src="{{ asset('assets/front/images/cerra-venta-carmetric.webp') }}" alt="Cierra la venta">
                            </a>
                        </div>
                        <div class="content">
                            <h5 class="card-title">
                                {{ __('Cierra la venta') }}
                            </h5>
                        </div>
                    </article>
                </div>
            </div>
        </div>
    </section>

    <section class="ptb-120 bg-primary-light">
        <div class="container">
            <div class="row align-items-center justify-content-between">
                <div class="col-lg-8">
                    <div class="section-title title-inline mb-0" data-aos="fade-up">
                        <h2 class="title mb-0">{{ __('¿Querés vender tu auto?') }}</h2>
                        <p class="card-text">{{ __('Publicalo en CarMetric y recibí ofertas de automotoras en sólo 72 horas.') }}</p>
                    </div>
                </div>
                <div class="col-lg-4 text-lg-end mt-4 mt-lg-0" data-aos="fade-up">
                    <a href="/seller/register" class="btn btn-lg btn-primary">{{ __('Publicar mi vehículo') }}</a>
                </div>
            </div>
        </div>
    </section>
@endsection