<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', $config['empresa_nombre'] ?? 'WebSoft Solutions') - Sistemas Web Profesionales</title>
    <meta name="description" content="{{ $config['meta_descripcion'] ?? 'Venta y alquiler de sistemas web académicos, asistencia y gestión institucional en Perú.' }}">
    <meta name="keywords" content="sistema académico, sistema de asistencia, software educativo, gestión escolar, Perú">
    <meta name="author" content="{{ $config['empresa_nombre'] ?? 'WebSoft Solutions' }}">
    <meta property="og:title" content="{{ $config['empresa_nombre'] ?? 'WebSoft Solutions' }}">
    <meta property="og:description" content="{{ $config['meta_descripcion'] ?? '' }}">
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>💻</text></svg>">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <!-- SwiperJS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
    <!-- AOS Animations -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css">
    <style>
      /* Fallback: si AOS no carga, mostrar elementos igualmente */
      [data-aos] { opacity: 1 !important; transform: none !important; }
    </style>
    <!-- App CSS -->
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    @yield('styles')
</head>
<body>

<!-- Topbar -->
<div class="topbar">
    <div class="container">
        <div class="topbar-inner">
            <div class="topbar-left">
                @if($config['empresa_telefono'] ?? false)
                <span class="topbar-item">
                    <i class="bi bi-telephone-fill"></i>
                    {{ $config['empresa_telefono'] }}
                </span>
                <div class="topbar-divider"></div>
                @endif
                @if($config['empresa_email'] ?? false)
                <span class="topbar-item">
                    <i class="bi bi-envelope-fill"></i>
                    {{ $config['empresa_email'] }}
                </span>
                <div class="topbar-divider"></div>
                @endif
                @if($config['empresa_horario'] ?? false)
                <span class="topbar-item">
                    <i class="bi bi-clock-fill"></i>
                    {{ $config['empresa_horario'] }}
                </span>
                @endif
            </div>
            <div class="topbar-right">
                <span class="topbar-item">
                    <i class="bi bi-calendar3"></i>
                    {{ now()->locale('es')->isoFormat('dddd, D [de] MMMM [de] YYYY') }}
                </span>
                <div class="topbar-divider"></div>
                <div class="topbar-socials">
                    @if($config['social_facebook'] ?? false)
                    <a href="{{ $config['social_facebook'] }}" target="_blank" aria-label="Facebook"><i class="bi bi-facebook"></i></a>
                    @endif
                    @if($config['social_instagram'] ?? false)
                    <a href="{{ $config['social_instagram'] }}" target="_blank" aria-label="Instagram"><i class="bi bi-instagram"></i></a>
                    @endif
                    @if($config['social_youtube'] ?? false)
                    <a href="{{ $config['social_youtube'] }}" target="_blank" aria-label="YouTube"><i class="bi bi-youtube"></i></a>
                    @endif
                    @if($config['social_whatsapp'] ?? false)
                    <a href="https://wa.me/{{ $config['social_whatsapp'] }}" target="_blank" aria-label="WhatsApp"><i class="bi bi-whatsapp"></i></a>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Navbar -->
