@extends('layouts.dashboardnew')

@section('content')
<div class="row align-items-center mb-4">
    <div class="col-md-8">
        <h2 class="section-heading mb-0">Centro de Prospección Digital</h2>
        <p class="text-muted mb-0">Potencia tu crecimiento con embudos de alta conversión.</p>
    </div>
    <div class="col-md-4 text-md-end mt-3 mt-md-0">
        <a href="{{ route('funnels.config') }}" class="btn btn-primary rounded-pill px-4 fw-bold shadow-sm">
            <i class="fa-solid fa-gear me-2"></i> Configurar mis Embudos
        </a>
    </div>
</div>

<div class="row">
    <div class="col-md-6 col-lg-4 col-xl-4 col-xxl-3 mb-4">
        <div class="tech-card h-100 p-0">
            <div class="preview-header position-relative" style="background: url('{{ $configs['v1']->imagen_portada ?? 'https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=600&q=80' }}') center/cover; height: 160px;">
                <div style="position:absolute; inset:0; background: linear-gradient(135deg, #0A58CA 0%, #00d2ff 100%); opacity: 0.7;"></div>
                <div class="position-absolute w-100 h-100 d-flex align-items-center justify-content-center">
                    <i class="fa-solid fa-play-circle text-white fs-1 shadow-sm" style="opacity: 0.9;"></i>
                </div>
                <div class="badge bg-white text-primary position-absolute bottom-0 end-0 m-3 rounded-pill shadow-sm">Global</div>
            </div>
            
            <div class="p-4">
                <h4 class="fw-bold text-dark mb-1">Landing Master Global</h4>
                <div class="input-group mb-3 shadow-sm mt-3">
                    <span class="input-group-text bg-light border-0"><i class="fa-solid fa-link text-primary"></i></span>
                    <input type="text" class="form-control border-0 bg-light fw-bold" style="font-size: 0.75rem;" value="{{ route('landing.global').'?ref='.Auth::user()->ID }}" readonly id="linkGlobal">
                    <button class="btn btn-primary" onclick="copyLink('linkGlobal')"><i class="fa-solid fa-copy"></i></button>
                </div>
                
                <div class="row g-2">
                    <div class="col-6"><a href="{{ route('landing.global').'?ref='.Auth::user()->ID }}" target="_blank" class="btn btn-outline-primary w-100 rounded-pill border-2 fw-bold small"><i class="fa-solid fa-eye me-1"></i> Ver</a></div>
                    <div class="col-6"><button class="btn btn-primary w-100 rounded-pill fw-bold" onclick="copyLink('linkGlobal')"><i class="fa-solid fa-share-nodes me-1"></i> Copiar</button></div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-lg-4 col-xl-4 col-xxl-3 mb-4">
        <div class="tech-card h-100 p-0" style="border-color: rgba(255, 0, 128, 0.2) !important;">
            <div class="preview-header position-relative" style="background: url('{{ $configs['v2']->imagen_portada ?? 'https://images.unsplash.com/photo-1556761175-4b46a572b786?auto=format&fit=crop&w=600&q=80' }}') center/cover; height: 160px;">
                <div style="position:absolute; inset:0; background: linear-gradient(135deg, #FF0080 0%, #7928CA 100%); opacity: 0.7;"></div>
                <div class="position-absolute w-100 h-100 d-flex align-items-center justify-content-center">
                    <i class="fa-solid fa-user-tie text-white fs-1 shadow-sm" style="opacity: 0.9;"></i>
                </div>
                <div class="badge bg-white text-danger position-absolute bottom-0 end-0 m-3 rounded-pill shadow-sm">VIP</div>
            </div>
            
            <div class="p-4">
                <h4 class="fw-bold text-dark mb-1">Reclutamiento VIP</h4>
                <div class="input-group mb-3 shadow-sm mt-3">
                    <span class="input-group-text bg-light border-0"><i class="fa-solid fa-link" style="color:#FF0080;"></i></span>
                    <input type="text" class="form-control border-0 bg-light fw-bold" style="font-size: 0.75rem;" value="{{ route('landing.registro').'?ref='.Auth::user()->ID }}" readonly id="linkReg">
                    <button class="btn text-white" style="background: #FF0080;" onclick="copyLink('linkReg')"><i class="fa-solid fa-copy"></i></button>
                </div>
                
                <div class="row g-2">
                    <div class="col-6"><a href="{{ route('landing.registro').'?ref='.Auth::user()->ID }}" target="_blank" class="btn w-100 rounded-pill border-2 fw-bold small" style="color: #FF0080; border-color: #FF0080;"><i class="fa-solid fa-eye me-1"></i> Ver</a></div>
                    <div class="col-6"><button class="btn text-white w-100 rounded-pill fw-bold" style="background: linear-gradient(135deg, #FF0080 0%, #7928CA 100%); border:none;" onclick="copyLink('linkReg')"><i class="fa-solid fa-share-nodes me-1"></i> Copiar</button></div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-lg-4 col-xl-4 col-xxl-3 mb-4">
        <div class="tech-card h-100 p-0" style="border-color: rgba(121, 40, 202, 0.2) !important;">
            <div class="preview-header position-relative" style="background: url('{{ $configs['v3']->imagen_portada ?? 'https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?auto=format&fit=crop&w=600&q=80' }}') center/cover; height: 160px;">
                <div style="position:absolute; inset:0; background: linear-gradient(135deg, #7928CA 0%, #020617 100%); opacity: 0.7;"></div>
                <div class="position-absolute w-100 h-100 d-flex align-items-center justify-content-center">
                    <i class="fa-solid fa-microchip text-white fs-1 shadow-sm" style="opacity: 0.9;"></i>
                </div>
                <div class="badge bg-white position-absolute bottom-0 end-0 m-3 rounded-pill shadow-sm" style="color: #7928CA;">Cyber</div>
            </div>
            
            <div class="p-4">
                <h4 class="fw-bold text-dark mb-1">Estilo Futurista</h4>
                <div class="input-group mb-3 shadow-sm mt-3">
                    <span class="input-group-text bg-light border-0"><i class="fa-solid fa-link" style="color:#7928CA;"></i></span>
                    <input type="text" class="form-control border-0 bg-light fw-bold" style="font-size: 0.75rem;" value="{{ route('landing.futurista').'?ref='.Auth::user()->ID }}" readonly id="linkFut">
                    <button class="btn text-white" style="background: #7928CA;" onclick="copyLink('linkFut')"><i class="fa-solid fa-copy"></i></button>
                </div>
                
                <div class="row g-2">
                    <div class="col-6"><a href="{{ route('landing.futurista').'?ref='.Auth::user()->ID }}" target="_blank" class="btn w-100 rounded-pill border-2 fw-bold small" style="color: #7928CA; border-color: #7928CA;"><i class="fa-solid fa-eye me-1"></i> Ver</a></div>
                    <div class="col-6"><button class="btn text-white w-100 rounded-pill fw-bold" style="background: linear-gradient(135deg, #7928CA 0%, #020617 100%); border:none;" onclick="copyLink('linkFut')"><i class="fa-solid fa-share-nodes me-1"></i> Copiar</button></div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .tech-card { background: #ffffff; border-radius: 20px; transition: all 0.4s ease; border: 1px solid rgba(10, 88, 202, 0.08); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04); overflow: hidden; }
    .tech-card:hover { transform: translateY(-8px); box-shadow: 0 15px 40px rgba(10, 88, 202, 0.15); border-color: #0A58CA; }
    .preview-header { overflow: hidden; }
    html[data-bs-theme="dark"] .tech-card { background: #2b3039 !important; border-color: rgba(255, 255, 255, 0.05) !important; }
    html[data-bs-theme="dark"] .text-dark { color: #f1f3fa !important; }
</style>

<script>
function copyLink(id) {
    var copyText = document.getElementById(id);
    copyText.select();
    copyText.setSelectionRange(0, 99999);
    navigator.clipboard.writeText(copyText.value);
    alert("¡Enlace copiado!");
}
</script>
@endsection