@extends('website.layout')
@section('title', 'Contactos - ' . config('app.name'))
@section('banner')
    <div class="banner-2">
        <div class="fundo">
            <div class="container animacao text-center">
                <h1>Contactos</h1>
                <p>Entre em contacto conosco</p>
            </div>
        </div>
    </div>
@endsection
@section('content')
    <section class="bg-white pb-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-sm-12 mb-3">
                    <div class="card h-100">
                        <div class="card-body">
                            <div class="d-flex  flex-column">
                                <div class="icone text-center">
                                    <h5 class="text-center">Telefones</h5>
                                    <a href="tel:+974890277">974 890 277</a> &ensp;|&ensp;
                                    <a href="tel:+946650190">946 650 190</a> &ensp;|&ensp;
                                    <a href="tel:+929310818">929 310 818</a>                            
                                </div>
                                <p></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-12 mb-3">
                    <div class="card h-100">
                        <div class="card-body">
                            <div class="d-flex  flex-column">
                                <div class="icone text-center">
                                    <h5 class="text-center">E-mails</h5>
                                    <a href="mailto:mangaisparapenteclub@gmail.com">mangaisparapenteclub@gmail.com</a>
                                </div>
                                <p></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-12 mb-3">
                    <div class="card h-100">
                        <div class="card-body">
                            <div class="d-flex  flex-column">
                                <div class="icone text-center">
                                    <h5>Redes Sociais</h5>
                                </div>
                                <div class="text-center">
                                    <a href="#"><i class="bi bi-instagram"></i></a>&ensp;
                                    <a href="#"><i class="bi bi-facebook"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12 mt-4">
                    <div class="card">
                        <div class="card-body p-5">
                            <form action="#" class="form" method="POST">
                                @csrf
                                <div class="row">
                                    <div class="col-lg-4 col-sm-12 mb-3">
                                        <label for="name" class="form-label">Nome</label>
                                        <input type="text" id="name" name="name" placeholder="Seu nome">
                                    </div>
                                    <div class="col-lg-4 col-sm-12 mb-3">
                                        <label for="email" class="form-label">E-mail</label>
                                        <input type="email" id="email" name="email" placeholder="Seu e-mail">
                                    </div>
                                    <div class="col-lg-4 col-sm-12 mb-3">
                                        <label for="phone" class="form-label">Telefone</label>
                                        <input type="text" id="phone" name="phone" placeholder="Telefone">
                                    </div>
                                    <div class="col-lg-12 col-sm-12 mb-3">
                                        <label for="subject" class="form-label">Assunto</label>
                                        <input type="text" id="subject" name="subject" placeholder="Assunto">
                                    </div>
                                    <div class="col-lg-12 col-sm-12 mb-3">
                                        <label for="subject" class="form-label">Mensagem</label>
                                        <textarea id="message" name="message" placeholder="Mensagem"></textarea>
                                    </div>
                                    <div class="col-lg-12 d-flex justify-content-end">
                                        <button type="submit" class="btn btn-default">Enviar</button>
                                    </div>                                    
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>                
        </div>
    </section>
@endsection