<nav class="navbar" id="mainNavbar">
    <div class="container">
        <div class="navbar-inner">
            <a href="{{ route('home') }}" class="navbar-brand">
                <div class="navbar-logo">W</div>
                <div class="navbar-brand-text">
                    <span class="navbar-brand-name">{{ $config['empresa_nombre'] ?? 'WebSoft Solutions' }}</span>
                    <span class="navbar-brand-tagline">Sistemas Web Profesionales</span>
                </div>
            </a>

            <nav class="navbar-nav" id="navMenu">
                @php
                    $menuItemsNav = \App\Models\MenuItem::activos()->get();
                @endphp

                @if($menuItemsNav->isNotEmpty())
                    {{-- Menú dinámico desde BD --}}
                    @foreach($menuItemsNav as $navItem)
                    @php
                        // Si la URL es relativa (empieza con /), la envolvemos con url()
                        // para que resuelva correctamente con el subdirectorio APP_URL
                        $navHref = (str_starts_with($navItem->url, 'http://') || str_starts_with($navItem->url, 'https://'))
                            ? $navItem->url
                            : url($navItem->url);
                    @endphp
                    <a href="{{ $navHref }}"
                       class="nav-link {{ request()->fullUrlIs($navHref) || request()->is(ltrim($navItem->url,'/')) ? 'active' : '' }}"
                       target="{{ $navItem->target }}"
                       @if($navItem->target === '_blank') rel="noopener noreferrer" @endif>
                        @if($navItem->icono)<i class="{{ $navItem->icono }}"></i> @endif
                        {{ $navItem->label }}
                    </a>
                    @endforeach
                @else
                    {{-- Fallback: menú estático por defecto --}}
                    <a href="{{ route('home') }}"
                       class="nav-link {{ request()->routeIs('home') ? 'active' : '' }}">Inicio</a>
                    <a href="{{ route('servicios') }}"
                       class="nav-link {{ request()->routeIs('servicios') ? 'active' : '' }}">Servicios</a>
                    <a href="{{ route('noticias') }}"
                       class="nav-link {{ request()->routeIs('noticias','noticia.show') ? 'active' : '' }}">Noticias</a>
                    <a href="{{ route('premios') }}"
                       class="nav-link {{ request()->routeIs('premios') ? 'active' : '' }}">Premios</a>
                    <a href="{{ route('comunidad') }}"
                       class="nav-link {{ request()->routeIs('comunidad') ? 'active' : '' }}">Comunidad</a>
                    <a href="{{ route('contacto') }}"
                       class="nav-link {{ request()->routeIs('contacto') ? 'active' : '' }}">Contacto</a>
                @endif
                {{-- Acceso admin solo visible en mobile (menú desplegable) --}}
                <a href="{{ route('admin.login') }}" class="nav-link nav-link-admin" id="navAdminMobile">
                    <i class="bi bi-shield-lock-fill"></i> Acceso Admin
                </a>
            </nav>

            <div class="navbar-actions">
                @if($config['social_whatsapp'] ?? false)
                <a href="https://wa.me/{{ $config['social_whatsapp'] }}?text=Hola,%20deseo%20información%20sobre%20sus%20sistemas%20web"
                   class="btn btn-primary btn-sm" target="_blank">
                    <i class="bi bi-whatsapp"></i> Solicitar Demo
                </a>
                @else
                <a href="#contacto" class="btn btn-primary btn-sm">
                    <i class="bi bi-chat-dots-fill"></i> Solicitar Demo
                </a>
                @endif

                {{-- Botón Acceso Admin (solo desktop) --}}
                <a href="{{ route('admin.login') }}" class="btn-admin-access" id="btnAdminAccess"
                   title="Acceso al Panel Administrativo" aria-label="Panel Admin">
                    <i class="bi bi-shield-lock-fill"></i>
                    <span class="admin-btn-label">Acceso</span>
                </a>

                <button class="navbar-toggle" id="navToggle" aria-label="Menú">
                    <span></span><span></span><span></span>
                </button>
            </div>
        </div>
    </div>
</nav>

<!-- Main Content -->
<main>
    @yield('content')
</main>

