<?php
defined('BASEPATH') or exit('No direct script access allowed');
?>

<!-- Navbar & Hero Start -->
<div class="container-xxl position-relative p-0">
    <nav class="navbar navbar-expand-lg navbar-light px-4 px-lg-5 py-3 py-lg-0">
        <a href="<?php echo base_url(); ?>" class="navbar-brand p-0">
            <!-- <h1 class="m-0"><i class="fa fa-server me-3"></i>GreenHost</h1> -->
            <img
                src="<?php echo base_url('template/img/logo-horizontal.png'); ?>"
                data-logo-default="<?php echo base_url('template/img/logo-horizontal.png'); ?>"
                data-logo-home="<?php echo base_url('template/img/sin_fondo.png'); ?>"
                alt="Logo"
            >
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
            <span class="fa fa-bars"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav ms-auto py-0">
                <a href="<?php echo base_url('/'); ?>" class="nav-item nav-link <?php echo ($main_content == 'home') ? 'active' : ''; ?>">Inicio</a>
                <a href="<?php echo base_url('nosotros'); ?>" class="nav-item nav-link <?php echo ($main_content == 'nosotros') ? 'active' : ''; ?>">Nosotros</a>
                <a href="<?php echo base_url('servicios'); ?>" class="nav-item nav-link <?php echo ($main_content == 'servicios') ? 'active' : ''; ?>">Servicios</a>
                <a href="<?php echo base_url('clientes'); ?>" class="nav-item nav-link <?php echo ($main_content == 'clientes') ? 'active' : ''; ?>">Clientes</a>
                <a href="<?php echo base_url('hosting'); ?>" class="nav-item nav-link <?php echo ($main_content == 'hosting') ? 'active' : ''; ?>">Hosting</a>
                <a href="<?php echo base_url('contacto'); ?>" class="nav-item nav-link <?php echo ($main_content == 'contacto') ? 'active' : ''; ?>">Contacto</a>
            </div>
            <a href="https://app.elements.com.py/" target="_blank" rel="noopener" class="btn btn-portal ms-3">
                <i class="fas fa-user-circle me-1"></i> Portal Clientes
            </a>
            <!-- <butaton type="button" class="btn text-secondary ms-3" data-bs-toggle="modal" data-bs-target="#searchModal"><i class="fa fa-search"></i></butaton> 
            <a href="" class="btn btn-secondary py-2 px-4 ms-3">Register</a>
            -->
        </div>
    </nav>


    <?php
    switch ($main_content) {
        case 'home':
            echo '<div class="hero-dark" id="home-hero">
                <div class="hero-orb hero-orb-1"></div>
                <div class="hero-orb hero-orb-2"></div>
                <div class="hero-orb hero-orb-3"></div>
                <div class="container px-lg-5">
                    <div class="row g-5 align-items-center">
                        <div class="col-lg-6 text-center text-lg-start">
                            <div class="hero-tag animated fadeInDown">
                                Soluciones IT de vanguardia
                            </div>
                            <h1 class="animated slideInLeft">
                                Somos <span class="gradient-text">expertos</span><br>en tecnología
                            </h1>
                            <p class="hero-sub animated slideInLeft">
                                <span id="hero-typed"></span><span class="hero-typed-cursor"></span>
                            </p>
                            <div class="hero-badges animated fadeInUp">
                                <span class="hero-badge"><i class="fas fa-check-circle"></i> Soporte Técnico</span>
                                <span class="hero-badge"><i class="fas fa-server"></i> Web Hosting</span>
                                <span class="hero-badge"><i class="fas fa-network-wired"></i> Redes</span>
                            </div>
                            <div class="hero-cta animated fadeInUp">
                                <a href="' . base_url('contacto') . '" class="btn btn-glow">
                                    <i class="fas fa-comments me-2"></i>Contactanos
                                </a>
                                <a href="' . base_url('servicios') . '" class="btn btn-ghost-dark">
                                    Ver Servicios <i class="fas fa-arrow-right ms-2"></i>
                                </a>
                            </div>
                        </div>
                        <div class="col-lg-6 text-center">
                            <div class="hero-img-wrap">
                                <div class="hero-img-glow"></div>
                                <img class="img-fluid animated zoomIn" src="' . base_url('template/img/hero.png') . '" alt="Elements IT">
                            </div>
                        </div>
                    </div>
                </div>
                <a href="#main-content" class="hero-scroll">
                    <i class="fas fa-chevron-down"></i>
                    <span>Explorar</span>
                </a>
            </div>';
            break;

        case 'nosotros':
            echo '<div class="page-hero mb-5">
                <div class="container px-lg-5">
                    <div class="row align-items-center">
                        <div class="col-lg-7 text-center text-lg-start">
                            <div class="highlight-pill animated fadeInDown mb-3">
                                <i class="fas fa-building me-1"></i> Quiénes somos
                            </div>
                            <h1 class="display-4 fw-bold animated slideInLeft">Nosotros</h1>
                            <p class="opacity-75 animated slideInLeft" style="max-width:480px;color:rgba(255,255,255,0.65);">Profesionales comprometidos con la excelencia en soluciones informáticas.</p>
                        </div>
                        <div class="col-lg-5 text-center d-none d-lg-block">
                            <i class="fas fa-users page-hero-icon animated zoomIn"></i>
                        </div>
                    </div>
                </div>
            </div>';
            break;

        case 'hosting':
            echo '<div class="page-hero mb-5">
                <div class="container px-lg-5">
                    <div class="row align-items-center">
                        <div class="col-lg-7 text-center text-lg-start">
                            <div class="highlight-pill animated fadeInDown mb-3">
                                <i class="fas fa-server me-1"></i> Planes disponibles
                            </div>
                            <h1 class="display-4 fw-bold animated slideInLeft">Hosting</h1>
                            <p class="animated slideInLeft" style="max-width:480px;color:rgba(255,255,255,0.65);">Alta disponibilidad, soporte dedicado y dominio gratis en todos los planes.</p>
                        </div>
                        <div class="col-lg-5 text-center d-none d-lg-block">
                            <i class="fas fa-server page-hero-icon animated zoomIn"></i>
                        </div>
                    </div>
                </div>
            </div>';
            break;

        case 'servicios':
            echo '<div class="page-hero mb-5">
                <div class="container px-lg-5">
                    <div class="row align-items-center">
                        <div class="col-lg-7 text-center text-lg-start">
                            <div class="highlight-pill animated fadeInDown mb-3">
                                <i class="fas fa-cogs me-1"></i> Lo que hacemos
                            </div>
                            <h1 class="display-4 fw-bold animated slideInLeft">Servicios</h1>
                            <p class="animated slideInLeft" style="max-width:480px;color:rgba(255,255,255,0.65);">Soporte técnico, redes, servidores, hosting y más — todo en un solo lugar.</p>
                        </div>
                        <div class="col-lg-5 text-center d-none d-lg-block">
                            <i class="fas fa-laptop-code page-hero-icon animated zoomIn"></i>
                        </div>
                    </div>
                </div>
            </div>';
            break;

        case 'contacto':
            echo '<div class="page-hero mb-5">
                <div class="container px-lg-5">
                    <div class="row align-items-center">
                        <div class="col-lg-7 text-center text-lg-start">
                            <div class="highlight-pill animated fadeInDown mb-3">
                                <i class="fas fa-headset me-1"></i> Estamos para ayudarte
                            </div>
                            <h1 class="display-4 fw-bold animated slideInLeft">Contacto</h1>
                            <p class="animated slideInLeft" style="max-width:480px;color:rgba(255,255,255,0.65);">Respondemos en el menor tiempo posible por todos nuestros canales.</p>
                        </div>
                        <div class="col-lg-5 text-center d-none d-lg-block">
                            <i class="fas fa-comments page-hero-icon animated zoomIn"></i>
                        </div>
                    </div>
                </div>
            </div>';
            break;

        case 'clientes':
            echo '<div class="page-hero mb-5">
                <div class="container px-lg-5">
                    <div class="row align-items-center">
                        <div class="col-lg-7 text-center text-lg-start">
                            <div class="highlight-pill animated fadeInDown mb-3">
                                <i class="fas fa-handshake me-1"></i> Quienes confían en nosotros
                            </div>
                            <h1 class="display-4 fw-bold animated slideInLeft">Clientes</h1>
                            <p class="animated slideInLeft" style="max-width:480px;color:rgba(255,255,255,0.65);">Empresas de distintos rubros que eligen Elements para sus soluciones IT.</p>
                        </div>
                        <div class="col-lg-5 text-center d-none d-lg-block">
                            <i class="fas fa-award page-hero-icon animated zoomIn"></i>
                        </div>
                    </div>
                </div>
            </div>';
            break;
    }

    ?>
</div>
<!-- Navbar & Hero End -->