@extends('layouts.app')

@section('content')
    <main>
<header>
        <div class="container-fluid position-relative p-0">
            <nav class="navbar navbar-expand-lg navbar-dark px-5 py-3 py-lg-0">
                <a href="{{ url('/') }}" class="navbar-brand d-flex align-items-center">
                    <img src="{{ asset('img/DIGDEEP_logo_forma.png') }}" class="me-2 d-none d-md-block" style="height:44px;" alt="Digdeep">
                    <img src="{{ asset('img/DIGDEEP_logoTipo.png') }}" class="me-2 d-block d-md-none" style="height:44px;" alt="Digdeep">
                    <span class="fw-bold fs-4 logo-text">Digdeep Solutions, Lda</span>
                </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="{{ url('/') }}" class="nav-item nav-link active">Início</a>
                        <a href="{{ url('/sobre') }}" class="nav-item nav-link">Sobre</a>
                        <a href="{{ url('/servicos') }}" class="nav-item nav-link">Serviços</a>
                        {{-- Dropdown de páginas omitido para encurtar, mas siga a mesma lógica do url() --}}
                        <a href="{{ url('/contato') }}" class="nav-item nav-link">Contactos</a>
                    </div>
                    <button type="button" class="btn text-primary ms-3" data-bs-toggle="modal" data-bs-target="#searchModal"><i class="fa fa-search"></i></button>
                </div>
            </nav>

            {{-- Carrossel (Dica: Se ele for só da Home, mova para a home.blade.php) --}}
            <div id="header-carousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img class="w-100" src="{{ asset('img/fundo1.jpg') }}" alt="Image">
                        <div class="carousel-caption d-flex flex-column align-items-center justify-content-center">
                            <div class="p-3" style="max-width: 900px;">
                                <h5 class="text-white text-uppercase mb-3 animated slideInDown">Criativo e inovador</h5>
                                <h1 class="display-1 text-white mb-md-4 animated zoomIn">Solução digital criativa e inovadora</h1>
                                <a href="{{ url('/orcamento') }}" class="btn btn-primary py-md-3 px-md-5 me-3 animated slideInLeft">Orçamento gratuito</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>    

<!-- Testimonial Start -->
<div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s">
    <div class="container py-5">
        <div class="section-title text-center position-relative pb-3 mb-4 mx-auto" style="max-width: 600px;">
            <h5 class="fw-bold text-primary text-uppercase">Testemunho</h5>
            <h1 class="mb-0">O que os nossos clientes dizem sobre os nossos serviços digitais</h1>
        </div>
        <div class="owl-carousel testimonial-carousel wow fadeInUp" data-wow-delay="0.6s">
            <div class="testimonial-item bg-light my-4">
                <div class="d-flex align-items-center border-bottom pt-5 pb-4 px-5">
                    <img class="img-fluid rounded" src="img/testimonial-1.jpg" style="width: 60px; height: 60px;">
                    <div class="ps-4">
                        <h4 class="text-primary mb-1">Marinela</h4>
                        <small class="text-uppercase">Gestora de contas</small>
                    </div>
                </div>
                <div class="pt-4 pb-5 px-5">
                    Eu amo esses caras, são picas viu!
                </div>
            </div>
            <div class="testimonial-item bg-light my-4">
                <div class="d-flex align-items-center border-bottom pt-5 pb-4 px-5">
                    <img class="img-fluid rounded" src="img/testimonial-2.jpg" style="width: 60px; height: 60px;">
                    <div class="ps-4">
                        <h4 class="text-primary mb-1">João Silva</h4>
                        <small class="text-uppercase">Designer</small>
                    </div>
                </div>
                <div class="pt-4 pb-5 px-5">
                    Até que são bons!
                </div>
            </div>
            <div class="testimonial-item bg-light my-4">
                <div class="d-flex align-items-center border-bottom pt-5 pb-4 px-5">
                    <img class="img-fluid rounded" src="img/testimonial-3.jpg" style="width: 60px; height: 60px;">
                    <div class="ps-4">
                        <h4 class="text-primary mb-1">Maria Santos</h4>
                        <small class="text-uppercase">Gerente de Projeto</small>
                    </div>
                </div>
                <div class="pt-4 pb-5 px-5">
                    Eu amo esses caras, são picas viu!
                </div>
            </div>
            <div class="testimonial-item bg-light my-4">
                <div class="d-flex align-items-center border-bottom pt-5 pb-4 px-5">
                    <img class="img-fluid rounded" src="img/testimonial-4.jpg" style="width: 60px; height: 60px;">
                    <div class="ps-4">
                        <h4 class="text-primary mb-1">António Mendes</h4>
                        <small class="text-uppercase">Engenheiro de Software</small>
                    </div>
                </div>
                <div class="pt-4 pb-5 px-5">
                    Eu amo esses caras, são picas viu!
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Testimonial End -->
</main>
@endsection