<!-- Footer -->
<footer class="footer" id="contacto">
    <div class="container">
        <div class="footer-grid">
            <!-- Brand -->
            <div>
                <div class="footer-brand-name">
                    <i class="bi bi-code-square text-primary"></i>
                    {{ $config['empresa_nombre'] ?? 'WebSoft Solutions' }}
                </div>
                <p class="footer-desc">{{ $config['footer_descripcion'] ?? 'Empresa peruana especializada en desarrollo y alquiler de sistemas web para instituciones educativas y empresas.' }}</p>
                <div class="footer-socials">
                    @if($config['social_facebook'] ?? false)
                    <a href="{{ $config['social_facebook'] }}" class="footer-social" target="_blank"><i class="bi bi-facebook"></i></a>
                    @endif
                    @if($config['social_instagram'] ?? false)
                    <a href="{{ $config['social_instagram'] }}" class="footer-social" target="_blank"><i class="bi bi-instagram"></i></a>
                    @endif
                    @if($config['social_youtube'] ?? false)
                    <a href="{{ $config['social_youtube'] }}" class="footer-social" target="_blank"><i class="bi bi-youtube"></i></a>
                    @endif
                    @if($config['social_whatsapp'] ?? false)
                    <a href="https://wa.me/{{ $config['social_whatsapp'] }}" class="footer-social" target="_blank"><i class="bi bi-whatsapp"></i></a>
                    @endif
                </div>
            </div>
            <!-- Links -->
            <div>
                <h5 class="footer-col-title">Servicios</h5>
                <div class="footer-links">
                    <a href="#servicios" class="footer-link"><i class="bi bi-chevron-right"></i> Sistema Académico</a>
                    <a href="#servicios" class="footer-link"><i class="bi bi-chevron-right"></i> Control de Asistencia</a>
                    <a href="#servicios" class="footer-link"><i class="bi bi-chevron-right"></i> Sistema de Biblioteca</a>
                    <a href="#servicios" class="footer-link"><i class="bi bi-chevron-right"></i> Facturación Electrónica</a>
                    <a href="#servicios" class="footer-link"><i class="bi bi-chevron-right"></i> Portal Web Institucional</a>
                </div>
            </div>
            <!-- Quick Links -->
            <div>
                <h5 class="footer-col-title">Institución</h5>
                <div class="footer-links">
                    <a href="{{ route('home') }}" class="footer-link"><i class="bi bi-chevron-right"></i> Inicio</a>
                    <a href="#noticias" class="footer-link"><i class="bi bi-chevron-right"></i> Noticias</a>
                    <a href="#premios" class="footer-link"><i class="bi bi-chevron-right"></i> Premios</a>
                    <a href="#comunidad" class="footer-link"><i class="bi bi-chevron-right"></i> Testimonios</a>
                    <a href="{{ route('admin.login') }}" class="footer-link"><i class="bi bi-chevron-right"></i> Administración</a>
                </div>
            </div>
            <!-- Contact -->
            <div>
                <h5 class="footer-col-title">Contacto</h5>
                @if($config['empresa_direccion'] ?? false)
                <div class="footer-contact-item">
                    <i class="bi bi-geo-alt-fill"></i>
                    <span>{{ $config['empresa_direccion'] }}</span>
                </div>
                @endif
                @if($config['empresa_telefono'] ?? false)
                <div class="footer-contact-item">
                    <i class="bi bi-telephone-fill"></i>
                    <span>{{ $config['empresa_telefono'] }}</span>
                </div>
                @endif
                @if($config['empresa_email'] ?? false)
                <div class="footer-contact-item">
                    <i class="bi bi-envelope-fill"></i>
                    <span>{{ $config['empresa_email'] }}</span>
                </div>
                @endif
                @if($config['empresa_horario'] ?? false)
                <div class="footer-contact-item">
                    <i class="bi bi-clock-fill"></i>
                    <span>{{ $config['empresa_horario'] }}</span>
                </div>
                @endif
                @if($config['empresa_ruc'] ?? false)
                <div class="footer-contact-item">
                    <i class="bi bi-building-fill"></i>
                    <span>RUC: {{ $config['empresa_ruc'] }}</span>
                </div>
                @endif
            </div>
        </div>
        <div class="footer-bottom">
            <span>&copy; {{ date('Y') }} {{ $config['empresa_nombre'] ?? 'WebSoft Solutions' }}. Todos los derechos reservados.</span>
            <span>Desarrollado con <i class="bi bi-heart-fill" style="color:#ef4444;"></i> en Perú</span>
        </div>
    </div>
</footer>

<!-- Back to top -->
<button class="back-to-top" id="backToTop" aria-label="Volver arriba">
    <i class="bi bi-arrow-up"></i>
</button>

<!-- WhatsApp Float -->
@if($config['social_whatsapp'] ?? false)
<a href="https://wa.me/{{ $config['social_whatsapp'] }}?text=Hola,%20quiero%20información%20sobre%20sus%20sistemas%20web"
   class="whatsapp-float" target="_blank" aria-label="WhatsApp">
    <i class="bi bi-whatsapp"></i>
</a>
@endif

<!-- SwiperJS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<!-- AOS Animations -->
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
<!-- App JS (incluye Swiper init, AOS init, counters, navbar) -->
<script src="{{ asset('js/app.js') }}"></script>
@yield('scripts')

{{-- ── POPUP CAROUSEL: Comunicados / Noticias Emergentes ── --}}
@include('public.partials.popup-carousel')

</body>
</html>
