<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Grupo Helmont</title>

    <!-- Scripts -->
    <!--<script src="{{ asset('js/app.js') }}" defer></script>-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>

    <!-- Fonts -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet">

    <!-- Styles -->
    <!-- <link href="{{ asset('css/app.css') }}" rel="stylesheet"> -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    
    
    <style type="text/css">
        #header{
            background-color: #F38130 !important;
        }

        a.email, a.telefono{
            font-family: 'Inter';
            font-weight: 400;
            font-size: 14px;
            line-height: 17px;
            color: #FFFFFF !important;
            text-decoration: none;
        }
        nav.menu .nav-link{
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-size: 15px;
            line-height: 18px;
            text-transform: capitalize;
            color: #939598;
        }
        nav.menu li.active .nav-link{
            font-weight: 700 !important;
        }
        .footer{
            background-color: #F38130 !important;
        }
        .footer li, .footer p{
            color: #FFF !important;
            font-family: 'Montserrat', sans-serif;
            font-size: 16px;
            font-weight: 400;
        }
        .fondofooterseccion ul, .footer ul{
            list-style: none;
        }
        .fondofooterseccion{
            background-color: rgba(147, 149, 152, 0.2) !important;
        }
        .footer__titulo{
            font-family: 'Inter';
            font-style: normal;
            font-weight: 600;
            font-size: 20px;
            line-height: 24px;
            color: #333333;
        }
        a.footer__secciones{
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-size: 16px;
            line-height: 19px;
            color: #333333;
            text-decoration: none;
        }
        li a.footer__secciones{
            text-transform: capitalize !important;
        }
        .fondofooterseccion a:hover{
            color: #333333;
        }
        .logo_footer{
            width: 250px;
        }
        /* .whatsapp{
            position: fixed;
            right: 16px;
            bottom: 16px;
            border-radius: 50%;
            width: 60px;
            height: 60px;
        }
        .whatsapp a{
            background-color: #28D227 !important;
            border: none !important;
            border-radius: 9999px !important;
            padding: 0.25rem !important;
            width: 100% !important;
            height: 100% !important;
            display:inline-flex;
            justify-content: center;
            align-items: center;
        }
        .whatsapp figure{
            width: 32px;
            height: 32px;
            display: block;
            position: relative;
            margin: 0 !important;
        }
        .whatsapp img{
            display: block;
            height: auto;
            width: 100% !important;
        } */
        .fondofooterseccion .fa-envelope, .fondofooterseccion .fa-phone-alt, .fondofooterseccion .fa-map-marker-alt, .fondofooterseccion .fa-whatsapp {
            color: #F38130 !important;
        }
        p.encabezado{
            font-family: 'Inter';
            font-style: normal;
            font-weight: 500;
            font-size: 16px;
            line-height: 22px;
            color: #333333;
        }
        @media screen and (max-width: 768px){
            a.navbar-brand{
                width: 75%;
            }
            .logo, .logo_blanco{
                width: 75%;
            }
        }
        @media screen and (min-width: 992px){
            nav.menu .container{
                align-items: flex-end;
            }
        }
    </style>
</head>
<body>
    <div id="header" class="d-none d-md-block font-size-12 position-relative py-2">
        <div class="container">
            <div class="d-md-flex justify-content-between">
                <div>
                    <div class="me-3 d-md-inline-block">
                        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                            <li class="nav-item">
                                <img src="{{ asset('images/header/telefono.png') }}" />
                                <a href="<?php echo 'tel:' . $contacto->telefono1 ?>" class="telefono"><?= $contacto->telefono1 ?></a>
                                <span style="color: white;">&nbsp;|&nbsp;</span>
                                <a href="<?php echo 'tel:' . $contacto->telefono2 ?>" class="telefono"><?= $contacto->telefono2 ?></a>
                            </li>
                        </ul>
                    </div>
                    <div class="me-3 d-md-inline-block">
                        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                            <li class="nav-item">
                                <img src="{{ asset('images/header/email.png') }}" />
                                <a class="email" href="<?php echo 'mailto:' . $contacto->email ?>"><?= $contacto->email ?></a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!--<div>-->
                <!--    <?php if($redes->facebook != ''){ ?>-->
                <!--        <div class="me-3 d-md-inline-block">-->
                <!--            <ul class="navbar-nav me-auto mb-2 mb-lg-0">-->
                <!--                <li class="nav-item">-->
                <!--                    <a href="<?php echo $redes->facebook ?>" target="_blank">-->
                <!--                        <img src="{{ asset('images/facebook.png') }}">-->
                <!--                    </a>-->
                <!--                </li>-->
                <!--            </ul>-->
                <!--        </div>-->
                <!--    <?php } ?>-->
                <!--    <?php if($redes->instagram != ''){ ?>-->
                <!--        <div class="me-3 d-md-inline-block">-->
                <!--            <ul class="navbar-nav me-auto mb-2 mb-lg-0">-->
                <!--                <li class="nav-item">-->
                <!--                    <a href="<?php echo $redes->instagram ?>" target="_blank">-->
                <!--                        <img src="{{ asset('images/instagram.png') }}">-->
                <!--                    </a>-->
                <!--                </li>-->
                <!--            </ul>-->
                <!--        </div>-->
                <!--    <?php } ?>-->
                <!--</div>-->
            </div>
        </div>
    </div>

    <nav class="navbar navbar-expand-lg menu sticky-top shadow-sm bg-white">
        <div class="container">
            <a class="navbar-brand" href="<?= route('home') ?>">
                <img class="logo" src="{{ asset('images/logo.png') }}" />
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                    <li class="nav-item @yield('empresa')">
                        <a class="nav-link" aria-current="page" href="<?= route('empresa') ?>">Empresa</a>
                    </li>
                    <li class="nav-item @yield('productos')">
                        <a class="nav-link" href="<?= route('categorias') ?>">Productos</a>
                    </li>
                    <li class="nav-item @yield('novedades')">
                        <a class="nav-link" href="<?= route('novedades') ?>">Novedades</a>
                    </li>
                    <li class="nav-item @yield('calidad')">
                        <a class="nav-link" href="<?= route('calidad') ?>">Calidad</a>
                    </li>
                    <li class="nav-item @yield('presupuesto')">
                        <a class="nav-link" href="<?= route('presupuesto') ?>">Solicitud de presupuesto</a>
                    </li>
                    <li class="nav-item @yield('contacto')">
                        <a class="nav-link" href="<?= route('contacto') ?>">Contacto</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    @yield('content')
    <div class="fondofooterseccion p-3">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 col-md-3 mt-4">
                    <img class="logo_footer" src="{{ asset('images/logo.png') }}">
                </div>
                <div class="col-sm-12 col-md-3 mt-4">
                    <span class="footer__titulo">Secciones</span>
                    <div class="row mt-3">
                        <div class="col">
                            <ul class="px-0">
                                <li class="mb-2">
                                    <a href="<?= route('empresa') ?>" class="footer__secciones">Empresa</a><br>
                                </li>
                                <li class="mb-2">
                                    <a href="<?= route('categorias') ?>" class="footer__secciones">Productos</a><br>
                                </li>
                                <li class="mb-2">
                                    <a href="<?= route('novedades') ?>" class="footer__secciones">Novedades</a>
                                </li>
                                <li class="mb-2 d-block d-md-none">
                                    <a href="<?= route('calidad') ?>" class="footer__secciones">Calidad</a>
                                </li>
                                <li class="mb-2 d-block d-md-none">
                                    <a href="<?= route('distribuidores') ?>" class="footer__secciones">Distribuidores</a>
                                </li>
                                <li class="mb-2 d-block d-md-none">
                                    <a href="<?= route('presupuesto') ?>" class="footer__secciones">Presupuesto</a>
                                </li>
                                <li class="mb-2 d-block d-md-none">
                                    <a href="<?= route('contacto') ?>" class="footer__secciones">Contacto</a>
                                </li>
                            </ul>
                        </div>
                        <div class="col d-none d-md-block pe-0">
                            <ul class="px-0">
                                <li class="mb-2">
                                    <a href="<?= route('calidad') ?>" class="footer__secciones">Calidad</a>
                                </li>
                                <li class="mb-2">
                                    <a href="<?= route('distribuidores') ?>" class="footer__secciones">Distribuidores</a>
                                </li>
                                <li class="mb-2">
                                    <a href="<?= route('presupuesto') ?>" class="footer__secciones">Presupuesto</a>
                                </li>
                                <li class="mb-2">
                                    <a href="<?= route('contacto') ?>" class="footer__secciones">Contacto</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col mt-4">
                    <div class="footer__titulo">Contacto</div>
                    <div class="row mt-3">
                        <div class="col-md-5 col-sm-12">
                            <div class="d-flex">
                                <i class="fas fa-map-marker-alt fa-lg" aria-hidden="true"></i>
                                <a href="https://goo.gl/maps/DDAH7y3wYi5ZiH4P6" target="_blank" class="footer__secciones ms-2"><?= $contacto->direccion ?></a>
                            </div>

                            <div class="d-flex mt-3">
                                <i class="fas fa-envelope fa-lg" aria-hidden="true"></i>
                                <a href="<?php echo 'mailto:' . $contacto->email ?>" class="footer__secciones ms-2"><?= $contacto->email ?></a>
                            </div>
                            <?php if($contacto->telefono1){ ?>
                                <div class="d-flex mt-3">
                                    <i class="fas fa-phone-alt" aria-hidden="true"></i>
                                    <a href="<?php echo 'tel:' . $contacto->telefono1 ?>" class="footer__secciones ms-2"><?= $contacto->telefono1 ?></a>
                                </div>
                            <?php } ?>
                            <?php if($contacto->telefono2){ ?>
                                <div class="d-flex mt-3">
                                    <i class="fas fa-phone-alt" aria-hidden="true"></i>
                                    <a href="<?php echo 'tel:' . $contacto->telefono2 ?>" class="footer__secciones ms-2"><?= $contacto->telefono2 ?></a>
                                </div>
                            <?php } ?>
                            <?php if($contacto->whatsapp){ ?>
                                <div class="d-flex align-items-center mt-3">
                                    <i class="fab fa-whatsapp fa-lg"></i>
                                    <a class="footer__secciones ms-2" href="<?= 'https://wa.me/' . $contacto->whatsapp ?>" target="_blank"><?= $contacto->whatsapp ?></a>
                                </div>
                            <?php } ?>
                        </div>

                        <div class="col-md-7 col-sm-12">
                            <div class="d-flex">
                                <p class="encabezado mb-1">Departamento de ventas</p>
                            </div>
                            <div class="d-flex mb-3">
                                <i class="fas fa-envelope fa-lg " aria-hidden="true"></i>
                                <a href="<?php echo 'mailto:' . $contacto->ventas ?>" class="footer__secciones ms-2"><?= $contacto->ventas ?></a>
                            </div>
                            <div class="d-flex">
                                <p class="encabezado mb-1">Departamento de administraci&oacute;n</p>
                            </div>
                            <div class="d-flex">
                                <i class="fas fa-envelope fa-lg " aria-hidden="true"></i>
                                <a href="<?php echo 'mailto:' . $contacto->administracion ?>" class="footer__secciones ms-2"><?= $contacto->administracion ?></a>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
		</div>
	</div>
    <div class="container-fluid footer">
        <div class="container">
            <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 ">

                <p class="mb-0 text-muted">© Copyright 2022 Grupo Helmont S.R.L. Todos los derechos reservados</p>

                <p class="d-md-flex align-self-center align-middle mb-0">By OSOLE</p>
            </footer>
        </div>
    </div>
    <!-- <div class="whatsapp mobile">
        <a class="btn wp-mobile" target="_blank" href="#">
            <figure class="figure">
                <img src="{{ asset('images/whatsapp.png') }}">
            </figure>
        </a>
    </div> -->
</body>

</html>
